upd: main

Updates , this css will be remove din future versions

assets/css/main.css

@@ -6,7 +6,8 @@
 	html5up.net | @ajlkn
 	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 */
-html,
+
+/*html,
 body,
 div,
 span,
@@ -420,8 +421,111 @@ hr.major {
     text-align: right;
 }
 
+/* =========================================
+   Base & Mobile First (Phones)
+   ========================================= */
+body {
+  margin: 0;
+  height: 100vh; 
+  overflow: hidden; 
+}
+
+.inner {
+  display: flex;
+  flex-direction: column; 
+  height: 100vh;
+  width: 100%;
+  padding-left: 0; /* from your original CSS */
+}
+
+.ref-tab {
+  display: none; 
+}
+
+.ref {
+  flex: 1; 
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  overflow-y: auto;
+}
+
+.notes {
+  flex: 1; 
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+}
+
+#note-header-left, 
+#note-header-right {
+  /* display: none !important;  */
+}
+
+/* =========================================
+   Mobile "Typing Mode" (Keyboard Active)
+   ========================================= */
+body.typing-mode .ref {
+  display: none; 
+}
+body.typing-mode .notes {
+  flex: 1 1 100%; 
+}
+
+/* =========================================
+   Tablet & Desktop (Pixel Tablet Layout)
+   ========================================= */
+@media (min-width: 768px) {
+  .inner {
+    flex-direction: row; 
+    max-width: 1060px; /* Kept your original width preference */
+    margin: 0 auto;
+  }
+
+  .ref-tab {
+    display: block;
+    flex: 0 0 60px; 
+    padding-top: 60px !important;
+  }
+
+  .ref {
+    flex: 0 0 36%; 
+    padding: 20px;
+  }
+
+  .notes {
+    flex: 1; 
+    padding: 20px;
+  }
+
+  #note-header-left {
+    display: inline-flex;
+    flex-direction: row;
+    width: 25%;
+  }
+
+  #note-header-right {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    width: 74%;
+  }
+}
+
+/* =========================================
+   App Specific Styles (DO NOT DELETE BELOW THIS LINE)
+   ========================================= */
+textarea#notes {
+  width: 100%;
+  height: 100%;
+  font-size: 14pt;
+  flex-grow: 1; 
+  resize: none; 
+}
+
+/* ... the rest of your original style.css continues here (#notePreview, #save-check, modals, etc.) ... */
+
 /* Row */
-.row {
+/* .row {
     display: flex;
     flex-wrap: wrap;
     box-sizing: border-box;
@@ -1876,7 +1980,7 @@ hr.major {
         padding-top: 3em;
     }
 }
-
+ */
 /* Section/Article */
 section.special,
 article.special {