:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #f5fbff; }
.topbar, .dock, .classroom-panel { position: fixed; z-index: 10; }
.topbar { top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; pointer-events: none; background: linear-gradient(180deg, rgba(2,14,46,.48), transparent); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { display: grid; place-items: center; width: 43px; height: 43px; border: 2px solid #ffbd43; border-radius: 13px; background: #071b4a; color: #ffbd43; font-size: 26px; font-weight: 900; transform: rotate(-6deg); box-shadow: 0 5px 18px #00123d55; }
.brand strong { display: block; font-size: 22px; line-height: 1; letter-spacing: -.035em; }
.brand small, .panel-head small { display: block; margin-top: 5px; color: #b9d7ed; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.topbar-right { display: flex; align-items: center; gap: 18px; font-size: 13px; color: #d9efff; }
.class-status { padding: 9px 13px; border: 1px solid #93e4f655; border-radius: 99px; background: #061b4b9c; backdrop-filter: blur(12px); }
.class-status::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #5be2cc; box-shadow: 0 0 9px #5be2cc; }
.dock { left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 5px; padding: 6px; border: 1px solid #99d8ff55; border-radius: 22px; background: #071b48dd; backdrop-filter: blur(16px); box-shadow: 0 14px 40px #00112b66; }
.dock button { appearance: none; border: 0; border-radius: 16px; padding: 11px 16px; background: transparent; color: #e9f8ff; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.15; cursor: pointer; white-space: nowrap; }
.dock button:hover, .dock button.active { color: #082047; background: #b7f5ff; }
.dock-icon { margin-right: 7px; color: #ffbd43; font-size: 19px; vertical-align: -1px; }
.dock button.active .dock-icon, .dock button:hover .dock-icon { color: #ad6700; }
.panel-scrim { position: fixed; inset: 0; z-index: 18; background: #00163380; }
.classroom-panel { top: 14px; right: 14px; bottom: 14px; z-index: 20; width: min(440px, calc(100vw - 28px)); box-sizing: border-box; display: flex; flex-direction: column; border: 1px solid #9bdeee70; border-radius: 26px; background: linear-gradient(160deg, #0e305c, #071a39 70%); box-shadow: -15px 14px 60px #00102990; transform: translateX(calc(100% + 24px)); transition: transform .25s ease; overflow: hidden; }
.classroom-panel.open { transform: translateX(0); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 27px 25px 17px; border-bottom: 1px solid #acdafa26; }
.panel-head h1 { margin: 6px 0 0; font-size: 31px; line-height: 1.08; letter-spacing: -.04em; }
#panel-close { width: 38px; height: 38px; flex: none; border: 1px solid #afdcfa50; border-radius: 12px; background: #18446e; color: white; font-size: 27px; cursor: pointer; }
.panel-content { padding: 20px 25px 28px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.panel-content p { line-height: 1.45; color: #d5e8f8; }
.panel-content h2 { margin: 24px 0 9px; font-size: 16px; color: #fff; }
.eyebrow { color: #8edce9; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.feature-card { padding: 17px; border: 1px solid #85cdeb58; border-radius: 18px; background: #153f6d96; }
.feature-card h2 { margin: 5px 0 8px; font-size: 23px; }
.feature-card p { margin: 8px 0 0; }
.pill-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.pill { padding: 6px 10px; border-radius: 99px; background: #28608a; color: #ddf9ff; font-size: 12px; }
.panel-button, .choice, .check-row { width: 100%; box-sizing: border-box; border: 1px solid #83cceb70; border-radius: 14px; background: #184a79; color: #fff; text-align: left; font: inherit; cursor: pointer; }
.panel-button { margin-top: 13px; padding: 12px 15px; font-weight: 750; }
.panel-button.primary { border-color: #ffbd43; background: #ffbd43; color: #09224c; }
.panel-button:disabled { cursor: default; opacity: .55; }
.choice { display: block; margin-top: 8px; padding: 12px 14px; }
.choice.selected { border-color: #ffbd43; background: #194f7f; }
.choice strong, .choice small { display: block; }
.choice small { margin-top: 5px; color: #bdd8e9; }
.hint-card { margin-top: 11px; padding: 15px; border-left: 3px solid #ffbd43; border-radius: 12px; background: #1a4c78; line-height: 1.4; }
.hint-card.locked { border-color: #6286a8; color: #aac3d6; }
.check-row { display: flex; align-items: center; gap: 12px; margin-top: 9px; padding: 12px; }
.check-row input { width: 22px; height: 22px; accent-color: #ffbd43; }
.field { display: block; margin: 14px 0; color: #d8efff; font-size: 13px; font-weight: 700; }
.field input, .field select, .field textarea { display: block; box-sizing: border-box; width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid #83cceb80; border-radius: 11px; outline: none; background: #061e42; color: #fff; font: 15px system-ui, sans-serif; }
.field textarea { min-height: 100px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #ffbd43; }
.notice { margin: 13px 0; padding: 12px 14px; border-radius: 12px; background: #123c61; color: #cce6f5; font-size: 13px; line-height: 1.4; }
.success { border: 1px solid #66d6bd; color: #c3ffeb; }
#hint { bottom: 12vh; font-weight: 700; }
#caption { z-index: 8; bottom: 11vh; }
#chat, #stop { z-index: 11; bottom: 20px; }
body:has(.classroom-panel.open) #chat, body:has(.classroom-panel.open) #stop { opacity: .35; pointer-events: none; }
@media (max-width: 760px) { .topbar { padding: 10px 13px; } .brand small, #today { display: none; } .brand-mark { width: 35px; height: 35px; font-size: 21px; } .brand strong { font-size: 19px; } .dock { left: 10px; right: 10px; bottom: 9px; transform: none; justify-content: space-around; } .dock button { padding: 8px 5px; font-size: 11px; } .dock-icon { display: block; margin: 0 auto 2px; font-size: 17px; } #chat, #stop { bottom: 70px; } #caption { bottom: 20vh; } #hint { bottom: 23vh; } }
@media (prefers-reduced-motion: reduce) { .classroom-panel { transition: none; } }