:root { --brand: #3159d8; --ink: #16213b; --muted: #64748b; --violet: #7357d8; }
body { color: var(--ink); background: linear-gradient(180deg, #f4f6ff 0, #fff 38rem); line-height: 1.6; }
.navbar { background: rgba(13,21,50,.96)!important; border-color: rgba(255,255,255,.12)!important; backdrop-filter: blur(14px); }.navbar-brand { color: #a9bcff!important; }.navbar-brand .text-dark { color: #fff!important; }.navbar .nav-link { color: rgba(255,255,255,.82)!important; }.navbar .nav-link:hover { color: #fff!important; }.navbar .btn-outline-primary { color: #c9eaff; border-color: #82cfff; }.navbar .btn-outline-primary:hover { background: #82cfff; color: #102050; }.navbar-toggler { border-color: rgba(255,255,255,.55); }.navbar-toggler-icon { filter: invert(1); }
.navbar-brand { letter-spacing: -.5px; }
.hero-section { color: #fff; min-height: 520px; display: flex; align-items: center; background: radial-gradient(circle at 90% 10%, #6d8cff 0, transparent 32%), linear-gradient(125deg, #15265c, #3159d8); }
.ai-hero { min-height: 630px; background: radial-gradient(circle at 82% 36%, rgba(117,88,244,.72), transparent 29%), radial-gradient(circle at 17% 12%, rgba(76,184,255,.25), transparent 24%), linear-gradient(115deg, #101938 0%, #1c2860 52%, #5635a5 100%); }.ai-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to right, #000, transparent); }.ai-hero .container { position: relative; z-index: 1; }.eyebrow { display: inline-block; font-size: .75rem; font-weight: 800; letter-spacing: .12em; margin-bottom: 1rem; }.hero-trust { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .9rem; opacity: .9; }
.hero-section h1 { max-width: 680px; letter-spacing: -.035em; }.hero-section .lead { max-width: 600px; opacity: .92; }.hero-card { padding: 2rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; backdrop-filter: blur(6px); }
.feature-icon, .number-circle { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; }
.feature-icon { color: var(--brand); background: #fff; }.number-circle { color: #fff; background: var(--brand); }
.cta-section, .ai-cta { color: #fff; background: var(--ink); }.ai-cta { background: linear-gradient(120deg, #19275b, #5235ae); }.auth-page { min-height: calc(100vh - 137px); }.auth-card { max-width: 480px; }.footer { color: #6c757d; background: #fff; border-top: 1px solid #e9ecef; }.page-heading { padding: 3.25rem 0 2rem; }.course-card { overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }.course-card:hover { transform: translateY(-4px); box-shadow: 0 .75rem 1.75rem rgba(22,33,59,.12)!important; }.course-art { height: 148px; display: grid; place-items: center; color: white; font-size: 2.5rem; font-weight: 700; background: linear-gradient(135deg, #3159d8, #7b61ff); }.course-meta { color: var(--muted); font-size: .9rem; }.journey-card { height: 100%; padding: 1.75rem; border: 1px solid #e8ebf3; border-radius: 1rem; background: #fff; }.journey-card h3 { font-size: 1.2rem; margin: 1rem 0 .5rem; }.journey-card p { color: var(--muted); margin: 0; }.feature-list { list-style: none; padding: 0; margin: 1.5rem 0; }.feature-list li { margin: .75rem 0; padding-left: 1.8rem; position: relative; }.feature-list li::before { content: '✓'; position: absolute; left: 0; color: var(--brand); font-weight: 800; }.chat-preview { border: 1px solid #e4e8f1; border-radius: 1rem; overflow: hidden; background: #fff; }.chat-titlebar { padding: 1rem 1.25rem; font-weight: 700; border-bottom: 1px solid #e8ebf3; }.chat-titlebar small { color: var(--muted); font-weight: 400; margin-left: .25rem; }.online-dot { display: inline-block; height: .6rem; width: .6rem; border-radius: 50%; background: #1fad6f; margin-right: .4rem; }.chat-body { min-height: 300px; padding: 1.25rem; background: #f8f9fc; }.message { max-width: 85%; padding: .8rem 1rem; margin-bottom: .9rem; border-radius: 1rem; font-size: .94rem; }.tutor-message { border-bottom-left-radius: .25rem; background: #edf1ff; color: #182664; }.student-message { margin-left: auto; border-bottom-right-radius: .25rem; background: var(--brand); color: #fff; }.chat-input-preview { padding: 1rem 1.25rem; color: var(--muted); }.chat-input-preview span { float: right; color: var(--brand); font-weight: 800; }
.tutor-stage { min-height: 410px; position: relative; display: grid; place-items: center; }.tutor-glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(176,163,255,.3); filter: blur(30px); }.astra-figure { z-index: 1; position: relative; width: 255px; height: 300px; display: grid; place-items: center; }.astra-core { z-index: 2; position: relative; width: 142px; height: 142px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid rgba(198,235,255,.92); border-radius: 48% 52% 50% 50%; color: #fff; background: radial-gradient(circle at 35% 28%, #e3ffff 0, #72e7ff 15%, #6d69ed 45%, #21185f 75%); box-shadow: inset 12px 10px 25px rgba(255,255,255,.36), inset -15px -18px 34px rgba(14,6,84,.55), 0 0 26px #73e8ff, 0 0 70px rgba(94,80,255,.7); animation: astraPulse 3s ease-in-out infinite; }.astra-spark { font-size: 2.75rem; line-height: 1; text-shadow: 0 0 13px white; }.astra-name { margin-top: .35rem; font-size: .68rem; font-weight: 800; letter-spacing: .22em; }.astra-orbit { position: absolute; border: 2px solid rgba(140,230,255,.75); border-radius: 50%; filter: drop-shadow(0 0 8px #5ae2ff); }.orbit-one { width: 240px; height: 95px; transform: rotate(-27deg); animation: astraOrbitOne 8s linear infinite; }.orbit-two { width: 230px; height: 108px; transform: rotate(55deg); border-color: rgba(211,178,255,.8); animation: astraOrbitTwo 10s linear infinite; }.astra-crown { position: absolute; top: 22px; width: 56px; height: 56px; border: 2px solid #b8f4ff; border-radius: 50% 50% 10% 10%; border-bottom: 0; filter: drop-shadow(0 0 9px #77e8ff); }.astra-crown::before, .astra-crown::after { content: ''; position: absolute; top: -20px; width: 2px; height: 20px; background: #c4f5ff; }.astra-crown::before { left: 10px; transform: rotate(-25deg); }.astra-crown::after { right: 10px; transform: rotate(25deg); }.astra-base { position: absolute; bottom: 17px; width: 145px; height: 25px; border: 2px solid rgba(206,238,255,.75); border-radius: 50%; box-shadow: 0 0 22px #61ddff, inset 0 0 12px #6a77ef; }.astra-base::after { content: ''; position: absolute; width: 75px; height: 10px; top: 5px; left: 33px; border-radius: 50%; background: #80f1ff; box-shadow: 0 0 16px #80f1ff; }.speech-bubble { z-index: 2; position: absolute; right: -2rem; top: 15px; max-width: 210px; padding: .8rem 1rem; color: #172257; background: #fff; border-radius: .8rem .8rem .8rem .15rem; box-shadow: 0 10px 25px rgba(9,16,61,.2); font-size: .84rem; }.astra-status { z-index: 3; position: absolute; bottom: 2px; display: flex; align-items: center; gap: .55rem; padding: .6rem .85rem; border: 1px solid rgba(255,255,255,.25); border-radius: .7rem; color: #fff; background: rgba(10,14,64,.38); backdrop-filter: blur(8px); font-size: .76rem; }.astra-status strong, .astra-status small { display: block; }.astra-status small { opacity: .75; } @keyframes astraPulse { 50% { transform: scale(1.05); filter: saturate(1.35); } } @keyframes astraOrbitOne { to { transform: rotate(333deg); } } @keyframes astraOrbitTwo { to { transform: rotate(415deg); } }
.astra-explainer { background: linear-gradient(180deg, #f5f7ff, #fff); }.astra-lesson-card { padding: 1.6rem; border: 1px solid #e3e8fa; border-radius: 1rem; background: #fff; }.lesson-card-head { display: flex; align-items: center; gap: .75rem; }.lesson-card-head small { display: block; color: var(--muted); font-size: .82rem; }.lesson-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #5bdbff, #5a45c9); box-shadow: 0 0 16px rgba(99,196,255,.6); }.lesson-point { height: 100%; padding: .9rem; border-radius: .75rem; background: #f4f6ff; }.lesson-point b { display: block; color: #5e49ce; font-size: .75rem; letter-spacing: .1em; }.lesson-point span { display: block; margin-top: .35rem; color: #35415f; font-size: .87rem; font-weight: 600; }.astra-quote { margin-top: 1.25rem; padding: .9rem 1rem; border-left: 3px solid #6653d8; color: #2b3560; font-style: italic; background: #fafaff; }.astra-quote span { display: block; margin-top: .25rem; color: var(--muted); font-size: .82rem; font-style: normal; }.tutor-page { min-height: calc(100vh - 138px); background: linear-gradient(145deg, #f6f8ff, #eef2fb); }.tutor-app { display: flex; min-height: 610px; overflow: hidden; border: 1px solid #e3e8f5; border-radius: 1rem; background: #fff; }.tutor-sidebar { width: 290px; display: flex; flex-direction: column; padding: 2rem; color: #eaf0ff; background: linear-gradient(165deg, #17275d, #38277e); }.tutor-sidebar p { color: #c8d1f5; font-size: .9rem; }.sidebar-figure { margin-bottom: 1rem; }.mini-tutor { width: 55px; height: 55px; display: grid; place-items: center; border: 3px solid #d8e0ff; border-radius: 50%; color: #fff; font-weight: 800; font-size: 1.45rem; background: radial-gradient(circle at 34% 30%, #d9ffff, #6ddaff 22%, #5745c0 66%); box-shadow: 0 0 18px rgba(101,215,255,.8); }.suggestion { width: 100%; padding: .65rem .75rem; margin-bottom: .55rem; border: 1px solid rgba(255,255,255,.18); border-radius: .5rem; color: #fff; text-align: left; font-size: .85rem; background: rgba(255,255,255,.08); }.suggestion:hover { background: rgba(255,255,255,.18); }.tutor-chat { display: flex; flex: 1; flex-direction: column; min-width: 0; }.tutor-chat header { display: flex; justify-content: space-between; align-items: center; padding: 1.3rem 1.5rem; border-bottom: 1px solid #e8ebf3; }.tutor-chat header small { display: block; color: var(--muted); font-size: .8rem; }.status-label { color: #168656; font-size: .8rem; }.status-label i { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #25b772; }.conversation { flex: 1; overflow-y: auto; padding: 1.5rem; background: #f9faff; }.tutor-composer { display: flex; gap: .75rem; padding: 1rem 1.25rem; border-top: 1px solid #e8ebf3; }.tutor-composer input { flex: 1; min-width: 0; border: 1px solid #dce2f0; border-radius: .5rem; padding: .7rem .85rem; }.typing { font-style: italic; opacity: .8; }
@media (max-width: 991.98px) { .navbar-nav { align-items: stretch !important; padding: .75rem 0; }.navbar .btn { margin-top: .25rem; }.ai-hero { min-height: auto; }.tutor-stage { margin-top: 1.5rem; }.tutor-app { min-height: 0; flex-direction: column; }.tutor-sidebar { width: auto; }.tutor-sidebar .suggestion { display: inline-block; width: auto; margin-right: .4rem; }.tutor-sidebar .mt-auto { margin-top: 1rem!important; } }
@media (max-width: 575.98px) { .hero-section h1 { font-size: 2.5rem; }.tutor-stage { transform: scale(.88); margin: 0 -1rem; }.speech-bubble { right: -1.2rem; }.tutor-composer { padding: .8rem; }.tutor-chat header { padding: 1rem; }.conversation { padding: 1rem; } }
.ai-hero { position: relative; overflow: hidden; }
.lesson-page { min-height:calc(100vh - 80px); background:linear-gradient(135deg,#f1f7ff,#fff); }.lesson-side { padding:1.4rem; border:1px solid #d8eaf8; border-radius:1rem; background:#fff; box-shadow:0 .7rem 2rem rgba(28,66,120,.09); }.lesson-side .astra-image { width:190px; }.lesson-progress span { display:block; margin:1rem 0 .35rem; color:var(--muted); font-size:.82rem; }.lesson-progress div { height:.42rem; overflow:hidden; border-radius:1rem; background:#e4eef8; }.lesson-progress i { display:block; height:100%; border-radius:1rem; background:linear-gradient(90deg,#00c9d7,#536eee); }.lesson-topic-list { margin:1.3rem 0 0; padding-left:1.3rem; }.lesson-topic-list li { margin:.55rem 0; padding-left:.15rem; }.lesson-topic-list a { color:#46617a; text-decoration:none; font-size:.87rem; }.lesson-topic-list .active a { color:#076d91; font-weight:700; }.lesson-card { padding:2rem; border:1px solid #d8eaf8; border-radius:1rem; background:#fff; box-shadow:0 .8rem 2.4rem rgba(28,66,120,.1); }.astra-intro { display:flex; gap:.75rem; margin:1.5rem 0; padding:1rem; border-left:4px solid #08bed1; border-radius:.3rem; background:#effdff; color:#214561; }.astra-intro strong { color:#007b99; }.lesson-copy { color:#354d63; font-size:1.08rem; line-height:1.85; }
.admin-stat { padding:1.35rem; border:1px solid #d9ebfb; border-radius:1rem; background:linear-gradient(145deg,#fff,#eefbff); box-shadow:0 .5rem 1.5rem rgba(20,70,120,.08); }.admin-stat span,.admin-stat strong { display:block; }.admin-stat span { color:var(--muted); font-size:.85rem; }.admin-stat strong { margin-top:.3rem; color:#114f89; font-size:2rem; }.admin-action { display:block; height:100%; padding:1.4rem; border:1px solid #d9ebfb; border-radius:1rem; color:var(--ink); text-decoration:none; background:#fff; transition:.2s ease; }.admin-action:hover { color:var(--ink); transform:translateY(-3px); border-color:#2acde2; }.admin-action strong,.admin-action span { display:block; }.admin-action span { margin-top:.45rem; color:var(--muted); font-size:.9rem; }
.topic-card { padding: 1.2rem; border: 1px solid #dce9fa; border-radius: .85rem; color: var(--ink); background: #fff; box-shadow: 0 .3rem 1.1rem rgba(20,52,100,.07); transition: .2s ease; }.topic-card:hover { transform: translateY(-3px); border-color: #2acde2; box-shadow: 0 .7rem 1.8rem rgba(20,52,100,.13); color: var(--ink); }.topic-card strong,.topic-card small { display:block; }.topic-card small { margin-top:.45rem; color:#16789b; }.topic-number { display:block; margin-bottom:.5rem; color:#00a8c1; font-size:.75rem; font-weight:800; letter-spacing:.12em; }
.astra-image { position: relative; z-index: 2; width: min(100%, 400px); height: auto; filter: drop-shadow(0 22px 36px rgba(0,235,255,.34)); animation: astraFloat 4s ease-in-out infinite; }.path-card { height: 100%; display: flex; flex-direction: column; gap: 1rem; padding: 1.65rem; border: 1px solid #e1e6fc; border-radius: 1rem; background: linear-gradient(145deg,#fff,#f4f6ff); box-shadow: 0 .8rem 2.2rem rgba(33,44,110,.09); transition: .25s ease; }.path-card:hover { transform: translateY(-6px); border-color: #4bdcef; box-shadow: 0 1rem 2.5rem rgba(33,44,110,.16); }.path-card.featured { border-color: #6f91f5; background: linear-gradient(150deg, #eef8ff, #fff); }.path-card span { color: #176fc3; font-size: .76rem; font-weight: 800; letter-spacing: .09em; }.path-card h3 { font-size: 1.25rem; margin: 0; }.path-card p { flex: 1; margin: 0; color: var(--muted); }.path-card strong { font-size: 1.35rem; }.lesson-point { min-height: 94px; padding: 1rem; border-radius: .75rem; background: #edf9ff; font-weight: 600; color: #203c65; }.lesson-point b { display: block; color: #008da8; font-size: .75rem; letter-spacing: .1em; }.astra-lesson-card { padding: 1.6rem; border: 1px solid #d6eafa; border-radius: 1rem; background: linear-gradient(140deg,#fff,#f2fbff); } @keyframes astraFloat { 50% { transform: translateY(-10px); } }
.astra-slogan { margin: 1.15rem 0 1.5rem; padding-left: .9rem; border-left: 3px solid #61eaff; color: #d9faff; font-weight: 700; font-size: 1.05rem; }.astra-slogan span { display: block; margin-top: .2rem; color: #a9c8ff; font-weight: 500; }.lesson-slogan { padding: .8rem .9rem; border: 1px solid #cceef5; border-radius: .65rem; color: #12718b; background: #effdff; font-size: .9rem; }.lesson-interact { display: grid; grid-template-columns: minmax(0,1fr) 255px; gap: 1.25rem; align-items: start; }.topic-visual { overflow: hidden; margin: 1.5rem 0 0; border: 1px solid #bceaf3; border-radius: .85rem; background: #07152e; box-shadow: 0 .8rem 1.8rem rgba(20,95,150,.16); }.topic-visual img { display: block; width: 100%; max-height: 220px; object-fit: cover; }.topic-visual figcaption { padding: .65rem .8rem; color: #bff8ff; font-size: .8rem; background: #09213f; }.topic-hud-visual { position: relative; display: flex; align-items: center; gap: .8rem; min-height: 125px; overflow: hidden; margin-top: 1.5rem; padding: 1rem; border: 1px solid #a9e9f1; border-radius: .85rem; color: #d8fbff; background: radial-gradient(circle at 18% 50%,rgba(0,225,255,.35),transparent 24%),linear-gradient(125deg,#082342,#142467); }.hud-orbit { position: absolute; left: 12px; width: 95px; height: 95px; border: 1px solid #59efff; border-radius: 50%; box-shadow: 0 0 19px rgba(62,222,255,.8); animation: hudSpin 9s linear infinite; }.hud-core { position: relative; z-index: 1; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #d5fdff; border-radius: 50%; color: #09224d; background: #74f2ff; box-shadow: 0 0 18px #68efff; font-weight: 900; font-size: 1.6rem; }.topic-hud-visual div { position: relative; z-index: 1; }.topic-hud-visual small,.topic-hud-visual strong,.topic-hud-visual em { display: block; }.topic-hud-visual small { color: #78f7ff; font-size: .65rem; font-weight: 800; letter-spacing: .12em; }.topic-hud-visual strong { margin: .25rem 0; font-size: 1rem; }.topic-hud-visual em { color: #b6d7ff; font-size: .75rem; font-style: normal; }.notes-panel { padding: 1rem; border: 1px solid #c8e7f4; border-radius: .85rem; background: linear-gradient(155deg,#f4fdff,#eef5ff); box-shadow: 0 .45rem 1.25rem rgba(20,88,130,.08); }.notes-heading { display: flex; align-items: center; gap: .55rem; margin-bottom: .8rem; }.notes-heading > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#14cddd,#5968ed); }.notes-heading strong,.notes-heading small { display: block; }.notes-heading strong { color: #174e71; font-size: .9rem; }.notes-heading small { color: #668096; font-size: .72rem; }.notes-panel textarea { width: 100%; resize: vertical; border: 1px solid #bcdae8; border-radius: .55rem; padding: .7rem; color: #254960; background: #fff; font-size: .86rem; line-height: 1.5; }.notes-panel textarea:focus { border-color: #26c9db; outline: 0; box-shadow: 0 0 0 .2rem rgba(38,201,219,.16); }.note-status { min-height: 1.1rem; margin: .55rem 0 0; color: #28718c; font-size: .75rem; }.voice-controls .form-select { max-width: 180px; }.voice-status { color: #527188; font-size: .9rem; } @keyframes hudSpin { to { transform: rotate(360deg); } } @media (max-width: 767.98px) { .lesson-interact { grid-template-columns: 1fr; }.notes-panel { order: -1; }.voice-controls .form-select { max-width: 100%; }.astra-slogan { font-size: .95rem; } }
.lesson-workspace { max-width: 1600px; }.lesson-grid { display: grid; grid-template-columns: 235px minmax(0,1fr) 285px; gap: 1.15rem; align-items: start; }.workspace-panel { border: 1px solid #d2e8f4; border-radius: 1rem; background: rgba(255,255,255,.94); box-shadow: 0 .65rem 2rem rgba(18,65,110,.09); }.astra-panel { position: sticky; top: 1rem; padding: 1.15rem; text-align: center; }.astra-panel .astra-image { width: 130px; margin: .15rem auto .7rem; }.astra-panel h1 { margin: 0; color: #123f6d; }.astra-panel > p { margin: .4rem 0 1rem; color: #4f718d; font-size: .82rem; line-height: 1.5; }.astra-online { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .65rem; border-radius: 2rem; color: #167354; background: #eafff5; font-size: .74rem; font-weight: 700; }.astra-online i { width: .45rem; height: .45rem; border-radius: 50%; background: #1bb878; box-shadow: 0 0 8px #1bb878; }.course-mini { margin-top: 1rem; padding: .8rem; border-radius: .7rem; text-align: left; background: linear-gradient(140deg,#e9fbff,#eef1ff); }.course-mini small,.course-mini strong,.course-mini span { display: block; }.course-mini small { color: #298aa1; font-size: .62rem; font-weight: 800; letter-spacing: .09em; }.course-mini strong { margin: .3rem 0; color: #193d66; font-size: .83rem; }.course-mini span { color: #5c7890; font-size: .72rem; }.lesson-center { min-width: 0; }.lesson-card { padding: 1.65rem; }.lesson-topline,.navigator-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.topic-count,.progress-label { padding: .32rem .58rem; border-radius: .5rem; color: #127b98; background: #e9fbff; font-size: .76rem; font-weight: 800; white-space: nowrap; }.lesson-card h2 { margin: .8rem 0 0; color: #162f54; font-size: clamp(1.55rem,2.5vw,2.25rem); }.lesson-card .astra-intro { margin: 1rem 0; }.compact-visual { width: min(100%, 410px); min-height: 0; margin: 1.15rem 0; }.compact-visual.topic-visual img { max-height: 145px; }.compact-visual.topic-hud-visual { min-height: 105px; }.compact-visual .hud-orbit { width: 76px; height: 76px; }.compact-visual .hud-core { width: 48px; height: 48px; font-size: 1.3rem; }.voice-controls { margin-top: 1.25rem; padding-top: 1.15rem; border-top: 1px solid #dceaf2; }.voice-status { margin-top: .7rem; }.topic-navigator { margin-top: 1.15rem; padding: 1.2rem; }.navigator-head h3 { margin: 0; color: #1a3d62; font-size: 1rem; }.topic-progress { height: .38rem; overflow: hidden; margin: .85rem 0; border-radius: 2rem; background: #e4eef5; }.topic-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#06c8d5,#536eee); }.topic-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }.topic-item { position: relative; display: grid; grid-template-columns: 26px minmax(0,1fr); gap: .35rem; align-items: center; min-height: 52px; padding: .55rem; border: 1px solid #e0edf4; border-radius: .65rem; color: #405f76; text-decoration: none; transition: .18s ease; }.topic-item:hover { color: #164969; border-color: #64dbe8; background: #f2feff; transform: translateY(-1px); }.topic-item > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #25849d; background: #e7f8fb; font-size: .64rem; font-weight: 800; }.topic-item strong { overflow: hidden; font-size: .76rem; line-height: 1.25; text-overflow: ellipsis; }.topic-item em { grid-column: 2; color: #0a9b70; font-size: .64rem; font-style: normal; font-weight: 700; }.topic-item.active { border-color: #18c8d9; color: #123f62; background: linear-gradient(125deg,#e9feff,#f0f2ff); box-shadow: 0 .35rem .85rem rgba(13,176,201,.13); }.tools-column { display: grid; gap: 1.15rem; }.tools-column .notes-panel { position: sticky; top: 1rem; }.notes-panel textarea { min-height: 250px; }.study-tip { padding: 1rem; color: #d6f9ff; background: linear-gradient(145deg,#0c406a,#233b82); }.study-tip span { color: #66f3ff; font-size: .67rem; font-weight: 800; letter-spacing: .12em; }.study-tip p { margin: .55rem 0 0; font-size: .83rem; line-height: 1.55; } @media (max-width:1199.98px) { .lesson-grid { grid-template-columns: 205px minmax(0,1fr); }.tools-column { grid-column: 2; grid-template-columns: minmax(0,1fr) 220px; }.tools-column .notes-panel { position: static; }.notes-panel textarea { min-height: 150px; }.topic-list { grid-template-columns: 1fr; } } @media (max-width:767.98px) { .lesson-workspace { padding: .8rem; }.lesson-grid { grid-template-columns: 1fr; }.astra-panel { position: static; display: grid; grid-template-columns: 105px 1fr; gap: .7rem; text-align: left; align-items: center; }.astra-panel .eyebrow,.astra-panel h1,.astra-panel > p,.astra-panel .astra-online { grid-column: 2; }.astra-panel .astra-image { grid-row: 1 / span 4; width: 95px; }.astra-panel > p { margin: 0; }.astra-panel .course-mini { grid-column: 1 / -1; }.lesson-card,.topic-navigator { padding: 1rem; }.tools-column { grid-column: auto; grid-template-columns: 1fr; }.topic-list { grid-template-columns: 1fr; }.compact-visual { width: 100%; }.voice-controls .form-select { flex: 0 0 100%; max-width: none; } }