:root { --primary: #eaa422; --ink: #292929; --muted: #6f6f6f; --line: #e5e5e5; --panel: #f7f7f7; --white: #fff; --green: #208856; --red: #cf3c2d; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font: 16px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
button, input, select, textarea { font: inherit; } button { cursor: pointer; } a { color: inherit; }
.hidden { display: none !important; }.site-shell { width: min(1920px, calc(100% - 120px)); margin: 0 auto; }

.topbar { min-height: 94px; border-bottom: 1px solid #dedede; background: #fff; }
.main-nav { min-height: 94px; display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: baseline; min-width: 157px; color: #222b31; text-decoration: none; font-size: 28px; font-weight: 800; letter-spacing: -1.8px; }
.brand-icon { color: var(--primary); font-size: 44px; font-weight: 300; line-height: .5; transform: rotate(-25deg); }.brand small { color: #8a8a8a; font-size: 15px; letter-spacing: -1px; }
.support-pill { display: flex; align-items: center; overflow: hidden; border: 1px solid #e2e2e2; border-radius: 9px; color: #444; font-weight: 700; }.support-pill span { padding: 8px 11px; }.support-pill span:first-child { border-right: 1px solid #e2e2e2; color: #666; }
.nav-links { display: flex; align-items: center; gap: 37px; margin-left: auto; }.nav-links a { color: #282828; text-decoration: none; font-weight: 700; }.nav-links a:hover { color: var(--primary); }
.nav-actions { display: flex; align-items: center; gap: 9px; }.button { border: 1px solid transparent; border-radius: 9px; padding: 11px 17px; font-weight: 750; transition: .15s ease; }.button:hover { transform: translateY(-1px); }.button-gold { color: #fff; border-color: var(--primary); background: var(--primary); }.button-gold:hover { filter: brightness(.94); }.button-outline { color: #333; border-color: #333; background: #fff; }.button-plain { padding: 7px; border-color: transparent; background: transparent; }.avatar { width: 31px; height: 31px; border-radius: 50%; object-fit: cover; }

.question-page { min-height: calc(100vh - 94px); padding: 24px 0 56px; background: #fff; }.filter-toolbar { display: flex; gap: 17px; align-items: stretch; padding: 0 4px 23px; overflow-x: auto; border-bottom: 1px solid #ededed; }.toolbar-field, .toolbar-action { flex: 0 0 auto; min-height: 60px; padding: 8px 13px; border: 0; border-radius: 5px; color: #292929; background: #f5f5f5; }.toolbar-field { min-width: 135px; }.toolbar-field label { display: block; margin-bottom: 3px; font-size: .9rem; font-weight: 800; }.toolbar-field select { width: 100%; padding: 0; color: #666; border: 0; outline: 0; background: transparent; }.toolbar-action { display: flex; align-items: center; gap: 6px; font-weight: 750; white-space: nowrap; }.toolbar-action:hover { background: #ececec; }.toolbar-clear { color: #dc2323; }
.bank-heading { display: flex; justify-content: space-between; align-items: center; min-height: 66px; margin-top: 33px; padding: 12px 16px; border-radius: 10px; background: #f8f8f8; }.bank-heading h1 { margin: 0; font-size: 1.05rem; font-weight: 500; }.bank-heading p { margin: 3px 0 0; color: var(--muted); font-size: .78rem; }.heading-right { display: flex; align-items: center; gap: 10px; }.dot { width: 8px; height: 8px; border-radius: 50%; background: #aaa; }.dot.ready { background: #23a36c; }.dot.error { background: #d14640; }.guest-pill { padding: 6px 12px; border: 1px solid #f0bb53; border-radius: 8px; color: #bb7800; font-size: .83rem; font-weight: 800; }

.subject-panel { margin-top: 1px; padding: 19px 37px 35px; border: 1px solid #e1e1e1; border-radius: 15px; background: #fff; }.subject-panel-head { display: flex; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid #ddd; }.subject-chips { display: flex; flex-wrap: wrap; gap: 13px; padding: 18px 26px 0; }.subject-chip { padding: 8px 16px; border: 0; border-radius: 999px; color: #292929; background: #f2f2f2; }.subject-chip:hover, .subject-chip.active { color: #fff; background: var(--primary); }

.practice-browser { margin-top: 2px; padding: 19px 25px 31px; border-radius: 9px; background: #fafafa; }.browser-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }.browser-head strong { font-size: 1rem; }.browser-head p { margin: 3px 0 0; color: var(--muted); font-size: .86rem; }.question-list { display: grid; gap: 13px; }.question-preview { display: flex; gap: 16px; padding: 20px 25px; border-radius: 10px; background: #fff; box-shadow: 0 5px 16px rgba(0,0,0,.025); }.q-number { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 3px; color: #886211; background: #fff6dd; font-size: .83rem; font-weight: 800; }.q-body h3 { margin: 1px 0 9px; font-size: 1rem; font-weight: 550; }.chips { display: flex; flex-wrap: wrap; gap: 8px; }.chip { padding: 4px 9px; border-radius: 7px; color: #505050; background: #f4f4f4; font-size: .74rem; font-weight: 650; }.empty { margin: 0; padding: 30px; text-align: center; color: var(--muted); border: 1px dashed #cfcfcf; border-radius: 9px; background: #fff; }.guest-notice { margin-top: 18px; padding: 12px 16px; border: 1px solid #fed6a2; border-radius: 8px; color: #8b5900; background: #fffaf0; font-size: .9rem; }

.quiz-wrap { padding-top: 17px; }.question-navigation { display: flex; align-items: center; overflow: hidden; width: fit-content; margin: 0 0 18px 54px; border: 1px solid #d8d8d8; border-radius: 4px; background: #fff; }.question-nav-button { width: 45px; height: 43px; padding: 0; color: #292929; border: 0; border-right: 1px solid #d8d8d8; background: #fff; }.question-nav-button:last-child { border-right: 0; }.question-nav-button.active { color: #fff; background: var(--primary); }.quiz-card { position: relative; min-height: 325px; padding: 27px 70px 26px 25px; border-radius: 14px; background: #fff; box-shadow: 0 7px 19px rgba(0,0,0,.055); }.quiz-top { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 20px; color: #494949; font-size: .9rem; font-weight: 700; }.quiz-progress { height: 4px; margin-bottom: 30px; overflow: hidden; border-radius: 10px; background: #f1f1f1; }.quiz-progress > div { height: 100%; background: var(--primary); transition: width .2s ease; }.quiz-card h2 { max-width: 990px; margin: 0 0 22px; font-size: 1.1rem; line-height: 1.45; }.quiz-card .chips { margin-bottom: 20px; }.options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 27px; margin: 16px 0 0; }.option { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 57px; padding: 12px 15px; text-align: center; color: #292929; border: 0; border-radius: 10px; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.045); }.option:hover:not(:disabled) { color: #946000; outline: 1px solid #e8b557; }.option:disabled { cursor: default; }.option-letter { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 4px; color: #666; background: #f1f1f1; font-size: .75rem; font-weight: 800; }.option.correct { color: #08693d; outline: 2px solid #42b77b; background: #f1fff6; }.option.wrong { color: #9b2421; outline: 2px solid #e66d64; background: #fff7f6; }.explanation { margin-top: 20px; padding: 16px; border-left: 4px solid var(--primary); border-radius: 0 7px 7px 0; color: #454545; background: #fff9ec; }.explanation strong { display: block; margin-bottom: 3px; }.quiz-footer { display: flex; justify-content: flex-end; margin-top: 22px; }
.summary { max-width: 560px; margin: 28px auto; padding: 35px; text-align: center; border-radius: 15px; background: #fff; box-shadow: 0 7px 19px rgba(0,0,0,.055); }.summary h2 { margin: 12px 0; }.summary p { color: var(--muted); }.score { margin: 13px; color: var(--primary); font-size: 3.5rem; font-weight: 850; letter-spacing: -3px; }.compact-info { display: flex; gap: 12px; margin-top: 35px; padding: 19px 24px; color: #555; border-top: 2px solid #222; font-size: .91rem; }.compact-info strong { color: #222; }

.site-footer { padding: 26px 0; color: #e5e5e5; background: #272727; font-size: .83rem; }.footer-inner { display: flex; justify-content: space-between; gap: 15px; }.footer-inner a { color: #ffcf6b; }
.modal-backdrop { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: rgba(0,0,0,.55); }.modal { width: min(650px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 27px; border-radius: 14px; background: #fff; }.modal-head { display: flex; justify-content: space-between; gap: 20px; }.modal h2 { margin: 0 0 4px; }.modal p { margin: 0; color: var(--muted); }.editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }.field label { display: block; margin-bottom: 5px; font-size: .8rem; font-weight: 800; }.field input, .field textarea { width: 100%; padding: 9px; border: 1px solid #d3d3d3; border-radius: 7px; outline: none; }.field input:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(234,164,34,.18); }.full { grid-column: 1 / -1; }.modal-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; margin-top: 20px; }.toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: min(420px, calc(100% - 40px)); padding: 14px 17px; border-radius: 10px; color: #fff; background: #242424; box-shadow: 0 8px 20px rgba(0,0,0,.18); font-size: .9rem; }

@media (max-width: 1200px) { .site-shell { width: min(100% - 40px, 1920px); }.nav-links { gap: 18px; }.support-pill { display: none; }.filter-toolbar { gap: 10px; } }
@media (max-width: 840px) { .topbar, .main-nav { min-height: 68px; }.brand { min-width: auto; font-size: 22px; }.brand-icon { font-size: 33px; }.nav-links { display: none; }.nav-actions { margin-left: auto; }.filter-toolbar { padding-bottom: 15px; }.options { grid-template-columns: repeat(2, 1fr); gap: 12px; }.footer-inner { flex-direction: column; }.quiz-card { padding: 22px; }.subject-panel { padding: 17px; } }
@media (max-width: 540px) { .site-shell { width: min(100% - 24px, 1920px); }.brand small { display: none; }.button { padding: 9px 11px; }.nav-actions .button-outline { display: none; }.bank-heading { margin-top: 19px; }.heading-right { display: none; }.browser-head { align-items: start; flex-direction: column; }.browser-head .button { width: 100%; }.question-preview { padding: 15px; }.options { grid-template-columns: 1fr; }.editor-grid { grid-template-columns: 1fr; }.full { grid-column: auto; }.compact-info { flex-direction: column; } }

/* Original visual system: sunlit bay blues, bridge orange and frosted-paper panels. */
:root { --primary: #dc6042; --ink: #18354a; --muted: #577080; --line: rgba(32, 78, 96, .14); --panel: rgba(255,255,255,.70); --white: #fff; --bay: #197ca6; --fog: #f1f7f5; --sun: #f5b64d; }
body { background: #eef6f4; color: var(--ink); }
.site-shell { width: min(1480px, calc(100% - 72px)); }
.topbar { position: relative; z-index: 3; min-height: 82px; border-bottom-color: rgba(34, 71, 88, .10); background: rgba(250,253,252,.77); backdrop-filter: blur(22px) saturate(135%); }
.main-nav { min-height: 82px; }.brand { color: #15354a; letter-spacing: -1.4px; }.brand-icon { color: var(--primary); text-shadow: 0 5px 11px rgba(220,96,66,.19); }.brand small { margin-left: 5px; color: #4785a0; font-weight: 700; letter-spacing: -.7px; }.support-pill { color: #1e556d; border-color: rgba(25,124,166,.18); background: rgba(255,255,255,.62); box-shadow: 0 4px 12px rgba(34,83,99,.04); }.support-pill span:first-child { color: var(--primary); border-right-color: rgba(25,124,166,.16); }.nav-links a { color: #25475a; font-size: .94rem; }.nav-links a:hover { color: var(--primary); }.button { border-radius: 14px; }.button-gold { border-color: #d55c40; background: linear-gradient(135deg, #e77447, #d6513b); box-shadow: 0 9px 18px rgba(205,82,57,.18); }.button-outline { color: #1d6d8e; border-color: rgba(25,124,166,.35); background: rgba(255,255,255,.58); }

.question-page { position: relative; overflow: hidden; padding: 33px 0 68px; background: radial-gradient(circle at 8% 13%, rgba(245,182,77,.24), transparent 23%), radial-gradient(circle at 88% 3%, rgba(75,170,201,.19), transparent 25%), linear-gradient(150deg, #f7faf6 0%, #eff7f7 52%, #fff7e7 145%); }.question-page::before, .question-page::after { position: absolute; z-index: 0; content: ""; pointer-events: none; filter: blur(2px); }.question-page::before { width: 480px; height: 480px; right: -260px; top: 210px; border: 45px solid rgba(220,96,66,.08); border-radius: 50%; }.question-page::after { width: 410px; height: 140px; left: -80px; bottom: 108px; border-radius: 50%; background: rgba(25,124,166,.05); }.question-page > .site-shell { position: relative; z-index: 1; }
.filter-toolbar { gap: 9px; padding: 10px; overflow: visible; border: 1px solid rgba(255,255,255,.76); border-radius: 22px; background: rgba(255,255,255,.56); box-shadow: 0 15px 34px rgba(45,91,106,.08); backdrop-filter: blur(17px); }.toolbar-field, .toolbar-action { min-height: 61px; border: 1px solid transparent; border-radius: 15px; background: rgba(247,251,250,.88); }.toolbar-field { min-width: 140px; }.toolbar-field label { color: #29627b; letter-spacing: .015em; }.toolbar-field select { color: #315566; font-size: .89rem; }.toolbar-action { color: #315566; }.toolbar-action:hover { border-color: rgba(25,124,166,.19); background: #fff; }.toolbar-clear { color: var(--primary); }
.bank-heading { min-height: 112px; margin-top: 22px; padding: 20px 25px; border: 1px solid rgba(255,255,255,.72); border-radius: 25px 25px 10px 10px; background: linear-gradient(105deg, rgba(22,93,122,.96), rgba(36,126,155,.90) 59%, rgba(46,146,163,.83)); box-shadow: 0 17px 32px rgba(24,81,101,.15); }.deck-kicker, .tiny-kicker { display: block; color: #f8cc7e; font-size: .69rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }.bank-heading h1 { margin: 2px 0 0; color: #fff; font-size: 1.42rem; font-weight: 700; }.bank-heading p { color: rgba(255,255,255,.75); }.guest-pill { border-color: rgba(255,255,255,.3); color: #fff6e6; background: rgba(255,255,255,.12); }.dot { background: rgba(255,255,255,.5); }.dot.ready { background: #caefbd; }.dot.error { background: #ffbc9f; }
.subject-panel { position: relative; margin-top: -1px; padding: 20px 28px 28px; border-color: rgba(34,90,108,.13); border-radius: 0 0 25px 25px; background: rgba(255,255,255,.76); box-shadow: 0 12px 28px rgba(45,91,106,.06); backdrop-filter: blur(16px); }.subject-panel-head { align-items: center; padding-bottom: 14px; border-bottom-color: rgba(34,90,108,.13); }.subject-panel-head strong { display: block; margin-top: 2px; font-size: 1.05rem; }.subject-panel-head > span { color: var(--primary); font-size: 1.35rem; }.subject-chips { padding: 17px 0 0; }.subject-chip { border: 1px solid rgba(25,124,166,.10); color: #27607b; background: #edf6f5; box-shadow: 0 5px 9px rgba(47,93,106,.04); }.subject-chip:hover, .subject-chip.active { color: #fff; border-color: var(--bay); background: linear-gradient(135deg, #2281a5, #286c8d); }
.practice-browser { margin-top: 24px; padding: 24px; border: 1px solid rgba(255,255,255,.78); border-radius: 25px; background: rgba(255,255,255,.47); box-shadow: 0 15px 31px rgba(47,93,106,.06); }.browser-head { padding: 0 5px 18px; }.browser-head strong { display: block; margin-top: 2px; font-size: 1.08rem; }.browser-head p { color: #587080; }.browser-head .tiny-kicker { color: var(--primary); }.question-preview { align-items: flex-start; padding: 19px 21px; border: 1px solid rgba(255,255,255,.74); border-radius: 18px; background: rgba(255,255,255,.80); box-shadow: 0 7px 17px rgba(28,77,93,.045); transition: transform .16s ease, box-shadow .16s ease; }.question-preview:hover { transform: translateY(-2px); box-shadow: 0 11px 23px rgba(28,77,93,.09); }.q-number { color: #a84631; background: #fff0e4; }.q-body h3 { color: #1b4358; font-weight: 650; }.chip { color: #397086; background: #edf5f4; }.guest-notice { border-color: rgba(220,96,66,.26); color: #9f4634; background: #fff5ed; }
.question-navigation { margin-left: 18px; overflow: hidden; border-color: rgba(25,124,166,.19); border-radius: 17px; box-shadow: 0 8px 16px rgba(31,87,104,.06); }.question-nav-button { color: #2f6278; background: rgba(255,255,255,.82); border-right-color: rgba(25,124,166,.14); }.question-nav-button.active { background: linear-gradient(135deg, #e97849, #d7543c); }.quiz-card { overflow: hidden; min-height: 350px; padding: 29px 36px; border: 1px solid rgba(255,255,255,.82); border-radius: 25px; background: rgba(255,255,255,.84); box-shadow: 0 18px 35px rgba(30,82,98,.10); }.quiz-card::after { position: absolute; top: -70px; right: -50px; width: 190px; height: 190px; content: ""; border: 24px solid rgba(245,182,77,.12); border-radius: 50%; }.quiz-top, .quiz-card h2, .quiz-card .chips, .quiz-card .options, .quiz-card .explanation, .quiz-card .quiz-footer { position: relative; z-index: 1; }.quiz-top { color: #397086; }.quiz-progress { background: #e5f0ed; }.quiz-progress > div { background: linear-gradient(90deg, #1b85a8, #52afbe); }.quiz-card h2 { color: #173c51; font-size: 1.2rem; }.option { color: #245168; border: 1px solid rgba(25,124,166,.09); border-radius: 16px; background: rgba(250,253,252,.91); box-shadow: 0 7px 16px rgba(31,87,104,.06); }.option:hover:not(:disabled) { color: #a84631; outline-color: rgba(220,96,66,.54); background: #fff8ed; }.option-letter { color: #2e6c85; background: #e9f4f2; }.option.correct { color: #166a47; outline-color: #54b581; background: #effbf5; }.option.wrong { color: #a84631; outline-color: #dd705d; background: #fff4f0; }.explanation { border-left-color: var(--sun); background: #fff8e9; }.summary { border: 1px solid rgba(255,255,255,.9); border-radius: 25px; background: rgba(255,255,255,.82); box-shadow: 0 17px 35px rgba(30,82,98,.10); }.score { color: var(--primary); }.compact-info { padding: 20px 25px; border-top-color: rgba(25,124,166,.28); color: #537080; }.compact-info strong { color: #1f5872; }.site-footer { color: #d8edf1; background: #123c52; }.footer-inner a { color: #f8c66a; }
@media (max-width: 1200px) { .filter-toolbar { overflow-x: auto; } }
@media (max-width: 540px) { .site-shell { width: min(100% - 24px, 1480px); }.question-page { padding-top: 18px; }.filter-toolbar { border-radius: 17px; overflow-x: auto; }.bank-heading { border-radius: 20px 20px 8px 8px; }.subject-panel, .practice-browser, .quiz-card { border-radius: 20px; }.quiz-card { padding: 23px 19px; }.question-navigation { margin-left: 0; }.support-pill { display: none; } }

/* Final MVP theme: a light, calm, system-like workspace without reproducing any platform UI. */
:root { --primary: #4662d8; --ink: #202431; --muted: #727b8e; --line: rgba(32,36,49,.10); --panel: rgba(255,255,255,.82); --bay: #5d78e8; --fog: #f7f8fb; --sun: #f2a75b; }
body { background: #f7f8fb; }
.site-shell { width: min(1420px, calc(100% - 64px)); }
.topbar { border-bottom-color: rgba(32,36,49,.08); background: rgba(255,255,255,.84); box-shadow: 0 1px 0 rgba(255,255,255,.88); }.brand { color: #252b39; }.brand-icon { color: #e38a50; text-shadow: none; }.brand small { color: #8b93a5; }.support-pill { color: #566176; border-color: #e7e9ef; background: #fff; box-shadow: none; }.support-pill span:first-child { color: #e38a50; border-right-color: #e7e9ef; }.nav-links a { color: #4f586a; font-weight: 650; }.nav-links a:hover { color: var(--primary); }.button { border-radius: 12px; }.button-gold, .button-primary { border-color: #4662d8; background: linear-gradient(135deg, #5e78e8, #4059cc); box-shadow: 0 7px 16px rgba(70,98,216,.19); }.button-outline { color: #5264be; border-color: #d9dff6; background: #fff; }.button-soft { color: #4059cc; border-color: #d9dff6; background: #f2f4ff; }
.question-page { background: radial-gradient(circle at 5% 2%, rgba(227,138,80,.10), transparent 22%), radial-gradient(circle at 97% 14%, rgba(92,120,232,.10), transparent 21%), #f7f8fb; }.question-page::before { width: 410px; height: 410px; top: 360px; right: -270px; border: 36px solid rgba(70,98,216,.045); }.question-page::after { background: rgba(227,138,80,.04); }.filter-toolbar { border-color: rgba(255,255,255,.9); border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: 0 12px 30px rgba(32,36,49,.055); }.toolbar-field, .toolbar-action { border-color: transparent; border-radius: 12px; background: #f7f8fb; }.toolbar-field label { color: #59647a; }.toolbar-field select { color: #6a7488; }.toolbar-action { color: #586277; }.toolbar-action:hover { border-color: #e4e7ef; background: #fff; }.toolbar-clear { color: #d05f4d; }
.bank-heading { min-height: 104px; border-color: rgba(255,255,255,.92); border-radius: 20px 20px 10px 10px; background: linear-gradient(118deg, #fff, #f8f9ff 62%, #f3f6ff); box-shadow: 0 14px 31px rgba(32,36,49,.055); }.deck-kicker, .tiny-kicker { color: #dc8852; }.bank-heading h1 { color: #252b39; }.bank-heading p { color: #7d8697; }.guest-pill { color: #5366bd; border-color: #dce1f7; background: #f6f7ff; }.dot { background: #c5cad5; }.dot.ready { background: #76b790; }.dot.error { background: #d77b70; }
.subject-panel { border-color: rgba(32,36,49,.09); border-radius: 0 0 20px 20px; background: rgba(255,255,255,.82); box-shadow: 0 11px 27px rgba(32,36,49,.035); }.subject-panel-head { border-bottom-color: #e8eaf0; }.subject-panel-head > span { color: #7582bb; }.subject-chip { color: #5b667d; border-color: #e7eaf2; background: #f7f8fb; box-shadow: none; }.subject-chip:hover, .subject-chip.active { background: linear-gradient(135deg, #627ce8, #4c64d4); }
.practice-browser { border-color: rgba(255,255,255,.92); border-radius: 20px; background: rgba(255,255,255,.62); box-shadow: 0 13px 29px rgba(32,36,49,.04); }.browser-head p { color: #7c8493; }.browser-head .tiny-kicker { color: #dc8852; }.question-preview { border-color: rgba(255,255,255,.94); border-radius: 15px; background: rgba(255,255,255,.91); box-shadow: 0 6px 14px rgba(32,36,49,.035); }.question-preview:hover { box-shadow: 0 11px 22px rgba(32,36,49,.065); }.q-number { color: #946143; background: #fff1e5; }.q-body h3 { color: #303846; }.chip { color: #657087; background: #f2f4f8; }
.question-navigation { border-color: #e3e6ee; box-shadow: 0 6px 13px rgba(32,36,49,.035); }.question-nav-button { color: #647087; background: rgba(255,255,255,.93); border-right-color: #e8eaf0; }.question-nav-button.active { background: linear-gradient(135deg, #607ae6, #4b65d3); }.quiz-card { border-color: rgba(255,255,255,.94); border-radius: 20px; background: rgba(255,255,255,.91); box-shadow: 0 16px 33px rgba(32,36,49,.075); }.quiz-card::after { border-color: rgba(227,138,80,.08); }.quiz-top { color: #68758c; }.quiz-progress { background: #edf0f5; }.quiz-progress > div { background: linear-gradient(90deg, #6b84e8, #9aa9f1); }.quiz-card h2 { color: #252b39; }.option { color: #495467; border-color: #edf0f4; border-radius: 13px; background: #fbfcfd; box-shadow: 0 5px 13px rgba(32,36,49,.035); }.option:hover:not(:disabled) { color: #4059cc; outline-color: #b9c4f4; background: #f5f7ff; }.option-letter { color: #5d6eaf; background: #edf0fb; }.explanation { border-left-color: #e39a58; background: #fff9f1; }.summary, .feedback-view { border: 1px solid rgba(255,255,255,.94); border-radius: 20px; background: rgba(255,255,255,.91); box-shadow: 0 16px 33px rgba(32,36,49,.075); }.score { color: #536edc; }.compact-info { border-top-color: #dfe3ee; color: #778092; }.compact-info strong { color: #515c70; }.site-footer { color: #727b8e; background: #fff; border-top: 1px solid #e8eaf0; }.footer-inner a { color: #536edc; }
.feedback-view { max-width: 590px; margin: 44px auto; padding: 42px; text-align: center; }.feedback-view h2 { margin: 10px 0 7px; color: #252b39; font-size: 1.7rem; letter-spacing: -.03em; }.feedback-view p { margin: 0; color: #778092; }.feedback-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }.feedback-actions .button { padding: 14px; }.modal { border: 1px solid #fff; border-radius: 18px; box-shadow: 0 20px 50px rgba(32,36,49,.18); }.toast { background: #31394b; }
@media (max-width: 540px) { .site-shell { width: min(100% - 24px, 1420px); }.feedback-view { margin: 28px auto; padding: 31px 20px; }.feedback-actions { grid-template-columns: 1fr; } }

/* Low-friction library view: name, filters, numbered index, then questions. */
.question-page { padding-top: 24px; }.filter-toolbar { display: grid; grid-template-columns: repeat(5, minmax(125px, 1fr)) auto; gap: 10px; overflow: visible; padding: 12px; border-radius: 18px; }.toolbar-field { min-width: 0; }.bank-heading { min-height: 80px; margin: 18px 0 0; padding: 12px 20px; border-radius: 17px 17px 0 0; }.deck-kicker { display: none; }.bank-heading h1 { font-size: 1.27rem; font-weight: 720; }.bank-heading p { max-width: 700px; font-size: .82rem; }.practice-browser { margin-top: 0; padding: 20px 20px 28px; border-radius: 0 0 20px 20px; }.browser-head { margin-bottom: 12px; padding: 0 3px 13px; border-bottom: 1px solid #eceef3; }.browser-head .tiny-kicker { margin-bottom: 3px; }.browser-head p { margin-top: 3px; }.browser-head .guest-pill { flex: 0 0 auto; }
.question-index { display: flex; flex-wrap: wrap; gap: 7px; margin: 15px 0 17px; }.index-button { display: grid; place-items: center; width: 35px; height: 35px; padding: 0; color: #5c667a; border: 1px solid #e5e8ef; border-radius: 10px; background: rgba(255,255,255,.9); box-shadow: 0 2px 5px rgba(32,36,49,.025); }.index-button:hover { color: #4059cc; border-color: #cbd3f4; }.index-button.answered { color: #fff; border-color: #7389e1; background: #7389e1; }
.question-list { gap: 12px; }.question-preview { padding: 18px; gap: 13px; }.q-number { flex-basis: 34px; width: 34px; height: 34px; border-radius: 11px; font-size: .9rem; }.q-body { flex: 1; }.q-body h3 { margin: 3px 0 10px; line-height: 1.5; }.inline-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }.inline-option { min-height: 43px; padding: 9px 12px; text-align: left; color: #4f586a; border: 1px solid #e9ebf1; border-radius: 11px; background: #fafbfc; transition: .14s ease; }.inline-option:hover:not(:disabled) { color: #4059cc; border-color: #cad3f7; background: #f5f7ff; }.inline-option:disabled { cursor: default; opacity: .82; }.inline-option.correct { color: #286d50; border-color: #b7dfc9; background: #f1faf4; }.inline-option.wrong { color: #a14f42; border-color: #f0c6bd; background: #fff5f2; }.inline-explanation { margin-top: 11px; padding: 10px 12px; color: #636d7f; border-radius: 10px; background: #f6f7fa; font-size: .88rem; }.inline-explanation strong { margin-right: 4px; color: #46556c; }.inline-explanation.is-correct strong { color: #26724f; }.inline-explanation.is-wrong strong { color: #a14f42; }
.guest-notice { margin-top: 14px; padding: 11px 14px; font-size: .84rem; }.signin-gate { display: flex; align-items: center; gap: 17px; margin: 14px 0 16px; padding: 17px 20px; border: 1px solid #dce2f6; border-radius: 16px; background: linear-gradient(110deg, #f7f8ff, #fffaf4); box-shadow: 0 7px 17px rgba(32,36,49,.035); }.signin-gate h2 { margin: 0 0 3px; color: #30384a; font-size: 1.02rem; }.signin-gate p { margin: 0 0 11px; color: #747d8e; font-size: .88rem; }.gate-icon { display: grid; flex: 0 0 43px; place-items: center; width: 43px; height: 43px; border-radius: 14px; color: #ce8452; background: #fff0e3; font-size: 1.2rem; }
.quiz-wrap, .summary { display: none !important; }
@media (max-width: 1050px) { .filter-toolbar { grid-template-columns: repeat(3, minmax(125px, 1fr)); }.toolbar-clear { min-height: 50px; } }
@media (max-width: 700px) { .site-shell { width: min(100% - 30px, 1420px); }.filter-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }.toolbar-field { min-height: 56px; }.bank-heading { align-items: flex-start; gap: 10px; }.browser-head { align-items: flex-start; flex-direction: column; }.inline-options { grid-template-columns: 1fr; }.question-preview { padding: 14px; }.question-index { gap: 6px; }.index-button { width: 33px; height: 33px; }.signin-gate { align-items: flex-start; padding: 15px; }.heading-right { display: flex; } }
@media (max-width: 430px) { .site-shell { width: calc(100% - 22px); }.nav-actions #google-signin { font-size: .8rem; }.filter-toolbar { gap: 7px; padding: 8px; }.toolbar-field { padding: 8px; }.toolbar-field label { font-size: .76rem; }.toolbar-field select { font-size: .82rem; }.bank-heading h1 { font-size: 1.13rem; }.guest-pill { font-size: .73rem; }.practice-browser { padding: 15px 12px 22px; } }
.button-quiet { padding: 9px 14px; color: #5f6b81; border-color: transparent; background: transparent; box-shadow: none; font-weight: 650; }.button-quiet:hover { color: #4059cc; background: #f2f4fb; }

/* Calm, familiar desktop polish with a restrained system-blue accent. */
:root { --primary: #0a84ff; --ink: #202124; --muted: #73777f; --line: #e5e5ea; }
body { color: #202124; background: #f5f5f7; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; }
.topbar { min-height: 68px; background: rgba(255,255,255,.88); border-bottom-color: rgba(60,60,67,.12); backdrop-filter: saturate(180%) blur(18px); }.main-nav { min-height: 68px; }.brand { color: #24262b; font-size: 23px; letter-spacing: -.8px; }.brand-icon { color: #0a84ff; font-size: 30px; }.nav-actions { margin-left: auto; }.button-quiet { color: #0a84ff; }.button-quiet:hover { color: #0067cc; background: #eef6ff; }
.question-page { min-height: calc(100vh - 68px); padding: 20px 0 48px; background: #f5f5f7; }.filter-toolbar { grid-template-columns: repeat(5, minmax(125px, 1fr)) auto; padding: 10px; gap: 9px; border: 1px solid rgba(60,60,67,.10); border-radius: 15px; background: rgba(255,255,255,.86); box-shadow: 0 2px 8px rgba(0,0,0,.035); backdrop-filter: blur(16px); }.toolbar-field, .toolbar-action { min-height: 57px; border: 1px solid #ededf0; border-radius: 11px; background: #f7f7f9; }.toolbar-field label { color: #4d5158; font-size: .79rem; font-weight: 700; }.toolbar-field select { color: #6d7178; font-size: .86rem; }.toolbar-action { justify-content: center; color: #555a63; background: #f7f7f9; }.toolbar-action:hover { color: #0a84ff; border-color: #d6e9ff; background: #f4f9ff; }.toolbar-clear { color: #6c7078; }
.practice-browser { margin-top: 16px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }.question-count { margin: 0 2px 10px; color: #777b83; font-size: .82rem; }.question-index { gap: 6px; margin: 0 0 12px; padding: 10px; border: 1px solid rgba(60,60,67,.09); border-radius: 13px; background: rgba(255,255,255,.87); }.index-button { width: 34px; height: 34px; color: #535862; border: 1px solid #e7e8ec; border-radius: 9px; background: #fff; box-shadow: none; }.index-button:hover { color: #0a84ff; border-color: #b9dcff; background: #f5faff; }.index-button.answered { color: #fff; border-color: #0a84ff; background: #0a84ff; }
.question-list { gap: 10px; }.question-preview { padding: 18px 20px; gap: 14px; border: 1px solid rgba(60,60,67,.09); border-radius: 15px; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.035); }.question-preview:hover { transform: none; border-color: #d8d9de; box-shadow: 0 4px 12px rgba(0,0,0,.05); }.q-number { color: #126cc2; background: #edf6ff; border-radius: 10px; }.q-body h3 { color: #25272b; font-size: 1rem; font-weight: 620; }.chips { margin-top: 5px; }.chip { color: #626770; background: #f2f2f5; font-weight: 600; }.inline-options { margin-top: 15px; gap: 8px; }.inline-option { min-height: 42px; padding: 9px 12px; color: #454951; border-color: #e7e8ec; border-radius: 10px; background: #fafafc; }.inline-option:hover:not(:disabled) { color: #006edb; border-color: #b9dcff; background: #f5faff; }.inline-option.correct { color: #23754a; border-color: #bee2cc; background: #f2faf5; }.inline-option.wrong { color: #b44f45; border-color: #f0c8c4; background: #fff6f5; }.inline-explanation { padding: 10px 12px; border-radius: 9px; color: #555b64; background: #f6f6f8; }.inline-explanation strong { color: #3d434c; }.explanation-login { margin-left: 8px; padding: 0; color: #0a84ff; border: 0; background: transparent; font-size: .87rem; font-weight: 650; }.explanation-login:hover { text-decoration: underline; }
.signin-gate { border-color: #dcecff; border-radius: 14px; background: #fff; box-shadow: 0 3px 11px rgba(0,0,0,.045); }.signin-gate h2 { color: #292b30; }.signin-gate p { color: #6c717a; }.gate-icon { color: #0a84ff; background: #edf6ff; border-radius: 12px; }.button-primary { color: #fff; border-color: #0a84ff; border-radius: 10px; background: #0a84ff; box-shadow: none; }.button-primary:hover { background: #0876e1; }.feedback-view { border-color: #e6e6eb; border-radius: 16px; background: #fff; box-shadow: 0 5px 18px rgba(0,0,0,.06); }.feedback-view h2 { color: #25272b; }.feedback-view .button-soft { color: #0a84ff; border-color: #dcecff; background: #f4f9ff; }.site-footer { padding: 22px 0; color: #7b7f87; border-top: 1px solid #e6e6eb; background: #f5f5f7; text-align: center; font-size: .84rem; }.footer-inner { justify-content: center; }
@media (max-width: 1050px) { .filter-toolbar { grid-template-columns: repeat(3, minmax(125px, 1fr)); } }
@media (max-width: 700px) { .filter-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }.question-preview { padding: 14px; }.inline-options { grid-template-columns: 1fr; } }
@media (max-width: 430px) { .filter-toolbar { grid-template-columns: 1fr 1fr; }.toolbar-field { min-width: 0; }.brand { font-size: 20px; }.nav-actions #google-signin { padding: 7px 10px; font-size: .79rem; } }

/* Premium study finish: quiet typography, crisp controls, warm paper and restrained blue. */
:root { --primary: #2878d0; }
body { background: #f5f5f7; color: #24262b; letter-spacing: -.008em; }
.site-shell { width: min(1360px, calc(100% - 72px)); }
.topbar { background: rgba(255,255,255,.92); border-bottom-color: rgba(34,38,46,.08); }
.brand { font-size: 24px; letter-spacing: -1.05px; }
.brand-icon { color: #397fc1; }
.question-page { padding-top: 26px; background: radial-gradient(ellipse at 50% -20%, rgba(255,255,255,.98), rgba(245,245,247,.92) 68%); }
.filter-toolbar { padding: 11px; gap: 8px; border-color: rgba(255,255,255,.96); border-radius: 17px; background: rgba(255,255,255,.84); box-shadow: 0 8px 24px rgba(28,34,45,.045); }
.toolbar-field, .toolbar-action { min-height: 59px; border-radius: 11px; background: #f7f7f9; }
.toolbar-field:focus-within { border-color: #bfdcff; box-shadow: 0 0 0 3px rgba(40,120,208,.09); }
.toolbar-field label { color: #414650; font-size: .8rem; letter-spacing: 0; }
.toolbar-field select { color: #737986; }
.practice-browser { margin-top: 22px; }
.question-count { margin: 0 2px 12px; color: #707783; font-size: .83rem; letter-spacing: .005em; }
.question-index { gap: 7px; margin-bottom: 15px; padding: 11px 12px; border-color: #e8e8ed; border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: 0 3px 12px rgba(28,34,45,.025); }
.index-button { width: 36px; height: 36px; border-radius: 10px; font-size: .86rem; transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease; }
.index-button:hover { transform: translateY(-1px); color: #126cc2; border-color: #bfdcff; background: #f6faff; }
.index-button.answered { border-color: #4c8fd2; background: #4c8fd2; }
.question-list { gap: 13px; }
.question-preview { padding: 22px 23px; gap: 16px; border: 1px solid #e9e9ee; border-radius: 17px; background: rgba(255,255,255,.98); box-shadow: 0 3px 12px rgba(28,34,45,.035); }
.question-preview:hover { border-color: #dedfe5; box-shadow: 0 7px 20px rgba(28,34,45,.055); }
.q-number { flex-basis: 36px; width: 36px; height: 36px; color: #3977aa; border-radius: 11px; background: #eef6fc; font-size: .86rem; }
.q-body h3 { margin: 2px 0 11px; color: #282b31; font-size: 1.03rem; font-weight: 640; line-height: 1.55; letter-spacing: -.012em; }
.chip { padding: 5px 9px; color: #66707d; border: 1px solid #eceef1; border-radius: 999px; background: #f7f8fa; font-size: .72rem; font-weight: 600; }
.inline-options { gap: 9px; margin-top: 16px; }
.inline-option { min-height: 46px; padding: 10px 13px; color: #474d57; border-color: #e7e9ee; border-radius: 11px; background: #fbfbfc; line-height: 1.4; }
.inline-option:hover:not(:disabled) { color: #176fc3; border-color: #bddbfa; background: #f5faff; }
.inline-explanation { margin-top: 13px; padding: 12px 14px; color: #5f6672; border: 1px solid #eceef1; border-radius: 11px; background: #f8f9fb; line-height: 1.55; }
.inline-explanation.is-correct { border-color: #dceee3; background: #f5fbf7; }
.inline-explanation.is-wrong { border-color: #f1e1de; background: #fff8f7; }
.site-footer { color: #858993; background: #f5f5f7; }
@media (max-width: 700px) {
  .site-shell { width: min(100% - 30px, 1360px); }
  .question-page { padding-top: 17px; }
  .filter-toolbar { padding: 9px; border-radius: 15px; }
  .question-preview { padding: 16px; gap: 12px; }
  .q-number { flex-basis: 32px; width: 32px; height: 32px; }
  .question-index { padding: 9px; }
}

/* Requested PYQ welcome and clearer first-screen actions. */
.welcome-row { display: flex; align-items: center; min-height: 46px; margin: 0 2px 10px; }
.welcome-row h1 { margin: 0; color: #25272c; font-size: 1.42rem; font-weight: 680; letter-spacing: -.045em; }
.signin-top { padding: 10px 15px; border-color: #2878d0; border-radius: 11px; color: #fff; background: #2878d0; box-shadow: 0 3px 9px rgba(40,120,208,.18); font-size: .88rem; }
.signin-top:hover { background: #176abd; }
.question-index { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: #d6d9df transparent; }
.index-button { flex: 0 0 36px; }
.footer-inner { justify-content: space-between; flex-wrap: wrap; color: #777b83; }
.site-footer { padding: 18px 0; }
@media (max-width: 700px) {
  .welcome-row { min-height: 39px; margin-bottom: 8px; }
  .welcome-row h1 { font-size: 1.25rem; }
  .footer-inner { justify-content: center; gap: 6px 16px; text-align: center; }
}
.empty p { margin: 0 0 12px; }
.empty .button { margin-top: 2px; }
.drive-status { margin: 12px 0 0; padding: 11px 14px; border: 1px solid; border-radius: 12px; font-size: .86rem; line-height: 1.5; }
.drive-status.warning { color: #775324; border-color: #f0dfbd; background: #fffaf0; }
.drive-status.error { color: #8a3d36; border-color: #f0d2ce; background: #fff7f6; }

/* Fresh identity: luminous, warm and polished without platform lookalikes. */
:root {
  --primary: #5268e8;
  --ink: #20283d;
  --muted: #6f7890;
  --line: rgba(61, 73, 112, .12);
  --accent-mint: #6fcbbb;
  --accent-peach: #f2ae8b;
  --lavender: #a99af4;
}
html { scroll-padding-top: 90px; }
body {
  color: var(--ink);
  background: #f5f5fa;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .brand { font-family: "Manrope", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif; }
.site-shell { width: min(1320px, calc(100% - 72px)); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 74px;
  border-bottom: 1px solid rgba(255,255,255,.78);
  background: rgba(250,250,253,.78);
  box-shadow: 0 5px 24px rgba(44, 52, 83, .045);
  backdrop-filter: saturate(170%) blur(22px);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
}
.main-nav { min-height: 74px; gap: 28px; }
.brand {
  min-width: 0;
  color: #273252;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.085em;
}
.site-nav { display: flex; align-items: center; gap: 7px; margin: 0 auto; }
.site-nav a {
  padding: 10px 14px;
  border-radius: 999px;
  color: #6a7389;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 650;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.site-nav a:hover { color: #3649b4; background: rgba(82,104,232,.08); transform: translateY(-1px); }
.site-nav a.active { color: #4358ca; background: rgba(82,104,232,.10); }
.nav-actions { margin-left: 0; }
.button { border-radius: 13px; font-size: .9rem; font-weight: 700; }
.button-primary, .button-gold {
  border: 1px solid rgba(255,255,255,.48);
  color: #fff;
  background: linear-gradient(128deg, #7186f2 0%, #5066e2 50%, #4556c9 100%);
  box-shadow: 0 8px 19px rgba(74, 91, 206, .23), inset 0 1px 0 rgba(255,255,255,.28);
}
.button-primary:hover, .button-gold:hover { filter: brightness(1.04); box-shadow: 0 11px 24px rgba(74,91,206,.28), inset 0 1px 0 rgba(255,255,255,.32); }
.signin-top { padding: 10px 16px; border-radius: 13px; }
.button-outline { color: #5264bb; border-color: rgba(82,104,232,.2); background: rgba(255,255,255,.74); }
.question-page {
  min-height: calc(100vh - 74px);
  overflow: hidden;
  padding: 27px 0 65px;
  background:
    radial-gradient(ellipse at 6% 5%, rgba(244, 190, 159, .24), transparent 26%),
    radial-gradient(ellipse at 95% 11%, rgba(162, 177, 255, .25), transparent 28%),
    radial-gradient(ellipse at 77% 86%, rgba(141, 222, 208, .14), transparent 24%),
    linear-gradient(145deg, #faf9fc 0%, #f5f6fb 52%, #f5f8f8 100%);
}
.welcome-row { justify-content: space-between; min-height: 58px; margin: 0 2px 17px; }
.welcome-eyebrow { display: block; margin-bottom: 3px; color: #818ba3; font-size: .72rem; font-weight: 700; letter-spacing: .10em; text-transform: uppercase; }
.welcome-row h1 { color: #28314b; font-size: clamp(1.45rem, 2vw, 1.8rem); font-weight: 750; letter-spacing: -.065em; }
.welcome-note { margin: 0 2px 0 20px; color: #80889a; font-size: .9rem; }
.filter-toolbar {
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 19px;
  background: rgba(255,255,255,.64);
  box-shadow: 0 15px 36px rgba(51, 59, 96, .07), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(20px) saturate(140%);
}
.toolbar-field, .toolbar-action { min-height: 59px; border: 1px solid rgba(75,86,123,.075); border-radius: 13px; background: rgba(248,249,253,.91); }
.toolbar-field:focus-within { border-color: rgba(82,104,232,.45); box-shadow: 0 0 0 4px rgba(82,104,232,.09); }
.toolbar-field label { color: #536080; font-size: .78rem; font-weight: 750; }
.toolbar-field select { color: #767f94; font-size: .87rem; }
.toolbar-action { color: #5d6883; }
.toolbar-action:hover { border-color: #e1e5fa; color: #4b5fd2; background: #fff; }
.toolbar-clear { color: #a26e67; }
.drive-status { border-radius: 13px; background: rgba(255,255,255,.82); box-shadow: 0 6px 20px rgba(42,53,93,.04); }
.practice-browser { margin-top: 19px; }
.question-count { margin: 0 3px 11px; color: #7b8499; font-size: .81rem; font-weight: 600; }
.question-index {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 15px;
  background: rgba(255,255,255,.68);
  box-shadow: 0 7px 22px rgba(53,62,97,.045), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
}
.index-button { border-color: #e9eaf2; border-radius: 11px; background: rgba(255,255,255,.92); }
.index-button:hover { color: #4257c8; border-color: #ccd4ff; background: #f5f6ff; }
.index-button.answered { border-color: #6c7deb; background: linear-gradient(145deg,#8293f4,#6578e8); }
.question-list { gap: 13px; }
.question-preview {
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.91));
  box-shadow: 0 7px 22px rgba(47, 55, 89, .055), inset 0 1px 0 #fff;
}
.question-preview:hover { border-color: #e2e5f1; box-shadow: 0 12px 28px rgba(47,55,89,.075), inset 0 1px 0 #fff; }
.q-number { color: #5363d2; background: linear-gradient(145deg,#eef0ff,#f2f7ff); }
.q-body h3 { color: #28314a; font-size: 1.08rem; font-weight: 700; letter-spacing: -.035em; }
.chip { color: #69738c; border-color: rgba(93,108,155,.08); background: #f5f6fb; }
.inline-option { color: #4e5870; border-color: #eaecf3; border-radius: 12px; background: linear-gradient(140deg,#fff,#fafbfe); box-shadow: 0 3px 9px rgba(42,51,83,.025); }
.inline-option:hover:not(:disabled) { color: #4a5dc9; border-color: #cbd3fc; background: linear-gradient(140deg,#fff,#f3f5ff); }
.inline-option.correct { color: #24775d; border-color: #bfe6d9; background: #f0fbf6; }
.inline-option.wrong { color: #ac5a54; border-color: #f2d1cc; background: #fff6f4; }
.inline-explanation { color: #5f6b82; border-color: #e9ebf4; background: linear-gradient(120deg,#f8f9ff,#fffaf7); }
.signin-gate { border-color: rgba(130,148,241,.24); border-radius: 17px; background: linear-gradient(120deg,rgba(255,255,255,.95),rgba(244,246,255,.93),rgba(255,249,244,.85)); box-shadow: 0 10px 27px rgba(57,67,111,.07); }
.gate-icon { color: #5369d8; background: linear-gradient(145deg,#e8ebff,#fff0e4); }
.site-footer { padding: 23px 0; color: #7b8293; border-top: 1px solid rgba(68,77,109,.08); background: rgba(250,250,253,.84); }
.footer-inner { align-items: center; }
.footer-inner nav { display: flex; gap: 20px; }
.footer-inner a { color: #687392; text-decoration: none; }
.footer-inner a:hover { color: #4e62d1; }

/* The two companion pages use the same visual language, with a quieter editorial layout. */
.info-page { min-height: 100vh; background: #f5f5fa; }
.info-main { overflow: hidden; padding: 42px 0 76px; background: radial-gradient(ellipse at 10% 0%,rgba(248,200,173,.23),transparent 27%),radial-gradient(ellipse at 96% 18%,rgba(165,179,255,.25),transparent 29%),#f5f5fa; }
.info-hero {
  position: relative;
  isolation: isolate;
  min-height: 360px;
  overflow: hidden;
  padding: 52px 62px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 30px;
  background: linear-gradient(117deg,rgba(255,255,255,.95) 4%,rgba(250,249,255,.93) 48%,rgba(239,244,255,.87) 100%);
  box-shadow: 0 22px 58px rgba(49,57,98,.085), inset 0 1px 0 #fff;
}
.info-hero h1 { position: relative; z-index: 1; max-width: 730px; margin: 25px 0 13px; color: #283250; font-size: clamp(2.6rem,6.1vw,5.15rem); font-weight: 750; line-height: 1.05; letter-spacing: -.075em; }
.info-hero h1 span { color: #6579e5; }
.info-hero > p { position: relative; z-index: 1; max-width: 620px; margin: 0 0 24px; color: #69748d; font-size: 1.08rem; line-height: 1.8; }
.info-hero .button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 12px; padding: 13px 18px; }
.eyebrow-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid rgba(88,103,190,.13); border-radius: 999px; color: #5364b8; background: rgba(255,255,255,.74); font-size: .78rem; font-weight: 750; letter-spacing: .015em; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(145deg,#80d3be,#5878ed); box-shadow: 0 0 0 4px rgba(107,181,200,.13); }
.hero-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.hero-orb-one { top: -145px; right: 7%; width: 440px; height: 440px; background: radial-gradient(circle at 35% 34%,rgba(255,255,255,.96),rgba(176,189,255,.42) 42%,rgba(139,155,236,.03) 72%); box-shadow: inset 0 0 55px rgba(255,255,255,.8),0 20px 70px rgba(105,122,209,.10); }
.hero-orb-two { right: 29%; bottom: -190px; width: 280px; height: 280px; background: radial-gradient(circle at 30% 25%,rgba(255,255,255,.82),rgba(241,186,157,.24) 60%,transparent 74%); }
.how-hero { min-height: 330px; padding-top: 47px; padding-bottom: 45px; }
.how-hero h1 { margin-top: 21px; }
.principles-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; margin-top: 19px; }
.principle-card { min-height: 263px; padding: 23px 25px; border: 1px solid rgba(255,255,255,.92); border-radius: 23px; background: rgba(255,255,255,.82); box-shadow: 0 12px 30px rgba(49,57,98,.055),inset 0 1px 0 #fff; }
.principle-blue { background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(237,242,255,.86)); }
.principle-peach { background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,242,232,.87)); }
.principle-lilac { background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(244,240,255,.9)); }
.principle-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,.94); border-radius: 14px; color: #5269d9; background: linear-gradient(145deg,#f0f2ff,#fff); box-shadow: 0 6px 14px rgba(58,70,133,.09); font-size: 1.15rem; }
.principle-peach .principle-icon { color: #cc805e; background: linear-gradient(145deg,#fff,#fff0e5); }
.principle-lilac .principle-icon { color: #7b68d3; background: linear-gradient(145deg,#fff,#f3efff); }
.card-kicker { margin: 17px 0 7px; color: #818ba2; font-size: .71rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.principle-card h2 { margin: 0 0 10px; color: #303a57; font-size: 1.38rem; line-height: 1.25; letter-spacing: -.05em; }
.principle-card > p:last-child { margin: 0; color: #737d94; font-size: .9rem; line-height: 1.7; }
.note-panel { display: grid; grid-template-columns: 73px 1fr; gap: 14px; align-items: start; margin-top: 19px; padding: 28px 32px; border: 1px solid rgba(255,255,255,.94); border-radius: 24px; background: rgba(255,255,255,.81); box-shadow: 0 10px 28px rgba(49,57,98,.05); }
.note-mark { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 19px; color: #5c71d8; background: linear-gradient(145deg,#edf0ff,#fff2e8); font-family: Georgia,serif; font-size: 3.5rem; line-height: 1; }
.note-panel .card-kicker { margin-top: 2px; }
.note-panel h2 { margin: 0 0 9px; color: #303a57; font-size: 1.45rem; letter-spacing: -.045em; }
.note-panel p:last-child { max-width: 840px; margin: 0; color: #737d94; line-height: 1.75; }
.steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin-top: 19px; }
.step-card { position: relative; min-height: 177px; padding: 23px; border: 1px solid rgba(255,255,255,.95); border-radius: 21px; background: rgba(255,255,255,.82); box-shadow: 0 10px 25px rgba(49,57,98,.05); }
.step-number { display: inline-grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; color: #5266d0; background: linear-gradient(145deg,#edf0ff,#f9f9ff); font-size: .76rem; font-weight: 800; }
.step-card h2 { margin: 15px 0 7px; color: #303a57; font-size: 1.14rem; letter-spacing: -.035em; }
.step-card p { margin: 0; color: #737d94; font-size: .9rem; line-height: 1.68; }
.sample-showcase { display: grid; grid-template-columns: minmax(240px,.75fr) minmax(0,1.25fr); gap: 35px; align-items: center; margin-top: 55px; padding: 0 11px; }
.sample-copy .card-kicker { margin-top: 0; }
.sample-copy h2 { max-width: 360px; margin: 0 0 12px; color: #303a57; font-size: 2rem; line-height: 1.18; letter-spacing: -.06em; }
.sample-copy > p:not(.card-kicker) { max-width: 390px; margin: 0 0 19px; color: #737d94; line-height: 1.7; }
.text-link { color: #5268d7; text-decoration: none; font-weight: 750; }
.text-link span { margin-left: 5px; }
.text-link:hover { color: #3548bd; }
.sample-card { padding: 24px 25px 19px; border: 1px solid rgba(255,255,255,.96); border-radius: 23px; background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,249,255,.95)); box-shadow: 0 18px 42px rgba(49,57,98,.09),inset 0 1px 0 #fff; }
.sample-card-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; align-items: center; }
.sample-label { padding: 6px 10px; border-radius: 999px; color: #5468cf; background: #eef0ff; font-size: .69rem; font-weight: 800; letter-spacing: .1em; }
.sample-meta { color: #858da0; font-size: .78rem; }
.sample-card h3 { margin: 18px 0 15px; color: #2b3550; font-size: 1.08rem; line-height: 1.55; letter-spacing: -.025em; }
.sample-options { display: grid; gap: 7px; margin: 0; padding: 0; list-style-position: inside; counter-reset: sample-option; }
.sample-options li { padding: 10px 12px; border: 1px solid #edf0f5; border-radius: 12px; color: #5a657e; background: rgba(255,255,255,.8); font-size: .88rem; }
.sample-options li::marker { color: #8792aa; font-weight: 750; }
.sample-options li.sample-correct { color: #277258; border-color: #c7e7dc; background: linear-gradient(100deg,#f2fbf7,#fff); }
.sample-correct span { float: right; color: #4e9b7d; font-size: .73rem; font-weight: 700; }
.sample-disclaimer { margin: 13px 0 0; color: #9097a6; font-size: .72rem; }
.drive-note { display: flex; align-items: center; gap: 16px; margin-top: 40px; padding: 21px 23px; border: 1px solid rgba(255,255,255,.96); border-radius: 20px; background: linear-gradient(110deg,rgba(255,255,255,.85),rgba(247,247,255,.82),rgba(255,247,241,.78)); box-shadow: 0 10px 27px rgba(49,57,98,.045); }
.drive-note-icon { display: grid; flex: 0 0 43px; width: 43px; height: 43px; place-items: center; border-radius: 14px; color: #5a6ed5; background: linear-gradient(145deg,#edf0ff,#fff0e4); }
.drive-note h2 { margin: 0 0 4px; color: #303a57; font-size: 1rem; }
.drive-note p { max-width: 820px; margin: 0; color: #737d94; font-size: .85rem; line-height: 1.6; }
.button-glass { flex: 0 0 auto; color: #5468ce; border-color: rgba(82,104,232,.18); background: rgba(255,255,255,.8); }

@media (max-width: 900px) {
  .site-shell { width: min(100% - 40px, 1320px); }
  .main-nav { gap: 14px; }
  .site-nav { gap: 0; }
  .site-nav a { padding: 9px 10px; font-size: .84rem; }
  .filter-toolbar { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .principles-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .principle-card:last-child { grid-column: 1 / -1; min-height: 215px; }
}
@media (max-width: 700px) {
  .site-shell { width: min(100% - 28px, 1320px); }
  .topbar, .main-nav { min-height: 66px; }
  .main-nav { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding-top: 7px; padding-bottom: 6px; }
  .brand { grid-column: 1; grid-row: 1; font-size: 23px; }
  .nav-actions { grid-column: 2; grid-row: 1; }
  .nav-actions .button { padding: 8px 11px; font-size: .79rem; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; margin: 1px 0 0 -8px; overflow-x: auto; }
  .site-nav a { padding: 6px 10px; font-size: .79rem; white-space: nowrap; }
  .welcome-row { align-items: flex-end; min-height: 50px; }
  .welcome-note { max-width: 45%; font-size: .78rem; text-align: right; }
  .filter-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .toolbar-field { min-height: 55px; }
  .question-page { padding-top: 17px; }
  .question-preview { padding: 16px; }
  .inline-options { grid-template-columns: 1fr; }
  .info-main { padding: 22px 0 46px; }
  .info-hero { min-height: 320px; padding: 35px 26px; border-radius: 24px; }
  .info-hero h1 { margin-top: 23px; font-size: clamp(2.45rem,12vw,4rem); }
  .info-hero > p { max-width: 95%; font-size: .98rem; }
  .hero-orb-one { top: -60px; right: -190px; width: 330px; height: 330px; opacity: .7; }
  .principles-grid, .steps-grid { grid-template-columns: 1fr; gap: 11px; }
  .principle-card, .principle-card:last-child { grid-column: auto; min-height: 0; padding: 21px; }
  .note-panel { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
  .note-panel h2 { font-size: 1.25rem; }
  .sample-showcase { grid-template-columns: 1fr; gap: 22px; margin-top: 38px; padding: 0; }
  .sample-copy h2 { font-size: 1.75rem; }
  .sample-card { padding: 19px 16px 15px; }
  .drive-note { align-items: flex-start; flex-wrap: wrap; padding: 18px; }
  .drive-note > div { flex: 1; min-width: 190px; }
  .drive-note .button { width: 100%; text-align: center; }
  .footer-inner { gap: 9px 16px; }
}
@media (max-width: 430px) {
  .site-shell { width: calc(100% - 22px); }
  .welcome-row { align-items: flex-start; flex-direction: column; gap: 3px; }
  .welcome-note { max-width: none; margin: 0; text-align: left; }
  .toolbar-field { padding: 8px; }
  .toolbar-field label { font-size: .75rem; }
  .toolbar-field select { font-size: .8rem; }
  .question-index { padding: 8px; }
  .footer-inner nav { justify-content: center; width: 100%; }
}