.mobile-mode-note { display:flex; align-items:baseline; gap:14px; margin:0 0 24px; padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); font-size:13px; line-height:1.7; }
body.has-dialog { overflow:hidden; }
.mobile-mode-note > span { color:var(--accent); font-weight:700; white-space:nowrap; }
.mobile-mode-note p { color:var(--muted); }
#pwa-dialog { max-width:750px; width:calc(100% - 32px); max-height:calc(100dvh - 32px); }
#pwa-dialog[open] { display:flex; flex-direction:column; overflow:hidden; }
#pwa-dialog .dialog-heading { flex-shrink:0; }
.topbar { position:sticky; top:0; z-index:15; }
.pwa-panel { padding:24px 30px 30px; min-height:0; overflow:auto; overscroll-behavior:contain; }
.pwa-panel section { margin-bottom:24px; }
.pwa-panel h3 { font-size:18px; margin-bottom:10px; }
.pwa-panel p, .pwa-panel li { font-size:15px; line-height:1.8; }
.pwa-panel p + p { margin-top:10px; }
.pwa-readiness { display:flex; gap:14px; padding:20px; border:1px solid var(--line); background:var(--canvas); border-radius:var(--radius); }
.pwa-readiness p { color:var(--muted); }
.pwa-dot { flex:0 0 10px; width:10px; height:10px; margin-top:9px; border-radius:50%; background:var(--warning); }
.pwa-readiness.ready .pwa-dot { background:var(--accent); }
.pwa-platforms { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:24px 0 0; border-top:1px solid var(--line); }
.pwa-platforms ol { padding-left:20px; margin:0; }
.pwa-platforms li { padding:5px 0 5px 2px; }
.pwa-install { margin:20px 0 24px; }
.pwa-install button { margin-bottom:12px; }
.pwa-records { border-top:1px solid var(--line); padding-top:24px; }
.pwa-records > p { color:var(--muted); }
.pwa-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin:18px 0; }
.pwa-limits { padding:16px 0; border-top:1px solid var(--line); }
.pwa-limits summary { cursor:pointer; font-weight:600; min-height:44px; }
.pwa-limits p { margin:10px 0; }
#pwa-recheck { margin-top:16px; }
.mobile-reflection { margin:28px 0; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); }
.mobile-reflection label { display:block; font-weight:650; margin-bottom:12px; }
.mobile-reflection textarea { width:100%; margin-bottom:16px; }
.mobile-reflection .note-status { margin-top:14px; color:var(--muted); font-size:14px; }
.mobile-reflection .note-status.error { color:var(--error); }
.draft-status { color:var(--muted); font-size:13px; margin-top:8px; }
.offline-example-note { border-left:3px solid var(--accent); padding:10px 14px; background:var(--accent-soft); font-size:14px; line-height:1.8; margin:20px 0; }
.quantity-label select { display:block; font:inherit; color:var(--ink); background:var(--paper); padding:12px; border:1px solid var(--line); border-radius:var(--radius-sm); }
.lesson-footer { padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); }
main { padding-bottom:calc(140px + env(safe-area-inset-bottom, 0px)); }
@media(max-width:700px) {
  .mobile-mode-note { display:block; margin-bottom:20px; }
  .mobile-mode-note p { margin-top:4px; }
  .pwa-panel { padding:20px; }
  .pwa-platforms { grid-template-columns:1fr; gap:0; }
  .pwa-panel h3 { font-size:17px; }
  .pwa-panel p, .pwa-panel li { font-size:14px; }
  #pwa-dialog { width:calc(100% - 20px); max-height:calc(100dvh - 20px); }
  #pwa-dialog .dialog-heading { padding:18px 20px; }
  #pwa-dialog h2 { font-size:20px; }
  .mobile-reflection { padding:18px; }
  textarea, .quantity-label select { font-size:16px; }
  .topbar { gap:8px; padding-inline:16px; }
  .topbar-actions { gap:8px; }
  body:not(.overview-mode) .topbar .breadcrumb { max-width:110px; }
}