:root{--font:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--ink:#1a1d2e;--ink-soft:#3c4157;--muted:#6b7189;--faint:#9298ad;--line:#e6e8f1;--line-strong:#d8dbe8;--surface:#fff;--screen-bg:#f4f5fa;--accent:#5b57ee;--accent-strong:#4a46e0;--accent-deep:#37339f;--accent-soft:#edecfd;--accent-softer:#f6f6fe;--ring:#5b57ee40;--success:#178a58;--success-soft:#e3f5ec;--danger:#d5495e;--danger-soft:#fcebee;--amber:#c07b1f;--amber-soft:#fdf2e0;--r-lg:20px;--r-md:14px;--r-sm:10px;--shadow-card:0 1px 2px #14162d0a, 0 10px 28px #14162d0f;--shadow-pop:0 2px 6px #14162d14, 0 18px 44px #14162d24}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;background:radial-gradient(52rem 30rem at 12% -6%,#5b57ee24,#0000 60%),radial-gradient(46rem 28rem at 96% 4%,#2dad9a1f,#0000 58%),radial-gradient(40rem 30rem at 78% 100%,#5b57ee1a,#0000 55%),linear-gradient(#eef0f9 0%,#f3f2fb 100%);min-height:100vh}button{color:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--ring);outline-offset:2px;border-radius:8px}img{max-width:100%;display:block}h1,h2,h3,p,ul{margin:0}ul{padding:0;list-style:none}.stage{flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:100vh;padding:24px 16px;display:flex}.phone{background:var(--screen-bg);width:min(414px,100%);height:min(846px,100vh - 76px);min-height:620px;box-shadow:var(--shadow-pop);border:1px solid #ffffffd9;border-radius:30px;flex-direction:column;display:flex;overflow:hidden}.shell-credit{color:var(--muted);font-size:12px}.shell-credit a{color:var(--muted);-webkit-text-decoration-color:var(--line-strong);text-decoration-color:var(--line-strong);font-weight:600}.shell-credit a:hover{color:var(--accent)}.screen{flex-direction:column;flex:1;min-height:0;animation:.3s both screen-in;display:flex;overflow-y:auto}.screen::-webkit-scrollbar{width:0}@keyframes screen-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.screen-body{flex-direction:column;gap:16px;padding:16px 18px 22px;display:flex}.topbar{z-index:5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);background:#f4f5fae0;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px 12px;display:flex;position:sticky;top:0}.topbar h1{letter-spacing:-.02em;font-size:18px;font-weight:800}.btn-back{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);border-radius:999px;align-items:center;gap:7px;padding:8px 12px 8px 10px;font-size:12.5px;font-weight:700;transition:border-color .15s,color .15s,transform .15s;display:inline-flex}.btn-back svg{width:15px;height:15px}.btn-back:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}.section-title{letter-spacing:-.01em;font-size:15px;font-weight:800}.bar{background:#e7e9f3;border-radius:999px;flex:1;height:8px;min-height:8px;position:relative;overflow:hidden}.bar>span{background:linear-gradient(90deg, #7a76ff, var(--accent));border-radius:999px;transition:width .45s cubic-bezier(.3,.7,.3,1);display:block;position:absolute;inset:0 auto 0 0}.progress-strip{align-items:center;gap:12px;display:flex}.progress-strip strong{color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:13.5px;font-weight:800}.btn-primary{border-radius:var(--r-md);background:linear-gradient(180deg, #6a66f4, var(--accent-strong));color:#fff;letter-spacing:.01em;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 18px;font-size:14.5px;font-weight:700;transition:transform .15s,box-shadow .15s,filter .15s;display:inline-flex;box-shadow:0 8px 18px #5b57ee52,inset 0 1px #ffffff38}.btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{box-shadow:none;cursor:not-allowed;filter:none;background:#c9cbdd;transform:none}.btn-ghost{border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface);width:100%;color:var(--ink-soft);justify-content:center;align-items:center;gap:8px;padding:13px 18px;font-size:14px;font-weight:700;transition:border-color .15s,color .15s,background .15s,transform .15s;display:inline-flex}.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-softer);transform:translateY(-1px)}.action-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);width:100%;box-shadow:var(--shadow-card);text-align:left;align-items:center;gap:12px;padding:13px 14px;transition:border-color .16s,transform .16s,box-shadow .16s;display:flex}.action-row:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 10px #14162d0f,0 14px 30px #5b57ee1f}.action-row .action-icon{background:var(--accent-soft);width:38px;height:38px;color:var(--accent);border-radius:12px;flex:none;place-items:center;display:grid}.action-row .action-icon svg{width:20px;height:20px}.action-row .action-label{flex:1;font-size:14.5px;font-weight:700}.action-row .action-sub{color:var(--muted);margin-top:2px;font-size:12px;font-weight:500;display:block}.action-row .chevron{width:18px;height:18px;color:var(--faint);transition:transform .16s,color .16s}.action-row:hover .chevron{color:var(--accent);transform:translate(3px)}.welcome{align-items:center;gap:14px;padding:6px 2px 0;display:flex}.welcome-copy{flex:1}.welcome h1{letter-spacing:-.03em;font-size:23px;font-weight:800}.welcome p{color:var(--muted);margin-top:5px;font-size:13.5px;line-height:1.5}.welcome p strong{color:var(--accent);font-weight:700}.welcome-photo{object-fit:cover;width:86px;height:86px;box-shadow:var(--shadow-card);border:2px solid #fff;border-radius:22px;flex:none}.progress-card{flex-direction:column;gap:14px;padding:16px;display:flex}.progress-card-row{align-items:center;gap:16px;display:flex}.progress-detail{flex-direction:column;flex:1;gap:6px;display:flex}.progress-detail .headline{font-size:14px;font-weight:700}.progress-detail .sub{color:var(--muted);margin-bottom:4px;font-size:12.5px}.progress-detail .caption{color:var(--faint);margin-top:4px;font-size:12px}.ring{flex:none}.ring .ring-label{letter-spacing:-.02em;fill:var(--ink);font-size:20px;font-weight:800}.materials-card{flex-direction:column;gap:13px;padding:16px;display:flex}.material-row{border-radius:var(--r-sm);align-items:center;gap:12px;padding:4px 2px;display:flex}.material-thumb{object-fit:cover;border:1px solid var(--line);border-radius:14px;flex:none;width:54px;height:54px}.material-copy{flex:1;min-width:0}.material-copy .title{white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;font-weight:700;overflow:hidden}.material-copy .meta{color:var(--muted);margin-top:3px;font-size:12px}.material-badge{letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:999px;flex:none;padding:4px 9px;font-size:10.5px;font-weight:800}.modes{flex-direction:column;gap:10px;display:flex}.modes-title{letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:2px 2px 0;font-size:12px;font-weight:800}.chat-scroll{flex-direction:column;flex:1;gap:14px;padding:16px 18px;display:flex}.msg{align-items:flex-end;gap:9px;max-width:88%;display:flex}.msg.from-ai{align-self:flex-start}.msg.from-user{flex-direction:row-reverse;align-self:flex-end}.avatar{border-radius:50%;flex:none;place-items:center;width:30px;height:30px;display:grid}.avatar.ai{background:linear-gradient(140deg, #7a76ff, var(--accent-deep));color:#fff;letter-spacing:.02em;font-size:10.5px;font-weight:800;box-shadow:0 4px 10px #5b57ee59}.avatar.user{color:var(--ink-soft);background:#e4e6f2}.avatar.user svg{width:17px;height:17px}.bubble{white-space:pre-line;border-radius:16px;padding:11px 14px;font-size:13.5px;line-height:1.55}.msg.from-ai .bubble{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-card);color:var(--ink-soft);border-bottom-left-radius:6px}.msg.from-user .bubble{background:linear-gradient(160deg, #6a66f4, var(--accent-strong));color:#fff;border-bottom-right-radius:6px;box-shadow:0 6px 16px #5b57ee47}.typing{align-items:center;gap:5px;padding:14px 15px;display:inline-flex}.typing i{background:var(--faint);border-radius:50%;width:6px;height:6px;animation:1.1s ease-in-out infinite typing-bounce}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}@keyframes typing-bounce{0%,60%,to{opacity:.55;transform:none}30%{opacity:1;transform:translateY(-4px)}}.tutor-dock{background:linear-gradient(180deg, #f4f5fa00, var(--screen-bg) 26%);flex-direction:column;gap:10px;padding:12px 18px 16px;display:flex;position:sticky;bottom:0}.chat-form{background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--shadow-card);border-radius:999px;align-items:center;gap:8px;padding:6px 6px 6px 16px;transition:border-color .15s,box-shadow .15s;display:flex}.chat-form:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}.chat-form input{color:var(--ink);background:0 0;border:0;flex:1;min-width:0;font-family:inherit;font-size:13.5px}.chat-form input::placeholder{color:var(--faint)}.chat-form input:focus{outline:none}.btn-send{background:linear-gradient(180deg, #6a66f4, var(--accent-strong));color:#fff;border-radius:50%;flex:none;place-items:center;width:38px;height:38px;transition:transform .15s,filter .15s;display:grid;box-shadow:0 6px 14px #5b57ee59}.btn-send svg{width:17px;height:17px;margin-left:-1px}.btn-send:hover{filter:brightness(1.05);transform:translateY(-1px)rotate(-8deg)}.btn-send:disabled{box-shadow:none;cursor:not-allowed;background:#c9cbdd;transform:none}.flip-stage{perspective:1400px}.flip-card{width:100%;min-height:264px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.35,.9,.3,1);position:relative}.flip-card.flipped{transform:rotateY(180deg)}.flip-face{backface-visibility:hidden;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-card);visibility:visible;flex-direction:column;padding:18px;transition:visibility 0s .22s;display:flex;position:absolute;inset:0}.flip-card .flip-face.back{visibility:hidden;background:linear-gradient(175deg,#fdfdff,#f6f6fe);transform:rotateY(180deg)}.flip-card.flipped .flip-face.front{visibility:hidden}.flip-card.flipped .flip-face.back{visibility:visible}.flip-eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--accent);align-items:center;gap:7px;font-size:10.5px;font-weight:800;display:inline-flex}.flip-eyebrow.answer{color:var(--success)}.flip-eyebrow:before{content:"";background:currentColor;border-radius:50%;width:7px;height:7px}.flip-question{letter-spacing:-.01em;margin-top:12px;font-size:17.5px;font-weight:700;line-height:1.45}.flip-answer{color:var(--ink-soft);margin-top:12px;font-size:14.5px;line-height:1.6}.flip-ref{color:var(--faint);margin-top:10px;font-size:12px}.flip-foot{justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:14px;display:flex}.flip-hint{color:var(--faint);font-size:12px}.btn-flip{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-soft);border-radius:999px;align-items:center;gap:7px;padding:9px 14px;font-size:13px;font-weight:700;transition:border-color .15s,color .15s,transform .15s;display:inline-flex}.btn-flip svg{width:15px;height:15px}.btn-flip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}.rate-block{flex-direction:column;gap:10px;display:flex}.rate-title{text-align:center;color:var(--ink-soft);font-size:14px;font-weight:700}.rate-grid{grid-template-columns:repeat(4,1fr);gap:9px;display:grid}.rate-btn{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card);flex-direction:column;align-items:center;gap:6px;padding:11px 4px 9px;transition:transform .15s,border-color .15s,background .15s;display:flex}.rate-btn svg{width:26px;height:26px}.rate-btn span{color:var(--muted);white-space:nowrap;font-size:11px;font-weight:700}.rate-btn:hover{transform:translateY(-2px)}.rate-btn.tone-unknown svg{color:var(--danger)}.rate-btn.tone-hard svg{color:#d8842c}.rate-btn.tone-good svg{color:#3f9d6e}.rate-btn.tone-easy svg{color:var(--success)}.rate-btn.tone-unknown:hover,.rate-btn.tone-unknown.picked{border-color:var(--danger);background:var(--danger-soft)}.rate-btn.tone-hard:hover,.rate-btn.tone-hard.picked{background:var(--amber-soft);border-color:#d8842c}.rate-btn.tone-good:hover,.rate-btn.tone-good.picked{background:var(--success-soft);border-color:#3f9d6e}.rate-btn.tone-easy:hover,.rate-btn.tone-easy.picked{border-color:var(--success);background:var(--success-soft)}.rate-btn.picked{transform:scale(1.04)}.rate-btn.picked span{color:var(--ink-soft)}.deck-summary{text-align:center;flex-direction:column;align-items:center;gap:12px;padding:22px 18px;display:flex}.deck-summary .big-check{background:var(--success-soft);width:52px;height:52px;color:var(--success);border-radius:50%;place-items:center;display:grid}.deck-summary .big-check svg{width:28px;height:28px}.deck-summary h2{letter-spacing:-.02em;font-size:18px;font-weight:800}.deck-summary p{color:var(--muted);font-size:13px;line-height:1.5}.deck-chips{flex-wrap:wrap;justify-content:center;gap:7px;display:flex}.deck-chips span{background:var(--screen-bg);border:1px solid var(--line);color:var(--ink-soft);border-radius:999px;padding:5px 10px;font-size:11.5px;font-weight:700}.link-btn{color:var(--accent);text-underline-offset:3px;font-size:12.5px;font-weight:700;-webkit-text-decoration:underline #5b57ee59;text-decoration:underline #5b57ee59}.link-btn:hover{color:var(--accent-strong)}.quiz-card{flex-direction:column;gap:14px;padding:17px;display:flex}.quiz-q{letter-spacing:-.01em;gap:9px;font-size:15.5px;font-weight:700;line-height:1.5;display:flex}.quiz-q .q-mark{color:var(--accent);font-weight:800}.quiz-divider{background:var(--line);height:1px}.quiz-options{flex-direction:column;gap:8px;display:flex}.quiz-option{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);cursor:pointer;color:var(--ink-soft);align-items:center;gap:11px;padding:11px 12px;font-size:13.5px;line-height:1.45;transition:border-color .15s,background .15s;display:flex;position:relative}.quiz-option:hover{border-color:var(--accent);background:var(--accent-softer)}.quiz-option input{opacity:0;pointer-events:none;position:absolute}.radio-dot{border:2px solid var(--line-strong);border-radius:50%;flex:none;place-items:center;width:19px;height:19px;transition:border-color .15s;display:grid}.radio-dot:after{content:"";background:var(--accent);border-radius:50%;width:9px;height:9px;transition:transform .16s cubic-bezier(.3,.8,.4,1.4);transform:scale(0)}.quiz-option input:checked~.radio-dot{border-color:var(--accent)}.quiz-option input:checked~.radio-dot:after{transform:scale(1)}.quiz-option input:focus-visible~.radio-dot{box-shadow:0 0 0 4px var(--ring)}.quiz-option.selected{border-color:var(--accent);background:var(--accent-softer);color:var(--ink)}.quiz-option .opt-letter{color:var(--faint);flex:none;font-weight:800}.quiz-option.selected .opt-letter{color:var(--accent)}.quiz-option.locked{cursor:default}.quiz-option.locked:hover{border-color:var(--line);background:var(--surface)}.quiz-option.reveal-correct,.quiz-option.reveal-correct:hover{border-color:var(--success);background:var(--success-soft);color:var(--ink)}.quiz-option.reveal-correct .radio-dot{border-color:var(--success)}.quiz-option.reveal-correct .radio-dot:after{background:var(--success);transform:scale(1)}.quiz-option.reveal-wrong,.quiz-option.reveal-wrong:hover{border-color:var(--danger);background:var(--danger-soft)}.quiz-option.reveal-wrong .radio-dot{border-color:var(--danger)}.quiz-option.reveal-wrong .radio-dot:after{background:var(--danger);transform:scale(1)}.feedback-card{border-radius:var(--r-lg);border:1px solid;align-items:center;gap:14px;padding:15px 16px;animation:.3s cubic-bezier(.3,.8,.35,1.2) both feedback-in;display:flex}@keyframes feedback-in{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:none}}.feedback-card.good{background:var(--success-soft);border-color:#178a5859}.feedback-card.bad{background:var(--danger-soft);border-color:#d5495e4d}.feedback-copy{flex:1}.feedback-copy h3{letter-spacing:-.01em;font-size:15px;font-weight:800}.feedback-card.good h3{color:var(--success)}.feedback-card.bad h3{color:var(--danger)}.feedback-copy p{color:var(--ink-soft);margin-top:4px;font-size:12.5px;line-height:1.5}.feedback-copy .link-btn{margin-top:7px;display:inline-block}.feedback-badge{width:46px;height:46px;box-shadow:var(--shadow-card);background:#fff;border-radius:50%;flex:none;place-items:center;display:grid}.feedback-badge svg{width:26px;height:26px}.feedback-card.good .feedback-badge{color:var(--success)}.feedback-card.bad .feedback-badge{color:var(--danger)}.quiz-result{text-align:center;flex-direction:column;align-items:center;gap:12px;padding:24px 18px;display:flex}.quiz-result .big-check{background:var(--accent-soft);width:56px;height:56px;color:var(--accent);border-radius:50%;place-items:center;display:grid}.quiz-result .big-check svg{width:30px;height:30px}.quiz-result h2{letter-spacing:-.02em;font-size:19px;font-weight:800}.quiz-result .score-line{color:var(--muted);font-size:13.5px;line-height:1.55}.quiz-result .score-line strong{color:var(--ink);font-weight:800}
