@kyro-cms/admin 0.1.6 → 0.1.7

package/src/styles/main.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
 
 @source "../../src/**/*.{astro,html,js,jsx,ts,tsx}";
 
@@ -63,23 +64,96 @@
   /* Dashboard Theme */
   --kyro-bg: #eaeff2;
   --kyro-surface: #ffffff;
+  --kyro-surface-accent: #f9fafb;
   --kyro-sidebar-bg: #ffffff;
   --kyro-sidebar-active: #0b1222;
   --kyro-sidebar-text: #64748b;
   --kyro-sidebar-text-active: #ffffff;
   --kyro-sidebar-border: rgba(0, 0, 0, 0.05);
 
+  /* Semantic Typography */
+  --kyro-text-primary: #0b1222;
+  --kyro-text-secondary: #64748b;
+  --kyro-text-muted: #94a3b8;
+
+  /* Semantic UI */
+  --kyro-border: #f3f4f6;
+  --kyro-input-bg: #ffffff;
+  --kyro-input-border: #e5e7eb;
+
   /* Elevation & Radius */
   --kyro-radius-tile: 32px;
   --kyro-radius-lg: 16px;
   --kyro-radius-xl: 48px;
   --kyro-shadow-tile: 0 10px 40px -10px rgba(0, 0, 0, 0.04);
 
+  /* Primary Brand Color */
+  --kyro-primary: #0b1222;
+  --kyro-primary-hover: #1a2332;
+
+  /* Success Color */
+  --kyro-success: #22c55e;
+  --kyro-success-bg: rgba(34, 197, 94, 0.1);
+
+  /* Danger Color */
+  --kyro-danger: #ef4444;
+  --kyro-danger-bg: rgba(239, 68, 68, 0.1);
+
+  /* Border Active */
+  --kyro-border-active: #0b1222;
+
+  /* Secondary Backgrounds */
+  --kyro-bg-secondary: #f3f4f6;
+
   /* Layout */
   --kyro-sidebar-width: 320px;
   --kyro-header-height: 80px;
 }
 
+:root.dark {
+  --kyro-bg: #050912;
+  --kyro-surface: #0b1222;
+  --kyro-surface-accent: #111a2e;
+  --kyro-sidebar-bg: #0b1222;
+  --kyro-sidebar-active: #ffffff;
+  --kyro-sidebar-text: #94a3b8;
+  --kyro-sidebar-text-active: #0b1222;
+  --kyro-sidebar-border: rgba(255, 255, 255, 0.05);
+
+  --kyro-text-primary: #ffffff;
+  --kyro-text-secondary: #94a3b8;
+  --kyro-text-muted: #64748b;
+
+  --kyro-border: #1a2332;
+  --kyro-input-bg: #111a2e;
+  --kyro-input-border: #1e293b;
+
+  --kyro-black: #ffffff;
+  --kyro-gray-50: #1a2332;
+  --kyro-gray-100: #1e293b;
+  --kyro-gray-200: #334155;
+
+  /* Primary Brand Color (dark) - Use sidebar accent for consistency */
+  --kyro-primary: var(--kyro-sidebar-active);
+  --kyro-primary-hover: var(--kyro-sidebar-text-active);
+
+  /* Success Color (dark) */
+  --kyro-success: #22c55e;
+  --kyro-success-bg: rgba(34, 197, 94, 0.15);
+
+  /* Danger Color (dark) */
+  --kyro-danger: #f87171;
+  --kyro-danger-bg: rgba(248, 113, 113, 0.15);
+
+  /* Border Active (dark) */
+  --kyro-border-active: #ffffff;
+
+  /* Secondary Backgrounds (dark) */
+  --kyro-bg-secondary: #111a2e;
+
+  color-scheme: dark;
+}
+
 @theme {
   --font-sans: "Serotiva Sans", ui-sans-serif, system-ui, sans-serif;
 
@@ -98,6 +172,18 @@
   --radius-xl: var(--kyro-radius-xl);
 
   --shadow-tile: var(--kyro-shadow-tile);
+
+  /* Drawer slide animation */
+  --animate-slide-in-from-right: slide-in-from-right 200ms ease-out;
+
+  @keyframes slide-in-from-right {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(0);
+    }
+  }
 }
 
 @layer base {
@@ -105,8 +191,20 @@
     font-family: var(--font-sans);
     font-size: 14px;
     line-height: 1.5;
-    color: #0b1222;
+    color: var(--kyro-text-primary);
     background: var(--kyro-bg);
+    transition:
+      background-color 300ms ease,
+      color 300ms ease;
+  }
+
+  a,
+  button,
+  [role="button"],
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"] {
+    cursor: pointer;
   }
 }
 
@@ -163,6 +261,12 @@
     color: var(--kyro-gray-500);
   }
 
+  .kyro-sidebar-divider {
+    height: 1px;
+    background: var(--kyro-sidebar-border);
+    margin: 12px 20px;
+  }
+
   .kyro-sidebar-item {
     display: flex;
     align-items: center;
@@ -235,12 +339,14 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    pointer-events: auto;
   }
 
   .kyro-admin-content {
     flex: 1;
     overflow-y: auto;
     padding: 24px;
+    pointer-events: auto;
   }
 
   /* Buttons — Monochrome */
@@ -250,7 +356,7 @@
     justify-content: center;
     gap: 6px;
     font-weight: 500;
-    border-radius: 6px;
+    border-radius: 9999px;
     cursor: pointer;
     transition: all 150ms ease;
     border: 1px solid transparent;
@@ -281,7 +387,7 @@
 
   .kyro-btn-primary {
     background: var(--kyro-black);
-    color: white;
+    color: var(--kyro-sidebar-text-active);
     border-color: var(--kyro-black);
   }
 
@@ -291,9 +397,9 @@
   }
 
   .kyro-btn-secondary {
-    background: white;
-    color: var(--kyro-gray-700);
-    border-color: var(--kyro-gray-200);
+    background: var(--kyro-surface);
+    color: var(--kyro-text-primary);
+    border-color: var(--kyro-border);
   }
 
   .kyro-btn-secondary:hover:not(:disabled) {
@@ -302,9 +408,9 @@
   }
 
   .kyro-btn-danger {
-    background: white;
-    color: var(--kyro-gray-900);
-    border-color: var(--kyro-gray-900);
+    background: var(--kyro-surface);
+    color: var(--kyro-text-primary);
+    border-color: var(--kyro-text-primary);
   }
 
   .kyro-btn-danger:hover:not(:disabled) {
@@ -319,20 +425,48 @@
 
   .kyro-btn-ghost:hover:not(:disabled) {
     background: var(--kyro-gray-100);
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
+  }
+
+  .kyro-btn-success {
+    background: #10b981;
+    color: white;
+    border-color: #10b981;
+  }
+
+  .kyro-btn-success:hover:not(:disabled) {
+    background: #059669;
+    border-color: #059669;
+  }
+
+  .kyro-btn-success:disabled {
+    background: var(--kyro-gray-300);
+    border-color: var(--kyro-gray-300);
+    color: var(--kyro-gray-500);
+  }
+
+  .kyro-btn-warning {
+    background: #f59e0b;
+    color: white;
+    border-color: #f59e0b;
+  }
+
+  .kyro-btn-warning:hover:not(:disabled) {
+    background: #d97706;
+    border-color: #d97706;
   }
 
   /* Cards & Tiles */
   .surface-tile {
     box-shadow: var(--kyro-shadow-tile);
-    border: 1px solid rgba(255, 255, 255, 0.8);
+    /* border: 1px solid rgba(255, 255, 255, 0.8); */
     padding: 24px;
     background: var(--kyro-surface);
     border-radius: var(--kyro-radius-tile);
   }
 
   .kyro-card {
-    border: 1px solid #eef2f5;
+    border: 1px solid var(--kyro-border);
     box-shadow: var(--kyro-shadow-tile);
     padding: 24px;
     background: var(--kyro-surface);
@@ -349,7 +483,7 @@
   .kyro-card-title {
     font-size: 24px;
     font-weight: 700;
-    color: #0b1222;
+    color: var(--kyro-text-primary);
     letter-spacing: -0.01em;
   }
 
@@ -373,7 +507,7 @@
   .kyro-list-title {
     font-size: 18px;
     font-weight: 600;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
   }
 
   .kyro-table {
@@ -382,7 +516,7 @@
     background: white;
     border-radius: 8px;
     overflow: hidden;
-    border: 1px solid var(--kyro-gray-200);
+    border: 1px solid var(--kyro-border);
   }
 
   .kyro-table th {
@@ -393,7 +527,7 @@
     letter-spacing: 0.03em;
     color: var(--kyro-gray-500);
     background: var(--kyro-gray-50);
-    border-bottom: 1px solid var(--kyro-gray-200);
+    border-bottom: 1px solid var(--kyro-border);
     text-align: left;
   }
 
@@ -401,7 +535,7 @@
     padding: 14px 16px;
     border-bottom: 1px solid var(--kyro-gray-100);
     font-size: 14px;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
   }
 
   .kyro-table tr:last-child td {
@@ -433,11 +567,11 @@
 
   .kyro-table-action:hover {
     background: var(--kyro-gray-100);
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
   }
 
   .kyro-table-action.danger:hover {
-    background: var(--kyro-gray-200);
+    background: var(--kyro-surface-accent);
     color: var(--kyro-black);
   }
 
@@ -457,7 +591,7 @@
   .kyro-empty-title {
     font-size: 14px;
     font-weight: 600;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
     margin-bottom: 4px;
   }
 
@@ -485,9 +619,9 @@
     justify-content: center;
     width: 36px;
     height: 36px;
-    border: 1px solid var(--kyro-gray-200);
-    background: white;
-    color: var(--kyro-gray-500);
+    border: 1px solid var(--kyro-border);
+    background: var(--kyro-surface);
+    color: var(--kyro-text-secondary);
     border-radius: 6px;
     cursor: pointer;
     transition: all 150ms ease;
@@ -496,13 +630,13 @@
 
   .kyro-detail-back:hover {
     background: var(--kyro-gray-50);
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
   }
 
   .kyro-detail-title {
     font-size: 18px;
     font-weight: 600;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
   }
 
   .kyro-detail-meta {
@@ -552,29 +686,29 @@
 
   .kyro-meta-value {
     font-size: 14px;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
   }
 
   /* Forms */
   .kyro-form {
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 12px;
   }
 
   .kyro-form-field {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 4px;
   }
 
   .kyro-form-label {
-    font-size: 13px;
+    font-size: 12px;
     font-weight: 500;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 3px;
   }
 
   .kyro-form-label-required {
@@ -584,14 +718,45 @@
 
   .kyro-form-input {
     width: 100%;
-    padding: 10px 12px;
-    font-size: 14px;
-    color: var(--kyro-gray-900);
-    background: white;
-    border: 1px solid var(--kyro-gray-200);
+    padding: 6px 10px;
+    font-size: 13px;
+    color: var(--kyro-text-primary);
+    background: var(--kyro-input-bg);
+    border: 1px solid var(--kyro-input-border);
     border-radius: 6px;
     transition: all 150ms ease;
     font-family: inherit;
+    pointer-events: auto !important;
+    position: relative;
+    z-index: 1;
+  }
+
+  .kyro-form-input:disabled {
+    pointer-events: none !important;
+    opacity: 0.5;
+  }
+
+  .kyro-form-input[disabled] {
+    pointer-events: none !important;
+    opacity: 0.5;
+  }
+
+  textarea.kyro-form-input,
+  textarea.kyro-form-textarea {
+    pointer-events: auto !important;
+    cursor: text;
+  }
+
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="number"],
+  input[type="search"],
+  input[type="url"],
+  input[type="tel"],
+  select.kyro-form-input {
+    pointer-events: auto !important;
+    cursor: text;
   }
 
   .kyro-form-input:hover {
@@ -601,7 +766,7 @@
   .kyro-form-input:focus {
     outline: none;
     border-color: var(--kyro-black);
-    box-shadow: 0 0 0 3px rgba(11, 18, 34, 0.08);
+    box-shadow: 0 0 0 3px var(--kyro-sidebar-border);
   }
 
   .kyro-form-input::placeholder {
@@ -644,7 +809,7 @@
 
   .kyro-form-checkbox-label {
     font-size: 14px;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
   }
 
   .kyro-form-radio-group {
@@ -673,24 +838,24 @@
   }
 
   .kyro-form-group {
-    border: 1px solid var(--kyro-gray-200);
+    border: 1px solid var(--kyro-border);
     border-radius: 8px;
     overflow: hidden;
   }
 
   .kyro-form-group-header {
     padding: 12px 16px;
-    background: var(--kyro-gray-50);
-    border-bottom: 1px solid var(--kyro-gray-200);
+    background: var(--kyro-surface-accent);
+    border-bottom: 1px solid var(--kyro-border);
   }
 
   .kyro-form-group-title {
     font-size: 13px;
     font-weight: 600;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
     padding: 12px 16px;
-    background: var(--kyro-gray-50);
-    border-bottom: 1px solid var(--kyro-gray-200);
+    background: var(--kyro-surface-accent);
+    border-bottom: 1px solid var(--kyro-border);
   }
 
   .kyro-form-group-fields {
@@ -734,7 +899,7 @@
   .kyro-form-color {
     width: 42px;
     height: 42px;
-    border: 1px solid var(--kyro-gray-200);
+    border: 1px solid var(--kyro-border);
     border-radius: 6px;
     cursor: pointer;
     padding: 2px;
@@ -760,7 +925,7 @@
 
   /* Relationship field */
   .kyro-form-relationship {
-    border: 1px solid var(--kyro-gray-200);
+    border: 1px solid var(--kyro-border);
     border-radius: 6px;
     cursor: pointer;
     transition: all 150ms ease;
@@ -775,8 +940,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: var(--kyro-gray-50);
-    border-bottom: 1px solid var(--kyro-gray-200);
+    background: var(--kyro-surface-accent);
+    border-bottom: 1px solid var(--kyro-border);
     border-radius: 5px 5px 0 0;
   }
 
@@ -791,8 +956,8 @@
   .kyro-form-relationship-badge {
     font-size: 10px;
     padding: 2px 6px;
-    background: var(--kyro-gray-200);
-    color: var(--kyro-gray-600);
+    background: var(--kyro-gray-100);
+    color: var(--kyro-text-secondary);
     border-radius: 3px;
     font-weight: 600;
   }
@@ -800,7 +965,7 @@
   .kyro-form-relationship-value {
     padding: 10px 12px;
     font-size: 14px;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
   }
 
   .kyro-form-relationship-empty {
@@ -809,69 +974,106 @@
     color: var(--kyro-gray-400);
   }
 
-  /* Array field */
+  /* Array field - more compact */
   .kyro-form-array {
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 6px;
   }
 
   .kyro-form-array-empty {
-    padding: 32px;
+    padding: 12px;
     text-align: center;
-    background: white;
-    border: 2px dashed var(--kyro-gray-200);
-    border-radius: 8px;
-    color: var(--kyro-gray-500);
-    font-size: 13px;
+    background: var(--kyro-surface);
+    border: 2px dashed var(--kyro-border);
+    border-radius: 6px;
+    color: var(--kyro-text-muted);
+    font-size: 12px;
   }
 
   .kyro-form-array-item {
-    background: white;
-    border: 1px solid var(--kyro-gray-200);
-    border-radius: 8px;
+    background: var(--kyro-surface);
+    border: 1px solid var(--kyro-border);
+    border-radius: 6px;
     overflow: hidden;
+    padding: 6px;
   }
 
   .kyro-form-array-item-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 10px 12px;
-    background: var(--kyro-gray-50);
-    border-bottom: 1px solid var(--kyro-gray-200);
+    padding: 4px 6px;
+    background: var(--kyro-surface-accent);
+    border-bottom: 1px solid var(--kyro-border);
   }
 
   .kyro-form-array-item-number {
-    font-size: 12px;
+    font-size: 10px;
     font-weight: 600;
     color: var(--kyro-gray-500);
+    background: var(--kyro-surface);
+    padding: 1px 4px;
+    border-radius: 3px;
   }
 
   .kyro-form-array-item-remove {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 24px;
-    height: 24px;
+    width: 18px;
+    height: 18px;
     border: none;
     background: transparent;
     color: var(--kyro-gray-400);
     cursor: pointer;
-    border-radius: 4px;
+    border-radius: 3px;
     transition: all 150ms ease;
   }
 
   .kyro-form-array-item-remove:hover {
-    background: var(--kyro-gray-200);
-    color: var(--kyro-black);
+    background: #fee2e2;
+    color: #dc2626;
   }
 
   .kyro-form-array-item-fields {
-    padding: 16px;
+    padding: 6px;
     display: flex;
     flex-direction: column;
-    gap: 12px;
+    gap: 6px;
+  }
+
+  /* Make sub-field labels more compact in arrays */
+  .kyro-form-array-item-fields .kyro-form-label {
+    font-size: 10px;
+    margin-bottom: 1px;
+  }
+
+  .kyro-form-array-item-fields .kyro-form-input {
+    padding: 4px 6px;
+    font-size: 11px;
+  }
+
+  /* Array item add button */
+  .kyro-form-array-add {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px 10px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--kyro-text-secondary);
+    background: var(--kyro-surface-accent);
+    border: 1px dashed var(--kyro-border);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 150ms ease;
+  }
+
+  .kyro-form-array-add:hover {
+    background: var(--kyro-surface);
+    border-color: var(--kyro-sidebar-active);
+    color: var(--kyro-sidebar-active);
   }
 
   /* Blocks field */
@@ -884,18 +1086,19 @@
   .kyro-form-blocks-empty {
     padding: 32px;
     text-align: center;
-    background: white;
-    border: 2px dashed var(--kyro-gray-200);
+    background: var(--kyro-surface);
+    border: 2px dashed var(--kyro-border);
     border-radius: 8px;
-    color: var(--kyro-gray-500);
+    color: var(--kyro-text-muted);
     font-size: 13px;
   }
 
   .kyro-form-block-item {
-    background: white;
-    border: 1px solid var(--kyro-gray-200);
+    background: var(--kyro-surface);
+    border: 1px solid var(--kyro-border);
     border-radius: 8px;
     overflow: hidden;
+    padding: 10px;
   }
 
   .kyro-form-block-item-header {
@@ -903,8 +1106,8 @@
     align-items: center;
     justify-content: space-between;
     padding: 10px 12px;
-    background: var(--kyro-gray-50);
-    border-bottom: 1px solid var(--kyro-gray-200);
+    background: var(--kyro-surface-accent);
+    border-bottom: 1px solid var(--kyro-border);
   }
 
   .kyro-form-block-item-type {
@@ -935,7 +1138,7 @@
 
   .kyro-form-block-item-move:hover,
   .kyro-form-block-item-remove:hover {
-    background: var(--kyro-gray-200);
+    background: var(--kyro-surface-accent);
     color: var(--kyro-black);
   }
 
@@ -973,7 +1176,7 @@
   }
 
   .kyro-form-tab {
-    border: 1px solid var(--kyro-gray-200);
+    border: 1px solid var(--kyro-border);
     border-radius: 8px;
     overflow: hidden;
   }
@@ -981,10 +1184,10 @@
   .kyro-form-tab-title {
     font-size: 13px;
     font-weight: 600;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
     padding: 10px 16px;
-    background: var(--kyro-gray-50);
-    border-bottom: 1px solid var(--kyro-gray-200);
+    background: var(--kyro-surface-accent);
+    border-bottom: 1px solid var(--kyro-border);
     margin: 0;
   }
 
@@ -997,7 +1200,7 @@
 
   /* Collapsible */
   .kyro-form-collapsible {
-    border: 1px solid var(--kyro-gray-200);
+    border: 1px solid var(--kyro-border);
     border-radius: 8px;
     overflow: hidden;
   }
@@ -1008,10 +1211,10 @@
     gap: 8px;
     width: 100%;
     padding: 12px 16px;
-    background: var(--kyro-gray-50);
+    background: var(--kyro-surface-accent);
     font-size: 13px;
     font-weight: 600;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
     border: none;
     cursor: pointer;
     text-align: left;
@@ -1040,23 +1243,23 @@
 
   /* Upload */
   .kyro-form-upload {
-    border: 2px dashed var(--kyro-gray-200);
+    border: 2px dashed var(--kyro-border);
     border-radius: 8px;
     padding: 32px;
     text-align: center;
     cursor: pointer;
     transition: all 150ms ease;
-    background: white;
+    background: var(--kyro-surface);
   }
 
   .kyro-form-upload:hover,
   .kyro-form-upload-dragging {
     border-color: var(--kyro-black);
-    background: var(--kyro-gray-50);
+    background: var(--kyro-surface-accent);
   }
 
   .kyro-form-upload-error {
-    border-color: var(--kyro-gray-900);
+    border-color: var(--kyro-black);
   }
 
   .kyro-form-upload-input {
@@ -1092,7 +1295,7 @@
     height: 64px;
     border-radius: 6px;
     object-fit: cover;
-    border: 1px solid var(--kyro-gray-200);
+    border: 1px solid var(--kyro-border);
   }
 
   .kyro-form-upload-info {
@@ -1105,7 +1308,7 @@
   .kyro-form-upload-filename {
     font-size: 13px;
     font-weight: 500;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
   }
 
   .kyro-form-upload-change {
@@ -1136,27 +1339,27 @@
 
   .kyro-badge-default {
     background: var(--kyro-gray-100);
-    color: var(--kyro-gray-600);
+    color: var(--kyro-text-secondary);
   }
 
   .kyro-badge-success {
     background: var(--kyro-gray-100);
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
   }
 
   .kyro-badge-warning {
     background: var(--kyro-gray-200);
-    color: var(--kyro-gray-800);
+    color: var(--kyro-text-primary);
   }
 
   .kyro-badge-danger {
     background: var(--kyro-gray-200);
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
   }
 
   .kyro-badge-info {
     background: var(--kyro-gray-100);
-    color: var(--kyro-gray-700);
+    color: var(--kyro-text-secondary);
   }
 
   /* Toast — Monochrome */
@@ -1169,11 +1372,12 @@
     gap: 12px;
     padding: 14px 18px;
     background: var(--kyro-black);
-    color: white;
+    color: var(--kyro-sidebar-text-active);
     border-radius: 8px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
     animation: toast-in 0.2s ease;
-    z-index: 1000;
+    z-index: 9999;
+    pointer-events: auto;
   }
 
   @keyframes toast-in {
@@ -1189,11 +1393,11 @@
   }
 
   .kyro-toast-success {
-    border-left: 4px solid var(--kyro-gray-300);
+    border-left: 4px solid var(--kyro-success);
   }
 
   .kyro-toast-error {
-    border-left: 4px solid white;
+    border-left: 4px solid #ef4444;
   }
 
   .kyro-toast-warning {
@@ -1212,7 +1416,7 @@
     height: 20px;
     border: none;
     background: transparent;
-    color: rgba(255, 255, 255, 0.5);
+    color: var(--kyro-text-muted);
     cursor: pointer;
     margin-left: 8px;
   }
@@ -1227,6 +1431,11 @@
     color: var(--kyro-black);
   }
 
+  /* Alias used by inline upload spinner */
+  .kyro-spin {
+    animation: spin 0.8s linear infinite;
+  }
+
   .kyro-spinner-sm {
     width: 14px;
     height: 14px;
@@ -1268,12 +1477,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 1000;
+    z-index: 9999;
     backdrop-filter: blur(4px);
+    pointer-events: auto;
   }
 
   .kyro-modal {
-    background: white;
+    background: var(--kyro-surface);
     border-radius: 10px;
     padding: 24px;
     max-width: 400px;
@@ -1297,12 +1507,12 @@
     margin: 0 0 8px;
     font-size: 18px;
     font-weight: 600;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
   }
 
   .kyro-modal p {
     margin: 0 0 16px;
-    color: var(--kyro-gray-600);
+    color: var(--kyro-text-secondary);
     font-size: 14px;
   }
 
@@ -1314,7 +1524,7 @@
 
   /* Searchable Relationship Modal */
   .kyro-relation-modal {
-    background: white;
+    background: var(--kyro-surface);
     border-radius: 12px;
     max-width: 520px;
     width: 100%;
@@ -1336,7 +1546,7 @@
   .kyro-relation-modal-header h3 {
     font-size: 16px;
     font-weight: 600;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
     margin: 0;
   }
 
@@ -1344,9 +1554,9 @@
     width: 100%;
     padding: 10px 12px;
     font-size: 14px;
-    color: var(--kyro-gray-900);
-    background: var(--kyro-gray-50);
-    border: 1px solid var(--kyro-gray-200);
+    color: var(--kyro-text-primary);
+    background: var(--kyro-surface-accent);
+    border: 1px solid var(--kyro-border);
     border-radius: 6px;
     transition: all 150ms ease;
     font-family: inherit;
@@ -1355,8 +1565,8 @@
   .kyro-relation-modal-search:focus {
     outline: none;
     border-color: var(--kyro-black);
-    box-shadow: 0 0 0 3px rgba(11, 18, 34, 0.08);
-    background: white;
+    box-shadow: 0 0 0 3px var(--kyro-sidebar-border);
+    background: var(--kyro-surface);
   }
 
   .kyro-relation-modal-search::placeholder {
@@ -1377,7 +1587,7 @@
     width: 100%;
     padding: 10px 16px;
     font-size: 14px;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
     background: transparent;
     border: none;
     border-radius: 6px;
@@ -1388,12 +1598,12 @@
   }
 
   .kyro-relation-modal-item:hover {
-    background: var(--kyro-gray-50);
+    background: var(--kyro-surface-accent);
   }
 
   .kyro-relation-modal-item.selected {
     background: var(--kyro-black);
-    color: white;
+    color: var(--kyro-sidebar-text-active);
   }
 
   .kyro-relation-modal-item-id {
@@ -1415,7 +1625,7 @@
 
   .kyro-relation-modal-footer {
     padding: 16px 24px;
-    border-top: 1px solid var(--kyro-gray-100);
+    border-top: 1px solid var(--kyro-border);
     display: flex;
     justify-content: flex-end;
     gap: 8px;
@@ -1432,7 +1642,7 @@
     width: 36px;
     height: 36px;
     border-radius: 6px;
-    border: 1px solid var(--kyro-gray-200);
+    border: 1px solid var(--kyro-border);
     cursor: pointer;
     padding: 0;
     overflow: hidden;
@@ -1474,7 +1684,7 @@
   .kyro-login-title {
     font-size: 24px;
     font-weight: 700;
-    color: var(--kyro-black);
+    color: var(--kyro-text-primary);
     margin: 0 0 8px;
     letter-spacing: -0.02em;
   }
@@ -1500,16 +1710,16 @@
   .kyro-login-form .kyro-form-group label {
     font-size: 13px;
     font-weight: 500;
-    color: var(--kyro-gray-900);
+    color: var(--kyro-text-primary);
   }
 
   .kyro-login-form .kyro-form-group input {
     width: 100%;
     padding: 10px 12px;
     font-size: 14px;
-    color: var(--kyro-gray-900);
-    background: white;
-    border: 1px solid var(--kyro-gray-200);
+    color: var(--kyro-text-primary);
+    background: var(--kyro-input-bg);
+    border: 1px solid var(--kyro-input-border);
     border-radius: 6px;
     transition: all 150ms ease;
     font-family: inherit;
@@ -1522,7 +1732,7 @@
   .kyro-login-form .kyro-form-group input:focus {
     outline: none;
     border-color: var(--kyro-black);
-    box-shadow: 0 0 0 3px rgba(11, 18, 34, 0.08);
+    box-shadow: 0 0 0 3px var(--kyro-sidebar-border);
   }
 
   .kyro-login-form .kyro-form-group input::placeholder {
@@ -1548,7 +1758,7 @@
   .kyro-login-link {
     background: none;
     border: none;
-    color: var(--kyro-black);
+    color: var(--kyro-text-primary);
     font-weight: 600;
     cursor: pointer;
     font-size: 14px;
@@ -1559,6 +1769,7 @@
 
   .kyro-login-link:hover {
     color: var(--kyro-black-hover);
+    text-decoration: none;
   }
 
   /* Sidebar User Info */
@@ -1592,6 +1803,220 @@
 
   .kyro-sidebar-logout:hover {
     color: var(--kyro-black) !important;
-    background: var(--kyro-gray-100);
+    background: var(--kyro-surface-accent);
+  }
+}
+
+/* ============================================================================
+   PORTABLE TEXT EDITOR
+   Basic styles for Portable Text Editor - handled by component inline styles
+   ============================================================================ */
+
+/* End of styles */
+
+.tiptap-editor-wrapper .ProseMirror {
+  outline: none;
+}
+
+.tiptap-editor-wrapper .ProseMirror > * + * {
+  margin-top: 0.75em;
+}
+
+/* NodeView wrapper isolation - prevents CSS Grid/Flexbox interference */
+.tiptap-editor-wrapper [data-node-view-wrapper],
+.tiptap-editor-wrapper [data-node-view-wrapper] * {
+  isolation: isolate;
+  position: relative;
+}
+
+/* Block node styles */
+.tiptap-editor-wrapper .tiptap-hero-block,
+.tiptap-editor-wrapper .tiptap-heading-block,
+.tiptap-editor-wrapper .tiptap-paragraph-block,
+.tiptap-editor-wrapper .tiptap-quote-block,
+.tiptap-editor-wrapper .tiptap-code-block,
+.tiptap-editor-wrapper .tiptap-image-block,
+.tiptap-editor-wrapper .tiptap-video-block,
+.tiptap-editor-wrapper .tiptap-divider-block,
+.tiptap-editor-wrapper .tiptap-button-block,
+.tiptap-editor-wrapper .tiptap-callout-block {
+  position: relative;
+  z-index: 1;
+}
+
+/* Layout blocks with proper isolation */
+.tiptap-editor-wrapper .tiptap-columns-block,
+.tiptap-editor-wrapper .tiptap-stack-block,
+.tiptap-editor-wrapper .tiptap-column-block,
+.tiptap-editor-wrapper .tiptap-group-block,
+.tiptap-editor-wrapper .tiptap-card-block,
+.tiptap-editor-wrapper .tiptap-repeater-block,
+.tiptap-editor-wrapper .tiptap-accordion-block {
+  position: relative;
+  z-index: 1;
+  isolation: isolate;
+}
+
+.tiptap-editor-wrapper .tiptap-columns-grid[data-node-view-content] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: start;
+  font-size: 0;
+}
+
+.tiptap-editor-wrapper .tiptap-columns-grid[data-node-view-content] > * {
+  font-size: 0.875rem;
+  min-width: 0;
+}
+
+.tiptap-editor-wrapper .tiptap-columns-grid--1[data-node-view-content] {
+  display: block;
+}
+
+.tiptap-editor-wrapper .tiptap-columns-grid--2[data-node-view-content] {
+  display: flex;
+}
+
+.tiptap-editor-wrapper .tiptap-columns-grid--3[data-node-view-content] {
+  display: flex;
+}
+
+.tiptap-editor-wrapper .tiptap-columns-grid--4[data-node-view-content] {
+  display: flex;
+}
+
+.tiptap-editor-wrapper .tiptap-columns-grid--5[data-node-view-content] {
+  display: flex;
+}
+
+.tiptap-editor-wrapper .tiptap-columns-grid--6[data-node-view-content] {
+  display: flex;
+}
+
+.tiptap-editor-wrapper .tiptap-column-block {
+  display: inline-block;
+  font-size: 0.875rem;
+  flex: 0 0 auto;
+  min-width: 0;
+  height: 100%;
+  vertical-align: top;
+}
+
+.tiptap-editor-wrapper .tiptap-column-content[data-node-view-content] {
+  display: block;
+  min-height: 84px;
+}
+
+.tiptap-editor-wrapper
+  .tiptap-column-content[data-node-view-content]
+  > *:first-child {
+  margin-top: 0;
+}
+
+.tiptap-editor-wrapper
+  .tiptap-column-content[data-node-view-content]
+  > *:last-child {
+  margin-bottom: 0;
+}
+
+.tiptap-editor-wrapper .tiptap-stack-block [data-node-view-content],
+.tiptap-editor-wrapper .tiptap-group-block [data-node-view-content],
+.tiptap-editor-wrapper .tiptap-card-block [data-node-view-content] {
+  display: contents;
+}
+
+.tiptap-editor-wrapper .tiptap-columns-block--1 .tiptap-column-block {
+  width: 100%;
+  flex-basis: 100%;
+}
+
+.tiptap-editor-wrapper
+  .tiptap-columns-block--1
+  .tiptap-columns-grid[data-node-view-content]
+  > * {
+  width: 100%;
+  flex: 0 0 100%;
+}
+
+.tiptap-editor-wrapper .tiptap-columns-block--2 .tiptap-column-block {
+  width: calc(50% - 0.375rem);
+  flex-basis: calc(50% - 0.375rem);
+}
+
+.tiptap-editor-wrapper
+  .tiptap-columns-block--2
+  .tiptap-columns-grid[data-node-view-content]
+  > * {
+  width: calc(50% - 0.375rem);
+  flex: 0 0 calc(50% - 0.375rem);
+}
+
+.tiptap-editor-wrapper .tiptap-columns-block--3 .tiptap-column-block {
+  width: calc(33.333% - 0.5rem);
+  flex-basis: calc(33.333% - 0.5rem);
+}
+
+.tiptap-editor-wrapper
+  .tiptap-columns-block--3
+  .tiptap-columns-grid[data-node-view-content]
+  > * {
+  width: calc(33.333% - 0.5rem);
+  flex: 0 0 calc(33.333% - 0.5rem);
+}
+
+.tiptap-editor-wrapper .tiptap-columns-block--4 .tiptap-column-block {
+  width: calc(25% - 0.5625rem);
+  flex-basis: calc(25% - 0.5625rem);
+}
+
+.tiptap-editor-wrapper
+  .tiptap-columns-block--4
+  .tiptap-columns-grid[data-node-view-content]
+  > * {
+  width: calc(25% - 0.5625rem);
+  flex: 0 0 calc(25% - 0.5625rem);
+}
+
+.tiptap-editor-wrapper .tiptap-columns-block--5 .tiptap-column-block {
+  width: calc(20% - 0.6rem);
+  flex-basis: calc(20% - 0.6rem);
+}
+
+.tiptap-editor-wrapper
+  .tiptap-columns-block--5
+  .tiptap-columns-grid[data-node-view-content]
+  > * {
+  width: calc(20% - 0.6rem);
+  flex: 0 0 calc(20% - 0.6rem);
+}
+
+.tiptap-editor-wrapper .tiptap-columns-block--6 .tiptap-column-block {
+  width: calc(16.666% - 0.625rem);
+  flex-basis: calc(16.666% - 0.625rem);
+}
+
+.tiptap-editor-wrapper
+  .tiptap-columns-block--6
+  .tiptap-columns-grid[data-node-view-content]
+  > * {
+  width: calc(16.666% - 0.625rem);
+  flex: 0 0 calc(16.666% - 0.625rem);
+}
+
+@media (max-width: 720px) {
+  .tiptap-editor-wrapper .tiptap-columns-grid[data-node-view-content] {
+    display: block !important;
   }
 }
+
+/* Drag handle visibility */
+.tiptap-editor-wrapper .group:hover .drag-handle,
+.tiptap-editor-wrapper .group:hover .tiptap-drag-handle {
+  opacity: 1;
+}
+
+/* Ensure NodeViews render correctly within ProseMirror */
+.tiptap-editor-wrapper .ProseMirror .node--component {
+  display: block;
+}