v1.2.7: Phase 0 — CSS foundation + icons + snackbar

style.css: +93 lines — sidebar, view, tabs, toolbar, field (label on top),
  skeleton, snackbar, combobox classes. Font scale 13/14/16.
icons.js (NEW): 10 inline-SVG Lucide icons (play, edit, trash, check, x,
  chevronDown, search, plus, rotateCw, cloud). stroke=currentColor.
snackbar.js (NEW): showSnackbar(msg, type). bottom-right, 4s/8s auto-hide,
  stacking max 4, accessibility role=status aria-live=polite.
index.html: include icons.js before utils.js

site/static/style.css

@@ -150,3 +150,96 @@ tr:hover td {
     color: #fff;
     border-color: var(--destructive);
 }
+
+/* === Phase 0: Redesign Foundation === */
+
+/* ── Sidebar ── */
+.sidebar {
+    position: fixed; top: 0; left: 0; bottom: 0;
+    width: 192px; background: var(--background);
+    border-right: 1px solid var(--brand-gray);
+    display: flex; flex-direction: column; z-index: 100;
+    transition: width .2s;
+}
+.sidebar.collapsed { width: 56px; }
+.sidebar-top {
+    height: 80px; border-top: 4px solid var(--brand-primary);
+    display: flex; align-items: center; padding: 0 16px;
+}
+.sidebar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
+.sidebar-item {
+    display: flex; align-items: center; gap: 12px;
+    padding: 10px 16px; font-size: 14px; color: var(--foreground);
+    cursor: pointer; transition: background .15s;
+    border: none; background: none; width: 100%; text-align: left;
+}
+.sidebar-item:hover { background: var(--brand-grey-light); }
+.sidebar-item.active { background: #dbeafe; font-weight: 600; }
+.sidebar-item svg { width: 20px; height: 20px; flex-shrink: 0; }
+.sidebar-bottom { padding: 8px 0; border-top: 1px solid var(--brand-gray); }
+
+/* ── Views ── */
+.view { margin-left: 192px; padding: 16px 20px; min-height: 100vh; }
+.view.hidden { display: none; }
+.view-header { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
+
+/* ── Tabs ── */
+.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--brand-gray); margin-bottom: 12px; }
+.tab {
+    padding: 8px 16px; font-size: 14px; color: var(--muted);
+    cursor: pointer; border: none; background: none;
+    border-bottom: 2px solid transparent; margin-bottom: -2px;
+    transition: color .15s, border-color .15s;
+}
+.tab:hover { color: var(--foreground); }
+.tab.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); font-weight: 600; }
+
+/* ── Toolbar ── */
+.toolbar { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--brand-gray); border-bottom: 1px solid var(--brand-gray); margin: 8px 0; }
+
+/* ── Field (label on top) ── */
+.field { margin-bottom: 10px; }
+.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; color: var(--foreground); }
+.field label.required::after { content: " *"; color: var(--destructive); }
+.field input, .field select, .field textarea {
+    width: 100%; padding: 8px 10px; font-size: 14px;
+    border: 1px solid var(--brand-gray); border-radius: var(--radius-sm);
+    background: var(--background);
+}
+.field input:focus, .field select:focus {
+    outline: none; border-color: var(--brand-primary);
+    box-shadow: 0 0 0 2px rgba(37,99,235,.15);
+}
+
+/* ── Skeleton ── */
+.skeleton {
+    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
+    background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite;
+    border-radius: 4px;
+}
+@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+.skeleton-line { height: 14px; margin-bottom: 8px; }
+.skeleton-line:last-child { width: 60%; }
+
+/* ── Snackbar ── */
+.snackbar-container { position: fixed; bottom: 16px; right: 16px; z-index: 10001; display: flex; flex-direction: column; gap: 8px; }
+.snackbar {
+    padding: 10px 16px; border-radius: var(--radius-sm); font-size: 13px;
+    color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2);
+    animation: snackbar-in .3s ease; max-width: 360px;
+}
+.snackbar.info { background: var(--brand-primary); }
+.snackbar.success { background: var(--green); }
+.snackbar.error { background: var(--destructive); }
+@keyframes snackbar-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+
+/* ── Combobox ── */
+.combobox { position: relative; }
+.combobox-input { width: 100%; padding: 6px 10px; font-size: 13px; border: 1px solid var(--brand-gray); border-radius: var(--radius-sm); }
+.combobox-input:focus { outline: none; border-color: var(--brand-primary); }
+.combobox-list { position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: var(--background); border: 1px solid var(--brand-gray); border-radius: 0 0 var(--radius-sm) var(--radius-sm); z-index: 10; }
+.combobox-item { padding: 6px 10px; font-size: 13px; cursor: pointer; }
+.combobox-item:hover { background: var(--brand-grey-light); }
+
+/* ── Body for sidebar ── */
+body.has-sidebar { padding-left: 0; }