@svadmin/lite 0.16.10 → 0.17.0

package/dist/components/LitePrintableBill.svelte

@@ -36,11 +36,11 @@
   <div class="lite-bill-header">
     <div style="float: left;">
       <h3 style="margin: 0;">{title}</h3>
-      <span style="color: #64748b; font-size: 11px;">No: {billNumber}</span>
+      <span style="color: #4E5969; font-size: 11px;">No: {billNumber}</span>
     </div>
     <div style="float: right; text-align: right;">
       <strong>{companyName}</strong>
-      <div style="color: #64748b; font-size: 11px;">Date: {date}</div>
+      <div style="color: #4E5969; font-size: 11px;">Date: {date}</div>
     </div>
     <div style="clear: both;"></div>
   </div>
@@ -74,7 +74,7 @@
     <tfoot>
       <tr>
         <td colspan="4" style="text-align: right; font-weight: bold;">Grand Total:</td>
-        <td style="text-align: right; font-weight: bold; color: #2563eb;">¥{total.toFixed(2)}</td>
+        <td style="text-align: right; font-weight: bold; color: #165DFF;">¥{total.toFixed(2)}</td>
       </tr>
     </tfoot>
   </table>
@@ -89,18 +89,18 @@
 <style>
   .lite-bill-card {
     background: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     padding: 20px;
     margin-bottom: 16px;
   }
   .lite-bill-header {
-    border-bottom: 2px solid #3b82f6;
+    border-bottom: 2px solid #165DFF;
     padding-bottom: 12px;
     margin-bottom: 12px;
   }
   .lite-bill-customer {
-    background: #f8fafc;
+    background: #F7F8FA;
     padding: 8px 12px;
     border-radius: 4px;
     margin-bottom: 16px;
@@ -112,8 +112,8 @@
   }
   .lite-bill-notes {
     font-size: 12px;
-    color: #64748b;
-    border-top: 1px solid #e2e8f0;
+    color: #4E5969;
+    border-top: 1px solid #E5E6EB;
     padding-top: 8px;
   }
 </style>

package/dist/components/LiteShow.svelte

@@ -49,7 +49,7 @@
       {#each showFields as field, _i (_i)}
         {@const value = record[field.key]}
         <tr>
-          <td style="width:200px;font-weight:600;color:#64748b;vertical-align:top;">
+          <td style="width:200px;font-weight:600;color:#4E5969;vertical-align:top;">
             {field.label}
           </td>
           <td>

package/dist/components/LiteShowField.svelte

@@ -63,7 +63,7 @@
   <span>••••••••</span>
 {:else if field.type === "color" && value}
   <span style="display:inline-flex;align-items:center;">
-    <span style="display:inline-block;width:14px;height:14px;border-radius:3px;background:{toSafeText(value)};border:1px solid #cbd5e1;margin-right:6px;"></span>
+    <span style="display:inline-block;width:14px;height:14px;border-radius:3px;background:{toSafeText(value)};border:1px solid #E5E6EB;margin-right:6px;"></span>
     <span class="lite-font-mono">{toSafeText(value)}</span>
   </span>
 {:else if field.type === "url" && value}
@@ -87,7 +87,7 @@
     <span class="lite-badge">{tag}</span>
   {/each}
 {:else if field.type === "json" && value}
-  <pre style="margin:0;font-size:12px;background:#f8fafc;padding:12px;border-radius:6px;border:1px solid #e2e8f0;overflow-x:auto;">{typeof value === "string" ? value : JSON.stringify(value, null, 2)}</pre>
+  <pre style="margin:0;font-size:12px;background:#F7F8FA;padding:12px;border-radius:6px;border:1px solid #E5E6EB;overflow-x:auto;">{typeof value === "string" ? value : JSON.stringify(value, null, 2)}</pre>
 {:else if field.type === "select" && field.options}
   <span class={getStatusBadgeClass(value)}>{formatValue(value, field)}</span>
 {:else if field.type === "relation" && field.resource && value != null}

package/dist/components/LiteSignaturePad.svelte

@@ -47,7 +47,7 @@
 <style>
   .sv-lite-signature-card {
     display: block;
-    border: 1px solid #e2e8f0;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     padding: 12px;
     background-color: #ffffff;
@@ -56,19 +56,19 @@
   .sv-lite-sig-header {
     margin-bottom: 8px;
     font-size: 13px;
-    color: #0f172a;
+    color: #1D2129;
   }
   .sv-lite-sig-sub {
-    color: #64748b;
+    color: #4E5969;
     font-size: 11px;
     margin-left: 6px;
   }
   .sv-lite-sig-preview {
-    border: 2px dashed #cbd5e1;
+    border: 2px dashed #E5E6EB;
     border-radius: 4px;
     padding: 10px;
     text-align: center;
-    background-color: #f8fafc;
+    background-color: #F7F8FA;
     margin-bottom: 10px;
   }
   .sv-lite-sig-img {
@@ -77,12 +77,12 @@
     vertical-align: middle;
   }
   .sv-lite-sig-empty {
-    border: 2px dashed #cbd5e1;
+    border: 2px dashed #E5E6EB;
     border-radius: 4px;
     padding: 24px;
     text-align: center;
-    color: #94a3b8;
-    background-color: #f8fafc;
+    color: #86909C;
+    background-color: #F7F8FA;
     margin-bottom: 10px;
   }
   .sv-lite-sig-file {
@@ -92,7 +92,7 @@
   .sv-lite-sig-btn {
     padding: 4px 10px;
     font-size: 11px;
-    background-color: #4f46e5;
+    background-color: #165DFF;
     color: #ffffff;
     border: none;
     border-radius: 3px;

package/dist/components/LiteSplitPaneLayout.svelte

@@ -34,7 +34,7 @@
   .lite-split-layout {
     display: flex;
     background: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     margin-bottom: 16px;
     min-height: 300px;
@@ -56,7 +56,7 @@
     overflow-y: auto;
   }
   .lite-split-divider {
-    background: #e2e8f0;
+    background: #E5E6EB;
     width: 2px;
   }
   .lite-split-vertical .lite-split-divider {

package/dist/components/LiteSpreadsheetView.svelte

@@ -133,7 +133,7 @@
 <style>
   .sv-lite-sheet-container {
     display: block;
-    border: 1px solid #e2e8f0;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     padding: 12px;
     background-color: #ffffff;
@@ -143,7 +143,7 @@
   .sv-lite-sheet-header {
     margin-bottom: 10px;
     font-size: 13px;
-    color: #0f172a;
+    color: #1D2129;
   }
   .sv-lite-sheet-table {
     width: 100%;
@@ -151,22 +151,22 @@
     font-family: monospace;
   }
   .sv-lite-sheet-table th, .sv-lite-sheet-table td {
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     padding: 2px;
   }
   .sv-lite-sheet-th-num, .sv-lite-sheet-td-num {
-    background-color: #f1f5f9;
+    background-color: #F2F3F5;
     text-align: center;
     width: 32px;
-    color: #64748b;
+    color: #4E5969;
     font-weight: bold;
     font-size: 10px;
   }
   .sv-lite-sheet-th {
-    background-color: #f8fafc;
+    background-color: #F7F8FA;
     text-align: center;
     font-weight: 600;
-    color: #1e293b;
+    color: #1D2129;
     min-width: 80px;
   }
   .sv-lite-cell-input {
@@ -184,7 +184,7 @@
   }
   .sv-lite-sheet-save {
     padding: 5px 12px;
-    background-color: #4f46e5;
+    background-color: #165DFF;
     color: #ffffff;
     border: none;
     border-radius: 3px;

package/dist/components/LiteStepForm.svelte

@@ -83,7 +83,7 @@
   .lite-step-form-card {
     padding: 16px;
     background: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     margin-bottom: 16px;
   }
@@ -91,7 +91,7 @@
     display: flex;
     align-items: center;
     padding-bottom: 12px;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid #E5E6EB;
     margin-bottom: 16px;
     overflow-x: auto;
   }
@@ -99,14 +99,14 @@
     display: flex;
     align-items: center;
     font-size: 12px;
-    color: #64748b;
+    color: #4E5969;
   }
   .lite-step-item.lite-step-current {
-    color: #3b82f6;
+    color: #165DFF;
     font-weight: bold;
   }
   .lite-step-item.lite-step-completed {
-    color: #10b981;
+    color: #00B42A;
   }
   .lite-step-circle {
     display: inline-block;
@@ -115,21 +115,21 @@
     line-height: 20px;
     text-align: center;
     border-radius: 50%;
-    background: #f1f5f9;
+    background: #F2F3F5;
     margin-right: 6px;
     font-size: 11px;
   }
   .lite-step-current .lite-step-circle {
-    background: #3b82f6;
+    background: #165DFF;
     color: #ffffff;
   }
   .lite-step-completed .lite-step-circle {
-    background: #10b981;
+    background: #00B42A;
     color: #ffffff;
   }
   .lite-step-arrow {
     margin: 0 10px;
-    color: #cbd5e1;
+    color: #E5E6EB;
   }
   .lite-step-content {
     min-height: 100px;
@@ -139,6 +139,6 @@
     display: flex;
     align-items: center;
     padding-top: 12px;
-    border-top: 1px solid #e2e8f0;
+    border-top: 1px solid #E5E6EB;
   }
 </style>

package/dist/components/LiteTable.svelte

@@ -199,7 +199,7 @@
 
 {#if showBatch && records.length > 0}
   <div class="lite-batch-bar">
-    <span style="font-size: 13px; color: #64748b;">
+    <span style="font-size: 13px; color: #4E5969;">
       Select items above to perform batch actions
     </span>
     <button

package/dist/components/LiteTableSummary.svelte

@@ -65,7 +65,7 @@
                 {#if prefix[col.key]}{prefix[col.key]}{/if}{calculate(col.key, aggType)}{#if suffix[col.key]}{suffix[col.key]}{/if}
               </span>
             {:else}
-              <span style="color: #94a3b8;">—</span>
+              <span style="color: #86909C;">—</span>
             {/if}
           </td>
         {/each}
@@ -78,8 +78,8 @@
   .lite-table-summary-container {
     width: 100%;
     overflow-x: auto;
-    background: #f8fafc;
-    border-top: 2px solid #cbd5e1;
+    background: #F7F8FA;
+    border-top: 2px solid #E5E6EB;
   }
   .lite-summary-table {
     width: 100%;
@@ -88,6 +88,6 @@
   .lite-summary-table td {
     padding: 8px 12px;
     font-size: 12px;
-    color: #1e293b;
+    color: #1D2129;
   }
 </style>

package/dist/components/LiteTabs.svelte

@@ -30,7 +30,7 @@
   .lite-tabs {
     display: flex;
     flex-wrap: wrap;
-    border-bottom: 2px solid #e2e8f0;
+    border-bottom: 2px solid #E5E6EB;
     margin-bottom: 24px;
     padding-bottom: 0;
   }
@@ -39,19 +39,19 @@
     margin-right: 4px;
     font-size: 14px;
     font-weight: 500;
-    color: #64748b;
+    color: #4E5969;
     border-bottom: 2px solid transparent;
     margin-bottom: -2px;
     text-decoration: none;
     transition: color 0.15s ease, border-color 0.15s ease;
   }
   .lite-tab:hover {
-    color: #0f172a;
+    color: #1D2129;
     text-decoration: none;
   }
   .lite-tab.active {
-    color: #4f46e5;
-    border-bottom-color: #4f46e5;
+    color: #165DFF;
+    border-bottom-color: #165DFF;
     font-weight: 600;
   }
 </style>

package/dist/components/LiteTransfer.svelte

@@ -129,7 +129,7 @@
   }
   .lite-transfer-panel {
     flex: 1;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     background: #ffffff;
     min-height: 180px;
@@ -142,8 +142,8 @@
     justify-content: space-between;
     align-items: center;
     padding: 8px 12px;
-    background: #f8fafc;
-    border-bottom: 1px solid #e2e8f0;
+    background: #F7F8FA;
+    border-bottom: 1px solid #E5E6EB;
     font-size: 13px;
   }
   .lite-transfer-body {
@@ -160,7 +160,7 @@
     font-size: 13px;
   }
   .lite-transfer-item:hover {
-    background: #f1f5f9;
+    background: #F2F3F5;
   }
   .lite-transfer-item input {
     margin-right: 8px;
@@ -179,7 +179,7 @@
   .lite-transfer-empty {
     text-align: center;
     padding: 30px 10px;
-    color: #94a3b8;
+    color: #86909C;
     font-size: 12px;
   }
 </style>

package/dist/components/LiteTreeTable.svelte

@@ -69,7 +69,7 @@
         </tr>
       {:else}
         <tr>
-          <td colspan={columns.length} style="text-align: center; color: #94a3b8; padding: 24px;">
+          <td colspan={columns.length} style="text-align: center; color: #86909C; padding: 24px;">
             No tree data
           </td>
         </tr>

package/dist/components/LiteVersionDiffViewer.svelte

@@ -55,7 +55,7 @@
           <td>
             <strong>{fieldLabels[key] || key}</strong>
             {#if status !== 'unchanged'}
-              <span class="lite-badge lite-badge-{status}">[{status.toUpperCase()}]</span>
+              <span class="lite-badge lite-badge-{status}">[{status}]</span>
             {/if}
           </td>
           <td class="lite-diff-old">
@@ -83,14 +83,14 @@
 <style>
   .lite-diff-viewer {
     background: #ffffff;
-    border: 1px solid #cbd5e1;
+    border: 1px solid #E5E6EB;
     border-radius: 6px;
     margin-bottom: 16px;
   }
   .lite-diff-header {
     padding: 10px 12px;
-    background: #f8fafc;
-    border-bottom: 1px solid #e2e8f0;
+    background: #F7F8FA;
+    border-bottom: 1px solid #E5E6EB;
     font-size: 13px;
   }
   .lite-diff-table {
@@ -99,31 +99,31 @@
     font-size: 12px;
   }
   .lite-diff-table th {
-    background: #f1f5f9;
+    background: #F2F3F5;
     padding: 8px 12px;
     text-align: left;
   }
   .lite-diff-table td {
     padding: 8px 12px;
-    border-top: 1px solid #e2e8f0;
+    border-top: 1px solid #E5E6EB;
   }
   .lite-diff-added {
-    background: #ecfdf5;
+    background: #E8FFEA;
   }
   .lite-diff-removed {
-    background: #fef2f2;
+    background: #FFECE8;
   }
   .lite-diff-modified {
-    background: #fffbeb;
+    background: #FFF7E8;
   }
   .lite-diff-old del {
-    color: #ef4444;
+    color: #F53F3F;
   }
   .lite-diff-new ins {
-    color: #10b981;
+    color: #00B42A;
     text-decoration: none;
   }
   .lite-diff-new strong {
-    color: #f59e0b;
+    color: #FF7D00;
   }
 </style>

package/dist/components/LiteVirtualTable.svelte

@@ -42,7 +42,7 @@
       {/each}
       {#if items.length === 0}
         <tr>
-          <td colspan={columns.length} style="text-align: center; color: #94a3b8; padding: 24px;">
+          <td colspan={columns.length} style="text-align: center; color: #86909C; padding: 24px;">
             No records to display
           </td>
         </tr>

package/dist/components/advanced/LiteAutoSaveIndicator.svelte

@@ -12,9 +12,9 @@
   let { status = 'idle', message }: Props = $props();
 
   const statusConfig: Record<NonNullable<Props['status']>, { icon: string; color: string; text: string }> = {
-    idle: { icon: '☁', color: '#64748b', text: 'All changes saved' },
-    saved: { icon: '✓', color: '#10b981', text: 'Saved' },
-    error: { icon: '✕', color: '#ef4444', text: 'Save failed' },
+    idle: { icon: '☁', color: '#4E5969', text: 'All changes saved' },
+    saved: { icon: '✓', color: '#00B42A', text: 'Saved' },
+    error: { icon: '✕', color: '#F53F3F', text: 'Save failed' },
   };
 
   const cfg = $derived(statusConfig[status] ?? statusConfig['idle']);

package/dist/components/advanced/LiteDraggableHeader.svelte

@@ -18,9 +18,9 @@
 
 <tr>
   {#each fields as field, _i (_i)}
-    <th style="padding: 10px 12px; text-align: left; font-weight: 600; font-size: 13px; color: #475569; white-space: nowrap;">
+    <th style="padding: 10px 12px; text-align: left; font-weight: 600; font-size: 13px; color: #4E5969; white-space: nowrap;">
       {#if currentSort === field.key}
-        <a href="?sort={field.key}&order={currentOrder === 'asc' ? 'desc' : 'asc'}" style="color: #0f172a; text-decoration: none;">
+        <a href="?sort={field.key}&order={currentOrder === 'asc' ? 'desc' : 'asc'}" style="color: #1D2129; text-decoration: none;">
           {field.label} {currentOrder === 'asc' ? '↑' : '↓'}
         </a>
       {:else}

package/dist/components/advanced/LiteInlineEdit.svelte

@@ -25,7 +25,7 @@
   {#if editUrl}
     <a
       href={editUrl}
-      style="font-size: 11px; color: #6366f1; text-decoration: none;"
+      style="font-size: 11px; color: #165DFF; text-decoration: none;"
       title="Edit {field.label}"
     >✎</a>
   {/if}

package/dist/components/advanced/LiteToast.svelte

@@ -14,9 +14,9 @@
   let { message, type = 'info', dismissUrl }: Props = $props();
 
   const colors: Record<NonNullable<Props['type']>, { bg: string; border: string; text: string }> = {
-    success: { bg: '#ecfdf5', border: '#a7f3d0', text: '#065f46' },
-    error: { bg: '#fef2f2', border: '#fecaca', text: '#991b1b' },
-    warning: { bg: '#fffbeb', border: '#fed7aa', text: '#92400e' },
+    success: { bg: '#E8FFEA', border: '#E8FFEA', text: '#009A29' },
+    error: { bg: '#FFECE8', border: '#FDCDC5', text: '#CB272D' },
+    warning: { bg: '#FFF7E8', border: '#fed7aa', text: '#D25F00' },
     info: { bg: '#eff6ff', border: '#bfdbfe', text: '#1e40af' },
   };
 

package/dist/components/advanced/LiteUndoableNotification.svelte

@@ -15,7 +15,7 @@
 
 <div
   role="alert"
-  style="padding: 12px 16px; background: #fefce8; border: 1px solid #fde68a; color: #713f12; border-radius: 6px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 14px;"
+  style="padding: 12px 16px; background: #FFF7E8; border: 1px solid #FFE4BA; color: #713f12; border-radius: 6px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 14px;"
 >
   <span>{message}</span>
   <a

package/dist/components/fields/LiteDateRangeField.svelte

@@ -130,7 +130,7 @@
         placeholder={i18n.t('common.startDate')}
         {...field?.required ? { required: true } : {}}
       />
-      <span style="margin: 0 8px; color: #64748b;">{separator}</span>
+      <span style="margin: 0 8px; color: #4E5969;">{separator}</span>
       <input
         type="date"
         lang={i18n.locale}

package/dist/components/fields/LiteJsonField.svelte

@@ -23,7 +23,7 @@
 </script>
 
 {#if mode === 'show'}
-  <pre style="padding: 12px; background: #1e293b; color: #f8fafc; border-radius: 4px; overflow-x: auto; font-size: 13px;">{getJsonString(value)}</pre>
+  <pre style="padding: 12px; background: #1D2129; color: #F7F8FA; border-radius: 4px; overflow-x: auto; font-size: 13px;">{getJsonString(value)}</pre>
 {:else}
   <div>
     <textarea

package/dist/components/fields/LiteMarkdownField.svelte

@@ -13,7 +13,7 @@
 </script>
 
 {#if mode === 'show'}
-  <pre style="white-space: pre-wrap; padding: 12px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 4px;">{String(value ?? '—')}</pre>
+  <pre style="white-space: pre-wrap; padding: 12px; background: #F7F8FA; border: 1px solid #e5e7eb; border-radius: 4px;">{String(value ?? '—')}</pre>
 {:else}
   <div>
     <textarea

package/dist/components/fields/LiteRichTextField.svelte

@@ -16,16 +16,16 @@
 
 {#if mode === 'show'}
   <!-- Lite mode intentionally renders rich content as text to keep SSR output safe without a sanitizer dependency. -->
-  <div style="padding: 16px; border: 1px solid #e2e8f0; border-radius: 6px; max-height: 500px; overflow-y: auto; background: #fff; white-space: pre-wrap;" class="prose">
+  <div style="padding: 16px; border: 1px solid #E5E6EB; border-radius: 6px; max-height: 500px; overflow-y: auto; background: #fff; white-space: pre-wrap;" class="prose">
     {displayValue}
   </div>
 {:else}
   <div class="lite-markdown-editor">
-    <div class="lite-inline-lg lite-flex-wrap" style="padding: 8px 12px; border: 1px solid #cbd5e1; border-bottom: none; border-radius: 6px 6px 0 0; background: #f8fafc; color: #64748b; font-size: 12px; font-weight: 500;">
+    <div class="lite-inline-lg lite-flex-wrap" style="padding: 8px 12px; border: 1px solid #E5E6EB; border-bottom: none; border-radius: 6px 6px 0 0; background: #F7F8FA; color: #4E5969; font-size: 12px; font-weight: 500;">
       <span>Markdown is supported</span>
-      <span style="color: #94a3b8;">**bold**</span>
-      <span style="color: #94a3b8; font-style: italic;">*italic*</span>
-      <span style="color: #94a3b8;"># heading</span>
+      <span style="color: #86909C;">**bold**</span>
+      <span style="color: #86909C; font-style: italic;">*italic*</span>
+      <span style="color: #86909C;"># heading</span>
     </div>
     <textarea
       name={field.key}

package/dist/components/layout/LiteAuthenticated.svelte

@@ -16,8 +16,8 @@
     {@render children()}
   {/if}
 {:else}
-  <div style="padding: 40px; text-align: center; color: #475569;">
+  <div style="padding: 40px; text-align: center; color: #4E5969;">
     <h2>Authentication Required</h2>
-    <p>Please <a href={loginUrl} style="color: #2563eb;">login here</a> to access this page.</p>
+    <p>Please <a href={loginUrl} style="color: #165DFF;">login here</a> to access this page.</p>
   </div>
 {/if}

package/dist/components/layout/LiteCanAccess.svelte

@@ -19,7 +19,7 @@
   {#if fallback}
     {@render fallback()}
   {:else}
-    <div style="padding: 24px; background: #fff1f2; color: #be123c; border-radius: 6px; border: 1px solid #fecdd3;">
+    <div style="padding: 24px; background: #FFECE8; color: #be123c; border-radius: 6px; border: 1px solid #fecdd3;">
       <h3>Access Denied</h3>
       <p>You do not have permission to view this content.</p>
     </div>

package/dist/components/layout/LiteErrorComponent.svelte

@@ -19,16 +19,16 @@
 
 <div style="min-height: 50vh; display: flex; align-items: center; justify-content: center; padding: 20px;">
   <div class="lite-card" style="max-width: 480px; width: 100%; text-align: center; padding: 40px;">
-    <AlertTriangle style="width: 48px; height: 48px; color: #ef4444; margin: 0 auto 16px;" />
+    <AlertTriangle style="width: 48px; height: 48px; color: #F53F3F; margin: 0 auto 16px;" />
     
-    <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">
+    <h1 style="font-size: 24px; font-weight: 600; color: #1D2129; margin: 0 0 8px;">
       {#if code}
-        <span style="color: #ef4444; margin-right: 8px;">{code}</span>
+        <span style="color: #F53F3F; margin-right: 8px;">{code}</span>
       {/if}
       {title}
     </h1>
     
-    <p style="color: #64748b; font-size: 15px; margin: 0 0 24px; line-height: 1.5;">{message}</p>
+    <p style="color: #4E5969; font-size: 15px; margin: 0 0 24px; line-height: 1.5;">{message}</p>
     
     <a href={homeUrl} class="lite-btn lite-btn-primary" style="display: inline-block;">
       {t('common.returnHome') || 'Return to Home'}

package/dist/components/layout/LiteHeader.svelte

@@ -9,8 +9,8 @@
   let { title = '', children }: Props = $props();
 </script>
 
-<header class="lite-header" style="padding: 16px 24px; background: white; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
-  <h2 style="margin: 0; font-size: 18px; font-weight: 600; color: #0f172a;">{title}</h2>
+<header class="lite-header" style="padding: 16px 24px; background: white; border-bottom: 1px solid #E5E6EB; display: flex; justify-content: space-between; align-items: center;">
+  <h2 style="margin: 0; font-size: 18px; font-weight: 600; color: #1D2129;">{title}</h2>
   <div class="lite-inline-lg" style="align-items: center;">
     {#if children}
       {@render children()}