/* trainer_base.css — trainer base styles lifted from style.css, scoped to body[data-active-page="trainer"]. */ /* ──────────────────────────────────────────── ОГЭ Математика — Telegram WebApp Styles ──────────────────────────────────────────── */ body[data-active-page="trainer"] { --bg: var(--tg-theme-bg-color, #05080f); --bg-secondary: var(--tg-theme-secondary-bg-color, #0b1222); --text: var(--tg-theme-text-color, #eef2ff); --text-hint: var(--tg-theme-hint-color, #7a8aa8); --accent: var(--tg-theme-button-color, #1e6fff); --accent-text: var(--tg-theme-button-text-color, #ffffff); --link: var(--tg-theme-link-color, #60a5fa); --accent-strong: #0047ff; --accent-soft: #4d9eff; --card-bg: rgba(30, 111, 255, 0.06); --card-border: rgba(77, 158, 255, 0.14); --success: #00b894; --error: #e17055; --warning: #fdcb6e; --scrollbar-track: rgba(11, 18, 34, 0.9); --scrollbar-thumb: linear-gradient(180deg, #4bc7ff, #1e6fff); --scrollbar-thumb-solid: #2878ff; --scrollbar-thumb-hover: #4bc7ff; --app-scrollbar-track: transparent; --app-scrollbar-thumb: rgba(30, 111, 255, 0.48); --app-scrollbar-thumb-hover: #4bc7ff; --app-scrollbar-track-start: 0px; --app-scrollbar-track-end: 0px; --radius: 16px; --radius-sm: 10px; --bottom-nav-height: 72px; --bottom-nav-gap: 18px; /* NOTE: --app-safe-* are intentionally NOT redeclared here. The original :root defaults were scoped to the trainer body by the transform, which clobbered the mini-app values the inline script sets on . They inherit from (JS) with an env()/0 fallback at each usage. */ } /* The shared shell bits (side nav, bottom nav, toast, section intro) are excluded from this reset: their margins/paddings come from class rules and the reset's higher specificity (body[attr] *) would zero them out, making /trainer differ from the other standalone pages. */ body[data-active-page="trainer"] :not(.desktop-side-nav, .desktop-side-nav *, .home-bottom-nav, .home-bottom-nav *, .learn-toast, .section-intro-overlay, .section-intro-overlay *) { margin: 0; padding: 0; box-sizing: border-box; } body[data-active-page="trainer"] { background: var(--bg); overflow-y: auto; scrollbar-gutter: auto; scrollbar-width: thin; scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track); } body[data-active-page="trainer"]::-webkit-scrollbar { width: 10px; height: 10px; } body[data-active-page="trainer"]::-webkit-scrollbar-track { margin-block: var(--app-scrollbar-track-start) var(--app-scrollbar-track-end); background: var(--app-scrollbar-track); border-radius: 999px; } body[data-active-page="trainer"]::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--app-scrollbar-thumb); background-clip: content-box; } body[data-active-page="trainer"]::-webkit-scrollbar-thumb:hover { background: var(--app-scrollbar-thumb-hover); } body[data-active-page="trainer"]::-webkit-scrollbar-corner { background: transparent; } body[data-active-page="trainer"] #app, body[data-active-page="trainer"] #app * { scrollbar-width: thin; scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track); } body[data-active-page="trainer"] #app::-webkit-scrollbar, body[data-active-page="trainer"] #app *::-webkit-scrollbar { width: 10px; height: 10px; } body[data-active-page="trainer"] #app::-webkit-scrollbar-track, body[data-active-page="trainer"] #app *::-webkit-scrollbar-track { background: var(--app-scrollbar-track); border-radius: 999px; } body[data-active-page="trainer"] #app::-webkit-scrollbar-thumb, body[data-active-page="trainer"] #app *::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--app-scrollbar-thumb); background-clip: content-box; } body[data-active-page="trainer"] #app::-webkit-scrollbar-thumb:hover, body[data-active-page="trainer"] #app *::-webkit-scrollbar-thumb:hover { background: var(--app-scrollbar-thumb-hover); } body[data-active-page="trainer"] #app::-webkit-scrollbar-corner, body[data-active-page="trainer"] #app *::-webkit-scrollbar-corner { background: transparent; } body[data-active-page="trainer"]:has(body[data-active-screen="screen-lessons"]), body[data-active-page="trainer"]:has(body[data-active-screen="screen-categories"]) { --app-scrollbar-track-start: calc(var(--app-safe-top, 0px) + 54px); --app-scrollbar-track-end: calc(var(--bottom-nav-height) + var(--bottom-nav-gap) + var(--app-safe-bottom, 0px) + 8px); } body[data-active-page="trainer"] { /* Font-family intentionally NOT set here: inherit the shared `html, body { font-family: var(--app-font-family) }` from app_core.css so the trainer uses the exact same Montserrat stack as every other page. The old monolith .font-ios/.font-montserrat overrides were dropped — nothing on the standalone pages sets those classes, and they risked the trainer falling back to a system font while other pages stayed on Montserrat. */ background: var(--bg); color: var(--text); /* Match the app: normal body text (app_core.css defaults to 800; the monolith uses 400 with selective bold). Explicit-weight elements keep their weight. */ font-weight: 400; /* --app-vh is set from JS to Telegram's viewportStableHeight; falls back to 100vh when running outside a WebApp (admin pages, dev). */ min-height: var(--app-vh, 100vh); } body[data-active-page="trainer"].max-webapp { overscroll-behavior-y: none; } @media (hover: none) and (pointer: coarse) { body[data-active-page="trainer"] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } body[data-active-page="trainer"] input, body[data-active-page="trainer"] textarea { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; } } body[data-active-page="trainer"] #app { width: 100%; max-width: none; margin: 0; --app-extra-bottom-space: 32px; /* --app-safe-top / --app-safe-bottom come from Telegram's contentSafeAreaInset + safeAreaInset (set in app.js). They push our UI below Telegram's own chrome (close pill, bot-info row) when launched as a Direct Link Mini App from the main chat list. Fallback to env() for non-WebApp / older clients. */ padding-top: var(--app-safe-top, env(safe-area-inset-top, 0px)); padding-right: 16px; padding-bottom: calc(var(--app-extra-bottom-space, 32px) + var(--app-safe-bottom, env(safe-area-inset-bottom, 0px)) + var(--keyboard-extra-bottom, 0px)); padding-left: 16px; } body[data-active-page="trainer"][data-active-screen] #app { --app-extra-bottom-space: 0px; } @media (hover: none) and (pointer: coarse) and (min-width: 700px) and (max-width: 1180px) { body[data-active-page="trainer"] #app { max-width: none; } } @media (min-width: 700px) and (max-width: 1023px) { body[data-active-page="trainer"]:is( [data-active-screen="screen-lessons"], [data-active-screen="screen-categories"], [data-active-screen="screen-exam-variant-info"], [data-active-screen="screen-energy"], [data-active-screen="screen-crystal-shop"], [data-active-screen="screen-manual"], [data-active-screen="screen-role-profile"], [data-active-screen="screen-role-parent"], [data-active-screen="screen-role-tutor"] ) #app { max-width: none; padding-right: 24px; padding-left: 24px; } } @media (min-width: 1024px) { body[data-active-page="trainer"]:has(body[data-active-screen="screen-lessons"]), body[data-active-page="trainer"]:has(body[data-active-screen="screen-lesson-player"]), body[data-active-page="trainer"]:has(body[data-active-screen="screen-categories"]), body[data-active-page="trainer"]:has(body[data-active-screen="screen-exam-variant-info"]), body[data-active-page="trainer"]:has(body[data-active-screen="screen-exam-attempt"]), body[data-active-page="trainer"]:has(body[data-active-screen="screen-profile"]), body[data-active-page="trainer"]:has(body[data-active-screen="screen-manual"]), body[data-active-page="trainer"]:has(body[data-active-screen="screen-role-profile"]), body[data-active-page="trainer"]:has(body[data-active-screen="screen-role-parent"]), body[data-active-page="trainer"]:has(body[data-active-screen="screen-role-tutor"]) { --app-scrollbar-track-start: 96px; --app-scrollbar-track-end: 18px; } body[data-active-page="trainer"]:has(body[data-active-screen="screen-energy"]) { --app-scrollbar-track-start: 18px; --app-scrollbar-track-end: 18px; } body[data-active-page="trainer"]:is( [data-active-screen="screen-lessons"], [data-active-screen="screen-categories"], [data-active-screen="screen-exam-variant-info"], [data-active-screen="screen-energy"] ) #app { --desktop-side-nav-width: 216px; --desktop-service-rail-width: 340px; --desktop-service-gap: 0px; width: auto; max-width: none; margin-left: var(--desktop-side-nav-width); margin-right: 0; padding-right: calc(32px + var(--desktop-service-rail-width) + var(--desktop-service-gap)); padding-left: 32px; } body[data-active-page="trainer"]:is( [data-active-screen="screen-lessons"], [data-active-screen="screen-categories"], [data-active-screen="screen-exam-variant-info"] ) #app { --desktop-service-gap: 18px; } body[data-active-page="trainer"][data-active-screen="screen-profile"] #app { --desktop-side-nav-width: 216px; --desktop-service-rail-width: 340px; --desktop-service-gap: 18px; width: auto; max-width: none; margin-left: var(--desktop-side-nav-width); margin-right: 0; padding-right: calc(32px + var(--desktop-service-rail-width) + var(--desktop-service-gap)); padding-left: 32px; } body[data-active-page="trainer"][data-active-screen="screen-lesson-player"] #app { width: auto; max-width: none; margin-right: auto; margin-left: auto; padding-right: 32px; padding-left: 32px; } body[data-active-page="trainer"]:is( [data-active-screen="screen-role-profile"], [data-active-screen="screen-role-parent"], [data-active-screen="screen-role-tutor"] ) #app { --desktop-side-nav-width: 216px; width: auto; max-width: none; margin-left: var(--desktop-side-nav-width); margin-right: 0; padding-right: 32px; padding-left: 32px; } body[data-active-page="trainer"][data-active-screen="screen-manual"] #app { --desktop-side-nav-width: 216px; width: auto; max-width: none; margin-left: var(--desktop-side-nav-width); margin-right: 0; padding-right: 32px; padding-left: 32px; } body[data-active-page="trainer"][data-active-screen="screen-exam-attempt"] #app { width: auto; max-width: none; margin-right: auto; margin-left: auto; padding-right: 32px; padding-left: 32px; } body[data-active-page="trainer"][data-active-screen="screen-energy"] #app { padding-right: 32px; } } /* ── Screens ── */ body[data-active-page="trainer"] .screen { display: none; } body[data-active-page="trainer"] .screen.active { display: block; } body[data-active-page="trainer"] #screen-categories, body[data-active-page="trainer"] #screen-profile { padding-bottom: calc(var(--bottom-nav-height) + var(--bottom-nav-gap) + var(--app-safe-bottom, env(safe-area-inset-bottom, 0px))); } body[data-active-page="trainer"] #screen-profile { padding-top: 0; margin-right: -16px; margin-left: -16px; } body[data-active-page="trainer"] .energy-status-button { position: relative; border: 0; background: transparent; padding: 0; appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-active-page="trainer"] .crystal-status-button { border: 0; background: transparent; padding: 0; appearance: none; -webkit-appearance: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-active-page="trainer"] .crystal-status-button:active { transform: translateY(1px) scale(0.98); } body[data-active-page="trainer"] .energy-status-icon-wrap { position: relative; display: inline-flex; flex: 0 0 22px; width: 22px; height: 22px; } body[data-active-page="trainer"] .energy-status-button.has-energy-claim .energy-status-icon-wrap::after { content: "+"; position: absolute; top: auto; right: auto; left: 12px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg, #22c55e, #84cc16); color: #052e16; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 1000; line-height: 1; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12), 0 0 12px rgba(132, 204, 22, 0.62); animation: energyClaimPlusPulse 1.55s ease-in-out infinite; } body[data-active-page="trainer"] .energy-status-button.has-energy-claim .energy-icon { filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.55)); } body[data-active-page="trainer"] .energy-reward-fly { position: fixed; z-index: 10000; left: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 54px; height: 32px; padding: 0 10px; border-radius: 999px; background: linear-gradient(135deg, #22c55e, #84cc16); color: #052e16; font-size: 16px; font-weight: 1000; line-height: 1; pointer-events: none; box-shadow: 0 16px 28px rgba(34, 197, 94, 0.26), 0 0 0 4px rgba(132, 204, 22, 0.12); transform: translate(-50%, -50%) scale(0.72); animation: energyRewardFly 0.88s cubic-bezier(0.16, 1, 0.3, 1) forwards; } body[data-active-page="trainer"] .energy-reward-fly img { width: 18px; height: 18px; } body[data-active-page="trainer"] .is-energy-claiming { animation: energyCounterClaim 0.72s ease-out both; } body[data-active-page="trainer"] .energy-purchase-pop { position: fixed; inset: 0; z-index: 10030; display: grid; place-items: center; padding: 24px; background: rgba(2, 6, 23, 0.52); opacity: 0; pointer-events: none; backdrop-filter: blur(12px); transition: opacity 0.24s ease; } body[data-active-page="trainer"] .energy-purchase-pop.is-visible { opacity: 1; } body[data-active-page="trainer"] .energy-purchase-pop.is-hiding { opacity: 0; } body[data-active-page="trainer"] .energy-purchase-card { width: min(340px, calc(100vw - 36px)); padding: 18px 22px 22px; border-radius: 28px; background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.22), transparent 42%), linear-gradient(180deg, rgba(12, 22, 42, 0.98), rgba(5, 12, 24, 0.98)); box-shadow: 0 30px 74px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(77, 158, 255, 0.18); color: var(--text); transform: translateY(22px) scale(0.9); animation: energyPurchaseCardIn 0.46s cubic-bezier(0.16, 1, 0.3, 1) forwards; } body[data-active-page="trainer"] .energy-purchase-icon { width: 132px; height: 132px; margin: 0 auto 8px; border-radius: 0; display: grid; place-items: center; background: transparent; box-shadow: none; } body[data-active-page="trainer"] .energy-purchase-icon img { width: 126px; height: 126px; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.26)); animation: energyPurchaseIconPulse 1.15s ease-in-out infinite; } body[data-active-page="trainer"] .energy-purchase-copy { text-align: center; } body[data-active-page="trainer"] .energy-purchase-title { color: var(--text); font-size: 21px; font-weight: 1000; line-height: 1.05; } body[data-active-page="trainer"] .energy-purchase-counter { margin-top: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; color: #67e8f9; font-size: 34px; font-weight: 1000; line-height: 1; letter-spacing: 0; } body[data-active-page="trainer"] .energy-purchase-plus { padding: 6px 9px; border-radius: 999px; background: linear-gradient(135deg, #22c55e, #84cc16); color: #052e16; font-size: 15px; box-shadow: 0 10px 22px rgba(34, 197, 94, 0.2); } body[data-active-page="trainer"] .energy-purchase-track { height: 14px; margin-top: 18px; border-radius: 999px; overflow: hidden; background: rgba(148, 163, 184, 0.16); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28); } body[data-active-page="trainer"] .energy-purchase-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(255, 255, 255, 0.38), transparent 28%), linear-gradient(90deg, #22c55e, #84cc16, #38bdf8); box-shadow: 0 0 22px rgba(56, 189, 248, 0.42); transition: width 1.05s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes energyClaimPlusPulse { 0%, 100% { opacity: 0.72; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.08), 0 0 8px rgba(132, 204, 22, 0.42); } 50% { opacity: 1; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18), 0 0 18px rgba(132, 204, 22, 0.88); } } @keyframes energyPurchaseCardIn { 0% { opacity: 0; transform: translateY(22px) scale(0.9); } 64% { opacity: 1; transform: translateY(-4px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes energyPurchaseIconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08) rotate(-2deg); } } @keyframes energyRewardFly { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); } 14% { opacity: 1; transform: translate(-50%, -74%) scale(1.08); } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--energy-fly-x, 0px)), calc(-50% + var(--energy-fly-y, -80px))) scale(0.52); } } @keyframes energyCounterClaim { 0% { transform: scale(1); filter: none; } 40% { transform: scale(1.12); filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.75)); } 100% { transform: scale(1); filter: none; } } @keyframes trainerBlockIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Buttons with inline SVG icon — align icon + label */ body[data-active-page="trainer"] .btn-icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } body[data-active-page="trainer"] .btn-svg { width: 18px; height: 18px; flex-shrink: 0; } /* Nav visuals (bottom nav + side nav + tabs) come from the shared app_core.css so /trainer looks identical to /learn and the other standalone pages. Only trainer-specific BEHAVIOR lives below: screen-scoped show/hide and the student/adult link swap. */ @media (min-width: 700px) and (max-width: 1023px) { body[data-active-page="trainer"] { --bottom-nav-height: 108px; --bottom-nav-gap: 24px; } } @media (min-width: 1024px) { body[data-active-page="trainer"]:is( [data-active-screen="screen-lessons"], [data-active-screen="screen-categories"], [data-active-screen="screen-exam-variant-info"], [data-active-screen="screen-energy"], [data-active-screen="screen-profile"], [data-active-screen="screen-manual"], [data-active-screen="screen-role-profile"], [data-active-screen="screen-role-parent"], [data-active-screen="screen-role-tutor"] ) .screen.active .home-bottom-nav { display: none; } } body[data-active-page="trainer"] .desktop-side-nav { display: none; } body[data-active-page="trainer"] .desktop-service-rail { display: none; } @media (min-width: 1024px) { body[data-active-page="trainer"]:is( [data-active-screen="screen-lessons"], [data-active-screen="screen-categories"], [data-active-screen="screen-exam-variant-info"], [data-active-screen="screen-energy"], [data-active-screen="screen-profile"], [data-active-screen="screen-manual"], [data-active-screen="screen-role-profile"], [data-active-screen="screen-role-parent"], [data-active-screen="screen-role-tutor"] ) #app > .app-desktop-side-nav { /* Visuals come from app_core.css .desktop-side-nav; here we only re-show the nav (hidden by default on trainer screens) and lift it above the trainer's screen overlays. */ display: flex; z-index: 10020; } body[data-active-page="trainer"]:is( [data-active-screen="screen-role-profile"], [data-active-screen="screen-role-parent"], [data-active-screen="screen-role-tutor"] ) #app > .app-desktop-side-nav .desktop-student-link { display: none; } body[data-active-page="trainer"]:not(:is( [data-active-screen="screen-role-profile"], [data-active-screen="screen-role-parent"], [data-active-screen="screen-role-tutor"] )) #app > .app-desktop-side-nav .desktop-adult-link { display: none; } body[data-active-page="trainer"]:is( [data-active-screen="screen-lessons"], [data-active-screen="screen-categories"], [data-active-screen="screen-exam-variant-info"] ) .desktop-service-rail { position: fixed; top: calc(18px + var(--app-safe-top, 0px)); /* clear the mini-app top chrome */ right: 32px; z-index: 10010; display: grid; width: var(--desktop-service-rail-width, 340px); gap: 10px; align-content: start; } body[data-active-page="trainer"] .desktop-service-status { width: 100%; min-height: 46px; margin: 0; padding: 0; background: transparent !important; background-color: transparent !important; border: 0; box-shadow: none; backdrop-filter: none; justify-content: flex-start; gap: 8px; } body[data-active-page="trainer"] .desktop-service-status .subject-switcher, body[data-active-page="trainer"] .desktop-service-status .home-status-item, body[data-active-page="trainer"] .desktop-service-xp { background: transparent !important; background-color: transparent !important; border: 0; box-shadow: none; } body[data-active-page="trainer"] .desktop-service-status .desktop-service-subject-wrap { flex: 0 1 auto; max-width: 132px; margin-right: 0; } body[data-active-page="trainer"] .desktop-service-status .home-status-item { min-width: auto; } body[data-active-page="trainer"] .desktop-service-status .stat-streak-value { margin-left: auto; } body[data-active-page="trainer"] .desktop-service-xp { width: 100%; margin: 0; } body[data-active-page="trainer"] .desktop-service-subject-menu { right: 0; left: auto; width: 100%; max-width: 100%; border-right: 1px solid var(--card-border); border-left: 1px solid var(--card-border); border-radius: 14px; } body[data-active-page="trainer"] .desktop-service-subject-menu::before { right: 108px; left: auto; } body[data-active-page="trainer"]:is( [data-active-screen="screen-categories"], [data-active-screen="screen-energy"], [data-active-screen="screen-profile"] ) .screen.active { max-width: min(720px, 100%); margin-right: auto; margin-left: auto; padding-bottom: 48px; } body[data-active-page="trainer"][data-active-screen="screen-profile"] #screen-profile { margin-right: auto; margin-left: auto; } body[data-active-page="trainer"][data-active-screen="screen-energy"] #screen-energy { max-width: min(1320px, 100%); } body[data-active-page="trainer"][data-active-screen="screen-categories"] #screen-categories > .home-status-bar { display: none; } body[data-active-page="trainer"][data-active-screen="screen-categories"] #screen-categories { padding-top: 18px; } } body[data-active-page="trainer"] .home-tab.locked { opacity: 0.58; } body[data-active-page="trainer"].theme-light .subject-menu { background: var(--bg); } /* ── Buttons ── */ body[data-active-page="trainer"] .btn-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 24px; background: linear-gradient(135deg, var(--accent), var(--accent-soft)); color: var(--accent-text); border: none; border-radius: var(--radius-sm); font-size: 16px; font-weight: 700; cursor: pointer; transition: transform 0.15s, opacity 0.15s; margin-top: 8px; } body[data-active-page="trainer"] .btn-primary:active { transform: scale(0.97); opacity: 0.9; } body[data-active-page="trainer"] .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; } body[data-active-page="trainer"] .btn-icon { display: inline-flex; align-items: center; justify-content: center; } body[data-active-page="trainer"] .energy-cost-pill { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 34px; min-height: 22px; padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); font-size: 12px; font-weight: 950; line-height: 1; white-space: nowrap; } body[data-active-page="trainer"] .energy-cost-pill img { width: 15px; height: 15px; object-fit: contain; flex: 0 0 auto; } body[data-active-page="trainer"] .energy-cost-sign { margin-right: -1px; opacity: 0.85; } body[data-active-page="trainer"] .btn-primary .energy-cost-pill, body[data-active-page="trainer"] .solution-ai-btn .energy-cost-pill, body[data-active-page="trainer"] .ai-hint-fab .energy-cost-pill { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.16); color: currentColor; } body[data-active-page="trainer"] .btn-primary .energy-cost-pill img, body[data-active-page="trainer"] .solution-ai-btn .energy-cost-pill img, body[data-active-page="trainer"] .ai-hint-fab .energy-cost-pill img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } body[data-active-page="trainer"] .btn-icon svg { width: 20px; height: 20px; } body[data-active-page="trainer"] .stat-ico { width: 28px; height: 28px; color: var(--accent-soft); } /* Streak flame styles + keyframes come from the shared app_core.css; the trainer's size tweaks live in trainer.css. */ body[data-active-page="trainer"] .btn-back { background: var(--accent); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; font-weight: 700; box-shadow: 0 2px 8px rgba(47, 128, 237, 0.35); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s; } body[data-active-page="trainer"] .btn-back img, body[data-active-page="trainer"] .draft-board-back img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); pointer-events: none; } body[data-active-page="trainer"] .btn-back:active { transform: scale(0.94); background: var(--accent-soft, var(--accent)); } /* ── Screen Header ── */ body[data-active-page="trainer"] .screen-header { display: flex; align-items: center; /* Keep the title next to the back arrow (an unscoped .screen-header rule from rating.css can leak in via seamless nav and push it to the far right). */ justify-content: flex-start; gap: 14px; padding: 20px 0 16px; } body[data-active-page="trainer"] .screen-header h2 { font-size: 20px; font-weight: 700; } /* ── Category Grid ── */ body[data-active-page="trainer"] .category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; } body[data-active-page="trainer"] .category-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px 14px; cursor: pointer; transition: transform 0.15s, border-color 0.15s; text-align: center; } body[data-active-page="trainer"] .category-card:active { transform: scale(0.96); } body[data-active-page="trainer"] .cat-part1 { border-left: 3px solid var(--accent-soft); } body[data-active-page="trainer"] .cat-part2 { border: 2px solid #ef4444; } body[data-active-page="trainer"] .cat-part2 .cat-icon { color: #ef4444; } body[data-active-page="trainer"] .cat-practical { border-left: 3px solid #cfe4ff; } body[data-active-page="trainer"] .cat-algebra { border-left: 3px solid #cfe4ff; } body[data-active-page="trainer"] .cat-geometry { border-left: 3px solid #10b981; } body[data-active-page="trainer"] .cat-geometry .cat-icon { color: #10b981; } body[data-active-page="trainer"] .cat-russian-written { border: 2px solid #ef4444; background: radial-gradient(circle at 100% 0%, rgba(239, 68, 68, 0.14), transparent 42%), var(--card-bg); } body[data-active-page="trainer"] .cat-russian-written .cat-icon { color: #ef4444; } body[data-active-page="trainer"] .cat-russian-test { border-left: 3px solid var(--accent-soft); } body[data-active-page="trainer"] .cat-icon { display: flex; align-items: center; justify-content: center; color: var(--accent-soft); margin-bottom: 8px; } body[data-active-page="trainer"] .cat-icon svg { width: 28px; height: 28px; } body[data-active-page="trainer"] .cat-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; } body[data-active-page="trainer"] .cat-desc { font-size: 12px; color: var(--text-hint); } /* ── Divider ── */ body[data-active-page="trainer"] .divider-text { text-align: center; color: var(--text-hint); font-size: 13px; margin: 20px 0 16px; position: relative; } body[data-active-page="trainer"] .divider-text::before, body[data-active-page="trainer"] .divider-text::after { content: ''; position: absolute; top: 50%; width: 28%; height: 1px; background: var(--card-border); } body[data-active-page="trainer"] .divider-text::before { left: 0; } body[data-active-page="trainer"] .divider-text::after { right: 0; } /* ── Task Number Grid ── */ body[data-active-page="trainer"] .task-number-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } body[data-active-page="trainer"] .task-number-empty { grid-column: 1 / -1; padding: 14px; border-radius: var(--radius-sm); background: var(--card-bg); color: var(--text-hint); font-size: 14px; font-weight: 700; text-align: center; } body[data-active-page="trainer"] .task-num-btn { aspect-ratio: 1; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-sm); color: var(--text); font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; position: relative; } body[data-active-page="trainer"] .task-num-btn:active { transform: scale(0.92); } body[data-active-page="trainer"] .task-num-btn.disabled { opacity: 0.38; cursor: default; border-style: dashed; } body[data-active-page="trainer"] .task-num-btn.disabled:active { transform: none; } body[data-active-page="trainer"] .task-num-btn.part2 { border: 2px solid #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.08); } body[data-active-page="trainer"] .task-num-btn.russian-written { border: 2px solid #ef4444; color: #ef4444; background: rgba(239, 68, 68, 0.08); } body[data-active-page="trainer"] .task-num-btn.russian-written.disabled { opacity: 0.68; border-style: solid; } body[data-active-page="trainer"] .task-num-btn .progress-dot { position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; } body[data-active-page="trainer"] .progress-dot.green { background: var(--success); } body[data-active-page="trainer"] .progress-dot.yellow { background: var(--warning); } body[data-active-page="trainer"] .progress-dot.red { background: var(--error); } /* ── Tasks List ── */ body[data-active-page="trainer"] .tasks-list { display: flex; flex-direction: column; gap: 10px; } body[data-active-page="trainer"] .task-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 16px; cursor: pointer; transition: transform 0.15s; } body[data-active-page="trainer"] .task-card:active { transform: scale(0.98); } body[data-active-page="trainer"] .task-card-text { font-size: 14px; line-height: 1.5; white-space: pre-line; } body[data-active-page="trainer"] .task-card-badge { display: inline-block; margin-top: 10px; font-size: 11px; padding: 3px 10px; border-radius: 20px; background: rgba(108, 92, 231, 0.2); color: var(--link); } /* ── Solve Screen ── */ body[data-active-page="trainer"] .solve-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; } body[data-active-page="trainer"] .task-meta-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 11px; } body[data-active-page="trainer"] .task-points { background: rgba(77, 158, 255, 0.15); color: var(--accent-soft); padding: 2px 8px; border-radius: 10px; font-weight: 700; letter-spacing: 0.02em; } body[data-active-page="trainer"] .task-source { color: var(--text-hint); font-style: italic; } body[data-active-page="trainer"] .solution-box { margin-top: 12px; padding: 14px 16px; background: rgba(77, 158, 255, 0.06); border: 1px solid rgba(77, 158, 255, 0.2); border-radius: var(--radius-sm); font-size: 15px; line-height: 1.6; text-align: left; white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; box-sizing: border-box; } body[data-active-page="trainer"] .solution-box .katex-display { margin: 0.5em 0; overflow-x: auto; overflow-y: hidden; max-width: 100%; } body[data-active-page="trainer"] .solution-box .katex-display > .katex { white-space: nowrap; } body[data-active-page="trainer"] .solution-box .katex { max-width: 100%; white-space: normal; } body[data-active-page="trainer"] .btn-solution { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; } body[data-active-page="trainer"] .btn-solution .ai-hint-icon { width: 20px; height: 20px; display: inline-flex; flex: 0 0 auto; } body[data-active-page="trainer"] .btn-giveup { margin-top: 8px; width: 100%; font-size: 14px; } body[data-active-page="trainer"] .solution-ai-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; margin: 14px 0 0; padding: 0 12px; border: none; border-radius: 999px; background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); -webkit-tap-highlight-color: transparent; transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease; } body[data-active-page="trainer"] .solution-ai-btn:active { transform: scale(0.96); } body[data-active-page="trainer"] .solution-ai-btn .ai-hint-icon { width: 20px; height: 20px; display: inline-flex; flex: 0 0 auto; } body[data-active-page="trainer"] .solution-box .solution-text { margin-top: 14px; } body[data-active-page="trainer"] .solution-img { display: block; max-width: 100%; margin: 0 0 12px; border-radius: var(--radius-sm); cursor: zoom-in; } body[data-active-page="trainer"] .task-text { font-size: 16px; line-height: 1.7; white-space: pre-line; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } body[data-active-page="trainer"] .task-image { margin: 14px 0 0; /* contained in the card, like the solution image */ max-width: min(85%, 360px); /* smaller condition figures on all viewports */ border-radius: var(--radius-sm); overflow: hidden; } body[data-active-page="trainer"] .task-image img { width: 100%; border-radius: 0; } body[data-active-page="trainer"] .task-img-zoom { background: #fff; } body[data-active-page="trainer"] .task-img-zoom .pinch-img { width: 100%; height: auto; max-height: 44vh; object-fit: contain; display: block; } /* ── Options ── */ body[data-active-page="trainer"] .options-container { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } body[data-active-page="trainer"] .option-btn { background: var(--card-bg); border: 2px solid var(--card-border); border-radius: var(--radius-sm); padding: 14px 16px; color: var(--text); font-size: 15px; cursor: pointer; transition: all 0.15s; text-align: left; } body[data-active-page="trainer"] .option-btn:active { transform: scale(0.98); } body[data-active-page="trainer"] .option-btn.selected { border-color: var(--accent); background: rgba(108, 92, 231, 0.15); } body[data-active-page="trainer"] .option-btn.correct { border-color: var(--success); background: rgba(0, 184, 148, 0.15); } body[data-active-page="trainer"] .option-btn.wrong { border-color: var(--error); background: rgba(225, 112, 85, 0.15); } /* ── Answer Input ── */ body[data-active-page="trainer"] .answer-container { margin-bottom: 16px; } body[data-active-page="trainer"] .input-label { display: block; font-size: 14px; color: var(--text-hint); margin-bottom: 8px; } body[data-active-page="trainer"] .answer-input-row { display: flex; align-items: stretch; gap: 8px; scroll-margin-bottom: 140px; } body[data-active-page="trainer"].ai-hint-sheet-open .answer-input-row { margin-top: 10px; scroll-margin-bottom: 220px; } body[data-active-page="trainer"] .answer-input { flex: 1 1 auto; min-width: 0; padding: 14px 16px; background: var(--card-bg); border: 2px solid var(--card-border); border-radius: var(--radius-sm); color: var(--text); font-size: 18px; font-weight: 600; outline: none; transition: border-color 0.2s; } body[data-active-page="trainer"] .answer-input:focus { border-color: var(--accent); } body[data-active-page="trainer"] .answer-input::placeholder { color: var(--text-hint); font-weight: 400; } body[data-active-page="trainer"] .answer-input-row .btn-submit { flex: 0 0 auto; width: auto; min-width: 98px; margin-top: 0; padding: 0 14px; background: var(--accent); color: var(--accent-text); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); font-size: 15px; white-space: nowrap; } @media (max-width: 380px) { body[data-active-page="trainer"] .answer-input-row { gap: 6px; } body[data-active-page="trainer"] .answer-input { padding-right: 12px; padding-left: 12px; font-size: 16px; } body[data-active-page="trainer"] .answer-input-row .btn-submit { min-width: 90px; padding-right: 12px; padding-left: 12px; } } /* ── Upload ── */ body[data-active-page="trainer"] .upload-container { margin-bottom: 16px; } body[data-active-page="trainer"] .upload-area { border: 2px dashed var(--card-border); border-radius: var(--radius); padding: 32px 16px; text-align: center; cursor: pointer; transition: border-color 0.2s; } body[data-active-page="trainer"] .upload-area:active { border-color: var(--accent); } body[data-active-page="trainer"] .upload-icon { display: flex; align-items: center; justify-content: center; color: var(--accent-soft); margin-bottom: 8px; } body[data-active-page="trainer"] .upload-icon svg { width: 40px; height: 40px; } body[data-active-page="trainer"] .upload-text { font-size: 14px; color: var(--text); margin-bottom: 4px; } body[data-active-page="trainer"] .upload-hint { font-size: 12px; color: var(--text-hint); } body[data-active-page="trainer"] .file-preview { margin-top: 12px; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: var(--card-bg); } body[data-active-page="trainer"] .file-preview-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; padding: 8px; } body[data-active-page="trainer"] .file-preview-item { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--card-border); background: var(--bg-soft); } body[data-active-page="trainer"] .file-preview-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } body[data-active-page="trainer"] .file-preview-index { position: absolute; right: 6px; bottom: 6px; padding: 3px 6px; border-radius: 999px; color: #fff; background: rgba(10, 20, 36, 0.72); font-size: 11px; font-weight: 800; } body[data-active-page="trainer"] .file-preview-remove { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(10, 20, 36, 0.76); color: #fff; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } body[data-active-page="trainer"] .file-preview-remove:active { transform: scale(0.94); } body[data-active-page="trainer"] .upload-container.is-checking-solution .upload-area, body[data-active-page="trainer"] .upload-container.is-checking-solution .file-preview-remove { pointer-events: none; } body[data-active-page="trainer"] .upload-container.is-checking-solution .file-preview { opacity: 0.72; } body[data-active-page="trainer"] .checking-dots { display: inline-flex; width: 22px; justify-content: flex-start; margin-left: -6px; } body[data-active-page="trainer"] .checking-dots span { opacity: 0; animation: solution-checking-dot 1.15s steps(1, end) infinite; } body[data-active-page="trainer"] .checking-dots span:nth-child(2) { animation-delay: 0.22s; } body[data-active-page="trainer"] .checking-dots span:nth-child(3) { animation-delay: 0.44s; } body[data-active-page="trainer"] .upload-container.is-checking-solution #btn-upload:disabled { opacity: 0.82; } body[data-active-page="trainer"] .upload-container.is-checking-solution #btn-upload:disabled .checking-dots { opacity: 1; } @keyframes solution-checking-dot { 0%, 24% { opacity: 0; } 25%, 100% { opacity: 1; } } body[data-active-page="trainer"] .file-name { padding: 8px 12px; font-size: 12px; color: var(--text-hint); background: var(--card-bg); } /* ── Result ── */ body[data-active-page="trainer"] .result-container { text-align: center; padding: 24px 0; animation: fadeSlideIn 0.4s ease; } body[data-active-page="trainer"] .result-icon { font-size: 64px; margin-bottom: 12px; } body[data-active-page="trainer"] .result-icon .result-gif { width: 140px; height: 140px; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(30, 111, 255, 0.3)); } body[data-active-page="trainer"] .result-text { font-size: 20px; font-weight: 700; margin-bottom: 8px; } body[data-active-page="trainer"] .result-answer { font-size: 14px; color: var(--text-hint); margin-bottom: 20px; } body[data-active-page="trainer"] .solution-review-result { margin: 8px auto 0; max-width: 360px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--card-border); background: var(--card-bg); text-align: left; } body[data-active-page="trainer"] .solution-review-score { color: var(--text); font-size: 15px; font-weight: 900; line-height: 1.25; } body[data-active-page="trainer"] .solution-review-feedback { margin-top: 6px; color: var(--text-hint); font-size: 13px; line-height: 1.35; } body[data-active-page="trainer"] .solution-review-retry { width: 100%; min-height: 44px; margin-top: 12px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--card-border)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 14%, var(--bg-secondary)); color: var(--text); font: inherit; font-size: 14px; font-weight: 900; cursor: pointer; } body[data-active-page="trainer"] .solution-review-retry:disabled { opacity: 0.65; cursor: default; } body[data-active-page="trainer"] .ai-hint-rating { width: 100%; margin: 0 0 18px; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary)); animation: fadeSlideIn 0.24s ease; } body[data-active-page="trainer"] .ai-hint-rating-title { color: var(--text); font-size: 15px; font-weight: 800; line-height: 1.25; } body[data-active-page="trainer"] .ai-hint-rating-subtitle { margin-top: 4px; color: var(--text-hint); font-size: 12px; font-weight: 600; } body[data-active-page="trainer"] .ai-hint-rating-stars { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } body[data-active-page="trainer"] .ai-hint-rating-star { height: 42px; border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--card-border)); border-radius: 12px; background: color-mix(in srgb, var(--warning) 8%, transparent); color: var(--warning); font-size: 22px; font-weight: 900; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.14s ease, background 0.14s ease, border-color 0.14s ease; } body[data-active-page="trainer"] .ai-hint-rating-star:active { transform: scale(0.96); } body[data-active-page="trainer"] .ai-hint-rating-star.is-selected, body[data-active-page="trainer"] .ai-hint-rating-star:hover { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 22%, transparent); } body[data-active-page="trainer"] .ai-hint-rating-thanks { color: var(--text); font-size: 14px; font-weight: 800; } /* ── Submit Button ── */ body[data-active-page="trainer"] .btn-submit { margin-top: 12px; } /* ── KaTeX overrides ── */ body[data-active-page="trainer"] .task-text .katex-display { margin: 12px 0; overflow-x: auto; overflow-y: hidden; } body[data-active-page="trainer"] .task-text .katex { font-size: 1.1em; color: var(--text); } /* ── Secondary button ── */ body[data-active-page="trainer"] .btn-secondary { display: flex; align-items: center; justify-content: center; width: 100%; padding: 13px 24px; background: var(--card-bg); color: var(--text-hint); border: 1px solid var(--card-border); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 8px; transition: background 0.15s; } body[data-active-page="trainer"] .btn-next-task { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } body[data-active-page="trainer"] .btn-secondary:active { background: rgba(255,255,255,0.1); } /* ── All-solved banner ── */ body[data-active-page="trainer"] .all-solved-banner { background: linear-gradient(135deg, rgba(253,203,110,0.15), rgba(253,203,110,0.05)); border: 1px solid rgba(253,203,110,0.3); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; color: var(--warning); margin-bottom: 12px; text-align: center; } /* ── Loading overlay ── */ body[data-active-page="trainer"] #loading-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(10px) saturate(0.6); -webkit-backdrop-filter: blur(10px) saturate(0.6); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: overlay-fade 0.2s ease; } body[data-active-page="trainer"] .loading-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 36px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); min-width: 220px; } body[data-active-page="trainer"] .loading-mascot { width: 96px; height: 96px; object-fit: contain; image-rendering: auto; /* GIF has its own animation — no bounce needed */ } /* Emoji fallback if the GIF fails to load */ body[data-active-page="trainer"] .loading-mascot-fallback { font-size: 44px; line-height: 1; animation: mascot-bounce 1.2s ease-in-out infinite; } body[data-active-page="trainer"] .loading-dots { display: flex; gap: 7px; } body[data-active-page="trainer"] .loading-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-soft); animation: dot-pulse 1.1s ease-in-out infinite; } body[data-active-page="trainer"] .loading-dots span:nth-child(2) { animation-delay: 0.18s; } body[data-active-page="trainer"] .loading-dots span:nth-child(3) { animation-delay: 0.36s; } body[data-active-page="trainer"] .loading-text { font-size: 14px; font-weight: 500; color: var(--text); opacity: 0.88; text-align: center; letter-spacing: 0.2px; } @keyframes overlay-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes mascot-bounce { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.05); } } @keyframes dot-pulse { 0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; } 40% { transform: scale(1.15); opacity: 1; } } /* Keep the old class for back-compat if anything references it */ body[data-active-page="trainer"] .loading-spinner { display: none; } /* ── Toast ── */ body[data-active-page="trainer"] #toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translate(-50%, 120%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 12px 18px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--text); font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; z-index: 9998; transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.2s ease; } body[data-active-page="trainer"] #toast.visible { transform: translate(-50%, 0); opacity: 1; } body[data-active-page="trainer"] .toast-icon { font-size: 18px; line-height: 1; flex-shrink: 0; } body[data-active-page="trainer"] .toast-text { flex: 1; min-width: 0; } /* Tone per type — subtle left border, icon hue */ body[data-active-page="trainer"] .toast-warn { border-left: 3px solid var(--warning); } body[data-active-page="trainer"] .toast-error { border-left: 3px solid var(--error); } body[data-active-page="trainer"] .toast-success { border-left: 3px solid var(--success); } body[data-active-page="trainer"] .toast-info { border-left: 3px solid var(--accent); } /* ── Shake animation for emphasising an input ── */ body[data-active-page="trainer"] .shake { animation: shake-x 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } @keyframes shake-x { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX( 4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX( 6px); } } /* ── Утилиты ── */ body[data-active-page="trainer"] .hidden { display: none !important; } /* Адаптивность для мелких экранов */ @media (max-width: 360px) { body[data-active-page="trainer"] .task-number-grid { grid-template-columns: repeat(4, 1fr); } body[data-active-page="trainer"] .stats-row { gap: 6px; } body[data-active-page="trainer"] .stat-value { font-size: 20px; } } /* ── Manual (Об экзамене) ── */ body[data-active-page="trainer"] #screen-manual > .manual-hero, body[data-active-page="trainer"] #screen-manual > .card, body[data-active-page="trainer"] #screen-manual > .info-grid { margin-left: -12px !important; margin-right: -12px !important; } body[data-active-page="trainer"] .manual-hero { margin: 16px 0; padding: 24px 20px; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent-soft) 100%); color: #fff; text-align: center; box-shadow: 0 10px 30px rgba(108, 92, 231, 0.35); } body[data-active-page="trainer"] .hero-big { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -2px; } body[data-active-page="trainer"] .hero-lbl { margin-top: 6px; font-size: 12px; opacity: 0.9; text-transform: uppercase; letter-spacing: 1.2px; } body[data-active-page="trainer"] .hero-sub { margin-top: 10px; font-size: 14px; font-weight: 600; opacity: 0.95; } body[data-active-page="trainer"] .exam-date-card { text-align: center; } body[data-active-page="trainer"] .exam-date-row { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; } body[data-active-page="trainer"] .exam-date-big { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.5px; } body[data-active-page="trainer"] .exam-date-sub { font-size: 13px; font-weight: 600; color: var(--accent-strong); background: rgba(108, 92, 231, 0.1); padding: 6px 14px; border-radius: 999px; } body[data-active-page="trainer"] .exam-date-sub.urgent { color: var(--error); background: rgba(235, 87, 87, 0.12); } body[data-active-page="trainer"] .exam-date-sub.past { color: var(--text-hint); background: var(--card-border); } body[data-active-page="trainer"] .ref-toggle-btn { width: 100%; margin-top: 16px; } body[data-active-page="trainer"] .reference-materials { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } body[data-active-page="trainer"] .reference-img { width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: #fff; cursor: zoom-in; } body[data-active-page="trainer"] .reference-list { display: grid; gap: 10px; } body[data-active-page="trainer"] .reference-item { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--card-border); border-radius: var(--radius-sm); background: rgba(207, 228, 255, 0.06); } body[data-active-page="trainer"] .reference-item b { color: var(--text); font-size: 14px; } body[data-active-page="trainer"] .reference-item span { color: var(--text-hint); font-size: 12px; line-height: 1.45; } body[data-active-page="trainer"] .reference-item.danger { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.08); } body[data-active-page="trainer"] .reference-item.danger b { color: #f87171; } body[data-active-page="trainer"] .ege-ref-card { width: 100%; max-width: 100%; overflow: hidden; padding: 16px 10px; border: 1px solid var(--card-border); border-radius: var(--radius-sm); background: #fff; color: #111827; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); } body[data-active-page="trainer"] .ege-ref-title { margin-bottom: 14px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(24px, 7vw, 38px); font-weight: 800; line-height: 1.1; text-align: center; } body[data-active-page="trainer"] .ege-ref-formula { overflow: hidden; padding: 2px 0; color: #111827; font-size: clamp(13px, 3.6vw, 24px); line-height: 1.25; } body[data-active-page="trainer"] .ege-ref-formula .katex-display { max-width: 100%; margin: 0.45em 0; overflow: visible; } body[data-active-page="trainer"] .ege-ref-formula .katex { max-width: 100%; white-space: normal; } body[data-active-page="trainer"] .ege-ref-formula .base { max-width: 100%; } body[data-active-page="trainer"] .criteria-block { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } body[data-active-page="trainer"] .criteria-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-sm); padding: 12px; } body[data-active-page="trainer"] .criteria-head { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } body[data-active-page="trainer"] .criteria-topic { font-size: 11px; font-weight: 500; color: var(--text-hint); text-transform: uppercase; letter-spacing: 0.6px; } body[data-active-page="trainer"] .criteria-table { width: 100%; border-collapse: collapse; font-size: 12px; } body[data-active-page="trainer"] .criteria-table th, body[data-active-page="trainer"] .criteria-table td { border: 1px solid var(--card-border); padding: 6px 8px; text-align: left; vertical-align: top; color: var(--text); } body[data-active-page="trainer"] .criteria-table th { background: rgba(108, 92, 231, 0.08); font-weight: 700; } body[data-active-page="trainer"] .criteria-table th:last-child, body[data-active-page="trainer"] .criteria-table td:last-child { text-align: center; width: 48px; font-weight: 700; } body[data-active-page="trainer"] .criteria-table .crit-max td { font-style: italic; background: rgba(108, 92, 231, 0.05); } body[data-active-page="trainer"] .img-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 9999; overflow: hidden; } body[data-active-page="trainer"] .img-lightbox-viewport { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pinch-zoom; display: flex; align-items: center; justify-content: center; padding: 16px; } body[data-active-page="trainer"] .img-lightbox-viewport img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; background: #fff; transform-origin: center center; transition: transform 0.2s; touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } body[data-active-page="trainer"] .img-lightbox-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.3); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* Floating "Справочный материал" tab on solve screen */ body[data-active-page="trainer"] .ref-fab { position: fixed; right: 0; top: calc(var(--app-safe-top) + 8px); transform: none; z-index: 60; background: var(--accent); color: #fff; border: none; border-radius: 10px 0 0 10px; padding: 14px 6px; font-size: 12px; line-height: 1.1; font-weight: 600; letter-spacing: 0.3px; box-shadow: 0 4px 12px rgba(0,0,0,0.25); cursor: pointer; writing-mode: vertical-rl; text-orientation: mixed; text-align: center; white-space: nowrap; } body[data-active-page="trainer"] .ref-fab-label { display: inline; } body[data-active-page="trainer"] .ref-fab-label br { display: none; } body[data-active-page="trainer"] .ref-fab:active { transform: scale(0.96); } body[data-active-page="trainer"] .ref-drawer { position: fixed; inset: 0; background: var(--bg, #0f1419); z-index: 9998; display: none; } body[data-active-page="trainer"] .ref-drawer.open { display: block; } body[data-active-page="trainer"] .ref-drawer-panel { background: var(--bg, #0f1419); width: 100%; height: 100%; overflow-y: auto; padding: calc(12px + var(--app-safe-top, env(safe-area-inset-top, 0px))) 14px 24px; animation: ref-slide 0.22s ease-out; -webkit-overflow-scrolling: touch; } @keyframes ref-slide { from { transform: translateX(100%); } to { transform: translateX(0); } } body[data-active-page="trainer"] .ref-section-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 12px 0 8px; opacity: 0.9; text-align: center; } body[data-active-page="trainer"] .ref-section-title:first-child { margin-top: 4px; } body[data-active-page="trainer"] .ref-drawer-head { display: flex; align-items: center; gap: 14px; padding: 8px 0 16px; margin-bottom: 0; color: var(--text); } body[data-active-page="trainer"] .ref-drawer-head h2 { font-size: 20px; font-weight: 700; } body[data-active-page="trainer"] .ref-drawer-close { background: var(--accent); border: none; color: #fff; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.25); } body[data-active-page="trainer"] .ref-drawer-close:active { transform: scale(0.94); } body[data-active-page="trainer"] .ref-drawer-body { display: flex; flex-direction: column; gap: 12px; } body[data-active-page="trainer"] .ref-zoom { width: 100%; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--card-border); background: #fff; touch-action: pan-y pinch-zoom; position: relative; } body[data-active-page="trainer"] .ref-zoom .pinch-img { display: block; width: 100%; height: auto; transform-origin: 0 0; will-change: transform; user-select: none; -webkit-user-drag: none; cursor: default; border: none; border-radius: 0; background: transparent; } /* ── Markdown tables in task text ── */ body[data-active-page="trainer"] .task-table-wrap { margin: 12px -12px; /* slight bleed past card padding for more room */ padding: 0 12px; display: block; width: calc(100% + 24px); max-width: calc(100% + 24px); box-sizing: border-box; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; } body[data-active-page="trainer"] .task-table { width: max-content; /* content-sized; overflow handled by wrapper */ min-width: 100%; /* but fill card when content is narrow */ border-collapse: collapse; font-size: 13px; background: rgba(255, 255, 255, 0.03); border-radius: var(--radius-sm); overflow: hidden; table-layout: auto; } body[data-active-page="trainer"] .task-table th, body[data-active-page="trainer"] .task-table td { padding: 8px 10px; border: 1px solid var(--card-border); text-align: left; vertical-align: top; min-width: 70px; /* prevent single-char columns */ word-break: normal; /* break only at word boundaries */ overflow-wrap: break-word; /* wrap long words only when needed */ hyphens: none; } body[data-active-page="trainer"] .task-table th { background: rgba(108, 92, 231, 0.2); font-size: 12px; font-weight: 700; color: var(--text); } body[data-active-page="trainer"] .task-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } body[data-active-page="trainer"] .solution-box .task-table-wrap, body[data-active-page="trainer"] .exam-attempt-result-detail-block .task-table-wrap { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; width: 100%; max-width: 100%; } body[data-active-page="trainer"] .solution-box .solution-text, body[data-active-page="trainer"] .exam-attempt-result-solution-text, body[data-active-page="trainer"] .exam-attempt-result-task-text { min-width: 0; max-width: 100%; overflow-x: hidden; } body[data-active-page="trainer"] .task-text b { color: var(--text); font-weight: 700; } /* Zoomable task images + lightbox */ body[data-active-page="trainer"] .task-image img.zoomable { cursor: zoom-in; transition: transform 0.15s; } body[data-active-page="trainer"] .task-image img.zoomable:hover { transform: scale(1.02); } body[data-active-page="trainer"] .image-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; padding: 20px; animation: lightbox-fade 0.18s ease-out; cursor: zoom-out; } /* Skills chart fullscreen modal */ body[data-active-page="trainer"] #spider-chart-wrap { cursor: zoom-in; position: relative; } body[data-active-page="trainer"] #spider-chart-wrap:active { transform: scale(0.98); transition: transform 0.1s; } body[data-active-page="trainer"] .chart-modal { position: fixed; inset: 0; z-index: 9999; background: var(--bg, #0b0d12); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; animation: lightbox-fade 0.18s ease-out; } body[data-active-page="trainer"] .chart-modal-title { color: var(--text, #fff); font-size: 15px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.85; margin-bottom: 12px; text-align: center; } body[data-active-page="trainer"] .chart-modal-inner { width: 100%; max-width: 560px; display: flex; flex-direction: column; align-items: center; } body[data-active-page="trainer"] .chart-modal-inner canvas { max-width: 100%; height: auto; } body[data-active-page="trainer"] .chart-modal-close { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; border: none; background: var(--card-bg, rgba(255, 255, 255, 0.12)); color: var(--text, #fff); font-size: 28px; line-height: 1; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } @keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } } body[data-active-page="trainer"] .image-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); user-select: none; -webkit-user-drag: none; } body[data-active-page="trainer"] .lightbox-close { position: absolute; top: 16px; right: 20px; width: 44px; height: 44px; border: none; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 28px; line-height: 1; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } body[data-active-page="trainer"] .lightbox-close:hover { background: rgba(255, 255, 255, 0.25); } /* ──────────────────────────────────────────── LIGHT THEME (Telegram colorScheme === 'light') ──────────────────────────────────────────── */ body[data-active-page="trainer"].theme-light { --bg: #f4f8ff; /* same page tint as the lessons (обучение) shell */ --bg-secondary: #f1f4f9; --text: #0b1222; --text-hint: #6b7a99; --accent: #1e6fff; --accent-text: #ffffff; --link: #1e6fff; --card-bg: rgba(30, 111, 255, 0.05); --card-border: rgba(30, 111, 255, 0.18); --scrollbar-track: rgba(225, 235, 252, 0.95); --scrollbar-thumb-solid: #1e6fff; --scrollbar-thumb-hover: #0d5be8; } body[data-active-page="trainer"].theme-dark { --bg: #05080f; --bg-secondary: #0b1222; --text: #eef2ff; --text-hint: #7a8aa8; --accent: #1e6fff; --accent-text: #ffffff; --link: #60a5fa; --card-bg: rgba(30, 111, 255, 0.06); --card-border: rgba(77, 158, 255, 0.14); } /* Progress / bars / subtle surfaces */ body[data-active-page="trainer"].theme-light .predict-bar { background: rgba(15, 25, 45, 0.08); } body[data-active-page="trainer"].theme-light .btn-secondary:active { background: rgba(15, 25, 45, 0.08); } body[data-active-page="trainer"].theme-light .btn-secondary { border-color: rgba(15, 25, 45, 0.12); } /* Chips / pills / soft-blue panels used as table-of-categories */ body[data-active-page="trainer"].theme-light [style*="rgba(77, 158, 255, 0.06)"], body[data-active-page="trainer"].theme-light .category-card, body[data-active-page="trainer"].theme-light .info-card { background: rgba(30, 111, 255, 0.04); border-color: rgba(30, 111, 255, 0.14); } /* Lightbox / ref drawer close button contrast */ body[data-active-page="trainer"].theme-light .ref-drawer { background: var(--bg); color: var(--text); } body[data-active-page="trainer"].theme-light .ref-drawer-head { background: transparent; color: var(--text); } /* Result toasts / cards that relied on dark background */ body[data-active-page="trainer"].theme-light .task-card, body[data-active-page="trainer"].theme-light .stat-card, body[data-active-page="trainer"].theme-light .journal-item, body[data-active-page="trainer"].theme-light .option-item { background: #ffffff; border: 1px solid rgba(15, 25, 45, 0.08); box-shadow: 0 1px 2px rgba(15, 25, 45, 0.04); } /* Scoreboard gradient row (login/home mascot area) */ body[data-active-page="trainer"].theme-light .stat-flame, body[data-active-page="trainer"].theme-light .home-mascot-gif { filter: drop-shadow(0 4px 10px rgba(30, 111, 255, 0.22)); } /* Inputs */ body[data-active-page="trainer"].theme-light input[type="text"], body[data-active-page="trainer"].theme-light input[type="number"], body[data-active-page="trainer"].theme-light textarea { background: #ffffff; color: var(--text); border: 1px solid rgba(15, 25, 45, 0.15); } body[data-active-page="trainer"].theme-light input::placeholder, body[data-active-page="trainer"].theme-light textarea::placeholder { color: var(--text-hint); } /* Light-theme images generally have white backgrounds; mix-blend helps black line-art look native */ body[data-active-page="trainer"].theme-light .task-image img, body[data-active-page="trainer"].theme-light .ref-zoom img { background: #ffffff; } /* Onboarding gate card */ body[data-active-page="trainer"].theme-light .tg-gate-card { background: #ffffff; color: #0b1222; } /* Gradients that were tuned for dark theme */ body[data-active-page="trainer"].theme-light .result-overlay, body[data-active-page="trainer"].theme-light .hero-card { background: linear-gradient(135deg, #eaf1ff, #f7faff); color: #0b1222; }