codeapp-js 0.2.1 → 0.3.0

package/examples/todo/dist/styles.css

@@ -1,691 +1,691 @@
-/* ============================================
-   BRUTALIST THEME - Power DevBox Notes
-   ============================================ */
-:root {
-  --bg: #f5f0eb;
-  --bg-elev: #fff;
-  --surface: #fff;
-  --text: #111;
-  --muted: #888;
-  --primary: #2962ff;
-  --accent: #4163be;
-  --danger: #ff3d00;
-  --black: #111;
-  --border: 3px solid #111;
-  --border-thin: 2px solid #111;
-  --radius: 0px;
-  --shadow: 4px 4px 0 #111;
-  --shadow-lg: 6px 6px 0 #111;
-}
-
-/* Prevent text overflow and improve mobile experience */
-*, *::before, *::after {
-  box-sizing: border-box;
-  max-width: 100%;
-}
-
-/* Improve word wrapping for long content */
-.preview, .content, .title, .note-item .title {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  hyphens: auto;
-}
-
-/* Ensure inputs don't exceed container width */
-input, textarea, select {
-  max-width: 100%;
-  font-size: 16px;
-}
-
-#btn-preview {
-  margin-right: 5px;
-}
-
-/* Specific mobile input fixes */
-@media screen and (max-width: 768px) {
-  input[type="email"], input[type="password"], input[type="text"], textarea {
-    font-size: 16px;
-    -webkit-appearance: none;
-    appearance: none;
-    border-radius: 0;
-  }
-}
-
-/* Prevent code blocks from causing horizontal scroll */
-.preview pre, .preview code {
-  overflow-x: auto;
-  max-width: 100%;
-}
-
-/* Ensure images in preview don't overflow */
-.preview img {
-  max-width: 100%;
-  height: auto;
-}
-
-html { height: 100%; }
-body {
-  margin: 0;
-  font-family: 'Space Grotesk', system-ui, sans-serif;
-  color: var(--text);
-  background: var(--bg);
-  overflow-x: hidden;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-/* App bar */
-.app-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  position: sticky;
-  top: 0;
-  background: var(--bg);
-  border-bottom: var(--border);
-  min-width: 0;
-  z-index: 1000;
-}
-.app-bar h1 {
-  margin: 0;
-  font-family: 'Space Mono', monospace;
-  font-size: 16px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  min-width: 0;
-}
-.app-bar .left {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  min-width: 0;
-  flex: 1;
-}
-.app-bar .right {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  flex-shrink: 0;
-}
-.app-bar-logo {
-  height: 20px;
-}
-#sync-status {
-  font-family: 'Space Mono', monospace;
-  font-size: 11px;
-  color: var(--muted);
-  padding: 4px 10px;
-  background: var(--bg);
-  border: var(--border-thin);
-  white-space: nowrap;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-/* Container layout */
-.container {
-  display: grid;
-  grid-template-columns: 300px 1fr;
-  gap: 16px;
-  padding: 16px;
-  max-width: 960px;
-  margin: 0 auto;
-  min-width: 0;
-  width: 100%;
-  flex: 1;
-}
-
-/* Sidebar */
-.sidebar {
-  background: var(--surface);
-  border: var(--border);
-  box-shadow: var(--shadow);
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  min-height: 70vh;
-  min-width: 0;
-}
-.search {
-  padding: 12px;
-  border-bottom: var(--border-thin);
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-.search input {
-  flex: 1;
-  padding: 10px 12px;
-  border: var(--border-thin);
-  background: var(--bg);
-  color: var(--text);
-  font-family: 'Space Grotesk', sans-serif;
-  font-size: 14px;
-  min-width: 0;
-}
-.search input:focus {
-  outline: none;
-  background: var(--accent);
-}
-.tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 8px 12px;
-}
-.tag {
-  background: var(--bg);
-  border: var(--border-thin);
-  color: var(--text);
-  padding: 4px 10px;
-  font-size: 11px;
-  font-family: 'Space Mono', monospace;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background 0.15s;
-}
-.tag:hover {
-  background: var(--accent);
-}
-
-.note-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  flex: 1;
-  overflow-y: auto;
-}
-.note-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 12px;
-  background: var(--surface);
-  border-bottom: var(--border-thin);
-  cursor: grab;
-  min-width: 0;
-  font-weight: 700;
-  transition: background 0.15s;
-}
-.note-item:hover {
-  background: var(--accent);
-}
-.note-item .note-del {
-  margin-left: auto;
-  background: transparent;
-  border: var(--border-thin);
-  color: var(--text);
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  font-size: 16px;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.15s;
-}
-.note-item .note-del:hover {
-  background: var(--danger);
-  color: #fff;
-  border-color: var(--danger);
-}
-.note-item .note-del:active {
-  transform: scale(0.9);
-}
-.note-item.dragging {
-  opacity: 0.6;
-}
-.note-item .title {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-}
-
-/* Editor */
-.editor {
-  background: var(--surface);
-  border: var(--border);
-  box-shadow: var(--shadow);
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  min-height: 70vh;
-  min-width: 0;
-}
-.toolbar {
-  display: flex;
-  gap: 0;
-  align-items: center;
-  flex-wrap: wrap;
-  border-bottom: var(--border);
-  padding: 0;
-}
-.toolbar button {
-  background: var(--surface);
-  color: var(--text);
-  border: none;
-  border-right: var(--border-thin);
-  padding: 10px 12px;
-  cursor: pointer;
-  white-space: nowrap;
-  font-family: 'Space Mono', monospace;
-  font-size: 13px;
-  font-weight: 700;
-  text-transform: uppercase;
-  transition: background 0.15s;
-}
-.toolbar button:hover {
-  background: var(--accent);
-}
-.toolbar .spacer {
-  flex: 1;
-  min-width: 8px;
-  border: none;
-}
-.title {
-  font-family: 'Space Grotesk', sans-serif;
-  font-size: 20px;
-  font-weight: 700;
-  text-transform: uppercase;
-  padding: 12px 16px;
-  border: none;
-  border-bottom: var(--border);
-  background: var(--surface);
-  color: var(--text);
-  width: 100%;
-  min-width: 0;
-}
-.title:focus {
-  outline: none;
-  background: #fffde7;
-}
-.content {
-  min-height: 280px;
-  resize: vertical;
-  padding: 16px;
-  border: none;
-  background: var(--bg);
-  color: var(--text);
-  line-height: 1.6;
-  width: 100%;
-  min-width: 0;
-  font-family: 'Space Grotesk', sans-serif;
-  font-size: 15px;
-  flex: 1;
-}
-.content:focus {
-  outline: none;
-  background: #fff;
-}
-.preview {
-  min-height: 280px;
-  padding: 16px;
-  border-top: var(--border);
-  background: #fff;
-  width: 100%;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  overflow-x: hidden;
-  flex: 1;
-  overflow-y: auto;
-}
-.status-bar {
-  position: sticky;
-  bottom: 0;
-  background: var(--black);
-  border-top: var(--border);
-  padding: 8px 16px;
-  color: #999;
-  font-family: 'Space Mono', monospace;
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex-shrink: 0;
-  z-index: 100;
-}
-
-/* Buttons */
-button {
-  font-family: 'Space Grotesk', sans-serif;
-  transition: all 0.15s;
-}
-button:hover {
-  transform: translate(2px, 2px);
-}
-button.primary {
-  background: var(--primary);
-  color: #fff;
-  border: var(--border);
-  box-shadow: var(--shadow);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  padding: 8px 16px;
-}
-button.primary:hover {
-  box-shadow: 2px 2px 0 var(--black);
-}
-button.tonal {
-  background: var(--bg);
-  border: var(--border);
-  color: var(--text);
-  box-shadow: var(--shadow);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  padding: 8px 10px 8px 10px;
-}
-button.tonal:hover {
-  background: var(--accent);
-  box-shadow: 2px 2px 0 var(--black);
-}
-button.danger {
-  background: var(--danger);
-  color: #fff;
-  border: var(--border);
-  box-shadow: var(--shadow);
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  padding: 8px 16px;
-}
-button.danger:hover {
-  box-shadow: 2px 2px 0 var(--black);
-}
-
-/* New Note button */
-#btn-new {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  padding: 0;
-  flex-shrink: 0;
-  font-size: 0;
-  background: var(--accent);
-  border: var(--border-thin);
-  color: var(--black);
-  box-shadow: 2px 2px 0 var(--black);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-#btn-new::before {
-  content: '+';
-  font-size: 22px;
-  line-height: 1;
-  font-weight: 700;
-  color: var(--black);
-}
-#btn-new:hover {
-  transform: translate(2px, 2px);
-  box-shadow: 0 0 0 var(--black);
-  background: var(--primary);
-  color: #fff;
-}
-#btn-new:hover::before {
-  color: #fff;
-}
-#btn-new:active {
-  transform: translate(2px, 2px);
-  box-shadow: 0 0 0 var(--black);
-}
-#btn-new:focus-visible {
-  outline: 3px solid var(--primary);
-  outline-offset: 2px;
-}
-
-/* Preview content */
-.preview h1, .preview h2, .preview h3 {
-  margin: 16px 0 8px;
-  font-family: 'Space Grotesk', sans-serif;
-  text-transform: uppercase;
-}
-.preview code {
-  background: var(--bg);
-  padding: 2px 6px;
-  border: var(--border-thin);
-  font-family: 'Space Mono', monospace;
-}
-.preview pre {
-  background: var(--black);
-  color: #e0e0e0;
-  padding: 16px;
-  border: var(--border);
-  overflow: auto;
-}
-.preview a {
-  color: var(--primary);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-/* Muted text utility */
-.muted { color: var(--muted); }
-
-/* Form spacer */
-.form-spacer { height: 8px; }
-
-/* Modal */
-.modal[hidden] { display: none; }
-.modal {
-  position: fixed;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  z-index: 1000;
-  padding: 16px;
-}
-.modal__backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-}
-.modal__dialog {
-  position: relative;
-  width: min(480px, 92vw);
-  background: var(--surface);
-  border: var(--border);
-  box-shadow: var(--shadow-lg);
-  padding: 24px;
-  max-width: 100%;
-  box-sizing: border-box;
-}
-.modal__dialog h2 {
-  margin: 0 0 8px 0;
-  font-family: 'Space Grotesk', sans-serif;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-.modal__dialog input {
-  width: 100%;
-  padding: 10px 12px;
-  border: var(--border-thin);
-  background: var(--bg);
-  color: var(--text);
-  font-family: 'Space Grotesk', sans-serif;
-  box-sizing: border-box;
-}
-.modal__dialog input:focus {
-  outline: none;
-  background: var(--accent);
-}
-.modal__actions {
-  margin-top: 16px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-/* Responsive: tablet */
-@media (max-width: 900px) {
-  .container {
-    grid-template-columns: 1fr;
-    padding: 12px;
-    gap: 12px;
-  }
-}
-
-/* Responsive: mobile */
-@media (max-width: 600px) {
-  .app-bar {
-    padding: 8px 12px;
-    gap: 8px;
-    z-index: 1000;
-  }
-  .app-bar h1 {
-    font-size: 13px;
-    letter-spacing: 1px;
-  }
-  .app-bar .left {
-    gap: 8px;
-  }
-  .app-bar .right {
-    gap: 6px;
-  }
-  .app-bar .right button {
-    padding: 6px 8px;
-    font-size: 12px;
-  }
-  #sync-status {
-    font-size: 10px;
-    padding: 3px 6px;
-  }
-  .container {
-    padding: 8px;
-    gap: 8px;
-    padding-bottom: 40px;
-  }
-  .sidebar {
-    padding: 0;
-    max-height: 35vh !important;
-  }
-  .editor {
-    padding: 0;
-    overflow-x: hidden;
-  }
-  .toolbar {
-    gap: 0;
-    flex-wrap: wrap;
-  }
-  .toolbar button {
-    padding: 6px 8px;
-    font-size: 11px;
-  }
-  .toolbar .spacer {
-    display: none;
-  }
-  .title {
-    font-size: 16px;
-    padding: 8px 12px;
-  }
-  .content {
-    padding: 10px;
-    font-size: 14px;
-  }
-  .preview {
-    padding: 10px;
-    font-size: 14px;
-    overflow-x: hidden;
-        
-  }
-  .modal__dialog {
-    width: min(360px, 95vw);
-    padding: 16px;
-  }
-  .sidebar { min-height: auto; }
-  .note-list { max-height: 50vh; overflow-y: auto; }
-}
-
-/* Responsive: small mobile */
-@media (max-width: 400px) {
-  .sidebar {
-    max-height: 35vh !important;
-  }
-  .app-bar {
-    flex-wrap: wrap;
-    gap: 6px;
-    z-index: 1000;
-  }
-  .app-bar .left, .app-bar .right {
-    gap: 4px;
-  }
-  .toolbar button {
-    padding: 4px 6px;
-    font-size: 10px;
-  }
-  .modal__dialog {
-    width: min(320px, 98vw);
-    padding: 12px;
-  }
-  .preview {
-   overflow-y: auto;
-  }
-}
-
-/* --- Task list checkbox custom style --- */
-.preview .task-item input.task-box {
-  position: absolute;
-  opacity: 0;
-  inset: 0;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  pointer-events: none;
-}
-.preview .task-item label {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  cursor: pointer;
-}
-.preview .task-item .checkbox-ui {
-  position: relative;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  border: 2px solid var(--black);
-  background: #fff;
-  transition: border-color 0.15s, background 0.15s;
-  display: inline-block;
-}
-.preview .task-item .checkbox-ui:hover {
-  background: var(--accent);
-}
-.preview .task-item input.task-box:focus + .checkbox-ui {
-  outline: 3px solid var(--primary);
-  outline-offset: 2px;
-}
-.preview .task-item input.task-box:checked + .checkbox-ui::after {
-  content: '\2713';
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--black);
-  line-height: 1;
-  background: none;
-}
-.preview .task-item .task-text {
-  line-height: 1.4;
-}
-/* --- End task list checkbox custom style --- */
+/* ============================================
+   BRUTALIST THEME - Power DevBox Notes
+   ============================================ */
+:root {
+  --bg: #f5f0eb;
+  --bg-elev: #fff;
+  --surface: #fff;
+  --text: #111;
+  --muted: #888;
+  --primary: #2962ff;
+  --accent: #4163be;
+  --danger: #ff3d00;
+  --black: #111;
+  --border: 3px solid #111;
+  --border-thin: 2px solid #111;
+  --radius: 0px;
+  --shadow: 4px 4px 0 #111;
+  --shadow-lg: 6px 6px 0 #111;
+}
+
+/* Prevent text overflow and improve mobile experience */
+*, *::before, *::after {
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+/* Improve word wrapping for long content */
+.preview, .content, .title, .note-item .title {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+/* Ensure inputs don't exceed container width */
+input, textarea, select {
+  max-width: 100%;
+  font-size: 16px;
+}
+
+#btn-preview {
+  margin-right: 5px;
+}
+
+/* Specific mobile input fixes */
+@media screen and (max-width: 768px) {
+  input[type="email"], input[type="password"], input[type="text"], textarea {
+    font-size: 16px;
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 0;
+  }
+}
+
+/* Prevent code blocks from causing horizontal scroll */
+.preview pre, .preview code {
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+/* Ensure images in preview don't overflow */
+.preview img {
+  max-width: 100%;
+  height: auto;
+}
+
+html { height: 100%; }
+body {
+  margin: 0;
+  font-family: 'Space Grotesk', system-ui, sans-serif;
+  color: var(--text);
+  background: var(--bg);
+  overflow-x: hidden;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* App bar */
+.app-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  position: sticky;
+  top: 0;
+  background: var(--bg);
+  border-bottom: var(--border);
+  min-width: 0;
+  z-index: 1000;
+}
+.app-bar h1 {
+  margin: 0;
+  font-family: 'Space Mono', monospace;
+  font-size: 16px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  min-width: 0;
+}
+.app-bar .left {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+}
+.app-bar .right {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0;
+}
+.app-bar-logo {
+  height: 20px;
+}
+#sync-status {
+  font-family: 'Space Mono', monospace;
+  font-size: 11px;
+  color: var(--muted);
+  padding: 4px 10px;
+  background: var(--bg);
+  border: var(--border-thin);
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+/* Container layout */
+.container {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: 16px;
+  padding: 16px;
+  max-width: 960px;
+  margin: 0 auto;
+  min-width: 0;
+  width: 100%;
+  flex: 1;
+}
+
+/* Sidebar */
+.sidebar {
+  background: var(--surface);
+  border: var(--border);
+  box-shadow: var(--shadow);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 70vh;
+  min-width: 0;
+}
+.search {
+  padding: 12px;
+  border-bottom: var(--border-thin);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.search input {
+  flex: 1;
+  padding: 10px 12px;
+  border: var(--border-thin);
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 14px;
+  min-width: 0;
+}
+.search input:focus {
+  outline: none;
+  background: var(--accent);
+}
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 12px;
+}
+.tag {
+  background: var(--bg);
+  border: var(--border-thin);
+  color: var(--text);
+  padding: 4px 10px;
+  font-size: 11px;
+  font-family: 'Space Mono', monospace;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s;
+}
+.tag:hover {
+  background: var(--accent);
+}
+
+.note-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  flex: 1;
+  overflow-y: auto;
+}
+.note-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 12px;
+  background: var(--surface);
+  border-bottom: var(--border-thin);
+  cursor: grab;
+  min-width: 0;
+  font-weight: 700;
+  transition: background 0.15s;
+}
+.note-item:hover {
+  background: var(--accent);
+}
+.note-item .note-del {
+  margin-left: auto;
+  background: transparent;
+  border: var(--border-thin);
+  color: var(--text);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+.note-item .note-del:hover {
+  background: var(--danger);
+  color: #fff;
+  border-color: var(--danger);
+}
+.note-item .note-del:active {
+  transform: scale(0.9);
+}
+.note-item.dragging {
+  opacity: 0.6;
+}
+.note-item .title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+/* Editor */
+.editor {
+  background: var(--surface);
+  border: var(--border);
+  box-shadow: var(--shadow);
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 70vh;
+  min-width: 0;
+}
+.toolbar {
+  display: flex;
+  gap: 0;
+  align-items: center;
+  flex-wrap: wrap;
+  border-bottom: var(--border);
+  padding: 0;
+}
+.toolbar button {
+  background: var(--surface);
+  color: var(--text);
+  border: none;
+  border-right: var(--border-thin);
+  padding: 10px 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  font-family: 'Space Mono', monospace;
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  transition: background 0.15s;
+}
+.toolbar button:hover {
+  background: var(--accent);
+}
+.toolbar .spacer {
+  flex: 1;
+  min-width: 8px;
+  border: none;
+}
+.title {
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 12px 16px;
+  border: none;
+  border-bottom: var(--border);
+  background: var(--surface);
+  color: var(--text);
+  width: 100%;
+  min-width: 0;
+}
+.title:focus {
+  outline: none;
+  background: #fffde7;
+}
+.content {
+  min-height: 280px;
+  resize: vertical;
+  padding: 16px;
+  border: none;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  width: 100%;
+  min-width: 0;
+  font-family: 'Space Grotesk', sans-serif;
+  font-size: 15px;
+  flex: 1;
+}
+.content:focus {
+  outline: none;
+  background: #fff;
+}
+.preview {
+  min-height: 280px;
+  padding: 16px;
+  border-top: var(--border);
+  background: #fff;
+  width: 100%;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  overflow-x: hidden;
+  flex: 1;
+  overflow-y: auto;
+}
+.status-bar {
+  position: sticky;
+  bottom: 0;
+  background: var(--black);
+  border-top: var(--border);
+  padding: 8px 16px;
+  color: #999;
+  font-family: 'Space Mono', monospace;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 0;
+  z-index: 100;
+}
+
+/* Buttons */
+button {
+  font-family: 'Space Grotesk', sans-serif;
+  transition: all 0.15s;
+}
+button:hover {
+  transform: translate(2px, 2px);
+}
+button.primary {
+  background: var(--primary);
+  color: #fff;
+  border: var(--border);
+  box-shadow: var(--shadow);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 8px 16px;
+}
+button.primary:hover {
+  box-shadow: 2px 2px 0 var(--black);
+}
+button.tonal {
+  background: var(--bg);
+  border: var(--border);
+  color: var(--text);
+  box-shadow: var(--shadow);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 8px 10px 8px 10px;
+}
+button.tonal:hover {
+  background: var(--accent);
+  box-shadow: 2px 2px 0 var(--black);
+}
+button.danger {
+  background: var(--danger);
+  color: #fff;
+  border: var(--border);
+  box-shadow: var(--shadow);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 8px 16px;
+}
+button.danger:hover {
+  box-shadow: 2px 2px 0 var(--black);
+}
+
+/* New Note button */
+#btn-new {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  flex-shrink: 0;
+  font-size: 0;
+  background: var(--accent);
+  border: var(--border-thin);
+  color: var(--black);
+  box-shadow: 2px 2px 0 var(--black);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+#btn-new::before {
+  content: '+';
+  font-size: 22px;
+  line-height: 1;
+  font-weight: 700;
+  color: var(--black);
+}
+#btn-new:hover {
+  transform: translate(2px, 2px);
+  box-shadow: 0 0 0 var(--black);
+  background: var(--primary);
+  color: #fff;
+}
+#btn-new:hover::before {
+  color: #fff;
+}
+#btn-new:active {
+  transform: translate(2px, 2px);
+  box-shadow: 0 0 0 var(--black);
+}
+#btn-new:focus-visible {
+  outline: 3px solid var(--primary);
+  outline-offset: 2px;
+}
+
+/* Preview content */
+.preview h1, .preview h2, .preview h3 {
+  margin: 16px 0 8px;
+  font-family: 'Space Grotesk', sans-serif;
+  text-transform: uppercase;
+}
+.preview code {
+  background: var(--bg);
+  padding: 2px 6px;
+  border: var(--border-thin);
+  font-family: 'Space Mono', monospace;
+}
+.preview pre {
+  background: var(--black);
+  color: #e0e0e0;
+  padding: 16px;
+  border: var(--border);
+  overflow: auto;
+}
+.preview a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+/* Muted text utility */
+.muted { color: var(--muted); }
+
+/* Form spacer */
+.form-spacer { height: 8px; }
+
+/* Modal */
+.modal[hidden] { display: none; }
+.modal {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  z-index: 1000;
+  padding: 16px;
+}
+.modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+.modal__dialog {
+  position: relative;
+  width: min(480px, 92vw);
+  background: var(--surface);
+  border: var(--border);
+  box-shadow: var(--shadow-lg);
+  padding: 24px;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+.modal__dialog h2 {
+  margin: 0 0 8px 0;
+  font-family: 'Space Grotesk', sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.modal__dialog input {
+  width: 100%;
+  padding: 10px 12px;
+  border: var(--border-thin);
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Space Grotesk', sans-serif;
+  box-sizing: border-box;
+}
+.modal__dialog input:focus {
+  outline: none;
+  background: var(--accent);
+}
+.modal__actions {
+  margin-top: 16px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* Responsive: tablet */
+@media (max-width: 900px) {
+  .container {
+    grid-template-columns: 1fr;
+    padding: 12px;
+    gap: 12px;
+  }
+}
+
+/* Responsive: mobile */
+@media (max-width: 600px) {
+  .app-bar {
+    padding: 8px 12px;
+    gap: 8px;
+    z-index: 1000;
+  }
+  .app-bar h1 {
+    font-size: 13px;
+    letter-spacing: 1px;
+  }
+  .app-bar .left {
+    gap: 8px;
+  }
+  .app-bar .right {
+    gap: 6px;
+  }
+  .app-bar .right button {
+    padding: 6px 8px;
+    font-size: 12px;
+  }
+  #sync-status {
+    font-size: 10px;
+    padding: 3px 6px;
+  }
+  .container {
+    padding: 8px;
+    gap: 8px;
+    padding-bottom: 40px;
+  }
+  .sidebar {
+    padding: 0;
+    max-height: 35vh !important;
+  }
+  .editor {
+    padding: 0;
+    overflow-x: hidden;
+  }
+  .toolbar {
+    gap: 0;
+    flex-wrap: wrap;
+  }
+  .toolbar button {
+    padding: 6px 8px;
+    font-size: 11px;
+  }
+  .toolbar .spacer {
+    display: none;
+  }
+  .title {
+    font-size: 16px;
+    padding: 8px 12px;
+  }
+  .content {
+    padding: 10px;
+    font-size: 14px;
+  }
+  .preview {
+    padding: 10px;
+    font-size: 14px;
+    overflow-x: hidden;
+        
+  }
+  .modal__dialog {
+    width: min(360px, 95vw);
+    padding: 16px;
+  }
+  .sidebar { min-height: auto; }
+  .note-list { max-height: 50vh; overflow-y: auto; }
+}
+
+/* Responsive: small mobile */
+@media (max-width: 400px) {
+  .sidebar {
+    max-height: 35vh !important;
+  }
+  .app-bar {
+    flex-wrap: wrap;
+    gap: 6px;
+    z-index: 1000;
+  }
+  .app-bar .left, .app-bar .right {
+    gap: 4px;
+  }
+  .toolbar button {
+    padding: 4px 6px;
+    font-size: 10px;
+  }
+  .modal__dialog {
+    width: min(320px, 98vw);
+    padding: 12px;
+  }
+  .preview {
+   overflow-y: auto;
+  }
+}
+
+/* --- Task list checkbox custom style --- */
+.preview .task-item input.task-box {
+  position: absolute;
+  opacity: 0;
+  inset: 0;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  pointer-events: none;
+}
+.preview .task-item label {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  cursor: pointer;
+}
+.preview .task-item .checkbox-ui {
+  position: relative;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border: 2px solid var(--black);
+  background: #fff;
+  transition: border-color 0.15s, background 0.15s;
+  display: inline-block;
+}
+.preview .task-item .checkbox-ui:hover {
+  background: var(--accent);
+}
+.preview .task-item input.task-box:focus + .checkbox-ui {
+  outline: 3px solid var(--primary);
+  outline-offset: 2px;
+}
+.preview .task-item input.task-box:checked + .checkbox-ui::after {
+  content: '\2713';
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--black);
+  line-height: 1;
+  background: none;
+}
+.preview .task-item .task-text {
+  line-height: 1.4;
+}
+/* --- End task list checkbox custom style --- */