:root{--bg:#f6f7f9;--surface:#fff;--surface-soft:#f9fafb;--text:#1f2937;--muted:#6b7280;--primary:#2563eb;--primary-hover:#1d4ed8;--secondary:#e5e7eb;--secondary-text:#111827;--border:#e5e7eb;--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 top right, #eef4ff 0%, #eef4ff00 36%), radial-gradient(circle at top left, #f2f7ff 0%, #f2f7ff00 40%), var(--bg);color:var(--text);margin:0;font-family:Segoe UI,Tahoma,Arial,sans-serif;line-height:1.5}.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:#fffffff2;border-radius:12px;margin-bottom:14px;padding:12px 14px;position:sticky;top:8px;box-shadow:0 6px 18px #1f293714}.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{color:#fff;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);border-color:#1d4ed8;box-shadow:0 4px 14px #2563eb4d}.nav-btn-icon{width:13px;height:13px;display:block}.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:#3730a3;text-transform:uppercase;letter-spacing:.06em;background:#eef2ff;border:1px solid #c7d2fe;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}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:0 2px 8px #0f172a0d}.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:var(--surface-soft);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:var(--surface-soft);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:8px;margin-top:10px;display:grid}.lesson-row{border:1px solid var(--border);background:var(--surface-soft);border-radius:8px;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;display:flex}.lesson-title{color:var(--text);font-size:.9rem;font-weight:600}.open-link-btn{text-decoration:none}.btn{background:var(--primary);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 1px 2px #00000014}.btn:hover{background:var(--primary-hover);box-shadow:0 2px 6px #2563eb40}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline-offset:1px;outline:2px solid #93c5fd}.btn-secondary{background:var(--secondary);color:var(--secondary-text);box-shadow:0 1px 2px #0000000f}.btn-secondary:hover{background:#d1d5db;box-shadow:0 2px 6px #4b556333}.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}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-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 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}}@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}.btn{text-align:center;width:100%}.inline-form .btn,.inline-form input[type=text]{width:100%}.topnav-main{-webkit-overflow-scrolling:touch;scrollbar-width:thin;scroll-snap-type:x mandatory;flex-wrap:nowrap;gap:8px;padding-bottom:2px;display:flex;overflow-x:auto}.topnav-main .nav-btn{width:var(--topnav-chip-height);min-width:var(--topnav-chip-height);scroll-snap-align:start}.topnav-account{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.user-badge,.user-role-pill{justify-content:center}.nav-logout-form{width:auto}.nav-logout-form .nav-logout-btn{width:var(--topnav-chip-height)}.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-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:8px}.lesson-title{font-size:.86rem}}