adding mobile styles CSS

static/app.css

@@ -498,8 +498,50 @@ body {
 .hidden { display: none !important; }
 
 @media (max-width: 720px) {
-  .layout { grid-template-columns: 1fr; }
-  .topbar { flex-wrap: wrap; }
-  .search { max-width: none; order: 3; flex-basis: 100%; }
-  .theme-popover { right: -60px; }
+  .layout { grid-template-columns: 1fr; gap: 12px; margin: 12px auto; padding: 0 12px; }
+
+  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
+  .brand-logo { height: 44px; }
+  .brand { font-size: 16px; }
+  .search { max-width: none; order: 3; flex-basis: 100%; font-size: 16px; }
+  .topbar-right { margin-left: auto; gap: 6px; flex-wrap: wrap; }
+  .topbar-right .btn { padding: 8px 12px; }
+
+  .editor-wrap, .help-card, .tools-row { padding: 0 12px; }
+  .editor-wrap { margin: 12px auto; }
+
+  .editor-topbar { flex-wrap: wrap; gap: 6px; }
+  .editor-topbar .spacer { display: none; }
+  .editor-topbar .btn, .editor-topbar .user-select { padding: 8px 10px; }
+
+  .toolbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .toolbar .sep { flex-shrink: 0; }
+
+  .editor { padding: 12px 14px; min-height: 50vh; }
+  .editor .ProseMirror { min-height: 45vh; }
+
+  .editor-split { grid-template-columns: 1fr; }
+  .editor-split .editor { border-right: none; }
+  .editor-split .preview { min-height: auto; padding: 12px 14px; border-top: 1px solid var(--border); }
+
+  .note-item { padding: 10px 12px; }
+  .note-thumb { width: 48px; height: 48px; }
+
+  .btn, .tool-btn, .tag-chip, .theme-option { min-height: 44px; }
+  .tool-btn { min-height: 36px; }
+
+  .theme-popover {
+    position: fixed;
+    top: auto;
+    bottom: 12px;
+    left: 12px;
+    right: 12px;
+    min-width: 0;
+    z-index: 200;
+  }
+
+  .modal { width: 94%; padding: 16px; }
+
+  .help-table { font-size: 13px; }
+  .help-table th, .help-table td { padding: 6px 8px; }
 }