:root{--bg:#f7f8ff;--surface:#fff;--surface-soft:#f8faff;--text:#1f2a44;--muted:#5f6b84;--primary:#2f66f6;--primary-hover:#244fd1;--secondary:#e7efff;--secondary-text:#23324f;--border:#dbe6ff;--accent-a:#2f66f6;--accent-b:#07b8a5;--accent-c:#ff8f42;--accent-d:#8b5cf6;--success-bg:#dcfce7;--success-text:#166534;--error-bg:#fee2e2;--error-text:#991b1b;--topnav-chip-height:32px}*{box-sizing:border-box}html,body{width:100%;max-width:100%;overflow-x:hidden}body{background:radial-gradient(circle at 12% 2%, #2f66f629 0%, #2f66f600 36%), radial-gradient(circle at 88% 8%, #07b8a524 0%, #07b8a500 34%), radial-gradient(circle at 74% 90%, #ff8f421f 0%, #ff8f4200 32%), var(--bg);color:var(--text);margin:0;font-family:Segoe UI,Tahoma,Arial,sans-serif;line-height:1.5}.auth-page{place-items:center;min-height:100vh;margin:0;padding:16px;display:grid}.auth-shell{border:1px solid var(--border);background:#fff;border-radius:18px;grid-template-columns:1fr 1fr;width:min(100%,980px);display:grid;overflow:hidden;box-shadow:0 18px 44px #115e5933}.auth-hero{color:#fff;background:radial-gradient(circle at 8% 12%,#ffffff40 0%,#fff0 42%),radial-gradient(circle at 92% 80%,#fff3 0%,#fff0 38%),linear-gradient(145deg,#0f766e 0%,#14b8a6 42%,#fb923c 100%);padding:28px}.auth-kicker{letter-spacing:.08em;text-transform:uppercase;opacity:.98;color:#fff7edf0;margin:0;font-size:.76rem;font-weight:700}.auth-hero h1{margin:10px 0;font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.2}.auth-hero>p{color:#ffffffeb;margin:0}.auth-feature-list{color:#fffffff2;gap:6px;margin:16px 0 0;padding-left:18px;display:grid}.auth-panel{background:linear-gradient(#fff 0%,#fffbf5 100%);align-content:center;gap:12px;padding:24px;display:grid}.auth-panel-head h2{color:#1f3a4d;margin:0;font-size:1.3rem}.auth-panel-head p{color:var(--muted);margin:6px 0 0}.auth-form-grid{gap:12px;display:grid}.auth-field input[type=email],.auth-field input[type=password]{background:#fff;border:1px solid #c8ece6;border-radius:10px;width:100%;padding:10px 12px}.auth-field input[type=email]:focus,.auth-field input[type=password]:focus{border-color:#34d399;outline:2px solid #a7f3d0}.auth-remember-row{color:#425071;align-items:center;gap:8px;font-size:.9rem;display:inline-flex}.auth-submit{background:linear-gradient(135deg,#0f766e 0%,#14b8a6 58%,#fb923c 100%);width:100%;min-height:42px;font-size:.9rem}.auth-submit:hover{background:linear-gradient(135deg,#0d5f59 0%,#0ea593 58%,#f97316 100%)}.page-shell{max-width:980px;margin:0 auto;padding:18px 14px 42px}.topbar{z-index:40;border:1px solid var(--border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:linear-gradient(135deg,#fffffff2 0%,#f5fafff2 100%);border-radius:12px;margin-bottom:14px;padding:12px 14px;position:sticky;top:8px;box-shadow:0 10px 22px #2f66f624}.brand{color:var(--text);font-size:1.2rem;font-weight:700;text-decoration:none}.subtitle{color:var(--muted);margin:4px 0 0;font-size:.9rem}.topnav{gap:8px;margin-top:10px;display:grid}.topnav-main{flex-wrap:wrap;gap:8px;padding:0;display:flex}.topnav-account{justify-content:flex-end;align-items:center;gap:8px;display:flex}.nav-btn{width:var(--topnav-chip-height);min-width:var(--topnav-chip-height);color:#374151;box-shadow:none;min-height:var(--topnav-chip-height);background:#fff;border:1px solid #d9e0ea;border-radius:12px;justify-content:center;align-items:center;gap:0;padding:0;text-decoration:none;display:inline-flex}.nav-btn.is-active{background:linear-gradient(135deg, var(--accent-a) 0%, var(--accent-d) 100%);color:#fff;border-color:#4e5de8;box-shadow:0 6px 14px #4f62eb59}.nav-btn-icon{width:13px;height:13px;display:block}.nav-btn-label{display:none}.topnav .btn-secondary:hover{color:#1f2937;background:#f1f5f9;border-color:#cbd5e1;box-shadow:0 2px 8px #47556933}.topnav .btn-secondary.is-active:hover{color:#fff;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);border-color:#1d4ed8}.user-badge{min-height:var(--topnav-chip-height);color:#334155;white-space:nowrap;background:#fff;border:1px solid #d9e0ea;border-radius:10px;align-items:center;padding:7px 10px;font-size:.8rem;display:inline-flex}.user-role-pill{min-height:var(--topnav-chip-height);color:#4b3bb9;text-transform:uppercase;letter-spacing:.06em;background:linear-gradient(135deg,#8b5cf61f 0%,#2f66f61f 100%);border:1px solid #6d71ea59;border-radius:10px;justify-content:center;align-items:center;padding:7px 10px;font-size:.72rem;font-weight:700;display:inline-flex}.nav-logout-btn{width:var(--topnav-chip-height);min-width:var(--topnav-chip-height);min-height:var(--topnav-chip-height);color:#b42318;background:#fff;border:1px solid #f5c2c7;border-radius:999px;padding:0}.nav-logout-form{align-items:center;display:flex}.lesson-create-form{border:1px solid var(--border);background:var(--surface-soft);border-radius:10px;margin-bottom:12px;padding:10px}.lesson-create-row{grid-template-columns:1fr auto;align-items:end;gap:8px;display:grid}.lesson-create-submit-wrap{align-items:end;display:flex}.lesson-create-submit{min-height:38px}.lesson-sentence-create-form textarea{min-height:78px}.lesson-inline-create-form{margin-bottom:10px}.lesson-vocab-form-grid{grid-template-columns:1fr 1fr 1.4fr auto;gap:8px;margin-bottom:12px;display:grid}.topnav .nav-logout-btn:hover{color:#9f1239;background:#fff1f2;border-color:#fda4af;box-shadow:0 2px 8px #be185d33}.content{gap:14px;display:grid}.content>*{min-width:0}.lesson-tabs{-webkit-overflow-scrolling:touch;background:linear-gradient(135deg,#2f66f61a 0%,#07b8a51a 50%,#ff8f421a 100%);border:1px solid #5279e23d;border-radius:14px;gap:7px;padding:6px;display:flex;overflow-x:auto;box-shadow:inset 0 1px #ffffffb3}.lesson-tab{color:#334155;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #d2dbe8;border-radius:999px;min-height:36px;padding:8px 12px;font-size:.8rem;font-weight:700;box-shadow:0 1px 3px #0f172a14}.lesson-tab.is-active{background:linear-gradient(135deg, var(--accent-a) 0%, var(--accent-b) 100%);color:#fff;border-color:#2f66f6;box-shadow:0 6px 14px #2f66f659}.lesson-tab:focus-visible{outline-offset:1px;outline:2px solid #93c5fd}.collapsible-section.tab-panel{display:none}.collapsible-section.tab-panel.is-active{display:grid}.tabs-group>.tab-panel{display:none}.tabs-group>.tab-panel.is-active{display:block}.tabs-group>.tab-panel.tab-panel-grid.is-active{display:grid}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:0 6px 16px #24469b1a}.hero-card h1,.progress-card h1,.card h2{margin:0 0 8px;font-size:1.15rem}.card p{margin:6px 0}.grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;display:grid}.sub-card{border:1px solid var(--border);background:linear-gradient(180deg, #fff 0%, var(--surface-soft) 100%);border-radius:10px;padding:12px}.word-slider{gap:10px;display:grid}.word-slider-track{position:relative}.word-slide{display:none}.word-slide.active{display:block}.word-slider-controls{border-top:1px dashed var(--border);justify-content:space-between;align-items:center;gap:10px;padding-top:10px;display:flex}.word-slider-status{color:var(--muted);font-size:.88rem;font-weight:600}.stack{gap:8px;display:grid}.bubble{border:1px solid var(--border);background:linear-gradient(180deg, #fff 0%, var(--surface-soft) 100%);border-radius:10px;padding:10px}.bubble-with-voice{justify-content:space-between;align-items:center;gap:10px;display:flex}.collapsible-section{gap:10px;display:grid}.section-header-row{justify-content:space-between;align-items:center;gap:10px;display:flex}.section-header-row h2{margin:0}.icon-toggle{border:1px solid var(--border);width:30px;height:30px;color:var(--muted);cursor:pointer;background:#fff;border-radius:999px;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.icon-toggle:hover{background:#f9fafb}.icon-chevron{border-bottom:2px solid;border-right:2px solid;width:8px;height:8px;margin-top:-2px;transition:transform .2s;transform:rotate(45deg)}.icon-toggle.is-collapsed .icon-chevron{margin-top:0;transform:rotate(-45deg)}.section-body.is-collapsed{display:none}.button-row{flex-wrap:wrap;gap:10px;display:flex}.lesson-list{gap:10px;margin-top:12px;display:grid}.lesson-list-toolbar{justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px;display:flex}.lesson-list-toolbar p{margin:0}.lesson-sort-actions{align-items:center;gap:8px;display:inline-flex}.lesson-row{border:1px solid var(--border);background:var(--surface-soft);border-radius:10px;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;display:flex}.lesson-title{color:var(--text);font-size:.9rem;font-weight:600}.open-link-btn{text-decoration:none}.lesson-actions{align-items:center;gap:8px;display:inline-flex}.lesson-actions form{margin:0}.lesson-delete-btn{color:#fff;background:#dc2626}.lesson-delete-btn:hover{background:#b91c1c}.confirm-modal{z-index:90;background:#0f172a8c;justify-content:center;align-items:center;padding:14px;display:none;position:fixed;inset:0}.confirm-modal.is-open{display:flex}.confirm-modal-card{border:1px solid var(--border);background:#fff;border-radius:12px;width:min(100%,380px);padding:14px;box-shadow:0 16px 36px #0f172a40}.confirm-modal-card h3{margin:0;font-size:1rem}.confirm-modal-card p{color:#475569;margin:8px 0 0}.confirm-modal-actions{justify-content:flex-end;gap:8px;margin-top:12px;display:flex}.btn{background:linear-gradient(135deg, var(--primary) 0%, #4f8cff 100%);color:#fff;letter-spacing:.2px;cursor:pointer;border:none;border-radius:8px;padding:7px 10px;font-size:.82rem;font-weight:600;line-height:1.1;text-decoration:none;transition:background-color .15s,box-shadow .15s,transform .12s;display:inline-block;box-shadow:0 6px 12px #2f66f638}.btn:hover{background:linear-gradient(135deg, var(--primary-hover) 0%, #3a73f2 100%);box-shadow:0 8px 16px #2f66f647}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline-offset:1px;outline:2px solid #93c5fd}.btn-secondary{background:linear-gradient(135deg, var(--secondary) 0%, #f2f6ff 100%);color:var(--secondary-text);box-shadow:0 4px 10px #2f66f61f}.btn-secondary:hover{background:linear-gradient(135deg,#dce8ff 0%,#eaf8ff 100%);box-shadow:0 6px 12px #2f66f62e}.btn-small{border-radius:7px;padding:5px 8px;font-size:.76rem}.icon-btn{justify-content:center;align-items:center;gap:0;min-width:32px;min-height:32px;padding:5px;display:inline-flex}.btn-svg{width:15px;height:15px;display:block}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.alert{border:1px solid #0000;border-radius:10px;margin-bottom:10px;padding:10px 12px}.alert ul{margin:6px 0 0;padding-left:18px}.alert-success{background:var(--success-bg);color:var(--success-text);border-color:#bbf7d0}.alert-error{background:var(--error-bg);color:var(--error-text);border-color:#fecaca}.progress-text{color:var(--primary);margin:0;font-size:.88rem;font-weight:600}.inline-form{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.form-reveal{gap:8px;margin-bottom:10px;display:grid}.form-reveal-toggle{width:fit-content}.form-reveal-body{border:1px solid var(--border);background:var(--surface-soft);border-radius:10px;padding:10px}textarea,input,select,button{max-width:100%;font:inherit}input[type=text],input[type=email],input[type=password],select{border:1px solid var(--border);background:#fff;border-radius:8px;width:min(100%,360px);padding:8px 10px}.user-form-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}textarea{border:1px solid var(--border);resize:vertical;border-radius:8px;width:100%;padding:9px}input[type=text]:focus,textarea:focus,select:focus{outline-offset:1px;outline:2px solid #bfdbfe}.label{margin-bottom:6px;font-weight:600;display:block}.hint{color:var(--muted);font-size:.88rem}.chips{flex-wrap:wrap;gap:8px;margin-bottom:12px;display:flex}.chip{border:1px solid var(--border);background:#f9fafb;border-radius:999px;padding:4px 8px;font-size:.85rem}.answers{gap:8px;margin:10px 0 12px;display:grid}.answer-option{border:1px solid var(--border);background:#fafafa;border-radius:8px;align-items:center;gap:10px;padding:8px;display:flex}.answer-option:has(input:checked){background:#eff6ff;border-color:#93c5fd}.feedback{margin-top:10px;font-weight:600}.feedback-ok{color:var(--success-text)}.feedback-bad{color:var(--error-text)}.pdf-frame{border:1px solid var(--border);border-radius:10px;width:100%;height:min(56vw,480px);min-height:280px;margin-top:10px}.pdf-link-row{margin-top:10px}.entry-form-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px;display:grid}.entry-table-wrap{-webkit-overflow-scrolling:touch;overflow-x:auto}.entry-filter-bar{border:1px solid var(--border);background:var(--surface-soft);border-radius:10px;margin-bottom:10px;padding:10px}.entry-filter-grid{grid-template-columns:1.5fr auto auto;align-items:center;gap:8px;display:grid}.entry-filter-grid input[type=search]{border:1px solid var(--border);background:#fff;border-radius:8px;width:100%;padding:8px 10px}.entry-filter-result{margin:8px 0 0}.entry-note-actions{align-items:center;gap:8px;margin-top:6px;display:flex}.entry-note-status{min-height:1em;font-size:.76rem;font-weight:700}.entry-note-status.is-success{color:#166534}.entry-note-status.is-error{color:#991b1b}.entry-book-shell{margin-bottom:10px}.entry-book .word-slider-controls{flex-wrap:nowrap;align-items:center;gap:8px;display:flex}.entry-book .word-slider-status{text-align:center;flex:auto}.entry-book .word-slider-controls .btn{flex:none;width:auto}.entry-book-kicker{letter-spacing:.08em;text-transform:uppercase;color:#1d4ed8;margin:0 0 8px;font-size:.74rem;font-weight:700}.entry-book{gap:12px}.entry-book-page{background:linear-gradient(90deg,#2563eb14 0 4px,#0000 4px),linear-gradient(#fff 0%,#f8fbff 100%);border:1px solid #dbe6f5;border-radius:14px;padding:14px 14px 14px 16px;box-shadow:0 8px 24px #2563eb1f}.entry-book-page-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.entry-book-page-label{letter-spacing:.08em;text-transform:uppercase;color:#64748b;margin:0;font-size:.72rem;font-weight:700}.entry-book-word{color:#0f172a;margin:6px 0 8px;font-size:clamp(1.3rem,3.6vw,1.8rem);line-height:1.2}.entry-book-line{color:#1e293b;margin:8px 0;font-size:.95rem}.entry-manage-tools{border:1px solid var(--border);background:#fcfdff;border-radius:10px;overflow:hidden}.entry-manage-tools summary{cursor:pointer;color:#334155;border-bottom:1px solid #0000;padding:10px 12px;font-size:.88rem;font-weight:600;list-style:none}.entry-manage-tools[open] summary{border-bottom-color:var(--border)}.entry-manage-tools summary::-webkit-details-marker{display:none}.entry-manage-tools .entry-filter-bar{margin:10px}.entry-manage-tools .entry-table{width:calc(100% - 20px);margin:0 10px 10px}.entry-table{border-collapse:collapse;width:100%;min-width:860px}.entry-table th,.entry-table td{border:1px solid var(--border);text-align:left;vertical-align:top;padding:9px}.entry-table tr.is-filter-hidden{display:none!important}.entry-table th{background:#f3f4f6}.entry-table td .speak-btn{margin-left:8px}.users-table{min-width:980px}.users-actions-row{flex-wrap:wrap;gap:8px;display:flex}.users-action-form{gap:6px}.users-action-form select{width:110px}.status-pill{border:1px solid #0000;border-radius:999px;align-items:center;padding:4px 9px;font-size:.78rem;font-weight:700;display:inline-flex}.status-pill-active{color:#166534;background:#dcfce7;border-color:#bbf7d0}.status-pill-inactive{color:#991b1b;background:#fee2e2;border-color:#fecaca}.users-danger-btn{background:#b91c1c}.users-danger-btn:hover{background:#991b1b}@media (width<=1024px){.page-shell{padding-bottom:30px}.entry-form-grid,.user-form-grid,.lesson-vocab-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lesson-create-submit-wrap{grid-column:span 2}}@media (width<=820px){.topbar{top:6px}.brand{font-size:1.08rem}.subtitle{font-size:.84rem}.grid,.entry-form-grid,.user-form-grid,.lesson-vocab-form-grid,.lesson-create-row{grid-template-columns:1fr}.lesson-create-submit-wrap{grid-column:auto}.button-row .btn{text-align:center;flex:220px}.topnav-account{justify-content:space-between}.auth-shell{grid-template-columns:1fr}.auth-hero,.auth-panel{padding:18px}}@media (width<=640px){.page-shell{padding:10px 8px calc(24px + env(safe-area-inset-bottom))}.topbar{border-radius:10px;margin-bottom:10px;padding:10px}.content{gap:10px}.card{border-radius:10px;padding:12px}.lesson-tab{min-height:34px;padding:8px 10px;font-size:.74rem}.btn{text-align:center;width:100%}.inline-form .btn,.inline-form input[type=text],.form-reveal-toggle{width:100%}.topnav-main{-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x mandatory;background:linear-gradient(135deg,#2f66f61f 0%,#07b8a51f 50%,#ff8f421f 100%);border:1px solid #5279e23d;border-radius:14px;grid-auto-columns:minmax(74px,1fr);grid-auto-flow:column;gap:6px;padding:6px;display:grid;overflow-x:auto}.topnav-main .nav-btn{scroll-snap-align:start;border-color:#5279e247;border-radius:12px;flex-direction:column;gap:4px;width:100%;min-width:74px;min-height:56px;padding:7px 6px;box-shadow:0 2px 6px #2f66f62e}.topnav-main .nav-btn.is-active{box-shadow:0 5px 14px #2563eb59}.topnav-main .nav-btn-icon{width:15px;height:15px}.topnav-main .nav-btn-label{letter-spacing:.01em;white-space:nowrap;font-size:.64rem;font-weight:700;line-height:1;display:block}.topnav-account{background:#fff;border:1px solid #d9e2ee;border-radius:12px;flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:6px;padding:8px;display:flex}.user-badge,.user-role-pill{justify-content:center;min-height:30px;padding:6px 8px;font-size:.73rem}.nav-logout-form{width:auto}.nav-logout-form .nav-logout-btn{width:34px;min-width:34px;min-height:34px}.bubble-with-voice{flex-direction:column;align-items:flex-start}.word-slider-controls{grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;display:grid}.word-slider-status{text-align:center;font-size:.8rem}.entry-filter-grid{grid-template-columns:1fr}.entry-book-page{padding:12px}.entry-book-line{font-size:.9rem}.entry-book .word-slider-controls{gap:6px}.entry-book .word-slider-controls .btn{min-width:68px}.entry-filter-grid .btn,.entry-filter-grid select,.entry-filter-grid input[type=search]{width:100%}.entry-note-actions{flex-wrap:wrap}.entry-table{border:none;min-width:0}.entry-table thead{display:none}.entry-table tbody{gap:10px;display:grid}.entry-table tr{border:1px solid var(--border);background:#fff;border-radius:10px;gap:8px;padding:10px;display:grid;box-shadow:0 1px 4px #0f172a0f}.entry-table td{border:none;gap:5px;padding:0;display:grid}.entry-table td:before{content:attr(data-label);color:var(--muted);font-size:.78rem;font-weight:600}.entry-table td .speak-btn{width:fit-content;margin-left:0}.lesson-row{padding:10px}.lesson-list-toolbar{flex-wrap:wrap;gap:8px}.lesson-sort-actions{gap:8px;width:100%}.lesson-sort-actions .btn{flex:1 1 0;width:auto}.lesson-title{font-size:.86rem}.lesson-actions{flex-shrink:0;width:auto}.lesson-actions .btn{width:auto}.confirm-modal-actions{grid-template-columns:1fr;display:grid}}