/* YangLingo personal edition — shared, responsive visual system. */
:root{--side:252px;--top:88px;--radius:20px;--primary:#7468f4;--primary2:#b0a8ff;--accent:#51c8a2;--warning:#f2b765;--danger:#f28591;--bg:#14151e;--panel:#1c1e2b;--panel2:#242637;--panel3:#2d3043;--line:#34364b;--border:var(--line);--panel-2:var(--panel2);--text:#f5f4fa;--muted:#adaebe;--shadow:0 10px 34px rgba(0,0,0,.16);color-scheme:dark}
html[data-theme=light]{--bg:#f7f8fc;--panel:#fff;--panel2:#f5f5fa;--panel3:#eeedf6;--line:#e9e8f1;--text:#27283c;--muted:#717287;--primary:#6956df;--primary2:#6652d9;--accent:#218768;--warning:#b47929;--danger:#c95164;--shadow:0 8px 30px rgba(39,35,78,.045);color-scheme:light}
body{font-family:"Segoe UI",Inter,system-ui,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.mobile-only{display:none}
button,a,input,select,textarea{touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--primary);outline-offset:4px}
button:disabled{cursor:not-allowed}
.btn{font-size:13px;font-weight:650;padding:11px 17px;min-height:42px;border-radius:11px;gap:8px;line-height:1.4}
.btn.primary{background:var(--primary);box-shadow:0 4px 10px rgba(105,86,223,.12)}
.btn.soft{background:var(--panel);border-color:var(--line)}
.btn.ghost{background:transparent}
.btn.large{padding:14px 20px;font-size:14px}
.btn.tiny{font-size:12px;padding:8px 11px;min-height:34px}
.icon-btn{width:42px;height:42px;font-size:18px;background:var(--panel)}
input,select,textarea{font-size:14px;padding:12px 14px;min-height:44px;border-radius:10px;background:var(--panel);line-height:1.5}
label.field{font-size:13px;gap:8px;font-weight:600}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
.sidebar{background:var(--panel);border-color:var(--line)}
.side-head{padding:0 23px;height:100px;flex-shrink:0}
.brand{gap:11px}
.logo{width:40px;height:40px;border-radius:13px;background:var(--primary);font-size:17px;box-shadow:none;letter-spacing:-1px}
.brand b{font-size:21px;letter-spacing:-.7px;font-weight:750}
.brand small{font-size:11px;margin-top:0;letter-spacing:.1px;font-weight:400}
.brand-dot{color:var(--primary)}
.nav{padding:3px 16px 18px;gap:4px;flex:1;align-content:start;scrollbar-width:thin}
.nav>a,.nav-group-links>a{min-height:44px;font-size:13px;font-weight:550;padding:10px 13px;border-radius:10px;gap:13px;line-height:1.35;flex-shrink:0}
.nav>a.active,.nav-group-links>a.active{background:color-mix(in srgb,var(--primary) 10%,var(--panel));color:var(--primary2);box-shadow:none;font-weight:700}
.nav>a.active:after,.nav-group-links>a.active:after{content:"";width:5px;height:5px;border-radius:50%;background:var(--primary);margin-left:auto}
.nav-label{font-size:10px;letter-spacing:1.3px;font-weight:650;color:var(--muted);padding:12px 13px 11px}
.nav-icon{display:inline-flex!important;align-items:center;justify-content:center;width:19px!important;flex:0 0 19px;height:22px}
.nav-icon svg{width:21px;height:21px;overflow:visible}
.badge{font-size:11px;min-width:24px;height:24px;background:var(--primary)}
.nav-group{margin-top:9px}
.nav-group summary{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;color:var(--muted);font-size:10px;font-weight:650;letter-spacing:1px;list-style:none;cursor:pointer;border-radius:8px;min-height:40px;user-select:none}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary:hover{background:var(--panel2)}
.nav-group summary>span{font-size:15px;transition:transform .2s}
.nav-group[open] summary>span{transform:rotate(180deg)}
.nav-group-links{display:grid;gap:4px;margin-top:4px}
.side-foot{padding:15px 18px 17px;flex-shrink:0;border-top:1px solid var(--line)}
.streak-card{padding:12px;border-radius:12px;background:color-mix(in srgb,var(--warning) 8%,var(--panel));border:0;gap:10px;margin:0 0 8px}
.streak-card b{font-size:13px;font-weight:700}
.streak-card small{font-size:10px}
.streak-card>a{margin-left:auto;color:var(--muted);text-decoration:none;font-size:20px}
.ghost-row{font-size:12px;padding:10px 9px}
.sidebar-caption{display:block;margin:9px 0 0 9px;font-size:9px;letter-spacing:.15px;color:var(--muted);opacity:.75}
.topbar{padding:0 38px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 95%,transparent)}
.top-left h2{font-size:17px;font-weight:650;letter-spacing:-.3px}
.top-left p{font-size:12px;margin-top:3px}
.top-actions{gap:12px}
.top-actions>.btn{font-size:12px;min-height:38px;padding:9px 13px}
.user-menu>button{border:0;background:transparent;padding:4px;gap:9px}
.user-menu #avatar{width:36px;height:36px;border-radius:50%;background:#eee9dd;color:#6b6254;font-size:12px}
.user-meta b{font-size:12px}.user-meta small{font-size:10px}
.dropdown{top:52px;min-width:180px}.dropdown a,.dropdown button{font-size:13px;padding:11px}
.view{padding:32px 38px 70px;max-width:1450px;outline:none}
.page-head{margin-bottom:26px;align-items:center}
.page-head h1{font-size:29px;font-weight:700;letter-spacing:-.8px;line-height:1.3}
.page-head p{font-size:13px;line-height:1.65;max-width:780px;margin-top:8px}
.eyebrow,.set-kicker{font-size:10px!important;letter-spacing:1.4px;font-weight:650}
.stats-grid{gap:16px}
.stat-card{padding:20px 22px;border-radius:16px;min-height:112px;box-shadow:var(--shadow)}
.stat-card small{font-size:12px}.stat-card strong{font-size:30px;font-weight:700;margin-top:10px;letter-spacing:-.8px}
.stat-card em{font-size:11px}.stat-card .stat-icon{width:36px;height:36px;border-radius:11px;background:color-mix(in srgb,var(--primary) 8%,var(--panel));color:var(--primary);font-size:18px}
.stat-card:nth-child(2) .stat-icon{background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--accent)}
.stat-card:nth-child(3) .stat-icon{background:color-mix(in srgb,var(--warning) 10%,var(--panel));color:var(--warning)}
.panel,.side-panel{padding:23px;border-radius:18px;box-shadow:var(--shadow)}
.panel h3,.side-panel h3,.section-title h3{font-size:16px;font-weight:650;letter-spacing:-.3px}
.section{margin-top:29px}.section-title{margin-bottom:16px}.section-title p{font-size:12px;color:var(--muted);margin:5px 0 0}
.dashboard-greeting{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:25px}
.dashboard-greeting .eyebrow{color:var(--muted);font-size:10px!important;letter-spacing:1.3px;text-transform:uppercase}
.dashboard-greeting h1{font-size:29px;letter-spacing:-.8px;line-height:1.35;margin:6px 0 6px;font-weight:700}
.dashboard-greeting p{font-size:13px;color:var(--muted);margin:0}
.streak-pill{border-radius:999px;background:color-mix(in srgb,var(--warning) 9%,var(--panel));color:var(--warning);padding:9px 14px;font-size:12px;white-space:nowrap}
.dashboard-metrics{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:22px}
.today-layout{grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr);gap:20px;margin-top:0}
.learning-hero.hero-panel{background:#6b58dd;color:#fff;border:0;min-height:320px;padding:31px 33px;border-radius:20px;box-shadow:0 8px 25px rgba(105,86,223,.12)}
.learning-hero .eyebrow{color:#e0d9ff;letter-spacing:1.9px}
.learning-hero h2{font-size:31px;line-height:1.2;letter-spacing:-.9px;font-weight:650;max-width:72%;margin:17px 0 14px;position:relative;z-index:2}
.learning-hero p{font-size:13px;color:#eee9ff;max-width:70%;margin:0;line-height:1.7;position:relative;z-index:2}
.learning-hero .daily-hero-cta{margin-top:24px;gap:10px;position:relative;z-index:2}
.learning-hero .daily-study-btn{background:#fff!important;color:#604bcc!important;box-shadow:none;font-weight:700;padding:12px 19px}
.learning-hero .btn.soft{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.learning-hero .btn.ghost{color:#eee9ff;border-color:rgba(255,255,255,.26);font-size:12px}
.text-link{font-size:12px;font-weight:600;color:var(--primary2);text-decoration:none}.text-link:hover{text-decoration:underline}
.daily-plan-panel .goal-wrap{margin-top:14px}.daily-plan-panel .progress{background:var(--panel3);height:5px}.daily-plan-panel .goal-meta{font-size:11px;color:var(--muted)}
.focus-session{display:flex;align-items:center;gap:12px;background:color-mix(in srgb,var(--primary) 7%,var(--panel));border:1px solid var(--line);border-radius:14px;padding:13px 17px;margin-bottom:20px}.focus-session span{color:var(--primary2);font-size:21px}.focus-session b{font-size:13px;display:block}.focus-session small{font-size:11px;color:var(--muted)}.focus-session button{margin-left:auto}
.recall-input-wrap label{font-size:12px;color:var(--muted);display:block;text-align:left;margin-bottom:7px}.recall-input-row{display:flex;gap:8px;align-items:center}.recall-input-row input{flex:1;min-width:0}.recall-feedback{font-size:12px;margin-top:8px}.recall-feedback.correct{color:var(--accent)}.recall-feedback.try-again{color:var(--warning)}
.study-guidance h2{font-size:15px;margin:0 0 5px}.study-guidance a{font-size:12px;color:var(--primary2)}.library-sort select{width:auto;min-width:175px}.flashbook-topic-details{margin:15px 0;font-size:12px;color:var(--muted)}.flashbook-topic-details summary{cursor:pointer}.flashbook-topic-details .flashbook-topics{margin-top:11px}.flashbook-new{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}.review-reveal-actions{display:flex;justify-content:center;gap:8px;margin-top:16px}
.hero-stats{display:flex;gap:22px;padding-top:21px;margin-top:23px;border-top:1px solid rgba(255,255,255,.2);font-size:11px;color:#eee9ff;position:relative;z-index:2;flex-wrap:wrap}
.hero-stats b{color:#fff;font-weight:650}
.hero-orbit{position:absolute;right:25px;top:54px;width:118px;height:155px;border-radius:15px;background:#f4eddc;transform:rotate(9deg);box-shadow:6px 7px 0 rgba(47,28,124,.22);display:flex;align-items:center;justify-content:center;color:#6b58dd;border-left:7px solid #d5c7a2}
.hero-orbit:before{content:"";position:absolute;inset:9px 10px;border:1px solid #dad1ba;border-radius:7px}
.hero-orbit>span{font-family:Georgia,serif;font-size:48px;letter-spacing:-4px}
.hero-orbit>i{position:absolute;right:-12px;bottom:-11px;background:#bbefda;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:17px;font-style:normal;border:3px solid #6b58dd;color:#26815e}
.hero-orbit>small{position:absolute;top:24px;font-size:7px;letter-spacing:1.8px;text-transform:uppercase;max-width:95px;text-align:center;line-height:1.3}
.daily-plan-panel .today-head{align-items:center}
.daily-plan-panel .today-head h3{margin:0 0 4px}
.daily-plan-panel .today-head p{font-size:12px;color:var(--muted);margin:0}
.daily-plan-panel .backlog-pill{font-size:11px;padding:5px 8px;letter-spacing:0;border:0;background:var(--panel2)}
.daily-task-list,.today-task-list{display:grid;gap:9px;margin-top:17px}
.daily-task-list .today-task{grid-template-columns:25px minmax(0,1fr) 46px 13px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:12px 0;gap:10px;min-height:54px}
.daily-task-list .today-task-progress{height:4px;width:46px;background:var(--panel3)}.daily-task-list .plan-reason{display:none}.daily-task-list .today-task>span:last-child{font-size:13px;color:var(--muted)}
.daily-task-list .task-complete .task-marker{background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--accent);border-color:transparent}
.daily-task-list .today-task:last-child{border-bottom:0}
.daily-task-list .today-task b{font-size:13px;font-weight:600}.daily-task-list .today-task small{font-size:11px;margin-top:4px}
.task-marker{width:25px;height:25px;border-radius:50%;background:var(--panel2);color:var(--muted);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;font-weight:650}
.today-task.done .task-marker{background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--accent);border-color:transparent}
.daily-plan-panel>.progress{background:var(--panel3);margin-top:16px;height:5px}
.daily-plan-panel details{font-size:12px;color:var(--muted);margin-top:16px}
.daily-plan-panel details summary{cursor:pointer}
.daily-plan-panel details p{line-height:1.7;font-size:12px}
.learning-focus{margin-top:24px;background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:17px 20px;font-size:12px;color:var(--muted)}
.learning-focus summary{font-size:13px;font-weight:600;color:var(--text);cursor:pointer}
.learning-focus .plan-signal-line span{font-size:11px;background:var(--panel2);border-color:var(--line);color:var(--muted)}
.continue-grid,.learning-method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.set-grid{gap:16px}
.set-card{padding:22px;min-height:212px;border-radius:16px;box-shadow:var(--shadow)}
.set-card .cover{width:44px;height:49px;border-radius:7px 10px 10px 7px;border-left:4px solid color-mix(in srgb,var(--primary) 50%,var(--panel));background:color-mix(in srgb,var(--primary) 11%,var(--panel));font-size:18px;color:var(--primary)}
.set-card:nth-child(3n+2) .cover{background:color-mix(in srgb,var(--accent) 10%,var(--panel));border-left-color:color-mix(in srgb,var(--accent) 50%,var(--panel));color:var(--accent)}
.set-card:nth-child(3n+3) .cover{background:color-mix(in srgb,var(--warning) 10%,var(--panel));border-left-color:color-mix(in srgb,var(--warning) 50%,var(--panel));color:var(--warning)}
.set-card .folder{font-size:10px;max-width:70%;white-space:normal;text-align:right}
.set-card h3{font-size:16px;font-weight:650;margin:18px 0 7px;line-height:1.45;letter-spacing:-.2px}
.set-card p{font-size:12px;line-height:1.65;-webkit-line-clamp:2}
.set-card .foot{font-size:11px;padding-top:20px;gap:12px;flex-wrap:wrap}
.learning-method-grid .set-card{min-height:175px;background:transparent;box-shadow:none}
.learning-method-grid .set-card h3{margin-top:12px}
.library-intro{padding:16px 19px;border-radius:13px;background:color-mix(in srgb,var(--primary) 6%,var(--panel));border:1px solid color-mix(in srgb,var(--primary) 14%,var(--line));font-size:13px;line-height:1.7;margin-bottom:23px;color:var(--muted)}
.library-intro b{color:var(--primary2)}
.folder-row{gap:9px;margin-bottom:19px}.folder-chip{font-size:12px;min-height:38px;padding:8px 15px}
.toolbar{gap:10px;margin-bottom:23px}.search:before{font-size:22px;top:7px;left:12px}.search input{padding-left:40px}
.set-header h1{font-size:30px;letter-spacing:-.8px}.set-header p{font-size:13px;line-height:1.7}.set-header .set-kicker{font-size:11px}
.cards-table th{font-size:11px;padding:13px 16px}.cards-table td{font-size:12px;line-height:1.65;padding:15px 16px}.term-cell b{font-size:15px}.term-cell small{font-size:11px}.state{font-size:10px}
.table-wrap{overflow:auto}.cards-table{min-width:620px}
.lesson-plan-head p,.lesson-detail-head p{font-size:13px}.lesson-info small{font-size:11px}.lesson-index,.lesson-word-no{color:var(--primary2)}
.lesson-word-state.fresh{color:var(--primary2)}.lesson-word-state.done{color:var(--accent)}.lesson-progress:before{background:var(--panel3)}
.flashbook-grid{gap:20px}.flashbook-card{padding:23px}.flashbook-main h2{font-size:21px;line-height:1.35;letter-spacing:-.5px}.flashbook-main p{font-size:13px!important;line-height:1.75!important}.flashbook-stats{gap:12px;font-size:12px}.flashbook-cover{border-radius:10px 16px 16px 10px;background:color-mix(in srgb,var(--primary) 11%,var(--panel));color:var(--primary2);border-left:6px solid var(--primary)}
.flashbook-cover small{font-size:10px}.flashbook-stats span{font-size:12px}.flashbook-topics .mistake-filter-chip{font-size:11px;padding:6px 10px}.new-book-badge{background:color-mix(in srgb,var(--accent) 13%,var(--panel));color:var(--accent);font-size:10px;font-weight:650;padding:5px 9px;border-radius:6px}
.study-guidance{font-size:13px;line-height:1.7;padding:15px 18px;border:1px solid var(--line);background:var(--panel);border-radius:13px;margin-bottom:18px;color:var(--muted)}
.study-guidance b{color:var(--text)}.study-guidance p{margin:3px 0 0}
.study-counter{font-size:12px}.study-top{gap:12px}.study-top select{width:auto;max-width:280px}
.review-shell-with-nav{max-width:900px;gap:16px}
.active-recall-bar{gap:8px;margin-bottom:18px}.active-recall-chip{padding:9px 15px;font-size:12px;min-height:38px}
.flashcard{height:auto;min-height:440px}.flash-inner{min-height:440px}.flash-face{padding:38px 42px;border-radius:22px;background:var(--panel);box-shadow:var(--shadow);min-height:440px}
.flash-face .label{font-size:11px;letter-spacing:1.7px}.flash-face h2{font-size:44px;font-weight:650;line-height:1.2;overflow-wrap:anywhere;max-width:100%}.flash-face .ipa{font-size:15px}.flash-face .definition{font-size:27px;font-weight:600;line-height:1.4}.flash-face .example{font-size:15px;line-height:1.7;margin-top:22px}
.flash-meta-item{font-size:13px;line-height:1.6;padding:13px 16px}.flash-meta-item b{font-size:10px}
.recall-input-wrap{margin-top:18px}.recall-input{font-size:17px;min-width:0}
.rate{font-size:13px;min-height:62px;border-radius:13px;padding:13px 8px}.rate small{font-size:11px;margin-top:5px}
.rate.again{color:var(--danger)}.rate.hard{color:var(--warning)}.rate.good{color:var(--primary2)}.rate.easy{color:var(--accent)}
.review-card-arrow{background:var(--panel);color:var(--primary2);border-color:var(--line);box-shadow:var(--shadow);width:44px;height:58px;font-size:24px}
.review-card-arrow.prev{left:-56px}.review-card-arrow.next{right:-56px}.review-card-arrow:hover:not(:disabled){color:#fff}
.review-progress-track{height:5px;border-radius:999px;background:var(--panel3);overflow:hidden;margin-bottom:8px}.review-progress-track i{display:block;height:100%;background:var(--primary)}
.review-navigator .quiz-num-btn{min-width:35px;min-height:35px;font-size:12px}
.question-card{padding:29px}.question-card .q-meta{font-size:12px}.question-card h2{font-size:27px;line-height:1.5}.question-card .hint,.practice-note{font-size:12px!important;line-height:1.7!important}.option{font-size:14px;padding:16px}
.mini-set b{font-size:13px}.mini-set small{font-size:11px}.mini-set{padding:13px}
.modal{border-radius:19px;max-width:min(760px,calc(100vw - 30px))}.modal-head{padding:20px 25px}.modal-head h3{font-size:19px}.modal-body{padding:24px 25px}.modal-foot{padding:17px 25px}
.toast{font-size:13px;max-width:min(420px,calc(100vw - 28px));line-height:1.6}
.empty h3{font-size:19px}.empty p{font-size:13px;line-height:1.75}.loading{font-size:13px}
.auth-screen{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--panel);color:var(--text)}
.auth-art{background:#6b58dd;color:#fff;padding:42px 9%;display:flex;flex-direction:column;position:relative;overflow:hidden}
.auth-art .brand{color:#fff;position:relative;z-index:2}.auth-art .brand small{color:#ded7ff}.auth-art .logo{background:rgba(255,255,255,.2)}
.auth-art .hero{margin-top:68px;position:relative;z-index:2}.auth-art .hero .kicker{color:#ded7ff;font-size:10px;letter-spacing:1.8px}
.auth-art .hero h1{font-size:clamp(32px,3.4vw,49px);font-weight:650;line-height:1.25;letter-spacing:-1.4px;margin:16px 0 22px}.auth-art .hero h1 em{color:#e8dfb7;font-style:normal}
.auth-art .hero p{font-size:14px;line-height:1.9;color:#ebe6ff;max-width:465px;margin-bottom:23px}.hero-pills{gap:7px;flex-wrap:wrap}.hero-pills span{font-size:11px;color:#f5f2ff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.08);padding:7px 10px}
.auth-illustration{height:275px;position:relative;max-width:460px;width:100%;margin:24px auto 0}
.illustration-book{position:absolute;left:29%;top:15px;width:165px;height:217px;border-radius:8px 17px 17px 8px;background:#eee5cc;color:#4d3aa8;border-left:10px solid #c6b794;transform:rotate(9deg);box-shadow:10px 9px 0 rgba(39,21,101,.22);padding:22px 18px;display:flex;flex-direction:column;justify-content:space-between}
.illustration-book:before{content:"";position:absolute;inset:10px 8px 10px 9px;border:1px solid #d1c5a4;border-radius:2px 9px 9px 2px}
.book-label,.book-bottom{font-size:7px;letter-spacing:1.3px;position:relative}.illustration-book strong{font-family:Georgia,serif;font-size:28px;font-weight:400;line-height:1.2;position:relative}.book-flower{font-size:39px;position:absolute;bottom:31px;right:20px;color:#8e9765}
.illustration-note{position:absolute;background:#fffaf0;color:#4b4462;padding:15px 18px;border-radius:11px;box-shadow:0 7px 18px rgba(38,22,98,.13);font-size:12px;line-height:1.6}
.note-top{top:7px;right:0;transform:rotate(-6deg)}.note-bottom{left:4%;bottom:19px;transform:rotate(-5deg);font-size:12px}.note-bottom>span{background:#d2efdd;color:#288258;border-radius:50%;display:inline-grid;place-items:center;width:25px;height:25px;margin-right:7px}
.illustration-spark{position:absolute;color:#eee5cc;font-size:35px}.spark-one{top:28px;left:12%}.spark-two{right:5%;bottom:25px;font-size:40px}
.auth-art-foot{font-size:11px;color:#ddd5ff;margin:22px 0 0;text-align:center;position:relative}
.auth-side{padding:60px 12%;display:flex;align-items:center;justify-content:center;background:var(--panel)}
.auth-box{width:100%;max-width:380px;padding:0;box-shadow:none}.auth-eyebrow{font-size:10px;color:var(--primary2);letter-spacing:1.5px;font-weight:650}.auth-box h2{font-size:28px;font-weight:650;letter-spacing:-.8px;margin:12px 0 8px}.auth-description{font-size:13px;color:var(--muted);margin:0 0 29px}.auth-tabs{padding:5px;background:var(--panel2);border-radius:11px;margin-bottom:24px;border:0}.auth-tabs button{font-size:13px;font-weight:600;padding:10px}.auth-tabs button.active{background:var(--panel);color:var(--primary2);box-shadow:0 2px 6px rgba(27,23,55,.07)}
.auth-form{gap:18px}.auth-form label{font-size:13px;color:var(--text);font-weight:550;gap:8px}.auth-form input{padding:13px 14px;background:var(--panel);color:var(--text);border-color:var(--line)}.auth-form .btn{margin-top:5px}.privacy-note{font-size:11px;line-height:1.8;text-align:center;color:var(--muted);margin-top:23px}
html[data-theme=light] .mistake-ans-box.wrong{color:#9c3445}html[data-theme=light] .mistake-ans-box.correct{color:#176a50}html[data-theme=light] .plan-signal-line span{color:var(--muted);background:var(--panel2);border-color:var(--line)}
html[data-theme=light] .hero-panel:not(.learning-hero){background:var(--panel);color:var(--text);border-color:var(--line)}html[data-theme=light] .hero-panel:not(.learning-hero) p,html[data-theme=light] .goal-meta{color:var(--muted)}
html[data-theme=light] .connected-rule-card,html[data-theme=light] .mistake-card{color:var(--text)}
@media(min-width:1500px){.view{padding-top:38px}.learning-hero.hero-panel{padding:36px}.learning-hero h2{font-size:36px}.hero-orbit{right:40px;width:138px;height:175px}}
@media(max-width:1200px){:root{--side:230px}.side-head{padding:0 18px}.nav{padding-left:11px;padding-right:11px}.topbar{padding:0 25px}.view{padding:28px 25px 60px}.learning-hero.hero-panel{padding:27px}.learning-hero h2{font-size:27px;max-width:73%}.hero-orbit{width:94px;height:127px;right:19px}.hero-orbit>span{font-size:38px}.hero-stats{gap:12px;font-size:10px}.review-card-arrow.prev{left:8px}.review-card-arrow.next{right:8px}.flash-face{padding:35px 58px}}
@media(max-width:1050px){.top-left p{display:none}.top-actions #quick-create{display:none}.today-layout{grid-template-columns:1fr}.learning-hero.hero-panel{min-height:290px}.learning-hero h2{max-width:70%;font-size:31px}.learning-hero p{max-width:70%}.hero-orbit{width:125px;height:160px;right:40px}.daily-task-list .today-task{grid-template-columns:28px 1fr auto}.hero-stats{font-size:11px}.set-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.continue-grid,.learning-method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.auth-art{padding:35px 8%}.auth-side{padding:45px 10%}.auth-art .hero{margin-top:48px}.note-top{right:-10px}}
@media(max-width:900px){:root{--top:72px;--side:252px}.main{margin-left:0}.mobile-only{display:grid}.sidebar{transform:translateX(-100%);transition:transform .2s}.sidebar.open{transform:translateX(0)}.side-head{height:90px}.sidebar .side-close{width:34px;height:34px}.topbar{padding:0 23px}.view{padding:25px 23px 60px}.scrim.show{display:block;background:rgba(20,19,35,.4)}.sidebar.open{z-index:50}.scrim{z-index:40}.today-layout{grid-template-columns:minmax(0,1.4fr) minmax(280px,1fr)}.learning-hero h2{font-size:28px;max-width:73%}.hero-orbit{width:95px;height:132px;right:18px}.hero-stats{gap:13px}.continue-grid,.learning-method-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.auth-screen{grid-template-columns:1fr 1fr}.auth-art .hero h1{font-size:32px}.auth-art .hero p{font-size:13px}.auth-illustration{height:250px}.note-top{right:-20px;font-size:10px;padding:12px}.illustration-book{left:20%;width:145px;height:200px}}
@media(max-width:760px){.topbar{padding:0 18px}.top-actions #global-search-btn{width:37px;padding:8px;font-size:0}.top-actions #global-search-btn:first-letter{font-size:21px}.top-actions{gap:8px}.user-meta{display:none}.top-left h2{font-size:15px}.view{padding:24px 18px 50px}.dashboard-greeting h1{font-size:25px}.dashboard-greeting p{font-size:12px}.dashboard-greeting{margin-bottom:22px;align-items:flex-start}.dashboard-greeting .streak-pill{font-size:10px;padding:7px 10px}.dashboard-metrics{gap:9px}.stat-card{padding:15px 12px;min-height:107px;box-shadow:none}.stat-card small{font-size:10px}.stat-card strong{font-size:25px}.stat-card .stat-icon{width:28px;height:28px;font-size:13px}.stat-card em{font-size:10px}.today-layout{grid-template-columns:1fr;gap:18px}.learning-hero.hero-panel{min-height:300px;padding:26px}.learning-hero h2{font-size:30px;max-width:72%}.learning-hero p{max-width:70%;font-size:12px}.hero-orbit{width:110px;height:150px;right:29px;top:60px}.learning-hero .daily-hero-cta{margin-top:23px}.hero-stats{gap:17px}.continue-grid,.learning-method-grid{grid-template-columns:1fr}.continue-grid .set-card{min-height:155px}.learning-method-grid .set-card{min-height:135px;padding:19px}.page-head{align-items:flex-start}.page-head h1{font-size:25px}.page-head p{font-size:12px}.page-actions .btn{font-size:12px;padding:10px 12px}.panel,.side-panel{padding:20px}.set-header{grid-template-columns:1fr}.set-actions{justify-content:flex-start}.set-header h1{font-size:27px}.flashbook-main h2{font-size:20px}.flashbook-card{padding:20px}.study-top{flex-wrap:wrap}.flash-face h2{font-size:34px}.flash-face .definition{font-size:23px}.flash-face .example{font-size:14px}.flash-face{padding:28px 49px}.flashcard,.flash-inner,.flash-face{min-height:440px}.review-card-arrow{width:33px;height:44px;font-size:20px;border-radius:10px}.review-card-arrow.prev{left:6px}.review-card-arrow.next{right:6px}.rate{font-size:12px;padding:12px 5px}.rate small{font-size:10px}.review-key-banner{font-size:10px;gap:10px}.review-key-banner b{font-size:11px}.recall-input-wrap{flex-wrap:wrap}.auth-screen{grid-template-columns:1fr}.auth-art{display:none}.auth-side{padding:42px 24px;min-height:100vh}.mobile-brand{display:flex;margin:0 0 48px;gap:11px;align-items:center}.mobile-brand b{font-size:22px}.auth-box h2{font-size:27px}.auth-tabs button{min-height:42px}.search{min-width:160px}.study-guidance{font-size:12px}.question-card{padding:22px}.question-card h2{font-size:23px}}
@media(max-width:440px){.view{padding:23px 14px 45px}.topbar{padding:0 14px}.top-left{gap:9px}.dashboard-greeting{gap:10px}.dashboard-greeting h1{font-size:23px}.dashboard-greeting .eyebrow{font-size:8px!important}.streak-pill{padding:6px 8px}.dashboard-metrics .stat-card{padding:13px 10px}.stat-card .stat-top{gap:5px}.stat-card .stat-icon{width:24px;height:24px}.learning-hero.hero-panel{padding:25px 22px}.learning-hero h2{font-size:27px;max-width:75%}.hero-orbit{width:78px;height:112px;right:18px;top:70px}.hero-orbit>span{font-size:31px}.hero-orbit>small{font-size:5px;letter-spacing:1px;top:20px}.hero-orbit>i{width:28px;height:28px;font-size:13px}.learning-hero p{max-width:78%;font-size:12px}.hero-stats{gap:12px;font-size:10px}.set-grid{grid-template-columns:1fr}.page-head{flex-wrap:wrap}.flash-face h2{font-size:29px}.flash-face .definition{font-size:21px}.flash-face .example{font-size:13px}.flash-meta-grid{grid-template-columns:1fr}.flashcard,.flash-inner,.flash-face{min-height:460px}.active-recall-bar{gap:6px}.active-recall-chip{padding:8px 11px;font-size:11px}.rating-row{gap:6px}.rate{font-size:11px}.rate small{font-size:9px}.flashbook-cover{width:58px;min-height:88px}.flashbook-main .page-actions{flex-direction:column}.flashbook-main .page-actions .btn{width:100%}.today-task{grid-template-columns:1fr auto}.modal-body{padding:20px}.modal-head{padding:17px 20px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.btn:hover,.set-card:hover{transform:none}}
.daily-task-list .today-task{grid-template-columns:25px minmax(0,1fr) 46px 13px}.daily-task-list .today-task-progress{grid-column:auto;grid-row:auto}
.streak-pill{text-decoration:none}
.study-guidance{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:0;padding:14px 18px}.study-guidance h2{margin:3px 0}.study-guidance p{font-size:12px}.study-guidance .btn{flex-shrink:0}
.review-shell-with-nav{gap:12px}.review-shell-with-nav .study-top{margin-bottom:0}.review-shell-with-nav .active-recall-bar{margin-bottom:2px}.review-shell-with-nav .review-progress-track{margin-bottom:0}
.recall-input-wrap{display:block;width:100%;max-width:600px;margin:8px auto 0}.recall-input-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.recall-feedback{min-height:18px}.recall-input-row input{width:100%}
@media(max-width:760px){.study-guidance{align-items:flex-start;padding:13px 15px}.study-guidance .eyebrow{font-size:8px!important;letter-spacing:.7px}.study-guidance .btn{font-size:11px;padding:8px 10px;min-height:34px}.study-guidance p{font-size:11px}.recall-input-row{flex-wrap:wrap}.recall-input-row input{min-width:170px}.focus-session{gap:9px;flex-wrap:wrap}.focus-session>span{font-size:12px}.focus-session small{font-size:10px;flex-basis:100%;order:3}}

/* Stored IPA stays below its term. Long compound notations wrap on phones. */
.yl-ipa{display:flex;align-items:baseline;gap:8px;margin:6px 0 12px;color:var(--muted);font-size:15px;line-height:1.5;text-align:left;max-width:100%}
.yl-ipa-label{flex-shrink:0;font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--primary)}
.yl-ipa-value{min-width:0;overflow-wrap:anywhere;font-family:Arial,"Segoe UI",sans-serif;font-weight:400}
.flash-face .yl-ipa{justify-content:center;text-align:center;flex-wrap:wrap}
.flash-face h2+.yl-ipa{margin-top:0}
.term-cell .yl-ipa,.lesson-word-main .yl-ipa{font-size:13px;margin-bottom:5px}
.pl-feedback .yl-ipa{margin-top:0}
.fill-target{font-size:22px;margin:0}
@media(max-width:600px){.yl-ipa{font-size:14px;gap:6px}.flash-face .yl-ipa{margin-bottom:10px}}

/* Book titles get a full row; management buttons wrap below them. */
.set-header{grid-template-columns:minmax(0,1fr);gap:16px}
.set-header>div:first-child{min-width:0}
.set-header h1{overflow-wrap:anywhere}
.set-actions{justify-content:flex-start;min-width:0}
/* Read-only library detail view; study prompts keep their existing reveal rules. */
.card-detail-trigger{appearance:none;border:0;background:transparent;color:var(--primary);padding:3px 0;font:inherit;font-weight:800;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere;max-width:100%}
.card-detail-trigger:hover{color:var(--text)}
.card-detail-trigger:focus-visible,.card-detail-modal button:focus-visible{outline:3px solid var(--primary);outline-offset:4px}
.card-detail-modal{width:min(720px,100%);max-height:calc(100dvh - 36px);overscroll-behavior:contain}
.card-detail-modal .modal-head{gap:12px}
.card-detail-modal .modal-head h3{min-width:0;overflow-wrap:anywhere}
.card-detail-modal .modal-head [data-close]{flex-shrink:0}
.card-detail-modal .modal-body{padding:22px}
.card-detail{min-width:0;line-height:1.6}
.card-detail-hero h2{font-size:clamp(25px,5vw,38px);line-height:1.25;letter-spacing:-.02em;margin:0;overflow-wrap:anywhere;white-space:pre-wrap}
.card-detail-hero .yl-ipa{margin-top:8px}
.card-detail-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:14px 0;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.card-detail-meaning{font-size:clamp(18px,3vw,23px);font-weight:650;line-height:1.45;margin:0 0 17px;white-space:pre-wrap;overflow-wrap:anywhere}
.card-detail-section{min-width:0;margin:22px 0 0;padding:19px;border:1px solid var(--line);border-radius:16px;background:var(--panel2)}
.card-detail-section h4{margin:0 0 9px;font-size:12px;font-weight:800;color:var(--primary)}
.card-detail-text,.card-detail-example,.card-detail-translation{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:14px}
.card-detail-example{font-weight:650;font-size:16px}
.card-detail-translation{margin:7px 0 0;color:var(--muted)}
.card-detail-section .btn{margin-top:13px}
.card-detail-tip{color:var(--muted);font-size:12px;margin:20px 0 0;overflow-wrap:anywhere}
.card-detail-modal .modal-foot{flex-wrap:wrap}
@media(max-width:440px){.card-detail-modal{max-height:calc(100dvh - 16px)}.card-detail-modal .modal-body{padding:16px}.card-detail-section{padding:15px}.card-detail-modal .modal-foot{padding:13px 16px}.card-detail-modal .modal-foot .btn{flex:1;min-width:0}}