/* ========================================================= LIGHT MODE — activated by WCAG-audited dark text on light surfaces. Loads after styles.css + ux.css so these overrides win. Colored buttons (purple/blue gradients) keep white text (already AA). ========================================================= */ :root[data-theme="light"]{ --bg:#f5f7fc; --bg2:#e8edf7; --ink:#181d33; /* primary text ~13:1 on white */ --muted:#566183; /* secondary text ~4.7:1 */ --glass:rgba(17,24,48,.045); --glass-2:rgba(17,24,48,.07); --stroke:rgba(17,24,48,.16); --gold:#b7791f; /* hint text readable on light */ --shadow: 0 18px 44px -22px rgba(28,40,90,.30), 0 6px 18px -10px rgba(79,124,245,.22); } /* page background: soft light gradient (no dark radials) */ [data-theme="light"] body{ color:var(--ink); background: radial-gradient(1100px 560px at 8% -12%, rgba(124,92,255,.12), transparent 60%), radial-gradient(820px 460px at 112% 6%, rgba(79,124,245,.10), transparent 60%), linear-gradient(180deg,#ffffff,#f5f7fc 45%,#eef1f8) !important; } /* dim the decorative particle layer so it doesn't muddy the light bg */ [data-theme="light"] canvas#particles{ opacity:.22; } /* surfaces become light translucent (glass vars already dark-translucent) */ [data-theme="light"] header.top, [data-theme="light"] .card, [data-theme="light"] #modeCard, [data-theme="light"] .q-card{ background:linear-gradient(180deg, var(--glass-2), var(--glass)) !important; } /* ---- text that was hardcoded light → make dark on light ---- */ [data-theme="light"] .sol-step{ color:rgba(24,29,51,.86) !important; } [data-theme="light"] .sol-calc{ color:#1f2740 !important; } [data-theme="light"] #mcqArea .opt-label{ color:rgba(24,29,51,.6) !important; } [data-theme="light"] .vx-q{ color:#181d33 !important; } [data-theme="light"] .sol-qrecap .sol-q{ color:var(--ink) !important; } [data-theme="light"] .sol-qrecap .sol-opts{ color:rgba(24,29,51,.82) !important; } [data-theme="light"] .sol-drawer-body .sol-step{ color:rgba(24,29,51,.86) !important; } /* dividers / hairlines that used white rgba → dark hairline */ [data-theme="light"] .sol-divider{ background:rgba(17,24,48,.14) !important; } /* hint / feedback readable */ [data-theme="light"] .feedback.hint{ color:#b7791f !important; } /* solution heading accent: darker purple for AA on white */ [data-theme="light"] #solTitle{ color:#6d28d9 !important; } [data-theme="light"] .sol-qrecap .sol-opt-n{ color:#6d28d9 !important; } [data-theme="light"] #qText.attempted{ color:var(--ink) !important; } [data-theme="light"] .vx.answered .vx-q{ color:#181d33 !important; } /* ---- variant drawer (light): white header + cards, dark text, landing-style buttons ---- */ [data-theme="light"] .pon-dh{ background:#ffffff !important; } [data-theme="light"] .vx{ background:#ffffff !important; } [data-theme="light"] .vx-opt.correct{ color:#15803d !important; border-color:#16a34a !important; background:rgba(34,197,94,.12) !important; } [data-theme="light"] .vx-opt.wrong{ color:#b91c1c !important; border-color:#dc2626 !important; background:rgba(239,68,68,.10) !important; } [data-theme="light"] .vx-hint-btn{ background:#ffffff !important; } [data-theme="light"] .vx-sol-btn{ background:#ffffff !important; border:1px solid rgba(124,92,255,.45) !important; color:#6d28d9 !important; } [data-theme="light"] .vx-dice{ background:#ffffff !important; border:1px solid var(--stroke) !important; } /* subtle fills that were white-translucent → faint dark so they show on light */ [data-theme="light"] .vx-opt, [data-theme="light"] .hyb-arrow, [data-theme="light"] .tplc-bat, [data-theme="light"] .pon-chip, [data-theme="light"] .progress{ background:rgba(17,24,48,.05) !important; } /* drawer question options: no resting fill (keep the outlined box only) */ [data-theme="light"] .vx-opt{ background:transparent !important; } [data-theme="light"] .sol-drawer-head{ background:rgba(17,24,48,.04) !important; } [data-theme="light"] .hyb-arrow:hover, [data-theme="light"] .hyb-browse:hover{ background:rgba(17,24,48,.08) !important; } /* ---- mobile: keep the uniform full-screen colour, but light ---- */ @media (max-width:640px){ /* mobile light: the page background becomes pure white too, so when the white solution/content ends there is no grey "cut" — everything merges. */ [data-theme="light"] body{ background:#ffffff !important; } [data-theme="light"] #modeCard, [data-theme="light"] .q-card{ background:#ffffff !important; } /* page BEHIND the sticky header stays plain white (no grey / no tint) */ html[data-theme="light"] body{ background:#ffffff !important; } /* sticky header card (mobile, LIGHT): the header itself now carries the same blue->purple gradient as the active Question Setup pill. Everything inside flips to white / light for contrast. Shape / sticky / padding live in ux.css (both modes); only the colour is here. */ /* html-prefixed so this beats the later non-media review-pass rule that paints header.top white (media queries don't add specificity) */ html[data-theme="light"] header.top{ /* darker than the pill: deep purple -> indigo -> navy blue (no bright cyan) */ background:linear-gradient(135deg, #6320cf 0%, #5338d4 50%, #3a47bd 100%) !important; border:1px solid rgba(255,255,255,.18) !important; box-shadow:0 14px 32px -16px rgba(58,71,189,.6) !important; } /* heading -> white */ [data-theme="light"] header.top .page-title{ color:#ffffff !important; } /* back button -> soft white (slightly transparent), icon follows via currentColor */ [data-theme="light"] header.top .backbtn{ color:rgba(255,255,255,.92) !important; opacity:1 !important; } [data-theme="light"] header.top .backbtn:hover{ background:rgba(255,255,255,.16) !important; } /* language selector -> translucent white glass + white text + white arrow */ [data-theme="light"] header.top .q-lang-select{ background-color:rgba(255,255,255,.13) !important; /* -20% from .16 */ border-color:rgba(255,255,255,.34) !important; /* -20% from .42 */ color:#ffffff !important; background-image:linear-gradient(45deg,transparent 50%,#ffffff 50%),linear-gradient(135deg,#ffffff 50%,transparent 50%) !important; } /* tier chips (10th+/12th+/Grad+) -> translucent white so they pop against the gradient; the coloured check squares stay vivid */ [data-theme="light"] header.top .diff-cb-wrap{ background:rgba(255,255,255,.18) !important; border-color:transparent !important; /* no outline -- fill only */ color:#ffffff !important; } [data-theme="light"] header.top .diff-cb-wrap:hover{ background:rgba(255,255,255,.28) !important; border-color:transparent !important; } /* tier check squares: CHECKED ones show only their solid colour fill -- no extra ring; unchecked ones keep a faint white outline so they're visible */ [data-theme="light"] header.top .diff-cb-wrap input[type="checkbox"]:checked{ border-color:transparent !important; } [data-theme="light"] header.top .diff-cb-wrap input[type="checkbox"]:not(:checked){ border-color:rgba(255,255,255,.5) !important; } [data-theme="light"] header.top .diff-label{ color:rgba(255,255,255,.85) !important; } /* solution drawer panel on light */ [data-theme="light"] .sol-drawer{ background:linear-gradient(180deg,#ffffff 0%,#f3f5fb 100%) !important; box-shadow:-14px 0 44px rgba(28,40,90,.22) !important; border-left:1px solid var(--stroke) !important; } [data-theme="light"] .solution.show{ background:rgba(20,26,48,.38) !important; } [data-theme="light"] .sol-close{ color:var(--ink) !important; } [data-theme="light"] .sol-back-text{ color:var(--ink) !important; } } /* ========================================================= LIGHT MODE — review pass 2 (chaitanya feedback) page = soft grey, every section/container = pure white ========================================================= */ [data-theme="light"] body{ background:#e9ecf3 !important; } [data-theme="light"] header.top, [data-theme="light"] .card, [data-theme="light"] #modeCard, [data-theme="light"] .q-card{ background:#ffffff !important; } /* remove the divider line under the 10th/12th/Grad checkboxes so the two white surfaces merge (spacing itself now lives in ux.css for BOTH themes) */ [data-theme="light"] header.top{ border-bottom:0 !important; } /* options: white fill + lighter (10%-opacity) stroke; tinted correct/wrong keep theirs */ [data-theme="light"] .opt{ background:#ffffff !important; border-color:rgba(17,24,48,.10) !important; } /* nav / action buttons: white fills with coloured outlines */ [data-theme="light"] #prevBtn{ background:#ffffff !important; border:1px solid rgba(17,24,48,.14) !important; color:var(--ink) !important; box-shadow:none !important; } [data-theme="light"] #nextBtn{ background:#ffffff !important; color:#6d28d9 !important; border:1.5px solid #7c5cff !important; box-shadow:none !important; } [data-theme="light"] #hintBtn{ background:#ffffff !important; border:1.5px solid #fbbf24 !important; /* lighter yellow */ color:var(--ink) !important; box-shadow:none !important; } /* Question Setup nav (hybrid) Prev/Next -> identical to the PYQ Prev/Next: white fill + coloured outline, no fill gradient. The dice between them keeps its own colour (handled separately above). */ [data-theme="light"] #hybPrevBtn{ background:#ffffff !important; border:1px solid rgba(17,24,48,.14) !important; color:var(--ink) !important; box-shadow:none !important; } [data-theme="light"] #hybNextBtn{ background:#ffffff !important; color:#6d28d9 !important; border:1.5px solid #7c5cff !important; box-shadow:none !important; } /* dice: keep only the outline — remove the gold die fill + flat white button */ [data-theme="light"] .hyb-dice{ background:#ffffff !important; } [data-theme="light"] .hyb-dice:hover{ background:#f3f4f8 !important; } [data-theme="light"] .hyb-dice .die rect{ fill:transparent !important; } /* ========================================================= LIGHT MODE — review pass 3 (chaitanya feedback) Colour-only tweaks (light mode); spacing handled in ux.css. ========================================================= */ /* Show Solution: white fill + light-yellow outline (matches Hint), no shadow */ [data-theme="light"] #solveBtn{ background:#ffffff !important; border:1.5px solid #fbbf24 !important; /* lighter yellow, same as hint */ color:#1a1300 !important; box-shadow:none !important; } /* remove drop shadows from ALL buttons (Next, Show Solution, New Question…) */ [data-theme="light"] .btn{ box-shadow:none !important; } /* keep ONLY the Question Setup / PYQ pill fill shadow — but lighter + smaller area */ [data-theme="light"] .capsule-ind{ box-shadow: 0 4px 10px -6px rgba(124,92,255,.32), inset 0 1px 0 rgba(255,255,255,.30) !important; } [data-theme="light"] .capsule-tabs{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5) !important; } /* template picker selector: label + chevron were forced white → make them ink */ [data-theme="light"] .hyb-center .tpl-picker-trigger, [data-theme="light"] .hyb-center .tpl-picker-trigger:hover, [data-theme="light"] .hyb-center .tpl-picker-trigger.active{ color:var(--ink) !important; } [data-theme="light"] .tpl-picker-trigger .tpl-chevron{ color:var(--ink) !important; } /* template dropdown modal: dark (#151a2e) → white with a soft light stroke */ [data-theme="light"] .tpl-picker-dropdown{ background:#ffffff !important; border:1px solid rgba(17,24,48,.16) !important; box-shadow:0 14px 44px rgba(28,40,90,.18) !important; } [data-theme="light"] .tpl-search-wrap{ background:#ffffff !important; border-bottom:1px solid rgba(17,24,48,.08) !important; } [data-theme="light"] .tpl-search{ background:rgba(17,24,48,.04) !important; color:var(--ink) !important; border-color:rgba(17,24,48,.16) !important; } [data-theme="light"] .tpl-list .tpl-item.tpl-row{ border-bottom-color:rgba(17,24,48,.07) !important; } [data-theme="light"] .tpl-list .tpl-item.tpl-row:hover, [data-theme="light"] .tpl-item:hover{ background:rgba(17,24,48,.05) !important; } [data-theme="light"] .tplr-name, [data-theme="light"] .tpl-item{ color:var(--ink) !important; } /* ========================================================= LIGHT MODE — review pass 4 (chaitanya feedback) ========================================================= */ /* Active pill (the sliding fill behind "Question Setup") keeps its ORIGINAL full blue→purple gradient + white text — do NOT tint it. Instead the big rounded container behind BOTH tabs gets a very faint purple wash (about half of ~10% = ~5%), while its frame stays the old grey stroke (never blue). */ [data-theme="light"] .capsule-tabs{ background:rgba(124,92,255,.06) !important; border:1px solid var(--stroke) !important; } /* variant line ("# 1/4: …") + the right-side "all variants" icon were far too faint on white — darken them (≈+10% presence) while keeping them secondary. */ [data-theme="light"] #hybVarText{ color:rgba(24,29,51,.62) !important; } [data-theme="light"] #hybVarText .hyb-type{ color:rgba(24,29,51,.66) !important; } [data-theme="light"] #hybVarText .hyb-vname{ color:rgba(24,29,51,.62) !important; } [data-theme="light"] .hyb-browse{ color:rgba(24,29,51,.6) !important; } /* PYQ year chips: white background + just a stroke for every pill; the selected one gets the same faint light-purple fill as the Question Setup / PYQ tab. */ [data-theme="light"] #pyqYearChips .chip{ background:#ffffff !important; border:1px solid var(--stroke) !important; color:var(--ink) !important; } [data-theme="light"] #pyqYearChips .chip.active{ background:rgba(124,92,255,.07) !important; /* same faint purple wash as the tab container */ border-color:var(--stroke) !important; /* keep the grey stroke */ box-shadow:none !important; color:#6d28d9 !important; } /* ---- answer reveal (light): the white-fill .opt rule above used !important and was swallowing the correct/wrong tints, so neither state showed. Restore them with stronger, light-friendly green / red (stroke + soft fill). Selecting the wrong option also reveals the correct one (handled in ui.js). ---- */ [data-theme="light"] .opt.correct{ border-color:#16a34a !important; background:rgba(34,197,94,.13) !important; } [data-theme="light"] .opt.wrong{ border-color:#dc2626 !important; background:rgba(239,68,68,.10) !important; } /* ========================================================= LIGHT MODE — VERSION 2 (header-merge variant) — FIGMA SPEC v2 Activated by html[data-hmerge="1"][data-theme="light"]. MOBILE ONLY. Word-for-word match of the 3 Figma frames: - Card gradient is 45deg (#675BFF -> #D489FF); active-tab gradient is horizontal/90deg (#A873FF -> #5B8BFF). - Card has NO side padding; the top section (back/lang/title/chips) and the control stack (capsule + template / PYQ) are each inset 12px, but the horizontal divider runs full bleed end-to-end. - The question below is NOT a card: it bleeds full width with only 16px left/right and sits 24px under the header card. ========================================================= */ /* collapse chevron hidden everywhere except light v2 mobile */ .hdr-collapse-btn{ display:none; } @media (max-width:640px){ /* ================= the merged gradient card ================= */ html[data-hmerge="1"][data-theme="light"] header.top{ position:sticky !important; top:0 !important; z-index:60 !important; margin:0 !important; padding:14px 0 24px !important; /* 24px from last pill to card bottom */ background:linear-gradient(45deg,#675BFF 0%,#D489FF 100%) !important; border:0 !important; border-top-left-radius:0 !important; border-top-right-radius:0 !important; border-bottom-left-radius:18px !important; border-bottom-right-radius:18px !important; box-shadow:0 18px 38px -20px rgba(103,91,255,.5) !important; } /* top section (back/lang/title/chips/chevron) inset 12px each side */ html[data-hmerge="1"][data-theme="light"] header.top .top-row, html[data-hmerge="1"][data-theme="light"] header.top .bottom-row{ padding-left:12px !important; padding-right:12px !important; } html[data-hmerge="1"][data-theme="light"] header.top .bottom-row{ margin-bottom:0 !important; } /* back button */ html[data-hmerge="1"][data-theme="light"] header.top .backbtn{ color:#fff !important; opacity:1 !important; } html[data-hmerge="1"][data-theme="light"] header.top .page-title{ color:#fff !important; } /* language pill: 81x28, dark glass, r8, with a small down-chevron */ html[data-hmerge="1"][data-theme="light"] header.top .q-lang-select{ -webkit-appearance:none !important; appearance:none !important; width:auto !important; min-width:81px !important; height:28px !important; padding:4px 30px 4px 10px !important; background-color:rgba(0,0,0,.15) !important; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M6%209l6%206%206-6'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 9px center !important; background-size:13px 13px !important; border:0 !important; border-radius:8px !important; color:rgba(255,255,255,.75) !important; font-size:14px !important; } /* ---- chips row: difficulty pills + collapse chevron on the right ---- */ html[data-hmerge="1"][data-theme="light"] header.top .tier-filter{ display:flex !important; align-items:center !important; gap:8px !important; width:100% !important; flex-wrap:nowrap !important; } html[data-hmerge="1"][data-theme="light"] header.top .diff-cb-wrap{ background:rgba(255,255,255,.10) !important; border:0 !important; border-radius:999px !important; padding:6px 14px 6px 10px !important; /* +4px on the right */ color:rgba(255,255,255,.95) !important; font-weight:600 !important; } html[data-hmerge="1"][data-theme="light"] header.top .diff-cb-wrap input[type="checkbox"]{ border:1px solid rgba(255,255,255,.20) !important; box-shadow:none !important; background:transparent !important; } html[data-hmerge="1"][data-theme="light"] header.top .diff-cb-wrap input[type="checkbox"]:checked, html[data-hmerge="1"][data-theme="light"] header.top .diff-cb-wrap.easy input[type="checkbox"]:checked, html[data-hmerge="1"][data-theme="light"] header.top .diff-cb-wrap.medium input[type="checkbox"]:checked, html[data-hmerge="1"][data-theme="light"] header.top .diff-cb-wrap.hard input[type="checkbox"]:checked{ background:rgba(0,0,0,.12) !important; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M5%2013l4%204L19%207'%20stroke='white'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:center !important; background-size:11px 11px !important; border:0 !important; } html[data-hmerge="1"][data-theme="light"] header.top .diff-cb-wrap input[type="checkbox"]:checked::after{ content:"" !important; display:none !important; } html[data-hmerge="1"][data-theme="light"] header.top .hdr-collapse-btn{ display:inline-flex !important; align-items:center; justify-content:center; flex:none !important; width:30px !important; height:30px !important; margin-left:auto !important; padding:0 !important; background:rgba(255,255,255,.16) !important; border:0 !important; border-radius:999px !important; color:#fff !important; cursor:pointer; } /* expanded -> chevron points up; collapsed -> points down (option chevron) */ html[data-hmerge="1"][data-theme="light"] header.top .hdr-collapse-btn svg{ transform:rotate(90deg); transition:transform .22s ease; } /* OPEN -> arrow points up, no bob */ html.hdr-open[data-hmerge="1"][data-theme="light"] header.top .hdr-collapse-btn svg{ transform:rotate(-90deg); animation:none !important; } /* bob hint: ONLY while collapsed (not open) AND not yet pressed this page-load */ html[data-hmerge="1"][data-theme="light"]:not(.hdr-open):not(.hdr-touched) header.top .hdr-collapse-btn svg{ animation:hdrChevBob 1.6s ease-in-out infinite; } @keyframes hdrChevBob{ 0% { transform:rotate(90deg) translateX(0); } 25% { transform:rotate(90deg) translateX(3px); } 50% { transform:rotate(90deg) translateX(-1px); } 70% { transform:rotate(90deg) translateX(2px); } 100% { transform:rotate(90deg) translateX(0); } } /* ============ full-bleed divider + control stack ============ */ html[data-hmerge="1"][data-theme="light"] header.top #modeCard{ margin:6px 0 0 !important; /* +10px header flex-gap => 16px above divider */ padding:16px 0 0 !important; background:transparent !important; border:0 !important; border-top:1px solid rgba(255,255,255,.15) !important; /* full end-to-end */ border-radius:0 !important; box-shadow:none !important; } html[data-hmerge="1"][data-theme="light"] header.top #modeCard .tab-content{ margin:0 !important; padding:0 !important; } html[data-hmerge="1"][data-theme="light"] header.top #tabSetup .controls{ display:none !important; } /* COLLAPSED on land; OPEN only after the user taps the chevron */ html[data-hmerge="1"][data-theme="light"] header.top #modeCard{ display:none !important; } html.hdr-open[data-hmerge="1"][data-theme="light"] header.top #modeCard{ display:block !important; } /* capsule: inset 12px via margin, 12px gap to template/PYQ below */ html[data-hmerge="1"][data-theme="light"] header.top .capsule-tabs{ margin:0 12px 12px !important; background:rgba(0,0,0,.10) !important; border:0 !important; box-shadow:none !important; padding:6px !important; border-radius:12px !important; } html[data-hmerge="1"][data-theme="light"] header.top .capsule-tab{ color:rgba(255,255,255,.80) !important; font-weight:600 !important; } html[data-hmerge="1"][data-theme="light"] header.top .capsule-tab:hover:not(.active){ color:#fff !important; } html[data-hmerge="1"][data-theme="light"] header.top .capsule-tab.active{ color:#fff !important; font-weight:700 !important; } html[data-hmerge="1"][data-theme="light"] header.top .capsule-tab:focus, html[data-hmerge="1"][data-theme="light"] header.top .capsule-tab:focus-visible{ outline:none !important; box-shadow:none !important; } /* active pill -> HORIZONTAL gradient #A873FF -> #5B8BFF, 8px radius */ html[data-hmerge="1"][data-theme="light"] header.top .capsule-ind{ background:linear-gradient(90deg,#A873FF 0%,#5B8BFF 100%) !important; border-radius:8px !important; border:.5px solid rgba(255,255,255,.25) !important; box-shadow:0 4px 4px rgba(0,0,0,.10) !important; } html[data-hmerge="1"][data-theme="light"] header.top .capsule-ind::after{ display:none !important; } /* ============ template-nav pill (Question Setup) ============ */ html[data-hmerge="1"][data-theme="light"] header.top #hybHeader{ margin:0 12px !important; } html[data-hmerge="1"][data-theme="light"] header.top .hyb-title-row{ background:rgba(0,0,0,.10) !important; border:0 !important; border-radius:12px !important; padding:8px !important; } html[data-hmerge="1"][data-theme="light"] header.top .hyb-arrow{ width:30px !important; height:30px !important; background:rgba(255,255,255,.16) !important; border:0 !important; border-radius:999px !important; color:#fff !important; } html[data-hmerge="1"][data-theme="light"] header.top .hyb-arrow:hover{ background:rgba(255,255,255,.24) !important; color:#fff !important; } html[data-hmerge="1"][data-theme="light"] header.top .hyb-center .tpl-picker-trigger, html[data-hmerge="1"][data-theme="light"] header.top .hyb-center #tplLabel, html[data-hmerge="1"][data-theme="light"] header.top .hyb-center .tpl-chevron{ color:rgba(255,255,255,.85) !important; } html[data-hmerge="1"][data-theme="light"] header.top .hyb-tplnum{ color:rgba(255,255,255,.85) !important; font-weight:700 !important; } /* ============ PYQ controls ============ */ html[data-hmerge="1"][data-theme="light"] header.top #tabPyq .controls:not(.ctrl-disabled){ display:none !important; } /* exam dropdown + "485 PYQs" : fixed 16px gap between them */ html[data-hmerge="1"][data-theme="light"] header.top #tabPyq .controls.ctrl-disabled{ display:flex !important; align-items:center !important; gap:16px !important; flex-wrap:nowrap !important; margin:0 12px 12px !important; } /* dropdown: dark glass, r8, option-chevron (down) instead of the ugly arrow */ html[data-hmerge="1"][data-theme="light"] header.top #tabPyq .dd{ -webkit-appearance:none !important; appearance:none !important; flex:none !important; width:auto !important; background-color:rgba(0,0,0,.10) !important; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M6%209l6%206%206-6'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 10px center !important; background-size:14px 14px !important; border:0 !important; border-radius:8px !important; color:rgba(255,255,255,.75) !important; padding:8px 32px 8px 10px !important; } html[data-hmerge="1"][data-theme="light"] header.top #tabPyq .dd option{ background:#fff !important; color:#1b2348 !important; } html[data-hmerge="1"][data-theme="light"] header.top #tabPyq #pyqStatus{ flex:none !important; margin:0 !important; color:rgba(255,255,255,.80) !important; font-style:italic !important; } /* year chips */ html[data-hmerge="1"][data-theme="light"] header.top #tabPyq .year-scroll{ margin:0 12px !important; } html[data-hmerge="1"][data-theme="light"] header.top #tabPyq .chip{ background:rgba(255,255,255,.10) !important; border:0 !important; border-radius:999px !important; color:rgba(255,255,255,.75) !important; } html[data-hmerge="1"][data-theme="light"] header.top #tabPyq .chip.active{ background:rgba(255,255,255,.10) !important; border:0 !important; color:#fff !important; font-weight:700 !important; } /* ============ question = NO card, full bleed, 16px sides, 24px below ============ */ html[data-hmerge="1"][data-theme="light"] .q-card{ margin:10px 16px 18px !important; padding:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } /* template name line: visible ONLY while header collapsed; hidden once opened */ html[data-hmerge="1"][data-theme="light"] .hyb-tplline{ color:rgba(24,29,51,.52) !important; } html[data-hmerge="1"][data-theme="light"]:not(.hdr-open) body:not(.pyq-active) .hyb-tplline{ display:block !important; } html[data-hmerge="1"][data-theme="light"] .q-attempted{ color:#a16207 !important; } /* Hint + Show Solution stay on a single line */ html[data-hmerge="1"][data-theme="light"] .q-card .btn-row{ flex-wrap:nowrap !important; } /* thin border, original colors: Next=purple, Hint+Show Solution=yellow */ html[data-hmerge="1"][data-theme="light"] .q-card #hybNextBtn, html[data-hmerge="1"][data-theme="light"] .q-card #nextBtn{ border:1px solid rgba(124,92,255,.55) !important; } html[data-hmerge="1"][data-theme="light"] .q-card #hintBtn, html[data-hmerge="1"][data-theme="light"] .q-card #solveBtn{ border:1px solid rgba(245,158,11,.6) !important; } /* nav dice: yellow fill like the drawer dice (override line-194 transparent) */ html[data-hmerge="1"][data-theme="light"] .hyb-dice .die rect{ fill:#ffd66b !important; stroke:#b7891f !important; } } /* PYQ exam+year tag (light): faint light-purple base, light stroke, readable purple text */ [data-theme="light"] .tag.exam{ color:#6d28d9 !important; background:rgba(124,92,255,.10) !important; border:1px solid rgba(124,92,255,.30) !important; box-shadow:none !important; } /* ---- variant drawer (light): attempted indicator + inline solution panel ---- */ [data-theme="light"] .vx-attempt{ color:#a16207 !important; } [data-theme="light"] .vx-attempt.vx-attempt-warn{ color:#b91c1c !important; } [data-theme="light"] .vx-q{ color:#181d33 !important; } [data-theme="light"] .vx-solution{ background:#ffffff !important; } [data-theme="light"] .vx-solution.expanded{ border-top:1px solid rgba(124,92,255,.28) !important; } [data-theme="light"] .vx-sol-head{ background:rgba(255,255,255,.97) !important; border-bottom:1px solid rgba(124,92,255,.18) !important; } [data-theme="light"] .vx-sol-x{ background:#ffffff !important; border:1px solid var(--stroke) !important; color:var(--ink) !important; } [data-theme="light"] .vx-sol-body{ background:#ffffff !important; } [data-theme="light"] .vx-sol-body .sol-step strong{ color:#6d28d9 !important; } [data-theme="light"] .vx-sol-body .sol-step-n{ color:#566183 !important; } [data-theme="light"] .vx-sol-body .sol-formula{ background:rgba(124,92,255,.10) !important; border-left-color:#6d28d9 !important; } [data-theme="light"] .vx-sol-body .sol-calc{ background:rgba(34,211,238,.12) !important; } [data-theme="light"] .vx-sol-shortcut{ background:rgba(34,197,94,.10) !important; color:#15803d !important; } [data-theme="light"] .vx-sol-shortcut b{ color:#15803d !important; }