/* Student app: mobile-first, bottom navigation, game-like level path. */
body.student { background: linear-gradient(180deg, #e9efff 0, var(--bg) 320px) no-repeat, var(--bg); }
.shell { max-width: 760px; margin: 0 auto; padding: 0 14px 96px; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 12px 14px; max-width: 760px; margin: 0 auto; background: rgba(233, 239, 255, .9); backdrop-filter: blur(8px); }
.back { border: 0; background: #fff; width: 38px; height: 38px; border-radius: 11px; cursor: pointer; box-shadow: var(--shadow); font-size: 18px; flex: none; }

.bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: #fff; border-top: 1px solid var(--line); display: flex; justify-content: center; padding-bottom: env(safe-area-inset-bottom); }
.bottomnav .in { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; max-width: 760px; }
.bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 9px; font-size: 11px; font-weight: 700; color: var(--muted); }
.bottomnav a .ico { width: 22px; height: 22px; }
.bottomnav a.on { color: var(--blue); }

.hero { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 70%, #3b6cf0 100%); color: #fff; border-radius: 22px; padding: 18px; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(28, 79, 216, .25); }
.hero::before { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(245, 158, 11, .18); }
.hero .en-sub { color: rgba(255, 255, 255, .72); }
.hero .lvl-num { font-size: 44px; font-weight: 800; line-height: 1; }
.hero .bar { background: rgba(255, 255, 255, .2); } .hero .bar > i { background: linear-gradient(90deg, var(--saffron), #fcd34d); }
.hero .btn.saffron { box-shadow: 0 6px 16px rgba(245, 158, 11, .4); }


.coach { display: flex; gap: 12px; align-items: flex-start; }
.coach .avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; background: linear-gradient(135deg, #fbbf24, var(--saffron)); display: grid; place-items: center; font-weight: 800; color: #3b2400; box-shadow: 0 4px 12px rgba(245, 158, 11, .35); }
.bubble { background: #fff; border-radius: 4px 16px 16px 16px; padding: 10px 12px; box-shadow: var(--shadow); border: 1px solid rgba(226, 232, 240, .8); }
.bubble + .bubble { margin-top: 8px; }
.bubble.fast { border-left: 4px solid var(--saffron); } .bubble.error { border-left: 4px solid var(--red); } .bubble.praise { border-left: 4px solid var(--green); } .bubble.care { border-left: 4px solid var(--violet); }

/* level path */
.path { position: relative; padding: 6px 0; }
.node { display: flex; align-items: center; gap: 14px; padding: 8px 0; cursor: pointer; position: relative; }
.node:nth-child(even) { flex-direction: row-reverse; text-align: right; }
.node .dot { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 20px; flex: none; position: relative; z-index: 1; background: #e7ebf3; color: #94a3b8; border: 3px solid #fff; box-shadow: var(--shadow); }
.node.cleared .dot { background: linear-gradient(135deg, var(--blue), var(--navy)); color: #fff; }
.node.active .dot { background: linear-gradient(135deg, #fbbf24, var(--saffron)); color: #3b2400; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .55); } 70% { box-shadow: 0 0 0 14px rgba(245, 158, 11, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } }
.node .meta { flex: 1; min-width: 0; }
.node .name { font-weight: 700; }
.stars { color: var(--saffron); letter-spacing: 1px; font-size: 13px; } .stars .off { color: #d7dde8; }
.path-line { position: absolute; left: 50%; top: 30px; bottom: 30px; width: 3px; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, #cbd5e1 0 8px, transparent 8px 16px); }
.node .dot .badge { position: absolute; top: -6px; right: -6px; background: #fff; border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; box-shadow: var(--shadow); }

.topic { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); cursor: pointer; }
.topic + .topic { margin-top: 8px; }
.topic .tick { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #eef1f6; color: var(--muted); font-weight: 800; }
.topic.done .tick { background: var(--green); color: #fff; }
.steps3 { display: flex; gap: 4px; margin-top: 4px; } .steps3 i { height: 5px; flex: 1; border-radius: 3px; background: #e5e9f1; } .steps3 i.on { background: var(--green); }

/* lesson */
.lesson-block { border-radius: 14px; padding: 14px; }
.lesson-block.concept { background: var(--blue-50); } .lesson-block.example { background: #fff; border: 1px dashed #b9c7e8; } .lesson-block.tricks { background: var(--saffron-50); } .lesson-block.mistakes { background: var(--red-50); }
.lesson-block h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; color: var(--ink-2); }
.lesson-block ol, .lesson-block ul { margin: 0; padding-left: 20px; } .lesson-block li + li { margin-top: 6px; }

/* quiz */
.quiz-top { display: flex; align-items: center; gap: 10px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; padding: 6px 10px; border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.timer.low { background: var(--red-50); color: var(--red); }
.qtext { font-size: 17px; font-weight: 600; line-height: 1.55; white-space: pre-line; }
.en-line { display: block; } .hi-line { display: block; margin-top: 4px; color: var(--ink-2); }
.opts { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; gap: 12px; text-align: left; border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 12px 14px; cursor: pointer; font-weight: 600; font-size: 16px; min-height: 54px; width: 100%; transition: border-color .12s, background .12s; }
.opt .k { width: 30px; height: 30px; border-radius: 9px; background: #eef1f6; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; color: var(--ink-2); }
.opt:hover { border-color: #b8c6ea; }
.opt.sel { border-color: var(--blue); background: var(--blue-50); } .opt.sel .k { background: var(--blue); color: #fff; }
.opt.right { border-color: var(--green); background: var(--green-50); } .opt.right .k { background: var(--green); color: #fff; }
.opt.wrong { border-color: #ea580c; background: var(--red-50); } .opt.wrong .k { background: #ea580c; color: #fff; }
.opt[disabled] { cursor: default; }
.feedback { border-radius: 14px; padding: 14px; }
.feedback.ok { background: var(--green-50); border: 1px solid #bbe5c9; } .feedback.no { background: var(--red-50); border: 1px solid #f7cdb6; }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
.palette button { height: 38px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; cursor: pointer; }
.palette button.ans { background: var(--blue); color: #fff; border-color: var(--blue); } .palette button.cur { outline: 3px solid var(--saffron); outline-offset: 1px; }
.typed-display { font-size: 34px; font-weight: 800; text-align: center; padding: 14px; border-radius: 14px; background: #fff; border: 2px solid var(--blue-100); min-height: 70px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.typed-display.right { border-color: var(--green); background: var(--green-50); } .typed-display.wrong { border-color: #ea580c; background: var(--red-50); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button { height: 56px; border-radius: 14px; border: 0; background: #fff; box-shadow: var(--shadow); font-size: 22px; font-weight: 700; cursor: pointer; }
.keypad button:active { background: var(--blue-50); } .keypad button.go { background: var(--blue); color: #fff; }
.flash { position: fixed; inset: 0; pointer-events: none; z-index: 80; animation: flash .45s ease-out forwards; }
.flash.ok { background: radial-gradient(circle, rgba(34, 197, 94, .25), transparent 60%); } .flash.no { background: radial-gradient(circle, rgba(234, 88, 12, .22), transparent 60%); }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

/* result */
.celebrate { text-align: center; padding: 22px 16px; border-radius: 22px; background: linear-gradient(135deg, #fff7e0, #ffe8b8); border: 1px solid #fcd9a0; }
.celebrate .big { font-size: 46px; }
.breakdown .row + .row { margin-top: 8px; }
.likert { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.likert button { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 2px; font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1.2; }
.likert button b { display: block; font-size: 16px; }
.likert button.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.auth-hero { text-align: center; padding: 30px 10px 10px; }
.auth-hero .logo { width: 64px; height: 64px; font-size: 26px; border-radius: 20px; margin: 0 auto 14px; }
.tabs { display: flex; background: #e8edf7; border-radius: 12px; padding: 4px; } .tabs button { flex: 1; border: 0; background: transparent; padding: 9px; border-radius: 9px; font-weight: 700; cursor: pointer; color: var(--muted); } .tabs button.on { background: #fff; color: var(--blue); box-shadow: var(--shadow); }
.exam-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.exam { border: 2px solid var(--line); border-radius: 14px; padding: 12px; background: #fff; cursor: pointer; text-align: left; font-weight: 700; }
.exam.on { border-color: var(--blue); background: var(--blue-50); }

/* first form */
.step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.choice-grid { display: grid; gap: 8px; }
.choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 2px solid var(--line); background: #fff; border-radius: 14px; padding: 11px 12px; cursor: pointer; min-height: 52px; }
.choice b { font-size: 15px; } .choice span { font-size: 12px; color: var(--muted); font-weight: 600; }
.choice .choice-ico { font-size: 20px; line-height: 1; margin-bottom: 2px; }
.choice.on { border-color: var(--blue); background: var(--blue-50); } .choice.on b { color: var(--blue); }
.scroll-list { max-height: 300px; overflow-y: auto; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.scroll-group { position: sticky; top: 0; background: #f1f4fa; padding: 6px 12px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); z-index: 1; }
.scroll-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #eef1f6; background: #fff; padding: 12px; font-size: 15px; cursor: pointer; }
.scroll-item:last-child { border-bottom: 0; }
.scroll-item .radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #b8c3d6; flex: none; }
.scroll-item.on { background: var(--blue-50); font-weight: 700; color: var(--blue); } .scroll-item.on .radio { border: 5px solid var(--blue); }
.scroll-item input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--blue); }
.field-err { color: #c2410c; font-size: 12px; font-weight: 600; margin-top: 4px; }
.field-err:empty { display: none; }
.has-err .input, .has-err .scroll-list, .has-err .choice-grid .choice { border-color: #ea580c; }