skywriter 1.0.0

package/dist/server/utils/editor.css

@@ -0,0 +1,1535 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  overflow: hidden;
+  height: 100vh;
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  background: #333;
+  color: white;
+  padding: 0.75rem 1.5rem;
+  flex-shrink: 0;
+  border-bottom: 1px solid #222;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.logo {
+  color: white;
+  text-decoration: none;
+  font-weight: 600;
+  font-size: 1.1rem;
+  white-space: nowrap;
+}
+
+.header-slug {
+  flex: 1;
+  max-width: 600px;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.header-slug label {
+  color: #ccc;
+  font-size: 0.9rem;
+  white-space: nowrap;
+}
+
+.header-slug input {
+  flex: 1;
+  background: #444;
+  border: 1px solid #555;
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+  outline: none;
+}
+
+.header-slug input:focus-visible {
+  outline: 2px solid #528bff;
+  outline-offset: 1px;
+}
+
+.header-slug input:focus {
+  background: #555;
+  border-color: #666;
+}
+
+.header-slug input::placeholder {
+  color: #888;
+  font-style: italic;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.btn-save,
+.btn-cancel,
+.btn-revert,
+.btn-view,
+.btn-publish {
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+  white-space: nowrap;
+}
+
+.btn-publish {
+  background: #6b46c1;
+  color: white;
+}
+
+.btn-publish:hover:not(:disabled) {
+  background: #805ad5;
+}
+
+.btn-publish[data-published='false'] {
+  background: #4a5568;
+}
+
+.btn-publish[data-published='false']:hover:not(:disabled) {
+  background: #718096;
+}
+
+.btn-publish:disabled {
+  background: #555;
+  cursor: not-allowed;
+  opacity: 0.5;
+  color: #999;
+}
+
+.btn-save {
+  background: #4caf50;
+  color: white;
+}
+
+.btn-save:hover:not(:disabled) {
+  background: #45a049;
+}
+
+.btn-save:disabled {
+  background: #555;
+  cursor: not-allowed;
+  opacity: 0.5;
+  color: #999;
+}
+
+.btn-cancel {
+  background: #666;
+  color: white;
+  display: inline-block;
+}
+
+.btn-cancel:hover {
+  background: #777;
+}
+
+.btn-revert {
+  background: #ff9800;
+  color: white;
+}
+
+.btn-revert:hover:not(:disabled) {
+  background: #f57c00;
+}
+
+.btn-revert:disabled {
+  background: #555;
+  cursor: not-allowed;
+  opacity: 0.5;
+  color: #999;
+}
+
+.btn-view {
+  background: #2196f3;
+  color: white;
+}
+
+.btn-view:hover:not(:disabled) {
+  background: #1976d2;
+}
+
+.btn-view:disabled {
+  background: #555;
+  cursor: not-allowed;
+  opacity: 0.5;
+  color: #999;
+}
+
+.btn-secondary {
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  text-decoration: none;
+  border: 1px solid #3e4451;
+  white-space: nowrap;
+  background: #282c34;
+  color: #abb2bf;
+  transition: all 0.2s;
+}
+
+.btn-secondary:hover {
+  background: #2c313a;
+  border-color: #528bff;
+  color: #ffffff;
+}
+
+.btn-secondary:active {
+  background: #21252b;
+}
+
+.draft-status {
+  color: #666;
+  font-size: 0.85rem;
+  font-style: italic;
+}
+
+.user-name {
+  color: #ccc;
+  font-size: 0.9rem;
+}
+
+.dev-badge {
+  background: #ffc107;
+  color: #000;
+  padding: 0.5rem 0.75rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+form {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.editor-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #282c34;
+}
+
+.editor-tabs {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: #1e1e1e;
+  border-bottom: 1px solid #333;
+}
+
+.tab-button {
+  padding: 0.5rem 1rem;
+  background: transparent;
+  border: none;
+  color: #888;
+  cursor: pointer;
+  font-size: 0.9rem;
+  border-radius: 4px 4px 0 0;
+  transition: all 0.2s;
+}
+
+.tab-button:hover {
+  background: #2a2a2a;
+  color: #ccc;
+}
+
+.tab-button.active {
+  background: #282828;
+  color: white;
+  border-bottom: 2px solid #4caf50;
+}
+
+.tab-button.has-draft {
+  font-style: italic;
+}
+
+.tab-button.is-empty {
+  color: #666;
+}
+
+.tab-button.has-content {
+  font-weight: 600;
+}
+
+.tab-button.active.is-empty {
+  color: #aaa;
+}
+
+.tab-button.active.has-content {
+  color: white;
+}
+
+.tab-content {
+  display: none;
+  flex: 1;
+  overflow: hidden;
+}
+
+.tab-content.active {
+  display: flex;
+  width: 100%;
+}
+
+.tab-content[data-tab-content='content'] {
+  flex-direction: row;
+}
+
+#content-editor-panel {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.preview-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+#data-editor-panel,
+#style-editor-panel,
+#script-editor-panel,
+#server-editor-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+#data-editor-panel,
+#style-editor-panel,
+#script-editor-panel,
+#server-editor-panel {
+  flex: 1;
+}
+
+#content-editor-panel {
+  position: relative;
+}
+
+#content-editor-panel .cm-editor,
+#data-editor-panel .cm-editor,
+#style-editor-panel .cm-editor,
+#script-editor-panel .cm-editor,
+#server-editor-panel .cm-editor {
+  height: 100%;
+  font-size: 0.95rem;
+  outline: none;
+}
+
+#content-editor-panel .cm-scroller,
+#data-editor-panel .cm-scroller,
+#style-editor-panel .cm-scroller,
+#script-editor-panel .cm-scroller,
+#server-editor-panel .cm-scroller {
+  overflow: auto;
+  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
+}
+
+#content-editor-panel .cm-content,
+#data-editor-panel .cm-content,
+#style-editor-panel .cm-content,
+#script-editor-panel .cm-content,
+#server-editor-panel .cm-content {
+  padding: 1.5rem;
+}
+
+#content-editor-panel .cm-line,
+#data-editor-panel .cm-line,
+#style-editor-panel .cm-line,
+#script-editor-panel .cm-line,
+#server-editor-panel .cm-line {
+  padding: 0;
+}
+
+/* Handlebars highlighting in markdown editor */
+#content-editor-panel .cm-handlebars {
+  color: #ce9178;
+  font-weight: 500;
+}
+
+.resizer {
+  width: 6px;
+  background: #ddd;
+  cursor: col-resize;
+  flex-shrink: 0;
+  transition: background 0.2s;
+  user-select: none;
+}
+
+.resizer:hover {
+  background: #4caf50;
+}
+
+.resizer:active {
+  background: #4caf50;
+}
+
+.preview-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: white;
+}
+
+/* Drag-over visual indicator */
+#content-editor-panel.drag-over,
+#data-editor-panel.drag-over,
+#style-editor-panel.drag-over,
+#script-editor-panel.drag-over,
+#server-editor-panel.drag-over {
+  outline: 2px dashed #4caf50;
+  background: #222 !important;
+}
+
+.preview-content {
+  padding: 1.5rem;
+  height: 100%;
+  background: white;
+  overflow-y: auto;
+  line-height: 1.8;
+}
+
+.preview-content img {
+  max-width: 100%;
+  height: auto;
+}
+
+.preview-content pre {
+  background: #f5f5f5;
+  padding: 1rem;
+  border-radius: 4px;
+  overflow-x: auto;
+}
+
+.preview-content code {
+  background: #f5f5f5;
+  padding: 0.2rem 0.4rem;
+  border-radius: 3px;
+  font-size: 0.9em;
+}
+
+.preview-content pre code {
+  background: none;
+  padding: 0;
+}
+
+.preview-content h1,
+.preview-content h2,
+.preview-content h3 {
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.preview-content h1:first-child,
+.preview-content h2:first-child,
+.preview-content h3:first-child {
+  margin-top: 0;
+}
+
+.preview-content p {
+  margin: 1em 0;
+}
+
+.preview-content blockquote {
+  border-left: 4px solid #ddd;
+  margin: 1em 0;
+  padding-left: 1em;
+  color: #666;
+}
+
+/* Settings panel styles */
+.settings-panel {
+  display: flex;
+  background: #282c34;
+  overflow-y: auto;
+  position: relative;
+  width: 100%;
+  justify-content: center;
+}
+
+.settings-inner {
+  display: flex;
+  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
+  min-height: min-content;
+}
+
+.settings-sidebar {
+  width: 200px;
+  min-width: 200px;
+  background: #282c34;
+  overflow-y: auto;
+  padding: 2rem 1rem;
+}
+
+.settings-nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.settings-nav li {
+  margin-bottom: 0.25rem;
+}
+
+.settings-nav-link {
+  display: block;
+  padding: 0.5rem 0.75rem;
+  color: #abb2bf;
+  text-decoration: none;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
+}
+
+.settings-nav-link:hover {
+  background: #21252b;
+  color: #ffffff;
+}
+
+.settings-content {
+  flex: 1;
+  padding: 2rem;
+  scroll-behavior: smooth;
+  background: #282c34;
+}
+
+.settings-section {
+  margin-bottom: 3rem;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid #3e4451;
+  scroll-margin-top: 1rem;
+}
+
+.settings-section:last-child {
+  border-bottom: none;
+}
+
+.settings-section-title {
+  color: #ffffff;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0 0 1.5rem 0;
+}
+
+.settings-section-body {
+  max-width: 100%;
+}
+
+/* Responsive: stack sidebar on smaller screens */
+@media (max-width: 1024px) {
+  .settings-inner {
+    flex-direction: column;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .settings-sidebar {
+    width: 100%;
+    min-width: auto;
+    border-right: none;
+    border-bottom: 1px solid #3e4451;
+    padding: 1rem;
+  }
+
+  .settings-nav {
+    display: flex;
+    gap: 0.5rem;
+    overflow-x: auto;
+  }
+
+  .settings-nav li {
+    margin-bottom: 0;
+  }
+
+  .settings-content {
+    padding: 1.5rem 1rem;
+  }
+}
+
+.settings-form {
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.settings-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  margin-bottom: 2rem;
+}
+
+.settings-column-main {
+  min-width: 0;
+}
+
+.settings-column-side {
+  min-width: 0;
+}
+
+/* Stack on smaller screens */
+@media (max-width: 1024px) {
+  .settings-grid {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  color: #abb2bf;
+  font-size: 0.9rem;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+.form-group input[type='text'] {
+  width: 100%;
+  background: #21252b;
+  border: 1px solid #3e4451;
+  color: #abb2bf;
+  padding: 0.75rem;
+  border-radius: 4px;
+  font-size: 0.95rem;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  outline: none;
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
+}
+
+.form-group input[type='text']:focus-visible {
+  outline: 2px solid #528bff;
+  outline-offset: 1px;
+}
+
+.form-group input[type='text']:focus {
+  background: #282c34;
+  border-color: #528bff;
+}
+
+.form-group input[type='text']::placeholder {
+  color: #5c6370;
+}
+
+.form-group input[type='checkbox'] {
+  margin-right: 0.5rem;
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.form-group label:has(input[type='checkbox']) {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+.help-text {
+  color: #5c6370;
+  font-size: 0.85rem;
+  margin: 0.5rem 0 0 0;
+  font-style: italic;
+}
+
+.selected-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: #2c313c;
+  border: 1px solid #3e4451;
+  border-radius: 4px;
+  margin-bottom: 0.5rem;
+}
+
+.selected-item .selected-link {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  text-decoration: none;
+  color: inherit;
+  transition: opacity 0.2s;
+}
+
+.selected-item .selected-link:hover {
+  opacity: 0.8;
+}
+
+.selected-item strong {
+  color: #abb2bf;
+  font-size: 0.95rem;
+}
+
+.selected-item .selected-path {
+  color: #61afef;
+  font-size: 0.85rem;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  flex: 1;
+}
+
+.selected-item .clear-selection {
+  background: transparent;
+  border: none;
+  color: #e06c75;
+  cursor: pointer;
+  font-size: 1.2rem;
+  padding: 0 0.5rem;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.selected-item .clear-selection:hover {
+  color: #ff6b7a;
+}
+
+.no-uploads {
+  color: #5c6370;
+  font-style: italic;
+  margin: 0;
+}
+
+.uploads-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: #21252b;
+  border: 1px solid #3e4451;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.uploads-table th {
+  background: #2c313c;
+  color: #abb2bf;
+  text-align: left;
+  padding: 0.75rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  border-bottom: 1px solid #3e4451;
+}
+
+.uploads-table td {
+  padding: 0.75rem;
+  color: #abb2bf;
+  border-bottom: 1px solid #3e4451;
+}
+
+.uploads-table tr:last-child td {
+  border-bottom: none;
+}
+
+.uploads-table tr:hover {
+  background: #282c34;
+}
+
+/* Hidden uploads styling */
+.upload-hidden {
+  opacity: 0.5;
+}
+
+.upload-hidden:hover {
+  opacity: 0.8;
+}
+
+.hidden-toggle {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: #5c6370;
+  gap: 0.25rem;
+}
+
+.hidden-checkbox {
+  cursor: pointer;
+}
+
+.delete-upload-btn {
+  color: #e06c75 !important;
+  font-weight: bold;
+}
+
+.delete-upload-btn:hover {
+  color: #ff8b94 !important;
+}
+
+.filename-display {
+  cursor: pointer;
+  display: inline-block;
+  padding: 0.25rem 0;
+}
+
+.filename-display:hover {
+  color: #61afef;
+  text-decoration: underline;
+}
+
+.filename-input {
+  background: #282c34;
+  border: 1px solid #528bff;
+  color: #abb2bf;
+  padding: 0.25rem 0.5rem;
+  border-radius: 3px;
+  font-size: 0.9rem;
+  font-family: inherit;
+  outline: none;
+  width: 100%;
+}
+
+.date-header {
+  text-align: right !important;
+  width: 90px;
+}
+
+.upload-date {
+  color: #5c6370;
+  font-size: 0.85rem;
+  text-align: right;
+  width: 90px;
+}
+
+.upload-actions {
+  text-align: right;
+  width: 80px;
+  white-space: nowrap;
+}
+
+.icon-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 1.1rem;
+  padding: 0.25rem 0.5rem;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+  display: inline-block;
+  text-decoration: none;
+}
+
+.icon-btn:hover {
+  opacity: 1;
+}
+
+.filename-link {
+  color: #61afef;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.filename-link:hover {
+  color: #7bc3ff;
+  text-decoration: underline;
+}
+
+.delete-upload-btn {
+  background: transparent;
+  border: none;
+  color: #e06c75;
+  cursor: pointer;
+  font-size: 1.2rem;
+  padding: 0 0.5rem;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.delete-upload-btn:hover {
+  color: #ff6b7a;
+}
+
+/* Redirects table styles (similar to uploads) */
+.redirects-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: #21252b;
+  border: 1px solid #3e4451;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.redirects-table th {
+  background: #2c313c;
+  color: #abb2bf;
+  text-align: left;
+  padding: 0.75rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  border-bottom: 1px solid #3e4451;
+}
+
+.redirects-table td {
+  padding: 0.75rem;
+  color: #abb2bf;
+  border-bottom: 1px solid #3e4451;
+}
+
+.redirects-table tr:last-child td {
+  border-bottom: none;
+}
+
+.redirects-table tr:hover {
+  background: #282c34;
+}
+
+.redirect-path {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+}
+
+.redirect-link {
+  color: #61afef;
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.redirect-link:hover {
+  color: #7bc3ff;
+  text-decoration: underline;
+}
+
+.redirect-date {
+  color: #5c6370;
+  font-size: 0.85rem;
+  text-align: right;
+  width: 90px;
+}
+
+.redirect-actions {
+  text-align: right;
+  width: 50px;
+}
+
+.delete-redirect-btn {
+  background: transparent;
+  border: none;
+  color: #e06c75;
+  cursor: pointer;
+  font-size: 1.2rem;
+  padding: 0 0.5rem;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.delete-redirect-btn:hover {
+  color: #ff6b7a;
+}
+
+.no-redirects {
+  color: #5c6370;
+  font-style: italic;
+  margin: 0;
+  padding: 1rem;
+  text-align: center;
+}
+
+.no-uploads {
+  color: #5c6370;
+  font-style: italic;
+  margin: 0;
+  padding: 1rem;
+  text-align: center;
+}
+
+/* Upload and redirect controls */
+.upload-controls,
+.redirect-controls {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: #21252b;
+  border-radius: 4px;
+  border: 1px solid #3e4451;
+}
+
+.upload-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.redirect-controls {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.redirect-controls input[type='text'] {
+  flex: 1;
+  padding: 0.5rem;
+  background: #282c34;
+  border: 1px solid #3e4451;
+  border-radius: 4px;
+  color: #abb2bf;
+  font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
+}
+
+.redirect-controls input[type='text']:focus {
+  outline: none;
+  border-color: #528bff;
+}
+
+.uploads-section,
+.redirects-section {
+  width: 100%;
+}
+
+/* API Links Section */
+.api-links-list {
+  background: #282c34;
+  border: 1px solid #3e4451;
+  border-radius: 4px;
+  padding: 1rem;
+  margin-top: 0.5rem;
+}
+
+.api-link-item {
+  padding: 0.5rem 0;
+  border-bottom: 1px solid #3e4451;
+  overflow: hidden;
+}
+
+.api-link-item:last-child {
+  border-bottom: none;
+}
+
+.api-link-item a {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap !important;
+  overflow-wrap: normal !important;
+  word-break: normal !important;
+  color: #61afef;
+  text-decoration: none;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.9rem;
+  transition: color 0.2s;
+}
+
+.api-link-item a:hover {
+  color: #98c379;
+  text-decoration: underline;
+}
+
+/* Settings divider */
+.settings-divider {
+  border: none;
+  border-top: 1px solid #3e4451;
+  margin: 2rem 0;
+}
+
+/* Global Operations Section */
+.global-operations {
+  margin-top: 1rem;
+}
+
+.global-operations-buttons {
+  display: flex;
+  gap: 1rem;
+  margin-top: 0.5rem;
+}
+
+/* Danger Zone (GitHub-like) */
+.danger-zone-panel {
+  border: 1px solid #3e4451;
+  border-radius: 6px;
+  background: transparent;
+  padding: 0;
+}
+
+.danger-zone-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 2rem;
+  padding: 1.5rem;
+}
+
+.danger-zone-row + .danger-zone-row {
+  border-top: 1px solid #3e4451;
+}
+
+.danger-zone-row:first-child {
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+.danger-zone-row:last-child {
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.danger-zone-row-text {
+  flex: 1;
+  min-width: 0;
+}
+
+.danger-zone-row-title {
+  color: #ffffff;
+  font-weight: 600;
+  margin: 0 0 0.25rem 0;
+  font-size: 0.95rem;
+}
+
+.danger-zone-row-description {
+  color: #abb2bf;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.danger-zone-row-action {
+  flex: 0 0 auto;
+}
+
+/* Override global `form { flex: 1; }` within danger zone */
+.danger-zone-row-action form {
+  flex: 0 0 auto;
+  display: block;
+  overflow: visible;
+}
+
+.btn-delete,
+.btn-logout {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: transparent;
+  color: #dc3545;
+  text-decoration: none;
+  border-radius: 6px;
+  font-weight: 500;
+  transition: all 0.2s;
+  border: 1px solid #dc3545;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-family: inherit;
+  white-space: nowrap;
+}
+
+.btn-delete:hover:not(:disabled),
+.btn-logout:hover:not(:disabled) {
+  background: #dc3545;
+  color: #ffffff;
+}
+
+.btn-delete:disabled,
+.btn-logout:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Drag and drop styling for settings panel */
+.settings-panel.drag-over {
+  background: #2c313a;
+  border: 2px dashed rgba(82, 139, 255, 0.15);
+  border-radius: 8px;
+}
+
+.settings-panel.drag-over::before {
+  content: 'Drop files to upload';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.5rem;
+  color: #5c6370;
+  font-weight: bold;
+  pointer-events: none;
+  z-index: 10;
+}
+
+/* Autocomplete dropdown styles */
+.autocomplete-dropdown {
+  position: absolute;
+  width: 100%;
+  max-height: 300px;
+  overflow-y: auto;
+  background: #21252b;
+  border: 1px solid #3e4451;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  z-index: 1000;
+  display: none;
+}
+
+.autocomplete-dropdown.show {
+  display: block;
+}
+
+.dropdown-item {
+  padding: 0.75rem;
+  cursor: pointer;
+  color: #abb2bf !important;
+  border-bottom: 1px solid #282c34;
+  transition: background-color 0.15s;
+}
+
+.dropdown-item:last-child {
+  border-bottom: none;
+}
+
+.dropdown-item:hover {
+  background: #2c313a;
+}
+
+.dropdown-item.no-results {
+  color: #5c6370 !important;
+  cursor: default;
+  font-style: italic;
+}
+
+.dropdown-title {
+  font-size: 0.9rem;
+  color: #abb2bf !important;
+  font-weight: 500;
+}
+
+.dropdown-path {
+  font-size: 0.8rem;
+  color: #61afef !important;
+  margin-top: 0.2rem;
+}
+
+.autocomplete-item {
+  padding: 0.75rem;
+  cursor: pointer;
+  color: #abb2bf !important;
+  border-bottom: 1px solid #282c34;
+  transition: background-color 0.15s;
+}
+
+.autocomplete-item:last-child {
+  border-bottom: none;
+}
+
+.autocomplete-item:hover,
+.autocomplete-item.selected {
+  background: #2c313a;
+}
+
+.autocomplete-item-path {
+  font-size: 0.9rem;
+  color: #61afef !important;
+  font-weight: 500;
+}
+
+.autocomplete-item-title {
+  font-size: 0.85rem;
+  color: #98c379 !important;
+  margin-top: 0.2rem;
+}
+
+.form-group {
+  position: relative;
+}
+
+/* Status indicator in header */
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  margin-right: 1rem;
+  min-width: 150px;
+}
+
+.status-indicator.visible {
+  opacity: 1;
+}
+
+.status-text {
+  font-size: 0.85rem;
+  color: #98c379;
+  font-weight: 500;
+}
+/* Toast notification system */
+.toast-container {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  pointer-events: none;
+}
+
+.toast {
+  background: #333;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  font-size: 0.9rem;
+  max-width: 400px;
+  opacity: 0;
+  transform: translateX(100px);
+  transition: all 0.3s ease-out;
+  pointer-events: auto;
+  word-wrap: break-word;
+}
+
+.toast.show {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.toast-error {
+  background: #e06c75;
+  color: white;
+}
+
+.toast-success {
+  background: #98c379;
+  color: #282c34;
+}
+
+.toast-info {
+  background: #61afef;
+  color: #282c34;
+}
+
+/* ========================================
+   Accessibility utilities
+   ======================================== */
+
+/* Screen-reader only content */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Skip navigation link */
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 0;
+  z-index: 100000;
+  padding: 0.75rem 1.5rem;
+  background: #528bff;
+  color: #fff;
+  text-decoration: none;
+  font-weight: 600;
+  border-radius: 0 0 4px 0;
+}
+
+.skip-link:focus {
+  top: 0;
+}
+
+/* Focus-visible for buttons */
+.btn-save:focus-visible,
+.btn-cancel:focus-visible,
+.btn-revert:focus-visible,
+.btn-view:focus-visible,
+.btn-publish:focus-visible,
+.btn-secondary:focus-visible,
+.btn-delete:focus-visible,
+.btn-logout:focus-visible,
+.tab-button:focus-visible,
+.icon-btn:focus-visible,
+.delete-upload-btn:focus-visible,
+.delete-redirect-btn:focus-visible,
+.settings-nav-link:focus-visible {
+  outline: 2px solid #528bff;
+  outline-offset: 2px;
+}
+
+/* Focus-visible for resizer */
+.resizer:focus-visible {
+  outline: 2px solid #528bff;
+  background: #4caf50;
+}
+
+/* ========================================
+   Mobile responsive layout (≤768px)
+   ======================================== */
+
+@media (max-width: 768px) {
+  /* Header: stack slug and actions vertically */
+  header {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .header-content {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .header-slug {
+    flex: 1 1 100%;
+    max-width: 100%;
+    order: 1;
+  }
+
+  .status-indicator {
+    order: 2;
+    min-width: auto;
+    margin-right: 0;
+  }
+
+  .header-actions {
+    order: 3;
+    flex-wrap: wrap;
+    gap: 0.5rem !important;
+    margin-left: 0 !important;
+    width: 100%;
+  }
+
+  /* Make header buttons minimum touch target size */
+  .btn-save,
+  .btn-cancel,
+  .btn-revert,
+  .btn-view,
+  .btn-publish {
+    min-height: 44px;
+    min-width: 44px;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.85rem;
+  }
+
+  /* Editor tabs: horizontal scroll */
+  .editor-tabs {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    padding: 0.5rem 0.5rem;
+    gap: 0.25rem;
+  }
+
+  .editor-tabs::-webkit-scrollbar {
+    display: none;
+  }
+
+  .tab-button {
+    flex-shrink: 0;
+    min-height: 44px;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8rem;
+  }
+
+  /* Content tab: stack editor and preview vertically */
+  .tab-content[data-tab-content='content'] {
+    flex-direction: column;
+  }
+
+  #content-editor-panel {
+    width: 100% !important;
+    height: 50%;
+    flex-shrink: 0;
+  }
+
+  /* Hide resizer on mobile — panels stack vertically */
+  .resizer {
+    display: none;
+  }
+
+  .preview-panel {
+    min-height: 0;
+    flex: 1;
+  }
+
+  /* Touch targets for icon buttons */
+  .icon-btn,
+  .delete-upload-btn,
+  .delete-redirect-btn {
+    min-height: 44px;
+    min-width: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Settings panel adjustments */
+  .settings-content {
+    padding: 1rem 0.75rem;
+  }
+
+  .settings-section-title {
+    font-size: 1.25rem;
+  }
+
+  /* Danger zone: stack on mobile */
+  .danger-zone-row {
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  /* Redirect controls: stack on mobile */
+  .redirect-controls {
+    flex-direction: column;
+  }
+
+  .redirect-controls .btn-secondary {
+    min-height: 44px;
+    width: 100%;
+  }
+
+  /* Toast: full width on mobile */
+  .toast-container {
+    left: 10px;
+    right: 10px;
+    bottom: 10px;
+  }
+
+  .toast {
+    max-width: 100%;
+  }
+
+  /* Autocomplete dropdown: full width */
+  .autocomplete-dropdown {
+    max-height: 200px;
+  }
+}