/* Question-bank list page: one fixed viewport backdrop, scrolling glass content. */ @media (min-width: 981px) { html body.view-practice:has(#practice.active-view:not(.practice-detail-mode)) { --practice-page-ink: #101722; --practice-page-muted: rgba(44, 58, 77, 0.62); --practice-page-line: rgba(255, 255, 255, 0.58); --practice-page-glass: rgba(255, 255, 255, 0.1); --practice-page-glass-strong: rgba(255, 255, 255, 0.14); --practice-page-blue: #1870df; --practice-page-green: #00b783; --practice-page-red: #ff453a; --practice-page-shadow: 0 18px 42px -36px rgba(31, 42, 55, 0.28); color: var(--practice-page-ink) !important; background: radial-gradient(520px 420px at calc(50% - 500px) 120px, rgba(255, 222, 76, 0.42), transparent 72%), radial-gradient(520px 520px at calc(50% + 540px) 620px, rgba(187, 255, 224, 0.16), transparent 72%), linear-gradient(180deg, #ffd11a 0%, #ffe36d 20%, #fff0aa 40%, #fff8dd 60%, #fffdf7 80%, #ffffff 100%) !important; background-color: #fffdf7 !important; background-repeat: no-repeat !important; background-size: auto, auto, 100% 100% !important; background-position: center !important; background-attachment: fixed, fixed, fixed !important; overflow-x: hidden !important; } html body.view-practice:has(#practice.active-view:not(.practice-detail-mode)) .app-shell, html body.view-practice:has(#practice.active-view:not(.practice-detail-mode)) .main, html body.view-practice #practice.active-view:not(.practice-detail-mode), html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-dashboard-layout, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-panel, html body.view-practice #practice.active-view:not(.practice-detail-mode) .question-type-shell, html body.view-practice #practice.active-view:not(.practice-detail-mode) #questionTypeGrid { background: transparent !important; background-color: transparent !important; background-image: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-top-grid { border-color: rgba(255, 255, 255, 0.6) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16)), rgba(255, 255, 255, 0.14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 20px 44px -36px rgba(31, 42, 55, 0.28) !important; -webkit-backdrop-filter: blur(26px) saturate(1.16) !important; backdrop-filter: blur(26px) saturate(1.16) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-side-card, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card { border-color: rgba(255, 255, 255, 0.56) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1)), rgba(255, 255, 255, 0.1) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 18px 42px -36px rgba(31, 42, 55, 0.28) !important; -webkit-backdrop-filter: blur(24px) saturate(1.16) !important; backdrop-filter: blur(24px) saturate(1.16) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card { border-color: rgba(255, 255, 255, 0.56) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.14)), rgba(255, 255, 255, 0.12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 18px 40px -34px rgba(31, 42, 55, 0.24) !important; -webkit-backdrop-filter: blur(22px) saturate(1.14) !important; backdrop-filter: blur(22px) saturate(1.14) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero-points article, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card button, html body.view-practice #practice.active-view:not(.practice-detail-mode) .compact-select, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-data-grid article { border-color: rgba(255, 255, 255, 0.54) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.14)), rgba(255, 255, 255, 0.12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 14px 30px -28px rgba(31, 42, 55, 0.26) !important; -webkit-backdrop-filter: blur(18px) saturate(1.1) !important; backdrop-filter: blur(18px) saturate(1.1) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button.active, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button:hover, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:hover, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:focus-visible { border-color: rgba(255, 255, 255, 0.7) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.2)), rgba(255, 255, 255, 0.16) !important; transform: translate3d(0, -1px, 0) !important; } } @media (min-width: 981px) and (max-width: 1180px) { html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-top-grid:has(.practice-ai-score-preview) { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important; align-items: stretch !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero h2 { font-size: 30px !important; white-space: nowrap !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview { position: relative !important; display: block !important; align-self: stretch !important; width: 100% !important; min-height: 148px !important; height: auto !important; margin: 0 !important; padding: 18px 20px !important; overflow: hidden !important; border-radius: 28px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview > span { font-size: 12px !important; font-weight: 820 !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview > em { position: absolute !important; left: 20px !important; bottom: 15px !important; margin: 0 !important; font-size: 11.5px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview .xpte-waveform { width: calc(100% - 88px) !important; height: 62px !important; margin-top: 14px !important; gap: 7px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview .xpte-waveform i { flex: 0 0 3px !important; width: 3px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview .xpte-score-badge { position: absolute !important; display: grid !important; grid-auto-flow: row !important; place-items: center !important; align-content: center !important; justify-content: center !important; gap: 0 !important; top: 18px !important; right: 18px !important; left: auto !important; bottom: auto !important; width: 82px !important; height: 82px !important; border-radius: 24px !important; transform: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview .xpte-score-badge strong { position: static !important; width: auto !important; margin: 0 !important; font-size: 30px !important; line-height: 34px !important; white-space: nowrap !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview .xpte-score-badge small { position: static !important; width: auto !important; margin: 0 !important; font-size: 10px !important; line-height: 12px !important; white-space: nowrap !important; } } /* Desktop question-bank page aligned to the v18 dashboard glass language. */ @media (min-width: 1181px) { html body.view-practice { --practice-page-ink: #101722; --practice-page-muted: rgba(44, 58, 77, 0.62); --practice-page-line: rgba(255, 255, 255, 0.58); --practice-page-glass: rgba(255, 255, 255, 0.1); --practice-page-glass-strong: rgba(255, 255, 255, 0.14); --practice-page-blue: #1870df; --practice-page-green: #00b783; --practice-page-red: #ff453a; --practice-page-shadow: 0 18px 42px -36px rgba(31, 42, 55, 0.28); color: var(--practice-page-ink) !important; overflow-x: hidden !important; } html body.view-practice .app-shell, html body.view-practice .main, html body.view-practice #practice.active-view { background: transparent !important; background-image: none !important; } html body.view-practice .topbar, html body.view-practice #practice.active-view { box-shadow: none !important; } html body.view-practice .sidebar .nav-list, html body.view-dashboard .sidebar .nav-list { position: absolute !important; left: 530.85px !important; top: 8.85px !important; z-index: 3 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: 456px !important; min-width: 456px !important; max-width: 456px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body.view-practice .sidebar .nav-list .nav-link, html body.view-dashboard .sidebar .nav-list .nav-link { position: relative !important; display: inline-flex !important; flex: 0 0 106px !important; width: 106px !important; min-width: 106px !important; max-width: 106px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; margin: 0 !important; padding: 0 12px !important; align-items: center !important; justify-content: center !important; gap: 8px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.58) !important; border-radius: 25px !important; color: rgba(13, 19, 28, 0.62) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.24)), rgba(255, 255, 255, 0.24) !important; box-shadow: inset 0 1px 12px rgba(255, 255, 255, 0.44), inset 0 -10px 18px rgba(255, 228, 128, 0.08) !important; line-height: 20px !important; text-decoration: none !important; white-space: nowrap !important; backface-visibility: hidden !important; transform: translate3d(0, 0, 0) !important; transition: transform 115ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 120ms ease, opacity 100ms ease !important; will-change: transform !important; -webkit-backdrop-filter: blur(14px) saturate(1.08) !important; backdrop-filter: blur(14px) saturate(1.08) !important; } html body.view-practice .sidebar .nav-list .nav-link.is-hidden, html body.view-dashboard .sidebar .nav-list .nav-link.is-hidden { display: none !important; } html body.view-practice .sidebar .nav-list .nav-link::before, html body.view-dashboard .sidebar .nav-list .nav-link::before { content: none !important; display: none !important; } html body.view-practice .sidebar .nav-list .nav-link .icon, html body.view-dashboard .sidebar .nav-list .nav-link .icon { position: static !important; display: grid !important; width: 26px !important; min-width: 26px !important; height: 26px !important; margin: 0 !important; padding: 0 !important; place-items: center !important; color: rgba(43, 49, 59, 0.72) !important; background: transparent !important; box-shadow: none !important; } html body.view-practice .sidebar .nav-list .nav-link .icon svg, html body.view-dashboard .sidebar .nav-list .nav-link .icon svg { display: block !important; width: 26px !important; height: 26px !important; color: currentColor !important; stroke: currentColor !important; stroke-width: 2 !important; } html body.view-practice .sidebar .nav-list .nav-link > span:not(.icon), html body.view-dashboard .sidebar .nav-list .nav-link > span:not(.icon) { position: static !important; display: block !important; width: auto !important; height: 20px !important; margin: 0 !important; padding: 0 !important; line-height: 20px !important; white-space: nowrap !important; } html body.view-practice .sidebar .nav-list .nav-link.active, html body.view-dashboard .sidebar .nav-list .nav-link.active { flex-basis: 116px !important; width: 116px !important; min-width: 116px !important; max-width: 116px !important; color: rgba(13, 19, 28, 0.9) !important; border-color: rgba(255, 255, 255, 0.74) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)), rgba(255, 255, 255, 0.5) !important; box-shadow: 0 16px 30px -24px rgba(24, 112, 223, 0.2), inset 0 1px 14px rgba(255, 255, 255, 0.58), inset 0 -10px 18px rgba(24, 112, 223, 0.04) !important; } html body.view-practice .sidebar .nav-list .nav-link.active .icon, html body.view-dashboard .sidebar .nav-list .nav-link.active .icon { color: var(--practice-page-blue, #1870df) !important; } html body.view-practice .sidebar .nav-list .nav-link:hover, html body.view-dashboard .sidebar .nav-list .nav-link:hover { transform: translate3d(0, -1px, 0) scale(1.012) !important; border-color: rgba(255, 255, 255, 0.76) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42)), rgba(255, 255, 255, 0.48) !important; box-shadow: 0 16px 30px -24px rgba(31, 42, 55, 0.18), inset 0 1px 14px rgba(255, 255, 255, 0.58) !important; filter: none !important; } html body.view-practice .sidebar .nav-list .nav-link:active, html body.view-dashboard .sidebar .nav-list .nav-link:active { transform: translate3d(0, 0, 0) scale(0.99) !important; transition-duration: 70ms !important; } html body.view-dashboard .app-shell .sidebar .nav-list .nav-link, html body.view-dashboard .app-shell .sidebar .nav-list .nav-link.active, html body.view-dashboard .app-shell .sidebar .nav-list .nav-link:hover, html body.view-dashboard .app-shell .sidebar .nav-list .nav-link:active { transition: transform 115ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 120ms ease, opacity 100ms ease !important; } html body.view-dashboard .app-shell .sidebar .nav-list .nav-link:hover { transform: translate3d(0, -1px, 0) scale(1.012) !important; } html body.view-dashboard .app-shell .sidebar .nav-list .nav-link:active { transform: translate3d(0, 0, 0) scale(0.99) !important; transition-duration: 70ms !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) { background: transparent !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-top-grid, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-side-card, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-panel > .panel-heading { border: 1px solid var(--practice-page-line) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1)), var(--practice-page-glass) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), var(--practice-page-shadow) !important; -webkit-backdrop-filter: blur(24px) saturate(1.16) !important; backdrop-filter: blur(24px) saturate(1.16) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-top-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important; gap: 26px !important; min-height: 230px !important; margin-bottom: 28px !important; padding: 34px 46px !important; border-radius: 32px !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.16)), rgba(255, 255, 255, 0.14) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-top-grid::before, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-top-grid::after, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-side-card::after, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card::after, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card::after { content: "" !important; position: absolute !important; inset: 1px !important; pointer-events: none !important; border-radius: inherit !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-top-grid::before { background: radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.42), transparent 34%), radial-gradient(circle at 88% 20%, rgba(255, 209, 26, 0.1), transparent 38%) !important; opacity: 0.58 !important; transform: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-top-grid::after, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-side-card::after, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card::after, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card::after { background: linear-gradient(132deg, rgba(255, 255, 255, 0.28), transparent 34%, transparent 70%, rgba(255, 255, 255, 0.12)), radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.22), transparent 31%) !important; opacity: 0.78 !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero { grid-template-columns: minmax(0, 1fr) !important; min-height: 160px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero * { color: var(--practice-page-ink) !important; text-shadow: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero .eyebrow, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero p:not(.eyebrow), html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card p, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card > div > span { color: var(--practice-page-muted) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero h2 { max-width: 720px !important; font-size: clamp(32px, 2.7vw, 44px) !important; font-weight: 860 !important; line-height: 1.08 !important; letter-spacing: 0 !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero-points { gap: 10px !important; margin-top: 18px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero-points article, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card .ghost-btn, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card .primary-btn, html body.view-practice #practice.active-view:not(.practice-detail-mode) .compact-select { border: 1px solid rgba(255, 255, 255, 0.74) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.14)), rgba(255, 255, 255, 0.12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 14px 30px -28px rgba(31, 42, 55, 0.26) !important; -webkit-backdrop-filter: blur(18px) saturate(1.1) !important; backdrop-filter: blur(18px) saturate(1.1) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero-points b { display: grid !important; width: 18px !important; height: 18px !important; place-items: center !important; border-radius: 999px !important; color: transparent !important; background: currentColor !important; font-size: 0 !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero-points article:nth-child(1) b { color: var(--practice-page-green) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero-points article:nth-child(2) b { color: var(--practice-page-blue) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero-points article:nth-child(3) b { color: var(--practice-page-red) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card { display: grid !important; grid-template-rows: auto auto auto auto !important; gap: 12px !important; align-content: center !important; min-height: 160px !important; padding: 18px 24px 20px !important; border-radius: 26px !important; background: radial-gradient(circle at 90% 4%, rgba(255, 209, 26, 0.08), transparent 38%), linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.14)), rgba(255, 255, 255, 0.12) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card > div:first-child { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; width: 100% !important; min-width: 0 !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card > div:first-child > span { min-width: 0 !important; color: rgba(44, 58, 77, 0.66) !important; font-size: 14px !important; font-weight: 760 !important; line-height: 20px !important; white-space: nowrap !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card .ghost-btn.compact { flex: 0 0 74px !important; width: 74px !important; min-width: 74px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; justify-content: center !important; color: rgba(16, 23, 34, 0.78) !important; font-size: 13px !important; font-weight: 760 !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card strong { color: var(--practice-page-ink) !important; font-size: clamp(23px, 1.75vw, 28px) !important; font-weight: 820 !important; line-height: 1.2 !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card p { margin: 0 !important; font-size: 14px !important; font-weight: 620 !important; line-height: 20px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card .primary-btn { width: max-content !important; min-width: 138px !important; min-height: 34px !important; margin-top: 2px !important; padding: 0 16px !important; border-radius: 18px !important; justify-content: center !important; color: #0d3d88 !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(221, 238, 255, 0.2)), rgba(221, 238, 255, 0.16) !important; border-color: rgba(24, 112, 223, 0.18) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-top-grid:has(.practice-ai-score-preview) { grid-template-columns: minmax(0, 1fr) minmax(420px, 500px) !important; align-items: stretch !important; min-height: 318px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview { position: relative !important; display: block !important; align-self: stretch !important; width: 100% !important; min-height: 250px !important; margin: 0 !important; padding: 30px 36px 28px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.56) !important; border-radius: 36px !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1)), rgba(255, 255, 255, 0.1) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 20px 44px -36px rgba(31, 42, 55, 0.24) !important; -webkit-backdrop-filter: blur(24px) saturate(1.14) !important; backdrop-filter: blur(24px) saturate(1.14) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview::after { content: none !important; display: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview > span { color: #586770 !important; font-size: 14px !important; font-weight: 900 !important; line-height: normal !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview > em { position: absolute !important; left: 36px !important; bottom: 28px !important; margin: 0 !important; color: #7a858c !important; font-size: 14px !important; font-style: normal !important; font-weight: 750 !important; line-height: normal !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview .xpte-waveform { height: 96px !important; margin-top: 38px !important; gap: 11px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview .xpte-waveform i { flex: 0 0 4px !important; width: 4px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview .xpte-score-badge { position: absolute !important; display: grid !important; place-items: center !important; grid-auto-flow: row !important; align-content: normal !important; justify-content: normal !important; gap: normal !important; top: 34px !important; right: 44px !important; left: auto !important; bottom: auto !important; z-index: 3 !important; width: 130px !important; height: 130px !important; border-radius: 34px !important; transform: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview .xpte-score-badge strong { position: static !important; display: block !important; justify-self: center !important; margin-top: 18px !important; color: #109c82 !important; font-size: 42px !important; line-height: 46px !important; font-weight: 950 !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview .xpte-score-badge small { display: block !important; justify-self: center !important; white-space: nowrap !important; margin-top: -22px !important; color: #56656f !important; font-size: 14px !important; font-weight: 900 !important; line-height: 18px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-dashboard-layout { grid-template-columns: 218px minmax(0, 1fr) !important; gap: 20px !important; background: transparent !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-left-rail { gap: 16px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-side-card { padding: 18px !important; border-radius: 24px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-side-card h3, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-panel > .panel-heading h2 { color: rgba(16, 23, 34, 0.9) !important; font-weight: 780 !important; letter-spacing: 0 !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list { gap: 8px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button { min-height: 42px !important; border-radius: 15px !important; color: rgba(16, 23, 34, 0.76) !important; transform: translate3d(0, 0, 0) !important; transition: transform 115ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 120ms ease, opacity 100ms ease !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button span { color: var(--practice-page-blue) !important; background: rgba(221, 238, 255, 0.34) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button:nth-child(2) span { color: var(--practice-page-green) !important; background: rgba(221, 247, 229, 0.36) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button:nth-child(3) span { color: var(--practice-page-red) !important; background: rgba(255, 229, 229, 0.38) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button:nth-child(4) span { color: var(--practice-page-blue) !important; background: rgba(221, 238, 255, 0.34) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button:nth-child(5) span { color: #0f6cb8 !important; background: rgba(225, 240, 255, 0.36) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button.active, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button:hover { color: rgba(10, 18, 32, 0.9) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.2)), rgba(255, 255, 255, 0.16) !important; box-shadow: 0 16px 30px -24px rgba(24, 112, 223, 0.24), inset 0 1px 12px rgba(255, 255, 255, 0.64) !important; transform: translate3d(0, -1px, 0) !important; outline: 0 !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button.active { border-color: transparent !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button:hover:not(.active) { border-color: rgba(255, 255, 255, 0.54) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button em { color: rgba(38, 97, 164, 0.78) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-data-grid { gap: 8px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-data-grid article { border: 1px solid rgba(255, 255, 255, 0.58) !important; border-radius: 16px !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.14)), rgba(255, 255, 255, 0.12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-panel { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-panel > .panel-heading { display: none !important; min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .compact-select { min-height: 38px !important; border-radius: 19px !important; color: rgba(16, 23, 34, 0.72) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .question-type-shell, html body.view-practice #practice.active-view:not(.practice-detail-mode) .question-type-grid, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card-grid { background: transparent !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .question-type-grid, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card-grid { gap: 20px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; grid-template-rows: 38px auto minmax(30px, auto) 4px 24px !important; row-gap: 12px !important; column-gap: 12px !important; align-content: start !important; align-items: start !important; min-height: 236px !important; padding: 26px 18px 20px !important; border-radius: 26px !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1)), rgba(255, 255, 255, 0.1) !important; transition: transform 115ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 100ms ease, opacity 100ms ease !important; will-change: transform !important; animation: practiceWebFigmaCardIn 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both !important; animation-delay: calc(min(var(--card-index, 0), 12) * 18ms) !important; filter: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:hover, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:focus-visible { transform: translate3d(0, -1px, 0) !important; border-color: rgba(255, 255, 255, 0.7) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.2)), rgba(255, 255, 255, 0.16) !important; filter: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:active { transform: translate3d(0, 0, 0) scale(0.99) !important; transition-duration: 70ms !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card::before { content: "" !important; position: absolute !important; left: 18px !important; top: 2px !important; width: min(112px, 54%) !important; height: 4px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.74) !important; opacity: 0.76 !important; filter: none !important; transform: none !important; transition: opacity 90ms ease !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:hover::before { opacity: 0.9 !important; transform: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-skill="口语"] { --type-color: var(--practice-page-green); --type-bg: rgba(221, 247, 229, 0.38); } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-skill="写作"] { --type-color: var(--practice-page-red); --type-bg: rgba(255, 229, 229, 0.4); } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-skill="阅读"] { --type-color: var(--practice-page-blue); --type-bg: rgba(221, 238, 255, 0.38); } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-skill="听力"] { --type-color: #0a9287; --type-bg: rgba(213, 249, 244, 0.4); } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-MCM"], html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-MCS"], html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-MCM"], html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-MCS"] { min-height: 254px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card .figma-type-dot { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; align-self: start !important; width: auto !important; min-width: 50px !important; max-width: 78px !important; height: 36px !important; padding: 0 10px !important; border: 1px solid rgba(255, 255, 255, 0.74) !important; border-radius: 18px !important; color: var(--type-color, var(--practice-page-blue)) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.34)), var(--type-bg, rgba(221, 238, 255, 0.38)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 22px -18px color-mix(in srgb, var(--type-color, #1870df) 42%, transparent) !important; -webkit-backdrop-filter: blur(14px) saturate(1.08) !important; backdrop-filter: blur(14px) saturate(1.08) !important; transition: transform 110ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 100ms ease !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card .figma-type-dot::after { max-width: 58px !important; font-size: 12px !important; line-height: 1 !important; text-shadow: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="FIB-RW"] .figma-type-dot::after, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-MCM"] .figma-type-dot::after, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-FIB"] .figma-type-dot::after, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-MCS"] .figma-type-dot::after, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-MCM"] .figma-type-dot::after, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-FIB"] .figma-type-dot::after, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-MCS"] .figma-type-dot::after { font-size: 10.5px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:hover .figma-type-dot { transform: translate3d(0, -1px, 0) scale(1.025) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card strong { grid-column: 1 / -1 !important; grid-row: 2 !important; min-width: 0 !important; margin: 0 !important; color: rgba(16, 23, 34, 0.9) !important; font-size: 20px !important; font-weight: 760 !important; line-height: 1.14 !important; letter-spacing: 0 !important; overflow-wrap: normal !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-MCM"] strong, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="R-MCS"] strong, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-MCM"] strong, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card[data-type="L-MCS"] strong { margin-top: 22px !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card small { grid-column: 1 / -1 !important; grid-row: 3 !important; min-width: 0 !important; margin: 0 !important; color: rgba(45, 58, 78, 0.58) !important; font-size: 13.5px !important; font-weight: 560 !important; line-height: 1.62 !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card .mobile-type-meta { grid-column: 2 !important; grid-row: 1 !important; align-self: center !important; justify-self: end !important; color: rgba(45, 58, 78, 0.58) !important; background: rgba(255, 255, 255, 0.4) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card i { grid-column: 1 / -1 !important; grid-row: 4 !important; width: 100% !important; margin: 0 !important; height: 4px !important; background: rgba(166, 154, 122, 0.18) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card i em { background: var(--type-color, var(--practice-page-blue)) !important; transition: width 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 100ms ease !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card b { grid-column: 1 / -1 !important; grid-row: 5 !important; margin: 0 !important; color: var(--type-color, var(--practice-page-blue)) !important; font-weight: 760 !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-top-grid, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero-points article, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card button { transition: transform 115ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 100ms ease, opacity 100ms ease !important; will-change: transform !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-top-grid:hover, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card:hover, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button:hover, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-hero-points article:hover, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card button:hover { transform: translate3d(0, -1px, 0) !important; filter: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview { transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview:hover { transform: translateY(-1px) !important; border-color: rgba(255, 255, 255, 0.7) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.18)), rgba(255, 255, 255, 0.14) !important; box-shadow: 0 20px 44px -34px rgba(31, 42, 55, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview:hover .xpte-waveform::before, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-plan-card.xpte-voice-preview.practice-ai-score-preview:hover .xpte-waveform::after { animation-duration: 1.75s !important; } html body.view-practice .sidebar .nav-list, html body.view-dashboard .sidebar .nav-list { left: 520px !important; z-index: 4 !important; gap: 18px !important; width: 360px !important; min-width: 360px !important; max-width: 360px !important; overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body.view-practice .sidebar .nav-list::before, html body.view-practice .sidebar .nav-list::after, html body.view-dashboard .sidebar .nav-list::before, html body.view-dashboard .sidebar .nav-list::after { content: none !important; display: none !important; } html body.view-practice .sidebar .nav-list .nav-link, html body.view-dashboard .sidebar .nav-list .nav-link { flex-basis: 96px !important; width: 96px !important; min-width: 96px !important; max-width: 96px !important; gap: 7px !important; padding: 0 10px !important; } html body.view-practice .sidebar .nav-list .nav-link.active, html body.view-dashboard .sidebar .nav-list .nav-link.active { flex-basis: 104px !important; width: 104px !important; min-width: 104px !important; max-width: 104px !important; } html body.view-practice .sidebar #sidebarUserButton.sidebar-user-card, html body.view-practice .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in, html body.view-dashboard .sidebar #sidebarUserButton.sidebar-user-card, html body.view-dashboard .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in { z-index: 9 !important; } html body.view-practice .sidebar .brand .brand-copy .exam-type-picker, html body.view-practice .sidebar .brand .exam-type-picker, html body.view-practice .sidebar .exam-type-picker, html body.view-dashboard .sidebar .brand .brand-copy .exam-type-picker, html body.view-dashboard .sidebar .brand .exam-type-picker, html body.view-dashboard .sidebar .exam-type-picker { overflow: hidden !important; border-radius: 25px !important; border: 1px solid rgba(255, 255, 255, 0.78) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.48)), rgba(255, 255, 255, 0.5) !important; box-shadow: 0 12px 26px -20px rgba(24, 112, 223, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(24, 112, 223, 0.08) !important; -webkit-backdrop-filter: blur(24px) saturate(1.14) !important; backdrop-filter: blur(24px) saturate(1.14) !important; } html body.view-practice .sidebar .brand .brand-copy .exam-type-picker select, html body.view-practice .sidebar .brand .exam-type-picker select, html body.view-practice .sidebar .exam-type-picker select, html body.view-dashboard .sidebar .brand .brand-copy .exam-type-picker select, html body.view-dashboard .sidebar .brand .exam-type-picker select, html body.view-dashboard .sidebar .exam-type-picker select { padding-right: 50px !important; appearance: none !important; -webkit-appearance: none !important; background: transparent !important; } html body.view-practice .sidebar .brand .brand-copy .exam-type-picker select::-ms-expand, html body.view-practice .sidebar .brand .exam-type-picker select::-ms-expand, html body.view-practice .sidebar .exam-type-picker select::-ms-expand, html body.view-dashboard .sidebar .brand .brand-copy .exam-type-picker select::-ms-expand, html body.view-dashboard .sidebar .brand .exam-type-picker select::-ms-expand, html body.view-dashboard .sidebar .exam-type-picker select::-ms-expand { display: none !important; } html body.view-practice .sidebar .brand .brand-copy .exam-type-picker::after, html body.view-practice .sidebar .brand .exam-type-picker::after, html body.view-practice .sidebar .exam-type-picker::after, html body.view-dashboard .sidebar .brand .brand-copy .exam-type-picker::after, html body.view-dashboard .sidebar .brand .exam-type-picker::after, html body.view-dashboard .sidebar .exam-type-picker::after { content: "⌄" !important; position: absolute !important; right: 5px !important; left: auto !important; top: 50% !important; display: grid !important; width: 32px !important; height: 26px !important; place-items: center !important; color: #1870df !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(222, 239, 255, 0.54)), rgba(221, 238, 255, 0.46) !important; border: 1px solid rgba(24, 112, 223, 0.24) !important; border-radius: 13px !important; box-shadow: 0 12px 20px -16px rgba(24, 112, 223, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.94), inset 0 -1px 0 rgba(24, 112, 223, 0.1) !important; font-size: 22px !important; font-weight: 900 !important; line-height: 1 !important; transform: translateY(-50%) !important; pointer-events: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category="阅读"] span { color: var(--practice-page-blue) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(221, 238, 255, 0.44)), rgba(221, 238, 255, 0.38) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category="听力"] span { color: #0a9287 !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(213, 249, 244, 0.46)), rgba(213, 249, 244, 0.4) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category] strong, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category].active strong, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category]:hover strong { color: rgba(16, 23, 34, 0.86) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category] em, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category].active em, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category]:hover em { color: rgba(38, 97, 164, 0.78) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category="听力"].active, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category="听力"]:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(213, 249, 244, 0.2)), rgba(213, 249, 244, 0.14) !important; box-shadow: 0 16px 30px -24px rgba(10, 146, 135, 0.22), inset 0 1px 12px rgba(255, 255, 255, 0.64) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category="听力"] em, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category="听力"].active em, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category="听力"]:hover em { color: rgba(10, 146, 135, 0.78) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category="阅读"] span svg { display: block !important; width: 18px !important; height: 18px !important; overflow: visible !important; stroke: currentColor !important; stroke-width: 1.85 !important; stroke-linecap: round !important; stroke-linejoin: round !important; fill: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-category-list button[data-practice-category="听力"] span svg { display: block !important; width: 18px !important; height: 18px !important; overflow: visible !important; stroke: currentColor !important; stroke-width: 1.85 !important; stroke-linecap: round !important; stroke-linejoin: round !important; fill: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card { transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 160ms ease, background 180ms ease, box-shadow 180ms ease, opacity 120ms ease !important; will-change: transform, box-shadow !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:hover, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:focus-visible { transform: translate3d(0, -1px, 0) !important; border-color: rgba(255, 255, 255, 0.7) !important; background: radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.26), transparent 36%), linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.2)), rgba(255, 255, 255, 0.16) !important; box-shadow: 0 20px 42px -34px color-mix(in srgb, var(--type-color, #1870df) 20%, rgba(31, 42, 55, 0.2)), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:hover::before, html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:focus-visible::before { width: min(148px, 68%) !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.84), color-mix(in srgb, var(--type-color, #1870df) 24%, rgba(255, 255, 255, 0.72))) !important; opacity: 1 !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:hover .figma-type-dot { transform: translate3d(0, -2px, 0) scale(1.045) !important; box-shadow: 0 16px 30px -22px color-mix(in srgb, var(--type-color, #1870df) 54%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:hover i { background: color-mix(in srgb, var(--type-color, #1870df) 16%, rgba(166, 154, 122, 0.18)) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .figma-type-card:hover i em { opacity: 1 !important; box-shadow: 0 0 14px color-mix(in srgb, var(--type-color, #1870df) 42%, transparent) !important; } html body.view-practice #practice.practice-detail-mode { background: transparent !important; } html body.view-practice #practice.practice-detail-mode .stage-practice .question-browser, html body.view-practice #practice.practice-detail-mode .stage-practice .answer-stage, html body.view-practice #practice.practice-detail-mode .feedback-panel { border: 1px solid var(--practice-page-line) !important; border-radius: 28px !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.34)), rgba(255, 255, 255, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), var(--practice-page-shadow) !important; -webkit-backdrop-filter: blur(24px) saturate(1.12) !important; backdrop-filter: blur(24px) saturate(1.12) !important; } html body.view-practice #practice.practice-detail-mode .stage-practice .question-card, html body.view-practice #practice.practice-detail-mode .stage-practice .answer-workspace, html body.view-practice #practice.practice-detail-mode .stage-practice .recorder { border-color: rgba(255, 255, 255, 0.64) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.4)), rgba(255, 255, 255, 0.38) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 14px 30px -27px rgba(31, 42, 55, 0.28) !important; } html body.view-practice #practice.practice-detail-mode button, html body.view-practice #practice.practice-detail-mode .filter-chip, html body.view-practice #practice.practice-detail-mode .ghost-btn, html body.view-practice #practice.practice-detail-mode .primary-btn { transition: transform 115ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 100ms ease, opacity 100ms ease !important; } html body.view-practice #practice.practice-detail-mode button:hover, html body.view-practice #practice.practice-detail-mode .filter-chip:hover, html body.view-practice #practice.practice-detail-mode .ghost-btn:hover, html body.view-practice #practice.practice-detail-mode .primary-btn:hover { transform: translate3d(0, -1px, 0) !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-ai-score-preview.is-score-preview-reset .xpte-score-badge::before, html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-ai-score-preview.is-score-preview-reset .xpte-score-badge::after { animation: none !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-ai-score-preview.is-score-preview-motion .xpte-score-badge::before { animation: xpteScoreScan 3.2s linear infinite !important; will-change: transform !important; } html body.view-practice #practice.active-view:not(.practice-detail-mode) .practice-ai-score-preview.is-score-preview-motion .xpte-score-badge::after { animation: xpteScorePulse 1.8s ease-in-out infinite !important; will-change: transform, opacity !important; } @keyframes practiceWebFigmaCardIn { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } } @media (min-width: 1181px) { html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell > .sidebar { position: fixed !important; top: 0 !important; left: max(24px, calc((100vw - 1376px) / 2)) !important; right: auto !important; bottom: auto !important; z-index: 150 !important; display: grid !important; align-items: center !important; column-gap: 18px !important; width: min(1376px, calc(100vw - 64px)) !important; min-width: min(1376px, calc(100vw - 64px)) !important; max-width: min(1376px, calc(100vw - 64px)) !important; height: 70px !important; min-height: 70px !important; max-height: 70px !important; margin: 0 !important; padding: 8px 18px !important; overflow: visible !important; border: 1px solid rgba(255, 255, 255, 0.52) !important; border-radius: 24px !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.22)), rgba(255, 255, 255, 0.26) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -1px 0 rgba(15, 23, 42, 0.04), 0 18px 42px -36px rgba(15, 23, 42, 0.44) !important; transform: none !important; -webkit-backdrop-filter: blur(30px) saturate(1.18) !important; backdrop-filter: blur(30px) saturate(1.18) !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .brand { position: static !important; display: grid !important; grid-template-columns: 54px minmax(0, 479px) !important; align-items: center !important; gap: 14px !important; width: 547px !important; min-width: 430px !important; max-width: 547px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; color: rgba(17, 19, 24, 0.94) !important; text-decoration: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .brand-icon { position: static !important; display: block !important; width: 54px !important; min-width: 54px !important; max-width: 54px !important; height: 54px !important; min-height: 54px !important; max-height: 54px !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; object-fit: contain !important; background: transparent !important; box-shadow: none !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .brand-copy { position: static !important; display: grid !important; grid-template-columns: max-content 210px !important; align-items: center !important; gap: 22px !important; width: 479px !important; min-width: 0 !important; max-width: 479px !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clip: auto !important; background: transparent !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .brand-copy strong { position: static !important; display: block !important; width: auto !important; min-width: max-content !important; max-width: none !important; height: auto !important; margin: 0 !important; overflow: visible !important; color: rgba(17, 19, 24, 0.94) !important; font-size: 23px !important; font-weight: 880 !important; line-height: 23px !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list { position: absolute !important; left: 520px !important; top: 8.85px !important; z-index: 4 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 18px !important; width: 360px !important; min-width: 360px !important; max-width: 360px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list::before, html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list::after { content: none !important; display: none !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list .nav-link, html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list .nav-link.active { position: relative !important; display: inline-flex !important; flex: 0 0 96px !important; width: 96px !important; min-width: 96px !important; max-width: 96px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; margin: 0 !important; padding: 0 10px !important; align-items: center !important; justify-content: center !important; gap: 7px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.58) !important; border-radius: 25px !important; color: rgba(13, 19, 28, 0.62) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.24)), rgba(255, 255, 255, 0.24) !important; box-shadow: inset 0 1px 12px rgba(255, 255, 255, 0.44), inset 0 -10px 18px rgba(255, 228, 128, 0.08) !important; line-height: 20px !important; text-decoration: none !important; white-space: nowrap !important; backface-visibility: hidden !important; transform: translate3d(0, 0, 0) !important; transition: transform 115ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 120ms ease, box-shadow 120ms ease, background 120ms ease, opacity 100ms ease !important; will-change: transform !important; -webkit-backdrop-filter: blur(14px) saturate(1.08) !important; backdrop-filter: blur(14px) saturate(1.08) !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list .nav-link.is-hidden { display: none !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list .nav-link::before, html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list .nav-link::after, html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list .nav-link.active::after { content: none !important; display: none !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list .nav-link .icon { position: static !important; display: grid !important; width: 26px !important; min-width: 26px !important; height: 26px !important; margin: 0 !important; padding: 0 !important; place-items: center !important; border: var(--dashboard-nav-icon-border, 0) !important; border-radius: var(--dashboard-nav-icon-radius, 9px) !important; color: var(--dashboard-nav-icon-color, rgba(43, 49, 59, 0.72)) !important; background: var(--dashboard-nav-icon-bg, transparent) !important; box-shadow: var(--dashboard-nav-icon-shadow, none) !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list .nav-link .icon svg { display: block !important; width: var(--dashboard-nav-glyph-size, 26px) !important; height: var(--dashboard-nav-glyph-size, 26px) !important; color: currentColor !important; stroke: currentColor !important; stroke-width: var(--dashboard-nav-glyph-stroke, 2) !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list .nav-link > span:not(.icon) { position: static !important; display: block !important; width: auto !important; height: 20px !important; margin: 0 !important; padding: 0 !important; line-height: 20px !important; white-space: nowrap !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list .nav-link.active { color: rgba(13, 19, 28, 0.9) !important; border-color: rgba(255, 255, 255, 0.74) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)), rgba(255, 255, 255, 0.5) !important; box-shadow: 0 16px 30px -24px rgba(24, 112, 223, 0.2), inset 0 1px 14px rgba(255, 255, 255, 0.58), inset 0 -10px 18px rgba(24, 112, 223, 0.04) !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list .nav-link.active .icon { color: var(--dashboard-nav-active-color, var(--practice-page-blue, #1870df)) !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list .nav-link:hover { transform: translate3d(0, -1px, 0) scale(1.012) !important; border-color: rgba(255, 255, 255, 0.76) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42)), rgba(255, 255, 255, 0.48) !important; box-shadow: 0 16px 30px -24px rgba(31, 42, 55, 0.18), inset 0 1px 14px rgba(255, 255, 255, 0.58) !important; filter: none !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .nav-list .nav-link:active { transform: translate3d(0, 0, 0) scale(0.99) !important; transition-duration: 70ms !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .brand .brand-copy .exam-type-picker, html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .brand .exam-type-picker, html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .exam-type-picker { position: absolute !important; display: block !important; flex: none !important; width: 210px !important; min-width: 210px !important; max-width: 210px !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; left: 182px !important; top: 7px !important; right: auto !important; bottom: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; transform: none !important; border-radius: 25px !important; border: 1px solid rgba(255, 255, 255, 0.78) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.48)), rgba(255, 255, 255, 0.5) !important; box-shadow: 0 12px 26px -20px rgba(24, 112, 223, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(24, 112, 223, 0.08) !important; -webkit-backdrop-filter: blur(24px) saturate(1.14) !important; backdrop-filter: blur(24px) saturate(1.14) !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .brand .brand-copy .exam-type-picker select, html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .brand .exam-type-picker select, html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .exam-type-picker select { position: static !important; display: block !important; width: 210px !important; min-width: 0 !important; max-width: 210px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; margin: 0 !important; border: 1px solid rgba(255, 255, 255, 0.38) !important; border-radius: 25px !important; color: rgba(31, 41, 55, 0.74) !important; font-size: 16px !important; font-weight: 820 !important; line-height: 40px !important; transform: none !important; padding-right: 50px !important; padding-left: 14px !important; appearance: none !important; -webkit-appearance: none !important; background: transparent !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), inset 0 -1px 0 rgba(15, 23, 42, 0.035) !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .brand .brand-copy .exam-type-picker::after, html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .brand .exam-type-picker::after, html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar .exam-type-picker::after { content: "⌄" !important; position: absolute !important; right: 5px !important; left: auto !important; top: 50% !important; display: grid !important; width: 32px !important; height: 26px !important; place-items: center !important; color: var(--practice-page-blue, #1870df) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(222, 239, 255, 0.54)), rgba(221, 238, 255, 0.46) !important; border: 1px solid rgba(24, 112, 223, 0.24) !important; border-radius: 13px !important; box-shadow: 0 12px 20px -16px rgba(24, 112, 223, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.94), inset 0 -1px 0 rgba(24, 112, 223, 0.1) !important; font-size: 22px !important; font-weight: 900 !important; line-height: 1 !important; transform: translateY(-50%) !important; pointer-events: none !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar #sidebarUserButton.sidebar-user-card, html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar #sidebarUserButton.sidebar-user-card.is-logged-in { position: static !important; display: grid !important; grid-template-columns: 38px 124px 32px !important; align-items: center !important; justify-self: end !important; gap: 9px !important; width: 230px !important; min-width: 230px !important; max-width: 230px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; margin: 0 !important; padding: 6px 8px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.38) !important; border-radius: 999px !important; color: #15171c !important; background: rgba(255, 255, 255, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), inset 0 -1px 0 rgba(15, 23, 42, 0.035) !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar #sidebarUserButton.sidebar-user-card img { display: block !important; justify-self: center !important; width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; margin: 0 !important; border-radius: 999px !important; object-fit: contain !important; box-shadow: none !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar #sidebarUserButton.sidebar-user-card span { display: block !important; width: 76px !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; overflow: hidden !important; text-align: left !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar #sidebarUserButton.sidebar-user-card strong { display: block !important; width: 76px !important; max-width: 96px !important; margin: 0 !important; overflow: hidden !important; color: #15171c !important; font-size: 12px !important; font-weight: 850 !important; line-height: 12.6px !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar #sidebarUserButton.sidebar-user-card small { display: block !important; width: 76px !important; max-width: 76px !important; height: 16px !important; margin: 0 !important; padding: 0 6px !important; overflow: hidden !important; border-radius: 999px !important; color: #8a6100 !important; background: rgba(245, 180, 0, 0.14) !important; font-size: 9px !important; font-weight: 850 !important; line-height: 16px !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell .sidebar #sidebarUserButton.sidebar-user-card b { display: grid !important; width: 32px !important; height: 32px !important; place-items: center !important; margin: 0 !important; border-radius: 999px !important; color: #5f6672 !important; background: rgba(255, 255, 255, 0.62) !important; font-size: 18px !important; font-weight: 850 !important; line-height: 18px !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell > .sidebar > a.brand, html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell > .sidebar > a.brand.active, html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell > .sidebar > .brand.brand { position: absolute !important; left: 18px !important; top: 10px !important; display: grid !important; grid-template-columns: 54px minmax(0, 479px) !important; align-items: center !important; gap: 14px !important; width: 547px !important; min-width: 430px !important; max-width: 547px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; clip: auto !important; transform: none !important; } html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card, html body:is(.view-dashboard, .view-practice, .view-mock) .app-shell > .sidebar > #sidebarUserButton.sidebar-user-card.is-logged-in { position: absolute !important; top: 10px !important; right: 36px !important; left: auto !important; bottom: auto !important; justify-self: auto !important; transform: none !important; } } @media (min-width: 761px) and (max-width: 980px) { html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder, html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder.recording { position: relative !important; display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: 36px 86px 70px !important; align-items: center !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; min-height: 228px !important; max-height: none !important; margin: 0 !important; padding: 20px 24px 22px !important; overflow: visible !important; border: 1px solid rgba(255, 255, 255, 0.78) !important; border-radius: 34px !important; background: radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.62), transparent 42%), radial-gradient(circle at 50% 64%, rgba(16, 185, 129, 0.1), transparent 36%), linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36)), rgba(255, 255, 255, 0.46) !important; box-shadow: 0 28px 72px -58px rgba(25, 39, 52, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(170, 210, 205, 0.18) !important; -webkit-backdrop-filter: blur(30px) saturate(1.18) !important; backdrop-filter: blur(30px) saturate(1.18) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder::before, html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder::after { content: "" !important; position: absolute !important; left: 50% !important; top: 125px !important; z-index: 0 !important; width: 104px !important; height: 104px !important; border-radius: 999px !important; transform: translate(-50%, -50%) !important; pointer-events: none !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder::before { background: rgba(16, 185, 129, 0.12) !important; filter: blur(10px) !important; opacity: 0.74 !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder::after { border: 1px solid rgba(16, 185, 129, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 12px rgba(16, 185, 129, 0.045) !important; opacity: 0.86 !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder.recording::before { animation: xpteMicGlow 1.55s ease-in-out infinite !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder.recording::after { animation: xpteMicRing 1.55s ease-out infinite !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder .timer, html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder > .timer { position: relative !important; z-index: 2 !important; grid-row: 1 !important; display: inline-flex !important; justify-self: center !important; align-items: center !important; gap: 10px !important; width: max-content !important; min-width: 0 !important; max-width: 100% !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 0 16px !important; border: 1px solid rgba(255, 255, 255, 0.76) !important; border-radius: 999px !important; color: rgba(20, 24, 32, 0.74) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.36)), rgba(255, 255, 255, 0.4) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 12px 26px -24px rgba(31, 41, 55, 0.28) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder .timer #timerValue { color: #0f766e !important; font-size: 14px !important; font-weight: 920 !important; line-height: 1 !important; letter-spacing: 0 !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder .timer #timerLabel { color: rgba(44, 58, 77, 0.66) !important; font-size: 12px !important; font-weight: 760 !important; line-height: 1 !important; letter-spacing: 0 !important; white-space: nowrap !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder .wave, html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder > .wave, html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder.recording .wave, html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder.recording > .wave { position: relative !important; z-index: 1 !important; grid-row: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; justify-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 76px !important; min-height: 76px !important; max-height: 76px !important; margin: 0 !important; padding: 0 clamp(72px, 16vw, 188px) !important; gap: 8px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.76) !important; border-radius: 999px !important; background: linear-gradient(90deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.34) 36%, rgba(236, 253, 245, 0.28) 50%, rgba(255, 255, 255, 0.34) 64%, rgba(255, 255, 255, 0.82)), rgba(255, 255, 255, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(15, 23, 42, 0.04), 0 18px 42px -34px rgba(16, 185, 129, 0.28) !important; -webkit-backdrop-filter: blur(18px) saturate(1.2) !important; backdrop-filter: blur(18px) saturate(1.2) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder .wave::before { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 170px !important; height: 58px !important; border-radius: 999px !important; background: radial-gradient(circle, rgba(16, 185, 129, 0.16), transparent 66%) !important; transform: translate(-50%, -50%) !important; pointer-events: none !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder .wave span, html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder.recording .wave span { position: relative !important; z-index: 1 !important; display: block !important; flex: 0 0 7px !important; width: 7px !important; min-width: 7px !important; max-width: 7px !important; height: var(--wave-height, 10px) !important; min-height: 8px !important; max-height: 44px !important; border-radius: 999px !important; opacity: var(--wave-opacity, 0.28) !important; background: linear-gradient(180deg, rgba(180, 244, 232, 0.86), rgba(16, 185, 129, 0.5)) !important; box-shadow: none !important; transform: scaleY(var(--wave-scale, 1)) translateZ(0) !important; transform-origin: center !important; animation: none !important; transition: height 54ms linear, opacity 54ms linear, transform 54ms linear, background 120ms ease, box-shadow 120ms ease !important; will-change: height, opacity, transform !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder:not(.recording) .wave span { opacity: 0.32 !important; height: 10px !important; transform: none !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder.recording .wave span { background: linear-gradient(180deg, #c7f9e9 0%, #34d399 48%, #0f9f8f 100%) !important; box-shadow: 0 0 calc(var(--wave-glow, 0) * 16px) rgba(16, 185, 129, calc(var(--wave-glow, 0) * 0.42)), 0 7px 18px rgba(16, 185, 129, calc(var(--wave-glow, 0) * 0.18)) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder-actions, html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder.recording .recorder-actions { position: relative !important; z-index: 3 !important; grid-row: 3 !important; display: grid !important; grid-template-columns: 58px 92px minmax(132px, 188px) 58px !important; justify-content: center !important; align-items: center !important; gap: 14px !important; width: 100% !important; min-width: 0 !important; min-height: 70px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder-actions button, html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder.recording .recorder-actions button { position: relative !important; display: inline-grid !important; place-items: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 52px !important; min-height: 52px !important; max-height: 52px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.7) !important; border-radius: 999px !important; color: rgba(20, 24, 32, 0.72) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.3)), rgba(255, 255, 255, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 28px -24px rgba(31, 41, 55, 0.34) !important; font-size: 13px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: 0 !important; text-decoration: none !important; white-space: nowrap !important; transform: translate3d(0, 0, 0) !important; transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 140ms ease, background 140ms ease, border-color 140ms ease !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder-actions button:hover { transform: translate3d(0, -1px, 0) !important; border-color: rgba(255, 255, 255, 0.86) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.42)), rgba(255, 255, 255, 0.46) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder-actions button:active { transform: scale(0.985) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #prevQuestionButton, html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #nextQuestionButton { width: 58px !important; max-width: 58px !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; border-color: rgba(255, 255, 255, 0.72) !important; color: rgba(17, 24, 39, 0.74) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.34)), rgba(255, 255, 255, 0.38) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 12px 28px -24px rgba(31, 41, 55, 0.34) !important; font-size: 0 !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #prevQuestionButton::before, html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #nextQuestionButton::before { color: rgba(17, 24, 39, 0.74) !important; font-size: 30px !important; font-weight: 850 !important; line-height: 1 !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #prevQuestionButton::before { content: "‹" !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #nextQuestionButton::before { content: "›" !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #recordButton { justify-self: center !important; width: 92px !important; min-width: 92px !important; max-width: 92px !important; height: 92px !important; min-height: 92px !important; max-height: 92px !important; margin-top: -24px !important; overflow: visible !important; border-radius: 999px !important; border-color: rgba(255, 255, 255, 0.72) !important; color: #ffffff !important; background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.46), transparent 35%), linear-gradient(145deg, #34d399, #0f9f8f) !important; box-shadow: 0 22px 46px -26px rgba(15, 159, 143, 0.62), 0 0 0 10px rgba(16, 185, 129, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 -12px 22px rgba(7, 89, 77, 0.18) !important; font-size: 0 !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #recordButton::before { content: "" !important; position: absolute !important; left: 50% !important; top: 43% !important; width: 26px !important; height: 34px !important; border: 4px solid currentColor !important; border-radius: 999px !important; transform: translate(-50%, -50%) !important; box-sizing: border-box !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #recordButton::after { content: "" !important; position: absolute !important; left: 50% !important; top: 58% !important; width: 42px !important; height: 26px !important; border-bottom: 4px solid currentColor !important; border-radius: 0 0 999px 999px !important; transform: translateX(-50%) !important; box-sizing: border-box !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #recordButton:hover { transform: translate3d(0, -2px, 0) scale(1.015) !important; box-shadow: 0 24px 54px -24px rgba(15, 159, 143, 0.68), 0 0 0 13px rgba(16, 185, 129, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.54), inset 0 -12px 22px rgba(7, 89, 77, 0.18) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder.recording #recordButton { background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.5), transparent 35%), linear-gradient(145deg, #ff6b5f, #ef4444) !important; box-shadow: 0 22px 46px -26px rgba(239, 68, 68, 0.62), 0 0 0 10px rgba(239, 68, 68, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.48), inset 0 -12px 22px rgba(127, 29, 29, 0.18) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder.recording #recordButton::before { width: 12px !important; height: 34px !important; border: 0 !important; border-radius: 7px !important; background: currentColor !important; box-shadow: 20px 0 0 currentColor !important; transform: translate(-16px, -50%) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder.recording #recordButton::after { content: none !important; display: none !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #recordButton:disabled { cursor: wait !important; filter: saturate(0.82) brightness(1.02) !important; opacity: 0.82 !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #submitButton { min-width: 132px !important; color: #0f766e !important; font-size: 0 !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #submitButton::before { content: "提交" !important; font-size: 14px !important; font-weight: 900 !important; line-height: 1 !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #submitButton:not(:disabled) { border-color: rgba(16, 185, 129, 0.2) !important; background: linear-gradient(145deg, rgba(236, 253, 245, 0.86), rgba(255, 255, 255, 0.46)), rgba(255, 255, 255, 0.44) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 16px 32px -24px rgba(16, 185, 129, 0.38) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #submitButton:disabled { color: rgba(44, 58, 77, 0.42) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.24)), rgba(255, 255, 255, 0.22) !important; opacity: 1 !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #submitButton:disabled::before { content: "待录音" !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder:has(#submitButton:not(:disabled)) #submitButton::before { content: "提交评分" !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder[data-mic-state="prompt"] #recordButton { background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.56), transparent 35%), linear-gradient(145deg, #80ddff, #1870df) !important; box-shadow: 0 22px 46px -26px rgba(24, 112, 223, 0.52), 0 0 0 10px rgba(24, 112, 223, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.52), inset 0 -12px 22px rgba(30, 64, 175, 0.16) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder[data-mic-state="submitting"] #recordButton { opacity: 0.78 !important; filter: saturate(0.82) brightness(1.02) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder[data-mic-state="submitting"] #submitButton { border-color: rgba(24, 112, 223, 0.2) !important; color: #1870df !important; background: linear-gradient(145deg, rgba(232, 244, 255, 0.88), rgba(255, 255, 255, 0.5)), rgba(255, 255, 255, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 16px 32px -24px rgba(24, 112, 223, 0.36) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder[data-mic-state="submitted"] #submitButton { border-color: rgba(16, 185, 129, 0.2) !important; color: #0f766e !important; background: linear-gradient(145deg, rgba(236, 253, 245, 0.88), rgba(255, 255, 255, 0.5)), rgba(255, 255, 255, 0.44) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder[data-mic-state="prompt"] #submitButton:disabled::before { content: "听题中" !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder[data-mic-state="submitting"] #submitButton::before { content: "提交中" !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder[data-mic-state="submitted"] #submitButton::before { content: "重新练习" !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder[data-mic-state="ready"] #submitButton::before { content: "提交评分" !important; } @keyframes xpteMicGlow { 0%, 100% { opacity: 0.54; transform: translate(-50%, -50%) scale(0.94); } 50% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.08); } } @keyframes xpteMicRing { 0% { opacity: 0.74; transform: translate(-50%, -50%) scale(0.9); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.42); } } } @media (max-width: 760px) { html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder, html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder.recording { display: grid !important; grid-template-rows: 34px 58px 62px !important; gap: 8px !important; min-height: 178px !important; padding: 14px !important; border-radius: 28px !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder .timer { display: inline-flex !important; justify-self: center !important; height: 34px !important; padding: 0 12px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.5) !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder .wave { height: 58px !important; min-height: 58px !important; max-height: 58px !important; padding: 0 56px !important; gap: 6px !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder .wave span { flex-basis: 6px !important; width: 6px !important; min-width: 6px !important; max-height: 34px !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder-actions, html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder.recording .recorder-actions { grid-template-columns: 48px 74px minmax(88px, 1fr) 48px !important; gap: 8px !important; min-height: 62px !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #prevQuestionButton, html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #nextQuestionButton { width: 48px !important; max-width: 48px !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; font-size: 0 !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #recordButton { width: 74px !important; min-width: 74px !important; max-width: 74px !important; height: 74px !important; min-height: 74px !important; max-height: 74px !important; margin-top: -18px !important; font-size: 0 !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #recordButton::before { width: 22px !important; height: 30px !important; border-width: 3px !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #recordButton::after { width: 36px !important; height: 22px !important; border-bottom-width: 3px !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode #submitButton::before { font-size: 12px !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder[data-mic-state="prompt"] #submitButton::before { content: "听题中" !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder[data-mic-state="submitting"] #submitButton::before { content: "提交中" !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder[data-mic-state="submitted"] #submitButton::before { content: "重新练习" !important; } html body.view-practice #practice.practice-detail-mode .practice-panel.stage-practice.speech-mode .recorder[data-mic-state="ready"] #submitButton::before { content: "提交评分" !important; } } @media (min-width: 981px) and (prefers-reduced-motion: reduce) { html body.view-practice #practice.active-view:not(.practice-detail-mode) *, html body.view-practice #practice.practice-detail-mode * { animation: none !important; transition: none !important; } } /* Consolidated from practice-bank-mobile-figma.css during frontend cleanup 2026-07-08. */ /* Mobile question bank page adapted from Figma node 248:2. */ .question-bank-loading-desktop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; padding: 24px; border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 28px; background: rgba(255, 255, 255, 0.54); box-shadow: 0 24px 54px -38px rgba(30, 42, 58, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .question-bank-loading-desktop > div { grid-column: 1 / -1; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; } .question-bank-loading-desktop > div > span { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 211, 78, 0.68); } .question-bank-loading-desktop h2, .question-bank-loading-desktop p { grid-column: 2; margin: 0; } .question-bank-loading-desktop p { color: rgba(71, 83, 99, 0.6); font-size: 13px; } .question-bank-loading-desktop button { grid-column: 3; grid-row: 1 / span 2; min-height: 38px; padding: 0 16px; border: 1px solid rgba(30, 45, 60, 0.1); border-radius: 19px; color: #21313f; background: rgba(255, 255, 255, 0.72); font-weight: 750; } .question-bank-loading-desktop > article { display: grid; min-height: 116px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 22px; background: rgba(255, 255, 255, 0.42); } .question-bank-loading-desktop > article :is(i, span, b), .mobile-bank-skeleton-card :is(.mobile-bank-skeleton-icon, .mobile-bank-skeleton-copy i, .mobile-bank-skeleton-copy b, .mobile-bank-skeleton-count) { border-radius: 999px; background: linear-gradient(100deg, rgba(255, 255, 255, 0.42) 18%, rgba(255, 255, 255, 0.86) 44%, rgba(255, 255, 255, 0.42) 70%); background-size: 220% 100%; animation: questionBankSkeletonShimmer 1.35s ease-in-out infinite; } .question-bank-loading-desktop > article i { width: 42px; height: 42px; } .question-bank-loading-desktop > article span { width: 72%; height: 13px; margin-top: 14px; } .question-bank-loading-desktop > article b { width: 48%; height: 10px; margin-top: 8px; } @keyframes questionBankSkeletonShimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } } @media (prefers-reduced-motion: reduce) { .question-bank-loading-desktop > article :is(i, span, b), .mobile-bank-skeleton-card :is(.mobile-bank-skeleton-icon, .mobile-bank-skeleton-copy i, .mobile-bank-skeleton-copy b, .mobile-bank-skeleton-count), .mobile-bank-loading-pulse { animation: none; } } .mobile-bank-shell { display: none; } @media (max-width: 980px) { html body.view-practice.practice-bank-mobile-active { margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; border-radius: 0 !important; clip-path: none !important; background: radial-gradient(520px 420px at 8% 0%, rgba(255, 222, 76, 0.5) 0 18%, transparent 42%), radial-gradient(520px 520px at 92% 18%, rgba(255, 255, 255, 0.66) 0 18%, transparent 46%), linear-gradient(180deg, #ffd11a 0px, #ffe36d 210px, #fff0aa 430px, #fff8dd 680px, #fffdf7 940px, #ffffff 1200px) !important; background-attachment: scroll !important; } html body.view-practice .app-shell { display: block !important; grid-template-columns: none !important; width: 100vw !important; max-width: none !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; background: transparent !important; background-image: none !important; } html body.view-practice .sidebar, html body.view-practice .topbar { display: none !important; } html body.view-practice .main { display: block !important; width: 100vw !important; max-width: none !important; min-width: 0 !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; background: transparent !important; background-image: none !important; } html body.view-practice.practice-bank-mobile-active .app-shell > main.main, html body.view-practice.practice-bank-mobile-active .app-shell > .main, html body.view-practice.practice-bank-mobile-active main.main { display: block !important; width: 100vw !important; max-width: none !important; min-width: 0 !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; transform: none !important; overflow-x: hidden !important; border-radius: 0 !important; clip-path: none !important; background: transparent !important; background-image: none !important; } html body.view-practice.practice-bank-mobile-active, html body.view-practice.practice-bank-mobile-active .app-shell, html body.view-practice.practice-bank-mobile-active .main, html body.view-practice.practice-bank-mobile-active .view, html body.view-practice.practice-bank-mobile-active .active-view, html body.view-practice.practice-bank-mobile-active #practice, html body.view-practice.practice-bank-mobile-active .practice-dashboard-layout, html body.view-practice.practice-bank-mobile-active .practice-panel, html body.view-practice.practice-bank-mobile-active .question-type-shell, html body.view-practice.practice-bank-mobile-active #questionTypeGrid { border-radius: 0 !important; clip-path: none !important; } body.view-practice.practice-bank-mobile-active .mobile-tabbar { display: none !important; } body.view-practice #practice.active-view.stage-types:not(.practice-detail-mode) { position: relative !important; display: block !important; width: 100vw !important; max-width: none !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; border-radius: 0 !important; clip-path: none !important; background: transparent !important; color: #121722 !important; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif !important; } body.view-practice #practice.active-view.stage-types:not(.practice-detail-mode)::before { content: ""; position: fixed; z-index: 0; left: 0; top: 0; width: 100vw; height: 100dvh; transform: none; pointer-events: none; border: 0 !important; border-radius: 0 !important; clip-path: none !important; box-shadow: none !important; background: radial-gradient(520px 420px at 8% 0%, rgba(255, 222, 76, 0.5) 0 18%, transparent 42%), radial-gradient(520px 520px at 92% 18%, rgba(255, 255, 255, 0.66) 0 18%, transparent 46%), linear-gradient(180deg, #ffd11a 0px, #ffe36d 210px, #fff0aa 430px, #fff8dd 680px, #fffdf7 940px, #ffffff 1200px); } body.view-practice #practice.active-view.stage-types:not(.practice-detail-mode)::after { content: ""; position: fixed; z-index: 0; left: 0; top: 0; width: 100vw; height: 100dvh; transform: none; pointer-events: none; opacity: 0.32; filter: blur(28px); background: linear-gradient(104deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.2) 28%, rgba(255, 255, 255, 0) 48%), linear-gradient(260deg, rgba(178, 255, 232, 0.12) 0%, rgba(255, 255, 255, 0) 44%); animation: mobileBankBgFloat 24s ease-in-out infinite alternate; } body.view-practice #practice.stage-types:not(.practice-detail-mode) .practice-top-grid, body.view-practice #practice.stage-types:not(.practice-detail-mode) .practice-left-rail, body.view-practice #practice.stage-types:not(.practice-detail-mode) .practice-panel > .panel-heading, body.view-practice #practice.stage-types:not(.practice-detail-mode) .training-mode-strip, body.view-practice #practice.stage-types:not(.practice-detail-mode) .practice-flow-summary, body.view-practice #practice.stage-types:not(.practice-detail-mode) .practice-stats, body.view-practice #practice.stage-types:not(.practice-detail-mode) #skillFilter, body.view-practice #practice.stage-types:not(.practice-detail-mode) #skillMap, body.view-practice #practice.stage-types:not(.practice-detail-mode) .practice-detail-hero, body.view-practice #practice.stage-types:not(.practice-detail-mode) .practice-workbench, body.view-practice #practice.stage-types:not(.practice-detail-mode) .legacy-question-flow { display: none !important; } body.view-practice #practice.stage-types:not(.practice-detail-mode) .practice-dashboard-layout, body.view-practice #practice.stage-types:not(.practice-detail-mode) .practice-panel, body.view-practice #practice.stage-types:not(.practice-detail-mode) .question-type-shell, body.view-practice #practice.stage-types:not(.practice-detail-mode) #questionTypeGrid { display: block !important; width: 100% !important; max-width: none !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; overflow: visible !important; clip-path: none !important; } body.view-practice #practice.stage-types:not(.practice-detail-mode) .mobile-bank-shell { --bank-ink: rgba(18, 24, 35, 0.9); --bank-ink-soft: rgba(32, 41, 56, 0.78); --bank-muted: rgba(91, 107, 128, 0.82); --bank-embed-shadow: 0 1px 0 rgba(255, 255, 255, 0.62), 0 -1px 0 rgba(111, 83, 18, 0.055); --bank-soft-shadow: 0 1px 0 rgba(255, 255, 255, 0.52); position: relative; z-index: 1; isolation: isolate; display: block !important; box-sizing: border-box; width: min(390px, 100vw); min-height: 844px; margin: 0 auto !important; padding: 36px clamp(18px, 4.7vw, 20px) 118px; overflow: visible; background: transparent; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } .mobile-bank-shell *, .mobile-bank-shell *::before, .mobile-bank-shell *::after { box-sizing: border-box; } .mobile-bank-shell button { appearance: none; border: var(--bank-button-border, 0); margin: 0; padding: var(--bank-button-padding, 0); color: var(--bank-button-color, inherit); font: var(--bank-button-font, inherit); text-align: var(--bank-button-align, left); background: var(--bank-button-background, transparent); cursor: pointer; -webkit-tap-highlight-color: transparent; } .question-bank-loading-desktop { display: none; } .mobile-bank-shell-loading .mobile-bank-rail p { color: rgba(73, 85, 102, 0.7); } .mobile-bank-loading-pulse { justify-self: center; width: 12px; height: 12px; border: 3px solid rgba(34, 177, 146, 0.22); border-top-color: rgba(34, 177, 146, 0.9); border-radius: 50%; animation: questionBankLoadingPulse 900ms linear infinite; } .mobile-bank-loading-retry { --bank-button-border: 1px solid rgba(29, 47, 61, 0.1); --bank-button-padding: 0 14px; --bank-button-color: #1c5f52; --bank-button-font: 760 12px/1 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; --bank-button-align: center; --bank-button-background: rgba(255, 255, 255, 0.66); justify-self: end; min-width: 58px; min-height: 36px; border-radius: 18px; } .mobile-bank-searchbar-loading { pointer-events: none; } .mobile-bank-searchbar-loading > span { color: rgba(78, 90, 106, 0.42); font-size: 13px; font-weight: 570; } .mobile-bank-shell-loading .mobile-bank-segment button:disabled { cursor: default; opacity: 0.68; } .mobile-bank-loading-grid { pointer-events: none; } .mobile-bank-skeleton-card { display: grid; grid-template-columns: 50px minmax(0, 1fr) 44px; align-items: center; gap: 11px; min-height: 92px; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.64); border-radius: 26px; background: rgba(255, 255, 255, 0.34); box-shadow: 0 16px 34px -28px rgba(64, 54, 31, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.82); } .mobile-bank-skeleton-icon { width: 50px; height: 50px; border-radius: 17px !important; } .mobile-bank-skeleton-copy { display: grid; gap: 9px; } .mobile-bank-skeleton-copy i { width: 74%; height: 14px; } .mobile-bank-skeleton-copy b { width: var(--skeleton-width, 68%); height: 10px; } .mobile-bank-skeleton-count { justify-self: end; width: 42px; height: 24px; } @keyframes questionBankLoadingPulse { to { transform: rotate(360deg); } } .mobile-bank-bg { display: none !important; } .mobile-bank-bg.bank-bg-disc { left: -72px; top: -136px; width: 510px; height: 510px; border-radius: 50%; opacity: 0.36; background: radial-gradient(circle, rgba(255, 205, 54, 0.42), rgba(255, 246, 204, 0.16) 42%, rgba(255, 255, 255, 0) 68%); } .mobile-bank-bg.bank-bg-white { left: 28px; top: 172px; width: 330px; height: 430px; opacity: 0.58; border-radius: 120px; background: radial-gradient(ellipse, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0) 68%); animation-duration: 26s; } .mobile-bank-bg.bank-bg-soft { right: -56px; bottom: 34px; width: 230px; height: 300px; opacity: 0.34; border-radius: 120px; background: radial-gradient(ellipse, rgba(255, 248, 222, 0.58), rgba(255, 255, 255, 0) 72%); animation-duration: 30s; } .mobile-bank-icon, .mobile-bank-shell .practice-ui-icon { width: 22px; height: 22px; display: block; overflow: visible; } .mobile-bank-icon path, .mobile-bank-shell .practice-ui-icon path, .mobile-bank-shell .practice-ui-icon rect, .mobile-bank-shell .practice-ui-icon circle { stroke: currentColor !important; stroke-width: 2.15 !important; stroke-linecap: round !important; stroke-linejoin: round !important; fill: none !important; } .mobile-bank-rail, .mobile-bank-searchbar, .mobile-bank-segment, .mobile-bank-type-card, .mobile-bank-tabbar { border: 1px solid rgba(255, 255, 255, 0.58); background-color: rgba(255, 255, 255, 0.24); background-image: radial-gradient(circle at var(--glass-x, 32%) var(--glass-y, 12%), rgba(255, 255, 255, 0.32), transparent 36%), linear-gradient(145deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.14)); -webkit-backdrop-filter: blur(22px) saturate(1.18); backdrop-filter: blur(22px) saturate(1.18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(255, 218, 88, 0.13), 0 18px 42px rgba(94, 72, 25, 0.08); } .mobile-bank-rail { display: grid; grid-template-columns: 54px minmax(0, 1fr) 44px; align-items: center; column-gap: 14px; min-height: 72px; padding: 9px 16px 9px 12px; border-radius: 36px; animation: mobileBankRise 520ms cubic-bezier(0.2, 0.82, 0.2, 1) both; } .mobile-bank-avatar { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; padding: 3px; background: radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.46), transparent 42%), linear-gradient(145deg, rgba(255, 215, 56, 0.88), rgba(255, 194, 32, 0.72)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), inset 0 -1px 0 rgba(126, 82, 10, 0.08), 0 12px 24px rgba(128, 84, 12, 0.12); overflow: hidden; } .mobile-bank-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.38)); } .mobile-bank-rail h2 { margin: 0; color: var(--bank-ink); font-size: 23px; line-height: 1.08; font-weight: 700; letter-spacing: 0; font-variation-settings: "wght" 700; text-shadow: var(--bank-embed-shadow); } .mobile-bank-rail p { margin: 5px 0 0; color: var(--bank-muted); font-size: 13px; line-height: 1.2; font-weight: 530; letter-spacing: 0; text-shadow: var(--bank-soft-shadow); } .mobile-bank-round { display: grid !important; place-items: center; width: 44px; height: 40px; border-radius: 22px; color: #68788d; background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.42)) padding-box, linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 217, 71, 0.24), rgba(163, 255, 235, 0.18)) border-box; border: 1px solid transparent !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 10px 18px rgba(104, 78, 14, 0.06); transition: transform 180ms ease, color 180ms ease; } .mobile-bank-shell .mobile-bank-searchbar { display: grid !important; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; width: 342px; max-width: 100%; min-height: 52px; margin-top: 18px !important; padding: 0 15px 0 17px !important; border-radius: 28px; color: #78869a; animation: mobileBankRise 520ms cubic-bezier(0.2, 0.82, 0.2, 1) 50ms both; } .mobile-bank-searchbar span { min-width: 0; overflow: hidden; color: #7c8798; font-size: 14px; font-weight: 570; line-height: 1; white-space: nowrap; text-overflow: ellipsis; text-shadow: var(--bank-soft-shadow); } .mobile-bank-searchbar input { min-width: 0; width: 100%; height: 34px; padding: 0; border: 0; outline: 0; color: var(--bank-ink-soft); background: transparent; font-size: 14px; font-weight: 570; line-height: 34px; letter-spacing: 0; -webkit-appearance: none; appearance: none; } .mobile-bank-searchbar input::placeholder { color: rgba(101, 113, 130, 0.74); opacity: 1; } .mobile-bank-searchbar input::-webkit-search-decoration, .mobile-bank-searchbar input::-webkit-search-cancel-button { display: none; } .mobile-bank-searchbar.is-searching { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -1px 0 rgba(255, 218, 88, 0.18), 0 16px 34px rgba(156, 114, 12, 0.11); } .mobile-bank-searchbar b, .mobile-bank-search-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 18px; color: #5f6f85; font-size: 13px; font-weight: 620; background: rgba(255, 255, 255, 0.46); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82); } .mobile-bank-search-action[hidden] { display: none !important; } .mobile-bank-searchbar b .mobile-bank-icon { width: 17px; height: 17px; } .mobile-bank-segment { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 5px; min-height: 58px; margin-top: 20px; padding: 5px; border-radius: 29px; animation: mobileBankRise 520ms cubic-bezier(0.2, 0.82, 0.2, 1) 100ms both; } .mobile-bank-segment button { position: relative; display: flex !important; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 46px; border-radius: 23px; color: #6f7f94; font-size: 14px; font-weight: 600; line-height: 1; text-align: center; transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease; } .mobile-bank-segment button.active { color: var(--bank-ink); font-weight: 680; text-shadow: var(--bank-soft-shadow); background: rgba(255, 255, 255, 0.46); box-shadow: 0 12px 26px rgba(89, 70, 30, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78); } .mobile-bank-segment .practice-ui-icon { width: 17px; height: 17px; flex: 0 0 17px; } .mobile-bank-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: center; gap: 16px 14px; margin-top: 26px; padding: 0 0 calc(142px + env(safe-area-inset-bottom, 0px)); } .mobile-bank-shell .mobile-bank-type-card { position: relative; display: block !important; width: 100%; height: 184px; min-height: 184px; padding: 0; border-radius: 32px; border: 1px solid rgba(255, 255, 255, 0.62) !important; background-color: rgba(255, 255, 255, 0.2) !important; background-image: radial-gradient(circle at 22% 4%, rgba(255, 255, 255, 0.34), transparent 38%), linear-gradient(145deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.12)) !important; -webkit-backdrop-filter: blur(24px) saturate(1.16); backdrop-filter: blur(24px) saturate(1.16); overflow: hidden; opacity: 0; transform: translateY(14px); animation: mobileBankCardIn 540ms cubic-bezier(0.2, 0.82, 0.2, 1) both; animation-delay: calc(160ms + var(--bank-index, 0) * 55ms); transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease; } .mobile-bank-shell .mobile-bank-type-card[hidden] { display: none !important; } .mobile-bank-empty { grid-column: 1 / -1; margin: 18px 0 4px; padding: 18px 16px; border: 1px solid rgba(255, 255, 255, 0.74); border-radius: 26px; color: var(--bank-muted); background: rgba(255, 255, 255, 0.52); -webkit-backdrop-filter: blur(18px) saturate(1.12); backdrop-filter: blur(18px) saturate(1.12); font-size: 13px; font-weight: 570; line-height: 1.4; text-align: center; text-shadow: var(--bank-soft-shadow); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92); } .mobile-bank-empty[hidden] { display: none !important; } .mobile-bank-shell .mobile-bank-type-card::before { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background: linear-gradient(130deg, rgba(255, 255, 255, 0.42), transparent 32%, transparent 72%, rgba(255, 255, 255, 0.14)), radial-gradient(circle at 96% 12%, rgba(255, 236, 151, 0.12), transparent 38%); opacity: 0.42; } .mobile-bank-type-card:active, .mobile-bank-segment button:active, .mobile-bank-searchbar:active, .mobile-bank-round:active, .mobile-bank-tabbar button:active { transform: scale(0.975); } .mobile-bank-type-badge { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; justify-content: center; min-width: 50px; max-width: 76px; height: 34px; padding: 0 11px; box-sizing: border-box; border-radius: 18px; color: var(--type-accent); font-size: 13px; font-weight: 690; line-height: 1; text-align: center; white-space: nowrap; word-break: keep-all; overflow-wrap: normal; hyphens: none; overflow: hidden; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.54); background: color-mix(in srgb, var(--type-accent) 13%, rgba(255, 255, 255, 0.72)); border: 1px solid color-mix(in srgb, var(--type-accent) 42%, rgba(255, 255, 255, 0.92)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82); } .mobile-bank-type-count { position: absolute; top: 17px; right: 15px; width: 62px; text-align: right; color: rgba(42, 51, 67, 0.86); font-size: 13px; font-weight: 650; line-height: 17px; white-space: nowrap; text-shadow: var(--bank-soft-shadow); } .mobile-bank-type-card strong { position: absolute; left: 14px; top: 58px; width: calc(100% - 28px); min-height: 0; max-height: 66px; margin: 0; color: var(--bank-ink); font-size: 15px; font-weight: 650; line-height: 16.8px; letter-spacing: 0; font-variation-settings: "wght" 650; text-shadow: var(--bank-embed-shadow); overflow: hidden; } .mobile-bank-type-card small { position: absolute; left: 14px; top: 101px; width: calc(100% - 28px); margin: 0; color: var(--bank-muted); font-size: 12px; font-weight: 540; line-height: 1.2; text-shadow: var(--bank-soft-shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-bank-type-enter { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 8px 0 12px; box-sizing: border-box; border-radius: 17px; color: color-mix(in srgb, var(--type-accent) 70%, #314052); font-size: 12px; font-weight: 680; line-height: 1; letter-spacing: 0.02em; background: linear-gradient(100deg, color-mix(in srgb, var(--type-accent) 14%, rgba(255, 255, 255, 0.68)), rgba(255, 255, 255, 0.5)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 16px rgba(71, 81, 98, 0.06); text-shadow: var(--bank-soft-shadow); } .mobile-bank-type-enter .mobile-bank-icon { width: 14px; height: 14px; flex: 0 0 14px; } .mobile-bank-type-line { position: absolute; left: 14px; top: 126px; display: block; width: calc(100% - 28px); height: 3px; margin: 0; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86); } .mobile-bank-type-line em { display: block; width: 8%; height: 100%; border-radius: inherit; background: var(--type-accent); box-shadow: 0 0 14px color-mix(in srgb, var(--type-accent) 62%, transparent); animation: mobileBankPulse 2.6s ease-in-out infinite; } .mobile-bank-tabbar { position: fixed; z-index: 30; left: 50%; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; width: min(342px, calc(100vw - 48px)); min-height: 78px; padding: 6px; border-radius: 39px; transform: translateX(-50%); will-change: transform; } .mobile-bank-tabbar button { display: grid !important; place-items: center; align-content: center; gap: 4px; min-height: 60px; border-radius: 31px; color: #8794a6; font-size: 13px; font-weight: 620; text-align: center; transition: transform 200ms ease, color 200ms ease, background 200ms ease, box-shadow 200ms ease; } .mobile-bank-tabbar button.active { color: var(--bank-ink); font-weight: 640; text-shadow: var(--bank-soft-shadow); background: rgba(255, 255, 255, 0.46); box-shadow: 0 13px 26px rgba(74, 61, 28, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78); animation: mobileBankTabPop 420ms cubic-bezier(0.2, 0.9, 0.28, 1.25) both; } .mobile-bank-tabbar .mobile-bank-icon { width: 22px; height: 22px; } @keyframes mobileBankRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes mobileBankCardIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes mobileBankBgFloat { from { transform: translate3d(-7px, -4px, 0) scale(1); } to { transform: translate3d(8px, 10px, 0) scale(1.04); } } @keyframes mobileBankPulse { 0%, 100% { opacity: 0.78; filter: saturate(0.96); } 50% { opacity: 1; filter: saturate(1.2); } } @keyframes mobileBankTabPop { 0% { transform: scale(0.92); } 66% { transform: scale(1.04); } 100% { transform: scale(1); } } } /* Mobile bank home-parity backdrop v28: one fixed home background, scrolling glass cards only. */ @media (max-width: 980px) { html:has(body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active)), html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) { background: #fffdf7 !important; background-color: #fffdf7 !important; background-image: none !important; overflow-x: hidden !important; } html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .app-shell, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .main, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) #practice.active-view.stage-types:not(.practice-detail-mode), html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) #practice.active-view.stage-types:not(.practice-detail-mode) .practice-dashboard-layout, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) #practice.active-view.stage-types:not(.practice-detail-mode) .practice-panel, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) #practice.active-view.stage-types:not(.practice-detail-mode) .question-type-shell, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) #practice.active-view.stage-types:not(.practice-detail-mode) #questionTypeGrid { background: transparent !important; background-color: transparent !important; background-image: none !important; } html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) #practice.active-view.stage-types:not(.practice-detail-mode) { position: relative !important; isolation: isolate !important; overflow-x: hidden !important; } html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) #practice.active-view.stage-types:not(.practice-detail-mode)::before { content: "" !important; display: block !important; position: fixed !important; inset: 0 !important; z-index: 0 !important; width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; pointer-events: none !important; opacity: 1 !important; visibility: visible !important; transform: translateZ(0) !important; filter: none !important; border: 0 !important; border-radius: 0 !important; clip-path: none !important; box-shadow: none !important; background-color: #fffdf7 !important; background-image: radial-gradient(390px 300px at 50% -10%, rgba(255, 204, 32, 0.86), rgba(255, 224, 94, 0.38) 47%, rgba(255, 255, 255, 0) 74%), radial-gradient(280px 360px at -12% 20%, rgba(255, 221, 78, 0.24), rgba(255, 255, 255, 0) 72%), radial-gradient(300px 340px at 112% 36%, rgba(255, 236, 147, 0.28), rgba(255, 255, 255, 0) 74%), linear-gradient(180deg, #ffd128 0%, #ffe88e 20%, #fff7df 49%, #fffdf7 100%) !important; background-attachment: scroll, scroll, scroll, scroll !important; background-position: 0 0, 0 0, 0 0, 0 0 !important; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important; background-size: auto, auto, auto, auto !important; animation: none !important; will-change: auto !important; } html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) #practice.active-view.stage-types:not(.practice-detail-mode)::after { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; background-image: none !important; animation: none !important; } html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) #practice.active-view.stage-types:not(.practice-detail-mode) .mobile-bank-shell, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) #practice.active-view.stage-types:not(.practice-detail-mode) .practice-dashboard-layout, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) #practice.active-view.stage-types:not(.practice-detail-mode) .practice-panel, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) #practice.active-view.stage-types:not(.practice-detail-mode) .question-type-shell, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) #practice.active-view.stage-types:not(.practice-detail-mode) #questionTypeGrid { position: relative !important; z-index: 1 !important; } html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .mobile-bank-bg, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .mobile-bank-bg.bank-bg-disc, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .mobile-bank-bg.bank-bg-white, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .mobile-bank-bg.bank-bg-soft, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .home-figma-bg, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .home-figma-viewport-bg, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .home-figma-asset { content: none !important; display: none !important; visibility: hidden !important; opacity: 0 !important; background: none !important; background-image: none !important; animation: none !important; } html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .mobile-bank-shell .mobile-bank-type-card { border-color: rgba(255, 255, 255, 0.62) !important; background-color: rgba(255, 255, 255, 0.12) !important; background-image: radial-gradient(80% 100% at 94% 50%, rgba(255, 222, 88, 0.16), rgba(255, 255, 255, 0) 60%), linear-gradient(145deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.16) 100%) !important; box-shadow: 0 18px 34px -28px rgba(31, 42, 55, 0.24), inset 1px 0 0 rgba(255, 226, 98, 0.1), inset -1px 0 0 rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important; -webkit-backdrop-filter: blur(24px) saturate(1.18) !important; backdrop-filter: blur(24px) saturate(1.18) !important; } html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .mobile-bank-rail, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .mobile-bank-searchbar, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .mobile-bank-segment, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .mobile-bank-empty, html body.view-practice.practice-bank-mobile-active:not(.practice-answer-detail-active) .mobile-bank-tabbar { border-color: rgba(255, 255, 255, 0.66) !important; background-color: rgba(255, 255, 255, 0.14) !important; background-image: radial-gradient(120% 86% at 94% 0%, rgba(255, 236, 140, 0.18), rgba(255, 255, 255, 0) 58%), linear-gradient(146deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.18) 100%) !important; box-shadow: 0 20px 36px -30px rgba(31, 42, 55, 0.22), inset 1px 0 0 rgba(255, 232, 128, 0.14), inset -1px 0 0 rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important; -webkit-backdrop-filter: blur(24px) saturate(1.16) !important; backdrop-filter: blur(24px) saturate(1.16) !important; } } /* Flow practice setup, resume, progress and result surfaces. */ :where(.flow-setup-overlay, .flow-result-overlay, .flow-check-overlay, .flow-practice-dialog) { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: clamp(18px, 4vw, 42px); color: #121923; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Noto Sans SC", sans-serif; isolation: isolate; } :where(.flow-result-backdrop, .flow-check-backdrop, .flow-practice-backdrop) { position: absolute; inset: 0; z-index: -1; border: 0; background: radial-gradient(620px 440px at 50% 2%, rgba(255, 220, 66, 0.2), transparent 70%), rgba(255, 250, 232, 0.2); -webkit-backdrop-filter: blur(14px) saturate(1.06); backdrop-filter: blur(14px) saturate(1.06); animation: flowPracticeFadeIn 180ms ease both; } :where(.flow-setup-backdrop) { position: absolute; inset: 0; z-index: 0; border: 0; background: radial-gradient(380px 340px at 84% 82%, rgba(52, 177, 130, 0.18), transparent 72%), radial-gradient(320px 300px at 12% 78%, rgba(255, 102, 86, 0.08), transparent 74%), radial-gradient(520px 360px at 48% 48%, rgba(255, 255, 255, 0.42), transparent 74%), linear-gradient(180deg, #ffd11a 0%, #ffe36d 28%, #fff0aa 58%, #fffdf7 100%); -webkit-backdrop-filter: none; backdrop-filter: none; animation: flowPracticeFadeIn 180ms ease both; } .flow-result-backdrop { z-index: 0; background: radial-gradient(380px 340px at 84% 82%, rgba(52, 177, 130, 0.18), transparent 72%), radial-gradient(320px 300px at 12% 78%, rgba(255, 102, 86, 0.08), transparent 74%), radial-gradient(520px 360px at 48% 48%, rgba(255, 255, 255, 0.42), transparent 74%), linear-gradient(180deg, #ffd11a 0%, #ffe36d 30%, #fff0aa 62%, #fffdf7 100%); -webkit-backdrop-filter: none; backdrop-filter: none; } :where(.flow-setup-overlay) { align-items: start; justify-items: center; padding-top: clamp(84px, 12.9vh, 116px); } .flow-setup-bank { position: fixed; top: 32px; left: 40px; z-index: 2; display: inline-flex; width: 132px; min-height: 44px; align-items: center; justify-content: center; gap: 4px; padding: 0 16px 0 12px; border: 0; border-radius: 22px; color: #101722; background: rgba(255, 255, 255, 0.64); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.44); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 14px; font-weight: 740; } .flow-setup-bank img { display: block; width: 20px; height: 20px; } :where(.flow-result-sheet, .flow-check-modal, .flow-practice-sheet, .flow-session-result) { position: relative; z-index: 1; width: min(680px, calc(100vw - 36px)); max-height: calc(100dvh - 48px); padding: clamp(22px, 3vw, 32px); overflow: auto; overscroll-behavior: contain; border: 1px solid rgba(255, 255, 255, 0.84); border-radius: 32px; color: #121923; background: radial-gradient(460px 240px at 10% 0%, rgba(255, 223, 91, 0.22), transparent 70%), linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 250, 229, 0.74)); box-shadow: 0 38px 90px -42px rgba(48, 38, 13, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.98); -webkit-backdrop-filter: blur(30px) saturate(1.18); backdrop-filter: blur(30px) saturate(1.18); animation: flowPracticeSheetIn 240ms cubic-bezier(0.2, 0.82, 0.2, 1) both; } :where(.flow-setup-modal) { position: relative; z-index: 1; width: min(760px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); padding: 30px; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; border: 1px solid rgba(255, 255, 255, 0.86); border-radius: 32px; color: #17212f; background: radial-gradient(440px 220px at 8% 0%, rgba(255, 226, 103, 0.13), transparent 72%), linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 250, 229, 0.6)); box-shadow: 0 24px 60px -28px rgba(48, 38, 13, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(28px) saturate(1.12); backdrop-filter: blur(28px) saturate(1.12); animation: flowPracticeSheetIn 240ms cubic-bezier(0.2, 0.82, 0.2, 1) both; } :where(.flow-setup-modal)::-webkit-scrollbar { display: none; } :where(.flow-result-sheet, .flow-session-result) { width: min(900px, calc(100vw - 48px)); } .flow-result-sheet:not(.flow-result-wait) { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 18px; height: min(780px, calc(100dvh - 48px)); padding: 30px; overflow: hidden; background: radial-gradient(460px 240px at 10% 0%, rgba(255,223,91,.17), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,250,229,.74)); } .flow-result-sheet:focus { outline: none; } :where(.flow-result-head, .flow-check-head) { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; } :where(.flow-setup-head) { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } :where(.flow-setup-head, .flow-result-head, .flow-check-head) :where(h2, h3, p) { margin: 0; } :where(.flow-result-head, .flow-check-head) h2 { color: rgba(16, 23, 34, 0.94); font-size: clamp(22px, 3vw, 28px); font-weight: 780; line-height: 1.16; letter-spacing: -0.025em; } :where(.flow-result-head, .flow-check-head) p { margin-top: 7px; color: rgba(47, 59, 75, 0.62); font-size: 13px; font-weight: 540; line-height: 1.55; } :where(.flow-setup-head) h2 { color: #101722; font-size: 30px; font-weight: 850; line-height: 38px; letter-spacing: -0.02em; } :where(.flow-setup-head) p { margin-top: 2px; color: #576573; font-size: 13px; font-weight: 620; line-height: 20px; } :where(.flow-setup-head, .flow-result-head) > button { min-width: 76px; min-height: 44px; padding: 0 15px; border: 0; border-radius: 22px; color: #101722; background: rgba(255,255,255,.48); box-shadow: none; font-size: 13px; font-weight: 780; } .flow-result-sheet:not(.flow-result-wait) .flow-result-head { margin: 0; } .flow-result-head > div > span { display: block; margin-bottom: 4px; color: #227c68; font-size: 11px; font-weight: 720; line-height: 16px; } .flow-setup-section + .flow-setup-section, .flow-preview-section { margin-top: 22px; } :where(.flow-result-section-head) { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; color: rgba(22, 31, 43, 0.86); font-size: 13px; font-weight: 740; line-height: 1.35; } :where(.flow-setup-label) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; color: rgba(23, 33, 47, 0.88); font-size: 13px; font-weight: 780; line-height: 1.35; } :where(.flow-setup-label) > span { color: rgba(87, 101, 115, 0.58); font-size: 11.5px; font-weight: 650; } :where(.flow-setup-modal, .flow-result-sheet, .flow-check-modal, .flow-practice-sheet, .flow-session-result) button { appearance: none; margin: 0; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } :where(.flow-setup-modal, .flow-result-sheet, .flow-check-modal, .flow-practice-sheet, .flow-session-result) button:focus-visible, .flow-resume-card button:focus-visible, .flow-practice-nav button:focus-visible { outline: 3px solid rgba(24, 112, 223, 0.28); outline-offset: 2px; } :where(.flow-practice-options) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } :where(.flow-practice-options > button, .flow-practice-count > button) { min-height: 52px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 18px; color: rgba(31, 42, 56, 0.72); background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.38)), rgba(255, 255, 255, 0.44); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 14px 26px -24px rgba(43, 51, 63, 0.24); font-size: 13px; font-weight: 690; text-align: left; transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease; } :where(.flow-practice-options > button, .flow-practice-count > button):is(.active, .is-active, .is-selected, [aria-pressed="true"]) { border-color: rgba(255, 192, 26, 0.52); color: #72500a; background: radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.82), transparent 58%), linear-gradient(145deg, rgba(255, 230, 122, 0.7), rgba(255, 202, 43, 0.38)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 16px 28px -22px rgba(167, 113, 8, 0.34); } :where(.flow-practice-options > button, .flow-practice-count > button):active { transform: scale(0.98); } :where(.flow-practice-count) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 12px; } :where(.flow-practice-count > button) { min-height: 44px; padding: 0 10px; text-align: center; } :where(.flow-setup-mode-grid) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 10px; } .flow-setup-option { position: relative; display: inline-flex; min-width: 0; min-height: 48px; padding: 0 12px; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; border: 0; border-radius: 17px; color: #576573; background: rgba(255,255,255,.48); box-shadow: none; font-size: 13px; font-weight: 720; line-height: 20px; text-align: center; transition: color 180ms ease-out, background 180ms ease-out, box-shadow 180ms ease-out, -webkit-backdrop-filter 180ms ease-out, backdrop-filter 180ms ease-out; } .flow-setup-option strong { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .flow-setup-option strong::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #ffc82e; opacity: 0; transform: scale(.65); transition: opacity 180ms ease-out, transform 180ms ease-out; } .flow-setup-option::after { content: ""; position: absolute; z-index: 1; bottom: 1px; left: 50%; width: 6px; height: 3px; border-radius: 2px; background: #ffe16b; opacity: 0; transform: translateX(-50%); transition: width 180ms ease-out, opacity 180ms ease-out; } .flow-setup-option:is(.is-selected, [aria-pressed="true"]) { color: #72510b; background: radial-gradient(ellipse 86px 42px at 32% 50%, rgba(255,225,107,.36), transparent 72%), rgba(255,255,255,.86); box-shadow: inset 0 1px 1px rgba(255,255,255,.34); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .flow-setup-option:is(.is-selected, [aria-pressed="true"]) strong::before { opacity: 1; transform: scale(1); } .flow-setup-option:is(.is-selected, [aria-pressed="true"])::after { width: 42px; opacity: .72; } .flow-count-slider { display: grid; gap: 8px; width: 100%; margin-top: 10px; } .flow-count-slider-stage { position: relative; height: 52px; } .flow-count-output { position: absolute; top: 0; left: clamp(37px, var(--flow-count-progress, 50%), calc(100% - 37px)); z-index: 2; display: grid; width: 74px; height: 26px; place-items: center; border: 1px solid #efc94e; border-radius: 999px; color: #72510b; background: #ffe16b; font-size: 12px; font-weight: 620; line-height: 16px; transform: translateX(-50%); pointer-events: none; } .flow-count-range { --flow-count-progress: 50%; position: absolute; inset: 12px 0 auto; width: 100%; height: 44px; margin: 0; padding: 0; appearance: none; background: transparent; cursor: pointer; } .flow-count-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #ffe16b 0 var(--flow-count-progress), rgba(255,255,255,.86) var(--flow-count-progress) 100%); } .flow-count-range::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; appearance: none; border: 2px solid #efc94e; border-radius: 50%; background: rgba(255,255,255,.86); box-shadow: 0 3px 9px rgba(114,81,11,.14), inset 0 1px 0 rgba(255,255,255,.94); } .flow-count-range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,.86); } .flow-count-range::-moz-range-progress { height: 6px; border-radius: 3px; background: #ffe16b; } .flow-count-range::-moz-range-thumb { width: 20px; height: 20px; border: 2px solid #efc94e; border-radius: 50%; background: rgba(255,255,255,.86); box-shadow: 0 3px 9px rgba(114,81,11,.14); } .flow-count-range:focus-visible { outline: 0; } .flow-count-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(24,112,223,.22), 0 3px 9px rgba(114,81,11,.14); } .flow-count-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(24,112,223,.22), 0 3px 9px rgba(114,81,11,.14); } .flow-count-range:disabled { cursor: not-allowed; opacity: .52; } .flow-count-ticks { display: flex; height: 16px; align-items: center; justify-content: space-between; color: #576573; font-size: 10px; font-weight: 600; line-height: 16px; } :where(.flow-practice-preview, .flow-session-scoring, .flow-result-scoring) { margin-top: 16px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 20px; color: rgba(42, 53, 69, 0.7); background: radial-gradient(circle at 92% 0%, rgba(255, 221, 84, 0.14), transparent 54%), rgba(255, 255, 255, 0.48); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94); font-size: 13px; line-height: 1.55; } :where(.flow-practice-preview) { max-height: 168px; overflow: auto; } :where(.flow-check-actions, .flow-session-actions) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; margin-top: 22px; } :where(.flow-check-actions, .flow-session-actions) > button { min-height: 50px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.84); border-radius: 999px; color: rgba(35, 45, 58, 0.7); background: rgba(255, 255, 255, 0.56); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94); font-size: 14px; font-weight: 740; } :where(.flow-check-actions, .flow-session-actions) > :is(.primary-btn, [data-flow-check-finish]) { border-color: rgba(255, 193, 24, 0.62); color: #4e3808; background: radial-gradient(circle at 28% 0%, rgba(255, 255, 255, 0.58), transparent 54%), linear-gradient(145deg, #ffe16b, #ffc82e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 18px 30px -20px rgba(159, 102, 0, 0.42); } .flow-result-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; } .flow-result-actions > button { min-height: 50px; padding: 0 18px; border: 0; border-radius: 22px; font-size: 14px; font-weight: 740; } .flow-result-actions > button:not(.flow-primary-action) { color: #101722; background: rgba(255,255,255,.48); box-shadow: none; } .flow-result-actions > button:disabled { cursor: not-allowed; color: rgba(87,101,115,.52); opacity: .52; } .flow-setup-actions { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 10px; margin-top: 22px; } .flow-setup-actions > button { min-height: 50px; padding: 0 16px; border: 0; border-radius: 22px; font-size: 14px; font-weight: 780; } .flow-setup-actions > button:not(.flow-primary-action) { color: #101722; background: rgba(255,255,255,.48); box-shadow: none; } .flow-primary-action { position: relative; overflow: hidden; isolation: isolate; color: #72510b; background: rgba(255,255,255,.86); box-shadow: inset 0 1px 1px rgba(255,255,255,.38), 0 5px 14px -10px rgba(135,99,20,.12); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .flow-primary-action::before { content: ""; position: absolute; z-index: 0; top: 50%; left: 50%; width: 126px; height: 58px; border-radius: 50%; background: rgba(255,225,107,.58); filter: blur(18px); transform: translate(-50%,-50%); } .flow-primary-action::after { content: ""; position: absolute; top: 3px; left: 50%; z-index: 1; width: 84px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.86); transform: translateX(-50%); } .flow-primary-action > span:not(.flow-action-arrow) { position: relative; z-index: 1; } .flow-action-arrow { position: absolute; top: 50%; right: 10px; z-index: 1; display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.58); transform: translateY(-50%); } .flow-action-arrow img { display: block; width: 14px; height: 14px; } .flow-primary-action:disabled { cursor: not-allowed; opacity: .52; box-shadow: none; } .flow-primary-action:disabled::before { opacity: .28; } .flow-resume-card, .flow-practice-resume { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; width: 100%; padding: 17px 18px; border: 1px solid rgba(255, 255, 255, 0.84); border-radius: 24px; color: #17202c; background: radial-gradient(circle at 8% 0%, rgba(255, 226, 103, 0.22), transparent 58%), linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 250, 229, 0.54)); box-shadow: 0 20px 36px -30px rgba(66, 50, 14, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(22px) saturate(1.12); backdrop-filter: blur(22px) saturate(1.12); } .flow-resume-copy { min-width: 0; } .flow-resume-copy :where(strong, span, p) { margin: 0; } .flow-resume-copy strong { display: block; color: rgba(19, 27, 38, 0.92); font-size: 15px; font-weight: 760; } .flow-resume-copy :where(span, p) { display: block; margin-top: 5px; color: rgba(49, 62, 79, 0.62); font-size: 12px; font-weight: 560; line-height: 1.45; } .flow-resume-actions { display: flex; align-items: center; gap: 8px; } .flow-resume-actions button { min-height: 38px; padding: 0 14px; border: 1px solid rgba(255, 196, 34, 0.48); border-radius: 999px; color: #624608; background: rgba(255, 222, 100, 0.58); font-size: 12px; font-weight: 720; } .flow-practice-nav { display: grid; gap: 10px; width: 100%; margin-bottom: 16px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 22px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 248, 220, 0.52)); box-shadow: 0 18px 34px -30px rgba(55, 43, 14, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(20px) saturate(1.12); backdrop-filter: blur(20px) saturate(1.12); } .flow-practice-progress { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(170, 151, 99, 0.2); } .flow-practice-progress > :where(i, span, b) { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffc726, #ffe375); transition: width 220ms cubic-bezier(0.2, 0.8, 0.2, 1); } .flow-practice-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(39, 50, 65, 0.68); font-size: 12px; font-weight: 660; } .flow-practice-position { display: grid; justify-items: center; gap: 2px; color: rgba(18, 26, 37, 0.84); font-variant-numeric: tabular-nums; font-weight: 740; } .flow-practice-position small { color: rgba(50, 62, 78, 0.54); font-size: 10.5px; font-weight: 580; } .flow-practice-nav-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; } .flow-session-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; } .flow-session-cards > * { min-width: 0; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 20px; background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94); } .flow-result-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; } .flow-result-metrics > article { position: relative; min-width: 0; height: 108px; min-height: 0; padding: 20px 16px 10px; border: 0; border-radius: 20px; background: rgba(255,255,255,.48); box-shadow: none; } .flow-result-metrics > article::before { content: ""; position: absolute; top: 12px; left: 16px; width: 40px; height: 3px; border-radius: 2px; background: #ffe16b; } .flow-result-list { display: grid; gap: 8px; grid-auto-rows: 52px; align-content: start; min-height: 0; margin: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } .flow-result-detail { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; min-height: 0; margin: 0; } .flow-result-section-head { margin: 0; } .flow-result-row { position: relative; display: grid; grid-template-columns: 8px auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; min-height: 52px; height: 52px; padding: 0 14px; border: 0; border-radius: 17px; color: rgba(27, 37, 51, 0.78); background: rgba(255,255,255,.48); font-size: 13px; text-align: left; } .flow-result-row::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #227c68; } .flow-result-row:is(.is-low, .is-failed) { background: #fff1eb; } .flow-result-row:is(.is-low, .is-failed)::before { background: #ff6656; } .flow-result-row.is-skipped { color: rgba(58, 68, 82, 0.5); } .flow-result-row.is-skipped::before { background: #8a97a3; } .flow-result-row.is-scoring { background: rgba(255, 248, 218, 0.58); } .flow-result-row.is-scoring::before { background: #ffc82e; } .flow-result-wait { display: grid; gap: 14px; place-items: center; margin-top: 18px; padding: 26px 18px; border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 22px; background: rgba(255, 255, 255, 0.46); text-align: center; } .flow-result-wait-copy { color: rgba(34, 46, 61, 0.68); font-size: 13px; line-height: 1.55; } .flow-result-wait-progress { display: inline-flex; align-items: baseline; justify-content: center; gap: 5px; min-width: 112px; padding: 12px 18px; border-radius: 999px; color: #5d430a; background: linear-gradient(145deg, rgba(255, 230, 119, 0.78), rgba(255, 202, 48, 0.54)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78); } .flow-result-wait-progress > * { margin: 0; font-size: 13px; font-style: normal; line-height: 1; } .flow-result-wait-progress strong { font-size: 24px; font-weight: 780; } .flow-check-list { display: grid; gap: 9px; max-height: min(42dvh, 360px); margin-top: 16px; overflow: auto; } .flow-check-list > * { padding: 13px 15px; border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 17px; background: rgba(255, 255, 255, 0.46); } :where(.flow-result-empty, .flow-session-empty) { margin: 18px 0 0; padding: 28px 18px; border: 1px dashed rgba(133, 111, 54, 0.24); border-radius: 20px; color: rgba(50, 62, 78, 0.58); background: rgba(255, 255, 255, 0.36); font-size: 13px; line-height: 1.6; text-align: center; } @media (max-width: 760px) { :where(.flow-result-overlay, .flow-check-overlay, .flow-practice-dialog) { align-items: end; padding: 0; } :where(.flow-result-sheet, .flow-check-modal, .flow-practice-sheet, .flow-session-result) { width: 100%; max-height: min(92dvh, 820px); padding: 23px 18px calc(20px + env(safe-area-inset-bottom, 0px)); border-right: 0; border-bottom: 0; border-left: 0; border-radius: 30px 30px 0 0; } .flow-result-sheet:not(.flow-result-wait) { gap: 14px; width: 100%; height: calc(100dvh - 34px); max-height: none; padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); } :where(.flow-practice-options) { gap: 9px; } :where(.flow-practice-count) { grid-template-columns: repeat(3, minmax(0, 1fr)); } :where(.flow-check-actions, .flow-session-actions) { position: sticky; bottom: 0; z-index: 3; margin: 20px -4px -4px; padding: 10px 4px 4px; background: linear-gradient(180deg, rgba(255, 252, 239, 0), rgba(255, 252, 239, 0.96) 34%); } :where(.flow-setup-overlay) { align-items: start; padding: 74px 18px calc(14px + env(safe-area-inset-bottom, 0px)); } .flow-setup-bank { top: 16px; left: 18px; width: 122px; min-height: 44px; } :where(.flow-setup-modal) { width: 100%; max-height: calc(100dvh - 88px - env(safe-area-inset-bottom, 0px)); padding: 18px; border: 1px solid rgba(255, 255, 255, 0.86); border-radius: 32px; } :where(.flow-setup-head) { min-height: 48px; margin-bottom: 16px; } :where(.flow-setup-head) h2 { font-size: 22px; line-height: 28px; } :where(.flow-setup-head) p { font-size: 11px; line-height: 16px; } :where(.flow-setup-head, .flow-result-head) > button { min-width: 68px; min-height: 44px; padding: 0 12px; } .flow-setup-section + .flow-setup-section, .flow-preview-section { margin-top: 16px; } :where(.flow-setup-mode-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .flow-setup-option { min-height: 44px; } .flow-setup-actions { grid-template-columns: 116px minmax(0, 1fr); position: static; margin: 16px 0 0; padding: 0; background: none; } .flow-setup-actions > button { min-height: 44px; } .flow-result-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .flow-result-metrics > article { height: 96px; min-height: 0; padding: 20px 14px 8px; } .flow-result-metrics > article:last-child { grid-column: 1 / -1; height: 92px; } .flow-result-actions { gap: 8px; } .flow-result-actions > button { min-height: 48px; } .flow-resume-card, .flow-practice-resume { grid-template-columns: 1fr; gap: 12px; padding: 15px; border-radius: 22px; } .flow-resume-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow-resume-actions button { padding: 0 10px; } .flow-session-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 761px) { .flow-setup-label { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { :where(.flow-setup-backdrop, .flow-result-backdrop, .flow-check-backdrop, .flow-practice-backdrop, .flow-setup-modal, .flow-result-sheet, .flow-check-modal, .flow-practice-sheet, .flow-session-result, .flow-practice-progress > *, .flow-result-wait-progress > *, .flow-setup-option, .flow-setup-option::before, .flow-setup-option::after, .flow-setup-option strong::before) { animation: none; transition: none; } .mobile-bank-type-line em { animation: none; } } @keyframes flowPracticeFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes flowPracticeSheetIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } body:has(> :is(.flow-setup-overlay, .flow-result-overlay, .flow-check-overlay)) { overflow: hidden; } #practice .practice-navigator > .flow-practice-nav { grid-column: 1 / -1; min-width: 0; margin: 0; } .flow-setup-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding: 0; border: 0; color: rgba(60, 75, 90, 0.68); background: none; box-shadow: none; font-size: 12px; line-height: 1.4; } .flow-setup-summary > span, .flow-question-preview > span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; flex: 0 0 auto; border: 0; border-radius: 999px; color: rgba(49, 64, 80, 0.68); background: rgba(255, 255, 255, 0.5); font-size: 11.5px; font-weight: 680; } .flow-setup-summary > .is-warning { color: #a13b31; border-color: rgba(224, 88, 74, 0.22); background: rgba(255, 235, 229, 0.68); } .flow-question-preview { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; max-height: none; margin-top: 8px; padding: 2px 0 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border: 0; background: none; box-shadow: none; -webkit-overflow-scrolling: touch; } .flow-question-preview::-webkit-scrollbar { display: none; } .flow-question-preview > .flow-preview-more { display: none; } .flow-result-metrics > article > span, .flow-result-metrics > article > small { display: block; color: rgba(48, 60, 76, 0.58); font-size: 11px; font-weight: 600; line-height: 16px; } .flow-result-metrics > article > strong { display: block; margin: 0; color: rgba(17, 24, 34, 0.94); font-size: 32px; font-weight: 790; line-height: 36px; font-variant-numeric: tabular-nums; } .flow-result-row > span { font-weight: 650; white-space: nowrap; } .flow-result-row > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flow-result-row > em { font-style: normal; font-weight: 730; white-space: nowrap; } .flow-result-row.is-scored > em { color: #227c68; } .flow-result-row:is(.is-low, .is-failed) > em { color: #ff6656; } @media (max-width: 760px) { .flow-result-metrics > article > strong { font-size: 28px; line-height: 32px; } .flow-question-preview > span:nth-child(n + 6):not(.flow-preview-more) { display: none; } .flow-question-preview > .flow-preview-more { display: inline-flex; } }