/* ═══════════════════════════════════════════════════════════════
   OHM'S ACADEMY — the C&G 2365-02 study hall (cglibrary.js,
   cgworksheets.js, cgcalc.js, cgexam.js). Four rooms, one visual
   language: glass panels in the zone's blue, one screen per step
   with a springy slide-in, LO colour-coding (--lo) throughout.
   ═══════════════════════════════════════════════════════════════ */
.view[data-view="academy"] { --zc: #6aa6ff; --cg-no: #ff5a6a; }

/* ── stage: every screen change slides in; items pop in stagger ── */
.cg-stage { display: grid; gap: var(--sp, 22px); min-width: 0; }
/* grid items default to min-width:auto — without this a wide table sizes the
   whole column instead of scrolling inside its .cg-tbl */
.cg-stage > * { min-width: 0; }
.cg-in { animation: cg-slide .5s var(--spring) backwards; }
@keyframes cg-slide { from { opacity: 0; transform: translateX(34px) scale(.985); } }
/* phones: rise in instead — a sideways slide pokes past the 16px gutter and
   can briefly widen the layout viewport mid-animation */
@keyframes cg-rise { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@media (max-width: 640px) { .cg-in { animation-name: cg-rise; } }
.cg-in .cg-book, .cg-in .cg-topic, .cg-in .cg-mode, .cg-in .cg-ans, .cg-in .cg-ws, .cg-in .cg-lorow, .cg-in .cg-crow { animation: cg-pop .46s var(--spring) backwards; animation-delay: var(--d, 0ms); }
@keyframes cg-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.cg-mono { font-family: var(--font-m); }

/* ── shared chrome ── */
.cg-hero { overflow: hidden; background: var(--panel); border-top: 3px solid var(--zc); }
.cg-hero .db-tag, [data-view="academy"] .db-tag { color: var(--zc); }
.cg-hero h3 { font: 800 clamp(1.6rem, 3vw, 2.1rem)/1.1 var(--font-c); letter-spacing: .01em; color: var(--ink); margin: 2px 0 10px; }
.cg-cond { margin-top: 10px; font: 500 0.9rem/1.6 var(--font-b); color: var(--dim); }
.cg-cond b { color: var(--ink); }
.cg-foot { font: 500 0.9rem/1.6 var(--font-b); color: var(--faint); text-align: center; padding: 0 10px; }
.cg-prompt { font: 500 0.8rem/1.6 var(--font-d); color: var(--dim); font-style: italic; margin: 12px 0 2px; }
.cg-prompt b { color: var(--yellow); font-style: normal; }
.cg-empty { padding: 26px; text-align: center; color: var(--dim); font: 500 0.9rem/1.6 var(--font-b); border: 1px dashed var(--line-brt); border-radius: var(--r-md); }

.cg-topbar, .cg-qmeta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cg-back { margin-left: auto; order: 9; font: 700 0.85rem/1 var(--font-c); color: var(--dim); border: 1px solid var(--line); border-radius: 7px; padding: 8px 13px; background: rgba(0,0,0,.2); transition: color .18s, border-color .18s, transform .2s var(--spring); letter-spacing: 0.04em; }
.cg-topbar .cg-back { margin-left: 0; order: 0; }
.cg-back:hover { color: var(--ink); border-color: var(--zc); transform: translateX(-2px); }
.cg-count { margin-left: auto; font: 700 0.8rem/1 var(--font-c); color: var(--faint); letter-spacing: 0.05em; }
.cg-qmeta > span { font: 700 .95rem/1 var(--font-c); color: var(--dim); letter-spacing: 0.04em; }
.cg-qmeta > span b { color: var(--ink); font-size: .9rem; }

.cg-loading { display: flex; align-items: center; gap: 12px; color: var(--dim); font: 500 1rem/1 var(--font-b); }
.cg-spin { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; border: 2px solid color-mix(in srgb, var(--zc) 25%, transparent); border-top-color: var(--zc); animation: cg-spin .8s linear infinite; }
@keyframes cg-spin { to { transform: rotate(360deg); } }

/* unit picker — segmented pills */
.cg-unitpick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cg-unitpick button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 96px; flex: 1 1 96px; padding: 10px 13px; border-radius: 12px; text-align: left; color: var(--ink); background: rgba(0,0,0,.22); border: 1px solid var(--line); transition: transform .22s var(--spring), border-color .18s, background .18s, box-shadow .2s; }
.cg-unitpick button b { font: 700 1.05rem/1 var(--font-m); }
.cg-unitpick button span { font: 600 .82rem/1.3 var(--font-c); color: var(--faint); letter-spacing: 0.02em; }
.cg-unitpick button:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--zc) 55%, transparent); }
.cg-unitpick button.on { border-color: var(--zc); transform: translateY(-2px); background: color-mix(in srgb, var(--zc) 16%, var(--panel-2)); }
.cg-unitpick button.on span { color: var(--silver); }

/* meters */
.cg-meter, .cg-progress { display: block; height: 6px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.cg-meter i, .cg-progress i { display: block; height: 100%; border-radius: inherit; background: var(--zc); transition: width .6s var(--spring); }
.cg-progress { margin-top: 12px; height: 4px; }

/* ═══ THE LIBRARY ═══ */
.cg-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cg-book { --bk: var(--zc); position: relative; display: grid; grid-template-columns: 58px 1fr; grid-template-rows: 1fr auto; text-align: left; color: var(--ink); min-height: 150px; overflow: hidden; border-radius: 6px var(--r-md) var(--r-md) 6px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid var(--line); box-shadow: 0 14px 30px -18px rgba(0,0,0,.9), 0 3px 0 rgba(0,0,0,.35); transition: transform .3s var(--spring), border-color .2s, box-shadow .3s; }
.cg-book:nth-child(1) { --bk: #ffb04a; } .cg-book:nth-child(2) { --bk: #7cb4ff; } .cg-book:nth-child(3) { --bk: #57d49a; }
.cg-book:nth-child(4) { --bk: #ffd35c; } .cg-book:nth-child(5) { --bk: #b387ff; }
.cg-book:hover { transform: translateY(-5px) rotate(-.6deg); border-color: color-mix(in srgb, var(--bk) 55%, transparent); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.cg-book:active { transform: scale(.97); }
.cg-book-num { grid-row: 1 / 3; display: grid; place-items: center; font: 700 1.15rem/1 var(--font-c); color: #0b0718; writing-mode: vertical-rl; transform: rotate(180deg); background: linear-gradient(90deg, color-mix(in srgb, var(--bk) 70%, #000), var(--bk) 40%, color-mix(in srgb, var(--bk) 80%, #fff)); box-shadow: inset -3px 0 0 rgba(0,0,0,.25); letter-spacing: 0.05em; }
.cg-book-body { display: flex; flex-direction: column; gap: 7px; padding: 16px 16px 8px; }
.cg-book-body b { font: 700 0.98rem/1.25 var(--font-d); }
.cg-book-body em { font: 500 .9rem/1.45 var(--font-b); font-style: normal; color: var(--faint); }
.cg-book .cg-meter i { background: var(--bk); }
.cg-book-foot { font: 700 0.8rem/1 var(--font-c); color: var(--dim); letter-spacing: 0.05em; }
.cg-book.full .cg-book-foot { color: var(--green); }
.cg-go { justify-self: end; padding: 0 16px 14px; font: 700 0.85rem/1 var(--font-c); color: var(--bk); transition: transform .2s var(--spring); letter-spacing: 0.04em; }
.cg-book:hover .cg-go { transform: translateX(4px); }

.cg-unittitle { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 14px; }
.cg-unittitle b { font: 700 2rem/1 var(--font-m); color: var(--zc); }
.cg-unittitle span { font: 700 1.05rem/1.3 var(--font-d); }

/* the breaker rail — one MCB per topic, LO-coloured, thrown ON when covered */
.cg-rail { position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; border-radius: 12px; background: linear-gradient(180deg, #17122b, #0d0a1c); border: 1px solid var(--line); box-shadow: inset 0 2px 10px rgba(0,0,0,.5); }
.cg-mcb { position: relative; width: 34px; height: 60px; padding: 6px 0 5px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border-radius: 5px; background: linear-gradient(180deg, #f3f1fa, #cfcadf); border: 1px solid rgba(0,0,0,.45); border-top: 4px solid var(--lo); box-shadow: 0 3px 0 rgba(0,0,0,.4); transition: transform .2s var(--spring), box-shadow .25s; }
.cg-mcb:hover { transform: translateY(-3px); }
.cg-mcb i { position: relative; width: 12px; height: 22px; border-radius: 3px; background: #2a2440; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); }
.cg-mcb i::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 9px; border-radius: 2px; background: #6d6784; transition: bottom .28s var(--spring), background .2s; }
.cg-mcb.on i::after { bottom: 11px; background: var(--lo); box-shadow: none; }
.cg-mcb.on { box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.cg-mcb b { font: 700 .55rem/1 var(--font-m); color: #2a2440; }

.cg-tools { display: grid; gap: 12px; margin-top: 14px; }
.cg-search, .cg-select { width: 100%; padding: 12px 15px; border-radius: 12px; font: 500 1rem/1.2 var(--font-b); color: var(--ink); background: rgba(0,0,0,.28); border: 1px solid var(--line); transition: border-color .18s, box-shadow .2s; }
.cg-select { margin-top: 12px; cursor: pointer; }
.cg-select option { background: #120b26; color: var(--ink); }
.cg-search:focus, .cg-select:focus { outline: none; border-color: var(--zc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--zc) 22%, transparent); }
.cg-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 7px; font: 700 0.8rem/1 var(--font-c); color: var(--dim); background: rgba(0,0,0,.2); border: 1px solid var(--line); transition: transform .2s var(--spring), color .15s, border-color .15s, background .15s; letter-spacing: 0.05em; }
.cg-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--lo); box-shadow: none; }
.cg-chip:hover { color: var(--ink); transform: translateY(-2px); }
.cg-chip.on { color: var(--ink); border-color: var(--lo, var(--zc)); background: color-mix(in srgb, var(--lo, var(--zc)) 16%, transparent); }
.cg-fchip { margin-left: auto; color: var(--zc); border-color: color-mix(in srgb, var(--zc) 45%, transparent); }

.cg-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cg-topic { display: grid; grid-template-columns: 38px 1fr 24px; align-items: start; gap: 12px; padding: 14px 14px 14px 12px; text-align: left; color: var(--ink); border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--line); border-left: 3px solid var(--lo); transition: transform .22s var(--spring), border-color .18s, background .18s; }
.cg-topic:hover { transform: translateY(-3px); background: var(--glass-brt); border-color: color-mix(in srgb, var(--lo) 50%, transparent); border-left-color: var(--lo); }
.cg-tnum { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font: 700 0.8rem/1 var(--font-m); color: var(--lo, var(--zc)); background: color-mix(in srgb, var(--lo, var(--zc)) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lo, var(--zc)) 35%, transparent); }
.cg-tnum.big { width: 54px; height: 54px; font-size: 1.2rem; border-radius: 14px; flex: 0 0 auto; }
.cg-tbody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cg-tbody b { font: 700 0.86rem/1.3 var(--font-d); }
.cg-tbody em { font: 500 .94rem/1.5 var(--font-b); font-style: normal; color: var(--dim); }
.cg-tac { font: 700 0.8rem/1.4 var(--font-c); color: var(--faint); letter-spacing: 0.05em; }
.cg-ttick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px dashed var(--line-brt); font: 700 0.8rem/1 var(--font-d); }
.cg-topic.done { background: color-mix(in srgb, var(--green) 4%, var(--glass)); }
.cg-topic.done .cg-ttick { border: 0; color: #06210a; background: var(--green); box-shadow: none; }

/* reader */
.cg-reader { border-top: 3px solid var(--lo); }
.cg-rhead { display: flex; gap: 16px; align-items: flex-start; margin: 16px 0 6px; }
.cg-rhead h3 { font: 700 clamp(1.15rem, 2.4vw, 1.45rem)/1.25 var(--font-d); letter-spacing: .01em; color: var(--ink); margin: 0 0 6px; }
.cg-lo { font: 600 .95rem/1.45 var(--font-b); color: var(--lo); }
.cg-notes { display: grid; gap: 4px; margin-top: 14px; }
.cg-notes h4 { font: 700 0.8rem/1.3 var(--font-d); letter-spacing: .08em; color: var(--silver); margin: 14px 0 4px; text-transform: uppercase; }
.cg-notes p { font: 400 0.92rem/1.7 var(--font-d); color: #dcd8f0; }
.cg-notes ul { margin: 4px 0 4px 2px; list-style: none; display: grid; gap: 5px; }
.cg-notes li { position: relative; padding-left: 18px; font: 400 0.88rem/1.6 var(--font-d); color: #dcd8f0; }
.cg-notes li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--lo); transform: rotate(45deg); }
.cg-tbl { overflow-x: auto; margin: 8px 0; border-radius: 12px; border: 1px solid var(--line); }
.cg-tbl table { width: 100%; border-collapse: collapse; font: 500 .92rem/1.45 var(--font-b); }
.cg-tbl th { text-align: left; padding: 9px 12px; font-weight: 700; font-family: var(--font-c); font-size: .85rem; letter-spacing: .04em; color: var(--silver); background: rgba(255,255,255,.05); border-bottom: 1px solid var(--line); }
.cg-tbl td { padding: 9px 12px; color: #dcd8f0; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: top; }
.cg-tbl tr:last-child td { border-bottom: 0; }
.cg-sec { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 10px; font: 700 0.8rem/1 var(--font-c); color: var(--zc); letter-spacing: 0.05em; }
.cg-sec em { font-style: normal; color: var(--faint); letter-spacing: .08em; }
.cg-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.cg-fig { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; border-radius: 12px; background: rgba(0,0,0,.22); border: 1px solid var(--line); }
.cg-fig span { font: 600 .85rem/1.35 var(--font-c); color: var(--faint); letter-spacing: 0.03em; }
.cg-fig b { font: 700 0.95rem/1.25 var(--font-m); color: var(--yellow); }

/* flashcard — 3D flip */
.cg-card { display: block; width: 100%; height: 190px; perspective: 1100px; padding: 0; border: 0; background: none; text-align: left; }
.cg-card-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s var(--spring); }
.cg-card.flip .cg-card-in { transform: rotateY(180deg); }
.cg-card:hover .cg-card-in { box-shadow: none; }
.cg-card-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 20px 22px 30px 64px; border-radius: var(--r-md); backface-visibility: hidden; -webkit-backface-visibility: hidden; font: 500 1rem/1.5 var(--font-d); color: var(--ink); background: linear-gradient(150deg, color-mix(in srgb, var(--zc) 20%, #120b26), #0e0920); border: 1px solid color-mix(in srgb, var(--zc) 40%, transparent); box-shadow: none; }
.cg-card-a { transform: rotateY(180deg); background: linear-gradient(150deg, color-mix(in srgb, var(--green) 14%, #0e1a14), #0a1310); border-color: rgba(0,255,2,.35); box-shadow: none; }
.cg-card-face b { position: absolute; left: 18px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; font: 700 .95rem/1 var(--font-m); color: #0b0718; background: var(--zc); }
.cg-card-a b { background: var(--green); }
.cg-card-face i { position: absolute; right: 16px; bottom: 11px; font: 700 0.8rem/1 var(--font-c); font-style: normal; color: var(--faint); letter-spacing: 0.05em; }
.cg-cardnav { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.cg-cardnav button, .cg-step { font: 700 0.85rem/1 var(--font-c); color: var(--dim); padding: 9px 14px; border-radius: 7px; border: 1px solid var(--line); background: rgba(0,0,0,.2); transition: color .15s, border-color .15s, transform .2s var(--spring); letter-spacing: 0.04em; }
.cg-cardnav button:hover, .cg-step:hover:not(:disabled) { color: var(--ink); border-color: var(--zc); transform: translateY(-2px); }
.cg-step:disabled { opacity: .3; cursor: default; }

.cg-readfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 16px; }
.cg-throw { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 7px; font: 700 0.85rem/1.2 var(--font-c); color: var(--ink); background: rgba(0,0,0,.28); border: 1px solid var(--line-brt); transition: transform .22s var(--spring), border-color .2s, box-shadow .25s, background .2s; letter-spacing: 0.04em; }
.cg-throw:hover { transform: translateY(-2px); border-color: var(--zc); }
.cg-throw:active { transform: scale(.96); }
.cg-throw-mcb { display: grid; place-items: center; width: 26px; height: 38px; border-radius: 4px; flex: 0 0 auto; background: linear-gradient(180deg, #f3f1fa, #cfcadf); border-top: 3px solid var(--lo, var(--zc)); }
.cg-throw-mcb i { position: relative; width: 10px; height: 18px; border-radius: 2px; background: #2a2440; }
.cg-throw-mcb i::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 7px; border-radius: 1px; background: #6d6784; transition: bottom .3s var(--spring), background .2s; }
.cg-throw.on { color: #06210a; background: var(--green); border-color: transparent; box-shadow: 0 3px 0 #0a6b0b; }
.cg-throw.on .cg-throw-mcb i::after { bottom: 10px; background: var(--green); box-shadow: none; }
.cg-xphint { flex-basis: 100%; text-align: center; font: 500 0.9rem/1.5 var(--font-b); color: var(--faint); transition: color .2s; }
.cg-xphint.ready { color: var(--green); }

/* formula sheet (Library tab + Exam Hall aid) */
.cg-h3 { font: 700 1.2rem/1.3 var(--font-d) !important; color: var(--ink) !important; letter-spacing: .01em !important; margin: 16px 0 6px !important; }
.cg-fsheet { display: grid; gap: 8px; margin-top: 14px; }
.cg-fgroup { border-radius: var(--r-md); border: 1px solid var(--line); background: rgba(0,0,0,.18); overflow: hidden; transition: border-color .2s; }
.cg-fgroup.open { border-color: color-mix(in srgb, var(--zc) 45%, transparent); }
.cg-fghead { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 16px; text-align: left; font: 700 0.8rem/1.3 var(--font-d); color: var(--ink); background: none; border: 0; }
.cg-fghead:hover { background: rgba(255,255,255,.04); }
.cg-fghead > span:first-child { flex: 1; }
.cg-fghead i { font-style: normal; color: var(--faint); transition: transform .3s var(--spring); }
.cg-fgroup.open .cg-fghead i { transform: rotate(180deg); color: var(--zc); }
.cg-rel { font: 700 0.8rem/1 var(--font-c); padding: 4px 8px; border-radius: 7px; color: #0b0718; background: var(--yellow); letter-spacing: 0.05em; }
.cg-fgbody { display: grid; gap: 10px; padding: 4px 14px 16px; animation: cg-pop .4s var(--spring) backwards; }
.cg-fitem { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); }
.cg-fx { font: 700 1.15rem/1.3 var(--font-m); color: var(--zc); }
.cg-fname { font: 600 0.8rem/1.3 var(--font-d); color: var(--silver); letter-spacing: .04em; }
.cg-fsym { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 2px 0; }
.cg-fsym dt { font: 700 .9rem/1.5 var(--font-m); color: var(--yellow); }
.cg-fsym dd { font: 400 0.8rem/1.5 var(--font-d); color: #dcd8f0; }
.cg-fsym em { font: 500 0.75rem/1 var(--font-m); font-style: normal; color: var(--faint); }
.cg-fln { display: grid; grid-template-columns: 70px 1fr; gap: 10px; font: 400 0.8rem/1.55 var(--font-d); color: #dcd8f0; }
.cg-fln b { font: 700 0.8rem/1.9 var(--font-c); color: var(--faint); letter-spacing: 0.05em; }
.cg-ftip { padding: 9px 12px; border-radius: 10px; font: 500 0.8rem/1.55 var(--font-d); color: #ffe9b0; background: color-mix(in srgb, var(--yellow) 9%, transparent); border-left: 3px solid var(--yellow); }
.cg-ftip::before { content: "⚠ TRAP  "; font: 700 0.8rem/1 var(--font-c); color: var(--yellow); letter-spacing: 0.05em; }

/* ═══ EXAM HALL / BENCH / DESK — lobby ═══ */
.cg-spec { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.cg-spec span { padding: 8px 12px; border-radius: 10px; font: 700 0.8rem/1.2 var(--font-c); color: var(--dim); background: rgba(0,0,0,.22); border: 1px solid var(--line); letter-spacing: 0.05em; }
.cg-spec b { color: var(--ink); font-size: .82rem; margin: 0 3px; }
.cg-spec .cg-book-rule { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 35%, transparent); letter-spacing: .04em; }
.cg-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cg-mode { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 14px 15px; text-align: left; color: var(--ink); border-radius: var(--r-md); background: rgba(0,0,0,.2); border: 1px solid var(--line); transition: transform .22s var(--spring), border-color .18s, background .18s, box-shadow .2s; }
.cg-mode b { font: 700 0.86rem/1.25 var(--font-d); padding-right: 46px; }
.cg-mode span { font: 500 .94rem/1.45 var(--font-b); color: var(--faint); }
.cg-mode i { position: absolute; top: 12px; right: 12px; font: 700 0.8rem/1 var(--font-c); font-style: normal; padding: 4px 7px; border-radius: 7px; color: var(--dim); background: rgba(255,255,255,.06); letter-spacing: 0.05em; }
.cg-mode:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--zc) 50%, transparent); }
.cg-mode.on { transform: translateY(-2px); border-color: var(--zc); background: color-mix(in srgb, var(--zc) 14%, var(--panel-2)); }
.cg-mode.on span { color: var(--silver); }
.cg-mode.on i { color: #0b0718; background: var(--zc); }
.cg-lens { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-top: 4px; }
.cg-startbtn { display: block; margin: 16px auto 2px; padding: 15px 30px; font-size: .82rem; }

/* ═══ question screens (exam + bench + desk) ═══ */
.cg-qbar { padding: 14px 18px; }
.cg-clock { font: 700 .95rem/1 var(--font-m) !important; color: var(--yellow) !important; letter-spacing: 0.04em; }
.cg-clock.low { color: var(--cg-no) !important; animation: warn-blink 1s steps(2) infinite; }
.cg-question { border-top: 3px solid var(--lo, var(--zc)); }
.cg-qtag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 0.8rem/1.4 var(--font-c); color: var(--faint); letter-spacing: 0.05em; }
.cg-off { padding: 3px 8px; border-radius: 7px; font-weight: 700; letter-spacing: .12em; color: #0b0718; background: var(--yellow); }
.cg-qtxt { font: 600 clamp(1rem, 2.1vw, 1.2rem)/1.5 var(--font-d) !important; letter-spacing: .005em !important; color: var(--ink) !important; margin: 12px 0 16px !important; }
.cg-pic { display: grid; place-items: center; margin: 0 0 16px; padding: 14px; border-radius: var(--r-md); background: #f6f4fb; }
.cg-pic svg { max-width: 100%; height: auto; max-height: 280px; }
.cg-pic.sm svg { max-height: 170px; }
.cg-sheetwrap { margin: 0 0 16px; }
.cg-sheetbtn { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 7px; font: 700 0.8rem/1 var(--font-c); color: var(--zc); border: 1px solid color-mix(in srgb, var(--zc) 45%, transparent); background: color-mix(in srgb, var(--zc) 8%, transparent); transition: transform .2s var(--spring), background .15s; letter-spacing: 0.05em; }
.cg-sheetbtn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--zc) 15%, transparent); }
.cg-sheetbtn i { font-style: normal; }

.cg-answers { display: grid; gap: 9px; }
.cg-ans { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 15px; text-align: left; font: 500 0.9rem/1.45 var(--font-d); color: var(--ink); border-radius: var(--r-md); background: rgba(0,0,0,.22); border: 1px solid var(--line); transition: transform .2s var(--spring), border-color .15s, background .15s, box-shadow .2s; }
.cg-key { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; font: 700 0.75rem/1 var(--font-m); color: var(--dim); background: rgba(255,255,255,.06); border: 1px solid var(--line); transition: background .15s, color .15s; }
.cg-ans:hover:not(:disabled) { transform: translateX(4px); border-color: color-mix(in srgb, var(--zc) 55%, transparent); background: rgba(255,255,255,.04); }
.cg-ans:hover:not(:disabled) .cg-key { color: var(--ink); border-color: var(--zc); }
.cg-ans:active:not(:disabled) { transform: scale(.98); }
.cg-ans:disabled { cursor: default; }
.cg-ans.picked { border-color: var(--pink); background: color-mix(in srgb, var(--brand) 16%, transparent); }
.cg-ans.picked .cg-key { color: #fff; background: var(--brand); border-color: transparent; }
.cg-ans.ok { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); box-shadow: none; animation: opt-right .45s var(--spring); }
.cg-ans.ok .cg-key { color: #06210a; background: var(--green); border-color: transparent; }
.cg-ans.no { border-color: var(--cg-no); background: color-mix(in srgb, var(--cg-no) 10%, transparent); animation: fl-shake .4s; }
.cg-ans.no .cg-key { color: #fff; background: var(--cg-no); border-color: transparent; }
.cg-ans:disabled:not(.ok):not(.no):not(.picked) { opacity: .55; }

.cg-fb { display: flex; flex-direction: column; gap: 5px; margin-top: 14px; padding: 12px 15px; border-radius: 12px; font: 400 0.8rem/1.6 var(--font-d); color: #dcd8f0; animation: cg-pop .4s var(--spring) backwards; }
.cg-fb b { font: 700 0.75rem/1.4 var(--font-m); letter-spacing: .06em; }
.cg-fb.good { background: color-mix(in srgb, var(--green) 8%, transparent); border: 1px solid rgba(0,255,2,.3); }
.cg-fb.good b { color: var(--green); }
.cg-fb.bad { background: color-mix(in srgb, var(--cg-no) 8%, transparent); border: 1px solid color-mix(in srgb, var(--cg-no) 35%, transparent); }
.cg-fb.bad b { color: #ff8d98; }
.cg-qnav { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.cg-qnav .btn-ghost:disabled { opacity: .3; cursor: default; transform: none; }

/* ═══ result sheet ═══ */
.cg-cert { overflow: hidden; }
.cg-cert::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--zc); }
.cg-cert.pass::before { background: var(--green); }
.cg-cert.fail::before { background: var(--cg-no); }
.cg-certhd { font: 700 0.8rem/1.5 var(--font-c); color: var(--faint); text-align: center; letter-spacing: 0.05em; }
.cg-score { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin: 20px 0 22px; }
.cg-score .qz-ring { --ring: var(--green); width: 130px; height: 130px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; text-align: center; background:
    radial-gradient(closest-side, var(--bg-2) 82%, transparent 83% 100%),
    conic-gradient(var(--ring) calc(var(--pct) * 1%), rgba(255,255,255,.08) 0); animation: ring-in .8s var(--spring) both; }
.cg-cert.fail .qz-ring { --ring: var(--cg-no); }
.cg-scoretext { position: relative; max-width: 420px; }
.cg-pc { display: block; font: 700 2.6rem/1 var(--font-d); color: var(--ink); }
.cg-cert.pass .cg-pc { color: var(--green); }
.cg-scoretext p { margin-top: 8px; font: 500 0.9rem/1.65 var(--font-b); color: var(--dim); }
.cg-stamp { position: absolute; top: -8px; right: -6px; rotate: -10deg; padding: 6px 12px; border-radius: 6px; font: 700 0.82rem/1 var(--font-c); border: 3px solid currentColor; animation: cg-stamp .55s var(--spring) .35s backwards; letter-spacing: 0.05em; }
.cg-stamp.pass { color: var(--green); }
.cg-stamp.fail { color: var(--cg-no); }
@keyframes cg-stamp { from { opacity: 0; transform: scale(2.6); } }
.cg-lobrk { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-md); background: rgba(0,0,0,.2); border: 1px solid var(--line); margin-bottom: 20px; }
.cg-lorow { display: grid; grid-template-columns: 62px 1fr 48px; align-items: center; gap: 4px 12px; }
.cg-loid { font: 700 0.75rem/1 var(--font-m); color: var(--lo); letter-spacing: .06em; }
.cg-lomtr { height: 8px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.cg-lomtr i { display: block; height: 100%; border-radius: inherit; animation: cg-grow .9s var(--spring) .2s backwards; }
@keyframes cg-grow { from { width: 0; } }
.cg-lomtr i.good { background: var(--green); }
.cg-lomtr i.ok { background: var(--yellow); }
.cg-lomtr i.bad { background: var(--red); }
.cg-lov { font: 700 0.75rem/1 var(--font-m); color: var(--ink); text-align: right; }
.cg-lotxt { grid-column: 1 / -1; font: 500 .9rem/1.45 var(--font-b); color: var(--faint); margin-top: -2px; }
.cg-cert .qz-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.cg-review { display: grid; gap: 4px; }
.cg-rv { padding: 16px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.cg-rv:first-of-type { border-top: 0; }
.cg-rvq { font: 600 0.9rem/1.55 var(--font-d); color: var(--ink); }
.cg-rvl { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: baseline; font: 500 0.8rem/1.5 var(--font-d); }
.cg-rvl i { font: 700 0.8rem/1 var(--font-c); font-style: normal; letter-spacing: 0.05em; }
.cg-rvl.you i, .cg-rvl.you span { color: #ff8d98; }
.cg-rvl.right i, .cg-rvl.right span { color: var(--green); }
.cg-rvwhy { font: 400 0.8rem/1.6 var(--font-d); color: var(--dim); padding: 9px 12px; border-left: 2px solid var(--zc); background: rgba(255,255,255,.03); border-radius: 0 8px 8px 0; }

/* ═══ THE WORKSHEET DESK ═══ */
.cg-wslist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.cg-ws { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; padding: 13px 14px 13px 12px; text-align: left; color: var(--ink); border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--line); transition: transform .22s var(--spring), border-color .18s, background .18s; }
.cg-ws:hover { transform: translateY(-3px); background: var(--glass-brt); border-color: color-mix(in srgb, var(--zc) 50%, transparent); }
.cg-wsn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font: 700 0.8rem/1 var(--font-m); color: var(--zc); background: color-mix(in srgb, var(--zc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--zc) 35%, transparent); }
.cg-wst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cg-wst b { font: 700 0.82rem/1.3 var(--font-d); }
.cg-wst em { font: 700 .84rem/1.3 var(--font-c); font-style: normal; color: var(--green); letter-spacing: 0.03em; }
.cg-wsc { font: 700 0.8rem/1 var(--font-c); color: var(--faint); padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,.05); letter-spacing: 0.05em; }
.cg-ws.done .cg-wsn { color: #06210a; background: var(--green); border-color: transparent; box-shadow: none; }
.cg-blank { display: inline-block; width: 7em; max-width: 100%; height: 1em; margin: 0 .3em; vertical-align: -.15em; border-bottom: 2px dotted var(--yellow); }
.cg-qtxt, .cg-rvq, .cg-ansbox p, .cg-pp, .cg-rvwhy, .cg-fb { overflow-wrap: anywhere; }
.cg-intro { margin: 12px 0 0; padding: 10px 13px; border-radius: 10px; font: 400 0.8rem/1.6 var(--font-d); color: #dcd8f0; background: color-mix(in srgb, var(--zc) 7%, transparent); border-left: 3px solid var(--zc); }
.cg-wt td.cg-rowlab { font-weight: 700; color: var(--silver); }
.cg-wt td.blank { color: var(--yellow); font-weight: 700; text-align: center; background: repeating-linear-gradient(135deg, rgba(255,201,61,.05) 0 6px, transparent 6px 12px); }
.cg-wt td.fill { color: var(--green); font-weight: 700; background: color-mix(in srgb, var(--green) 9%, transparent); animation: cg-pop .4s var(--spring) backwards; }
.cg-parts { display: grid; gap: 8px; }
.cg-part { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.2); border: 1px solid var(--line); }
.cg-pl { font: 700 0.76rem/1 var(--font-m); color: var(--zc); }
.cg-pp { font: 400 0.84rem/1.5 var(--font-d); color: #dcd8f0; }
.cg-pv { font: 700 0.82rem/1.3 var(--font-m); color: var(--green); text-align: right; animation: cg-pop .4s var(--spring) backwards; }
.cg-pv.hid { color: var(--yellow); animation: none; }
.cg-ansbox { margin-top: 16px; padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--green) 5%, transparent); border: 1px solid rgba(0,255,2,.22); border-left: 3px solid var(--green); animation: cg-pop .4s var(--spring) backwards; }
.cg-ansbox h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 700 0.8rem/1.3 var(--font-c); color: var(--green); letter-spacing: 0.05em; }
.cg-ansbox p { margin-top: 8px; font: 400 0.88rem/1.65 var(--font-d); color: var(--ink); white-space: pre-line; }
.cg-badge { font: 700 0.8rem/1 var(--font-c); font-style: normal; padding: 4px 8px; border-radius: 7px; letter-spacing: 0.05em; }
.cg-badge.off { color: #0b0718; background: var(--yellow); }
.cg-badge.model { color: var(--silver); background: color-mix(in srgb, var(--pink) 25%, transparent); border: 1px solid color-mix(in srgb, var(--pink) 45%, transparent); }
.cg-mark { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.cg-mark button { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 12px; border-radius: var(--r-md); font: 700 0.85rem/1.2 var(--font-c); color: var(--dim); background: rgba(0,0,0,.22); border: 1px solid var(--line); transition: transform .2s var(--spring), border-color .15s, background .15s, color .15s; letter-spacing: 0.04em; }
.cg-mark button span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px dashed var(--line-brt); font-size: .7rem; }
.cg-mark button:hover { transform: translateY(-2px); color: var(--ink); }
.cg-mark button[data-mark="1"]:hover { border-color: rgba(0,255,2,.45); }
.cg-mark button[data-mark="0"]:hover { border-color: color-mix(in srgb, var(--cg-no) 55%, transparent); }
.cg-mark button.got { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, transparent); }
.cg-mark button.got span { border: 0; color: #06210a; background: var(--green); }
.cg-mark button.miss { color: #ff8d98; border-color: var(--cg-no); background: color-mix(in srgb, var(--cg-no) 10%, transparent); }
.cg-mark button.miss span { border: 0; color: #fff; background: var(--cg-no); }

/* ═══ THE CALCULATION BENCH ═══ */
.cg-dots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.cg-dots span { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 9px; min-width: 0; font: 700 0.8rem/1 var(--font-c); color: var(--faint); background: rgba(0,0,0,.2); border: 1px solid var(--line); transition: color .2s, border-color .2s, background .2s; letter-spacing: 0.05em; }
.cg-dots i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: rgba(255,255,255,.14); transition: background .2s, box-shadow .2s; }
.cg-dots span.now { color: var(--ink); border-color: var(--zc); background: color-mix(in srgb, var(--zc) 12%, transparent); }
.cg-dots span.now i { background: var(--zc); box-shadow: none; animation: vh-pulse 1.2s ease-in-out infinite; }
.cg-dots span.done { color: var(--green); }
.cg-dots span.done i { background: var(--green); box-shadow: none; }
.cg-givens { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 18px; }
.cg-givens div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 11px; background: rgba(0,0,0,.24); border: 1px solid var(--line); }
.cg-givens span { font: 700 .82rem/1.3 var(--font-c); color: var(--faint); letter-spacing: 0.04em; }
.cg-givens b { font: 700 0.98rem/1.2 var(--font-m); color: var(--yellow); }
.cg-stepbox { padding: 16px; border-radius: var(--r-md); background: rgba(0,0,0,.18); border: 1px solid color-mix(in srgb, var(--zc) 25%, var(--line)); }
.cg-stephead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.cg-stepn { font: 700 0.8rem/1 var(--font-c); padding: 5px 9px; border-radius: 7px; color: #0b0718; background: var(--zc); letter-spacing: 0.05em; }
.cg-stephead h4 { font: 700 0.98rem/1.3 var(--font-d); color: var(--ink); }
.cg-stephead em { margin-left: auto; font: 600 .88rem/1 var(--font-c); font-style: normal; color: var(--faint); letter-spacing: 0.04em; }
.cg-convs { display: grid; gap: 8px; }
.cg-crow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; border-radius: 11px; background: rgba(0,0,0,.2); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.cg-as { font: 700 0.92rem/1 var(--font-m); color: var(--yellow); min-width: 78px; }
.cg-arrow { color: var(--faint); }
.cg-crow input, .cg-ansin input { width: 150px; padding: 9px 12px; border-radius: 9px; font: 700 0.92rem/1 var(--font-m); color: var(--ink); background: rgba(0,0,0,.35); border: 1px solid var(--line-brt); transition: border-color .15s, box-shadow .2s; }
.cg-crow input:focus, .cg-ansin input:focus { outline: none; border-color: var(--zc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--zc) 22%, transparent); }
.cg-unit { font: 700 0.82rem/1 var(--font-m); color: var(--silver); }
.cg-hint { flex-basis: 100%; font: italic 500 .92rem/1.4 var(--font-b); font-style: italic; color: var(--yellow); padding-left: 2px; }
.cg-note { font: 600 .9rem/1 var(--font-b); color: var(--green); }
.cg-crow.fine { opacity: .7; }
.cg-crow.ok { border-color: rgba(0,255,2,.45); background: color-mix(in srgb, var(--green) 7%, transparent); }
.cg-crow.ok input { border-color: var(--green); color: var(--green); }
.cg-crow.no { border-color: color-mix(in srgb, var(--cg-no) 55%, transparent); animation: fl-shake .4s; }
.cg-crow.no input { border-color: var(--cg-no); }
.cg-ansin { display: flex; align-items: center; gap: 12px; }
.cg-ansin input { width: 220px; padding: 13px 15px; font-size: 1.15rem; }
.cg-ansin.ok input { border-color: var(--green); color: var(--green); box-shadow: none; }
.cg-ansin.no input { border-color: var(--cg-no); animation: fl-shake .4s; }
.cg-ansin .cg-unit { font-size: 1.05rem; }
.cg-crow input:disabled, .cg-ansin input:disabled { opacity: 1; }
.cg-working { margin-top: 14px; padding: 13px 16px; border-radius: 12px; background: rgba(0,0,0,.26); border: 1px solid var(--line); animation: cg-pop .45s var(--spring) backwards; }
.cg-working ol { margin: 4px 0 0 20px; display: grid; gap: 5px; }
.cg-working li { font: 500 .95rem/1.55 var(--font-m); color: #dcd8f0; }
.cg-working li:last-child { color: var(--green); font-weight: 700; }
.cg-acts { justify-content: flex-end; }

/* ═══ world map + local map flourishes ═══ */
.world-node[data-nav="academy"]:not(.locked):hover .wn-glyph::before { content: "A+"; position: absolute; top: -12px; right: -12px; font: 700 0.75rem/1 var(--font-m); color: #0b0718; background: var(--yellow); padding: 3px 5px; border-radius: 5px; rotate: 12deg; animation: cg-aplus .5s var(--spring); }
@keyframes cg-aplus { from { opacity: 0; transform: scale(2.2); } }

/* ═══ responsive ═══ */
@media (max-width: 640px) {
  .cg-shelf, .cg-topics, .cg-wslist, .cg-modes { grid-template-columns: 1fr; }
  .cg-lens { grid-template-columns: 1fr 1fr; }
  .cg-book { min-height: 128px; }
  .cg-mcb { width: 28px; height: 50px; }
  .cg-mcb i { height: 18px; }
  .cg-mcb.on i::after { bottom: 8px; }
  .cg-card { height: 220px; }
  .cg-card-face { padding: 18px 16px 30px 58px; font-size: .92rem; }
  .cg-readfoot { justify-content: center; }
  .cg-readfoot .cg-throw { order: -1; width: 100%; justify-content: center; }
  .cg-fchip { margin-left: 0; }
  .cg-fln { grid-template-columns: 1fr; gap: 2px; }
  .cg-score { gap: 16px; }
  .cg-stamp { position: static; display: inline-block; margin-top: 8px; }
  .cg-dots span { justify-content: center; padding: 7px 4px; font-size: 0; gap: 0; }
  .cg-dots span.now { font-size: .72rem; gap: 6px; }
  .cg-crow input { width: 120px; }
  .cg-ansin input { width: 100%; }
  .cg-mark { grid-template-columns: 1fr; }
  .cg-acts .btn-y, .cg-acts .btn-ghost { flex: 1; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cg-in, .cg-in *, .cg-card-in, .cg-stamp, .cg-lomtr i { animation: none !important; transition: none !important; }
}