sanjang 0.3.0

package/dashboard/style.css

@@ -0,0 +1,2112 @@
+/* ============================================================
+   산장 (Sanjang) — SMPLY Local Dev Tool
+   ============================================================
+   Aesthetic: Industrial-craft — precise, purposeful, clean.
+   셀파스가 세팅해주는 안전한 산장에서 바이브코딩.
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&display=swap');
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+}
+
+:root {
+  --bg-body:      #0c0e14;
+  --bg-card:      #12151e;
+  --bg-header:    #0c0e14;
+  --bg-elevated:  #181c28;
+  --bg-inset:     #0a0c11;
+  --border:       #1c2030;
+  --border-subtle: #161a26;
+  --text-primary: #e4e8f0;
+  --text-secondary: #6b7394;
+  --text-muted:   #4a5170;
+
+  --accent:       #6366f1;
+  --accent-hover: #5254cc;
+  --accent-glow:  rgba(99, 102, 241, 0.12);
+  --green:        #22c55e;
+  --green-dim:    rgba(34, 197, 94, 0.12);
+  --blue:         #3b82f6;
+  --blue-dim:     rgba(59, 130, 246, 0.10);
+  --amber:        #f59e0b;
+  --amber-dim:    rgba(245, 158, 11, 0.12);
+  --red:          #ef4444;
+  --red-dim:      rgba(239, 68, 68, 0.10);
+
+  --btn-primary:  var(--accent);
+  --btn-primary-hover: var(--accent-hover);
+  --btn-danger:   var(--red);
+  --btn-ghost:    var(--bg-elevated);
+  --btn-ghost-hover: #222738;
+
+  --status-stopped-bg:   var(--bg-elevated);
+  --status-stopped-fg:   var(--text-muted);
+  --status-starting-bg:  var(--blue-dim);
+  --status-starting-fg:  var(--blue);
+  --status-running-bg:   var(--green-dim);
+  --status-running-fg:   var(--green);
+  --status-error-bg:     var(--red-dim);
+  --status-error-fg:     var(--red);
+
+  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
+
+  --radius: 12px;
+  --radius-sm: 8px;
+  --radius-xs: 6px;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  background: var(--bg-body);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
+  min-height: 100vh;
+  /* Subtle noise texture */
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
+}
+
+/* ============================================================
+   Header
+   ============================================================ */
+
+header {
+  background: var(--bg-header);
+  border-bottom: 1px solid var(--border);
+  padding: 0 32px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+}
+
+header h1 {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+header h1::before {
+  content: '⛰';
+  display: inline-block;
+  font-size: 18px;
+  flex-shrink: 0;
+  filter: saturate(0.7);
+}
+
+/* ============================================================
+   Buttons
+   ============================================================ */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 9px 16px;
+  border-radius: var(--radius-xs);
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.4;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  min-height: 36px;
+}
+
+.btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.btn:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+.btn-primary {
+  background: var(--btn-primary);
+  color: #fff;
+  box-shadow: 0 1px 2px rgba(99, 102, 241, 0.3);
+}
+.btn-primary:hover:not(:disabled) {
+  background: var(--btn-primary-hover);
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
+}
+
+.btn-danger {
+  background: var(--btn-danger);
+  color: #fff;
+}
+.btn-danger:hover:not(:disabled) {
+  background: #dc2626;
+}
+
+.btn-danger-ghost {
+  background: transparent;
+  color: var(--red);
+  border: 1px solid transparent;
+}
+.btn-danger-ghost:hover:not(:disabled) {
+  background: rgba(239, 68, 68, 0.1);
+  border-color: var(--red);
+}
+
+.btn-ghost {
+  background: var(--btn-ghost);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+}
+.btn-ghost:hover:not(:disabled) {
+  background: var(--btn-ghost-hover);
+  color: var(--text-primary);
+  border-color: #2a3040;
+}
+
+.btn-sm {
+  padding: 5px 12px;
+  font-size: 12px;
+}
+
+.btn-xs {
+  padding: 3px 10px;
+  font-size: 11px;
+  font-weight: 500;
+  border-radius: var(--radius-xs);
+}
+
+.btn-accent {
+  background: var(--accent);
+  color: #fff;
+  box-shadow: 0 1px 2px rgba(99, 102, 241, 0.3);
+}
+.btn-accent:hover:not(:disabled) {
+  background: var(--accent-hover);
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
+}
+
+.btn-ghost-danger {
+  background: transparent;
+  color: var(--text-muted);
+  border: 1px solid var(--border);
+}
+.btn-ghost-danger:hover:not(:disabled) {
+  color: var(--red);
+  border-color: rgba(239, 68, 68, 0.3);
+  background: var(--red-dim);
+}
+
+/* ============================================================
+   Grid
+   ============================================================ */
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(480px, 560px));
+  gap: 24px;
+  padding: 36px 48px;
+  max-width: 1200px;
+  margin: 0 auto;
+  justify-content: center;
+}
+
+/* ============================================================
+   Empty State
+   ============================================================ */
+
+#empty-state {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 60px);
+  gap: 16px;
+  color: var(--text-secondary);
+}
+
+#empty-state.visible {
+  display: flex;
+}
+
+#empty-state .empty-icon {
+  font-size: 56px;
+  opacity: 0.15;
+  filter: grayscale(1);
+}
+
+#empty-state p {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+#empty-state .empty-hint {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+/* ============================================================
+   Card
+   ============================================================ */
+
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  position: relative;
+  z-index: 0;
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 24px;
+  right: 24px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.3), transparent);
+}
+
+.card:hover {
+  border-color: #262a3a;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
+}
+
+.card-header {
+  padding: 22px 24px 14px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid var(--border-subtle);
+  position: relative;
+  z-index: 1;
+}
+
+.card-header-left {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+}
+
+.card-header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.card-header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.card-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: -0.02em;
+}
+
+.card-branch {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Status badge */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.badge::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.badge-stopped  { background: var(--status-stopped-bg);  color: var(--status-stopped-fg); }
+.badge-starting { background: var(--status-starting-bg); color: var(--status-starting-fg); }
+.badge-running  { background: var(--status-running-bg);  color: var(--status-running-fg); }
+.badge-error    { background: var(--status-error-bg);    color: var(--status-error-fg); }
+
+.badge-starting::before {
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.2; }
+}
+
+/* Card body — the main content area */
+.card-body {
+  padding: 16px 24px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+  position: relative;
+  z-index: 1;
+}
+
+/* URL link */
+.card-urls {
+  padding: 0;
+}
+
+.card-url-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--blue);
+  text-decoration: none;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--font-mono);
+  padding: 7px 14px;
+  border-radius: var(--radius-xs);
+  background: var(--blue-dim);
+  transition: all 0.15s;
+  min-height: 34px;
+}
+.card-url-link:hover {
+  background: rgba(59, 130, 246, 0.18);
+  color: #60a5fa;
+}
+
+/* Error hint */
+.card-error-hint {
+  font-size: 12px;
+  color: var(--red);
+  padding: 8px 12px;
+  background: var(--red-dim);
+  border-radius: var(--radius-xs);
+  border-left: 3px solid var(--red);
+}
+
+/* Changes badge */
+.card-changes { min-height: 0; }
+
+.changes-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  background: var(--amber-dim);
+  color: var(--amber);
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.changes-badge:hover { background: rgba(245, 158, 11, 0.2); }
+
+.changes-badge::before {
+  content: '';
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+/* Main actions (변경 내역 + 보내기) */
+.card-actions-main {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+.card-actions-main .btn {
+  padding: 12px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  min-height: 44px;
+  border-radius: var(--radius-sm);
+}
+
+/* Secondary actions — icon grid */
+.card-actions-sub {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 6px;
+  padding-top: 14px;
+  margin-top: 4px;
+  border-top: 1px solid var(--border-subtle);
+}
+
+.btn-sub {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 4px;
+  font-size: 10px;
+  font-weight: 500;
+  color: var(--text-muted);
+  background: var(--bg-inset);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.15s;
+  font-family: var(--font-sans);
+  line-height: 1.2;
+  min-height: 0;
+}
+
+.btn-sub:hover {
+  color: var(--text-secondary);
+  background: var(--bg-elevated);
+  border-color: var(--border);
+}
+
+.btn-sub:active {
+  transform: scale(0.96);
+}
+
+.btn-sub-danger:hover {
+  color: var(--red);
+  background: var(--red-dim);
+  border-color: rgba(239, 68, 68, 0.2);
+}
+
+/* Card footer */
+.card-footer {
+  border-top: 1px solid var(--border-subtle);
+}
+
+/* ============================================================
+   Log panel
+   ============================================================ */
+
+.log-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 24px;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  user-select: none;
+  transition: color 0.15s;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.log-toggle:hover {
+  color: var(--text-secondary);
+}
+
+.log-toggle-arrow {
+  font-size: 10px;
+  transition: transform 0.2s;
+}
+
+.log-toggle.open .log-toggle-arrow {
+  transform: rotate(180deg);
+}
+
+.log-panel {
+  display: none;
+  border-top: 1px solid var(--border-subtle);
+  background: var(--bg-inset);
+  max-height: 220px;
+  overflow-y: auto;
+  padding: 12px 16px;
+}
+
+.log-panel.open {
+  display: block;
+}
+
+.log-panel pre {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: pre-wrap;
+  word-break: break-all;
+  line-height: 1.7;
+}
+
+.log-line-be { color: #818cf8; }
+.log-line-fe { color: #34d399; }
+.log-line-err { color: var(--red); }
+
+/* Scrollbar */
+.log-panel::-webkit-scrollbar { width: 4px; }
+.log-panel::-webkit-scrollbar-track { background: transparent; }
+.log-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+
+/* ============================================================
+   Diagnostics panel
+   ============================================================ */
+
+.diag-panel {
+  border-top: 1px solid var(--border-subtle);
+  padding: 12px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.diag-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 2px;
+}
+
+.diag-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.diag-icon {
+  flex-shrink: 0;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.diag-text {
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.diag-text strong {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.diag-guide {
+  margin-top: 4px;
+  padding: 6px 10px;
+  background: var(--bg-input);
+  border-radius: 4px;
+  font-size: 12px;
+  color: var(--text-primary);
+  line-height: 1.5;
+}
+
+/* ============================================================
+   Modal
+   ============================================================ */
+
+.modal-backdrop {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
+  z-index: 200;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+
+.modal-backdrop.open {
+  display: flex;
+}
+
+.modal {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  width: 100%;
+  max-width: 480px;
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.03);
+  animation: modalIn 0.15s ease;
+}
+
+@keyframes modalIn {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.modal h2 {
+  font-size: 17px;
+  font-weight: 600;
+  color: var(--text-primary);
+  letter-spacing: -0.01em;
+}
+
+/* Form elements */
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.form-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  letter-spacing: 0.01em;
+}
+
+.form-input,
+.form-select {
+  background: var(--bg-inset);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
+  padding: 9px 14px;
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  width: 100%;
+}
+
+.form-input:focus,
+.form-select:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-glow);
+}
+
+.form-input::placeholder {
+  color: var(--text-muted);
+}
+
+.form-select option {
+  background: var(--bg-body);
+}
+
+.form-hint {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 4px;
+}
+
+/* Snapshot list */
+.snap-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.snap-list::-webkit-scrollbar { width: 4px; }
+.snap-list::-webkit-scrollbar-track { background: transparent; }
+.snap-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+
+.snap-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 9px 14px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-xs);
+  gap: 10px;
+  transition: border-color 0.15s;
+}
+
+.snap-item:hover {
+  border-color: var(--border);
+}
+
+.snap-label {
+  font-size: 12px;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.snap-empty {
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 12px;
+  padding: 20px;
+}
+
+.snap-save-row {
+  display: flex;
+  gap: 8px;
+}
+
+.snap-save-row .form-input {
+  flex: 1;
+}
+
+/* ============================================================
+   Toast
+   ============================================================ */
+
+#toast-container {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 300;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.toast {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
+  padding: 10px 16px;
+  font-size: 13px;
+  color: var(--text-primary);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  animation: toastIn 0.2s ease;
+  max-width: 320px;
+}
+
+.toast.toast-error {
+  border-color: rgba(239, 68, 68, 0.3);
+  color: var(--red);
+}
+
+.toast.toast-success {
+  border-color: rgba(34, 197, 94, 0.3);
+  color: var(--green);
+}
+
+@keyframes toastIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ============================================================
+   Changes badge & modal
+   ============================================================ */
+
+.changes-file-list {
+  max-height: 340px;
+  overflow-y: auto;
+  margin: 4px 0;
+}
+
+.changes-file-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border-subtle);
+  font-size: 13px;
+  transition: background 0.1s;
+}
+.changes-file-item:hover { background: rgba(255,255,255,0.02); }
+.changes-file-item input[type="checkbox"] { flex-shrink: 0; accent-color: var(--accent); }
+
+.changes-status {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 7px;
+  border-radius: var(--radius-xs);
+  flex-shrink: 0;
+  letter-spacing: 0.02em;
+}
+.changes-status-mod { background: var(--blue-dim); color: var(--blue); }
+.changes-status-new { background: var(--green-dim); color: var(--green); }
+.changes-status-del { background: var(--red-dim); color: var(--red); }
+
+.changes-path {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.changes-section-title {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  padding: 10px 10px 6px;
+}
+
+.changes-action-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.changes-action-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+  flex-shrink: 0;
+  box-shadow: 0 0 6px var(--accent-glow);
+}
+
+.changes-action-body {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.changes-action-desc {
+  font-size: 13px;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.changes-action-time {
+  font-size: 11px;
+  color: var(--text-muted);
+  flex-shrink: 0;
+  font-family: var(--font-mono);
+}
+
+.changes-files-detail { margin-top: 4px; }
+.changes-files-detail summary { list-style: none; cursor: pointer; }
+.changes-files-detail summary::marker { display: none; }
+.changes-files-detail summary::-webkit-details-summary { display: none; }
+
+/* ============================================================
+   Workspace View — full-screen SPA route
+   ============================================================ */
+
+.workspace {
+  position: fixed;
+  inset: 0;
+  background: var(--bg-body);
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+}
+
+.workspace.hidden {
+  display: none;
+}
+
+/* Top bar — floating over preview */
+.ws-topbar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: rgba(17, 17, 17, 0.85);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--border);
+  z-index: 110;
+  flex-shrink: 0;
+}
+
+.workspace-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* Preview — full screen behind topbar */
+.ws-preview-full {
+  position: absolute;
+  top: 44px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.ws-preview-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: #fff;
+}
+
+.ws-preview-fallback {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Slide panel — right side */
+.ws-panel {
+  position: absolute;
+  top: 44px;
+  right: 0;
+  bottom: 0;
+  width: 340px;
+  background: var(--bg-card);
+  border-left: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 0.25s ease;
+  z-index: 120;
+  box-shadow: -4px 0 20px rgba(0,0,0,0.3);
+}
+
+.ws-panel.open {
+  transform: translateX(0);
+}
+
+.ws-panel-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.ws-panel-actions {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.workspace-section h3 {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--text-muted);
+}
+
+.ws-log-panel {
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--bg-inset);
+  border-radius: 6px;
+  padding: 8px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+}
+
+.ws-log-panel pre {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.ws-log-panel::-webkit-scrollbar { width: 4px; }
+.ws-log-panel::-webkit-scrollbar-track { background: transparent; }
+.ws-log-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+
+/* Browser error panel */
+.ws-browser-error-panel {
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--bg-inset);
+  border-radius: 6px;
+  padding: 8px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+}
+
+.ws-browser-error-item {
+  padding: 3px 0;
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+}
+
+.ws-browser-error-level {
+  color: #ef4444;
+  font-weight: 600;
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.ws-browser-error-msg {
+  color: var(--text-primary);
+  word-break: break-all;
+}
+
+.ws-error-badge {
+  background: #ef4444;
+  color: white;
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 10px;
+  margin-left: 6px;
+}
+
+.ws-file-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 0;
+  font-size: 13px;
+}
+
+.ws-action-item {
+  font-size: 13px;
+  padding: 2px 0;
+  color: var(--text-secondary);
+}
+
+/* workspace-actions removed — replaced by ws-panel-actions */
+
+.workspace-btn-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* Hidden utility for header/grid when workspace is open */
+header.hidden {
+  display: none;
+}
+
+.grid.hidden {
+  display: none;
+}
+
+/* ============================================================
+   Misc
+   ============================================================ */
+
+/* ============================================================
+   Branch picker dropdown
+   ============================================================ */
+
+.branch-picker {
+  position: relative;
+}
+
+.branch-dropdown {
+  display: none;
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  max-height: 280px;
+  overflow-y: auto;
+  background: var(--bg-inset);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  z-index: 10;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+}
+
+.branch-dropdown.open {
+  display: block;
+}
+
+.branch-dropdown::-webkit-scrollbar { width: 4px; }
+.branch-dropdown::-webkit-scrollbar-track { background: transparent; }
+.branch-dropdown::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+
+.branch-group-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  padding: 10px 14px 4px;
+  position: sticky;
+  top: 0;
+  background: var(--bg-inset);
+}
+
+.branch-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+  cursor: pointer;
+  transition: background 0.1s;
+  gap: 8px;
+}
+
+.branch-item:hover {
+  background: var(--bg-elevated);
+}
+
+.branch-item-name {
+  font-size: 13px;
+  font-family: var(--font-mono);
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.branch-item-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.branch-date {
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.branch-tag {
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 1px 6px;
+  border-radius: 4px;
+  background: var(--amber-dim);
+  color: var(--amber);
+}
+
+.branch-empty {
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 12px;
+  padding: 20px;
+}
+
+/* ============================================================
+   Pixel Characters — 산장 캠프 상태 표현
+   ============================================================
+   box-shadow pixel art, 4px per pixel unit.
+   Each character ~10x10 grid = 40x40px display.
+   ============================================================ */
+
+.camp-avatar {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.camp-pixel-wrap {
+  position: relative;
+  flex-shrink: 0;
+  width: 52px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-inset);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-subtle);
+  overflow: hidden;
+}
+
+.camp-pixel {
+  width: 4px;
+  height: 4px;
+  position: absolute;
+  flex-shrink: 0;
+}
+
+/* Center each character type within the wrap */
+.camp-pixel-running  { left: 10px; top: 10px; }
+.camp-pixel-starting { left: 12px; top: 10px; }
+.camp-pixel-stopped  { left: 10px; top: 12px; }
+.camp-pixel-error    { left: 6px;  top: 12px; }
+
+/* --- Speech bubble --- */
+.camp-bubble {
+  position: absolute;
+  top: -20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 3px 8px;
+  font-size: 10px;
+  white-space: nowrap;
+  color: var(--text-secondary);
+  pointer-events: none;
+  opacity: 0;
+  animation: bubble-show 8s ease infinite;
+  z-index: 5;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+
+.camp-bubble::after {
+  content: '';
+  position: absolute;
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid var(--bg-elevated);
+}
+
+@keyframes bubble-show {
+  0%, 70%, 100% { opacity: 0; transform: translateX(-50%) translateY(3px); }
+  75%, 92% { opacity: 1; transform: translateX(-50%) translateY(0); }
+  95% { opacity: 0; transform: translateX(-50%) translateY(-2px); }
+}
+
+/* --- Card scene background --- */
+.card-scene {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 60px;
+  pointer-events: none;
+  overflow: hidden;
+  border-radius: 0 0 var(--radius) var(--radius);
+  opacity: 0.06;
+}
+
+.card-scene-mountains {
+  background: linear-gradient(135deg, transparent 33%, var(--text-muted) 33%, var(--text-muted) 40%, transparent 40%),
+    linear-gradient(160deg, transparent 45%, var(--text-muted) 45%, var(--text-muted) 55%, transparent 55%),
+    linear-gradient(145deg, transparent 55%, var(--text-muted) 55%, var(--text-muted) 65%, transparent 65%);
+  height: 100%;
+}
+
+.card-scene-stars {
+  background-image:
+    radial-gradient(1px 1px at 20% 30%, var(--text-muted) 50%, transparent 50%),
+    radial-gradient(1px 1px at 60% 15%, var(--text-muted) 50%, transparent 50%),
+    radial-gradient(1px 1px at 80% 45%, var(--text-muted) 50%, transparent 50%),
+    radial-gradient(1px 1px at 35% 60%, var(--text-muted) 50%, transparent 50%),
+    radial-gradient(1px 1px at 90% 25%, var(--text-muted) 50%, transparent 50%);
+  height: 100%;
+}
+
+/* --- Running: 셰르파 등산 (4px/pixel) --- */
+.camp-pixel-running {
+  animation: sherpa-walk 0.6s steps(1) infinite;
+  color: transparent;
+  box-shadow:
+    /* hat */
+    8px 0 0 #5b8c5a, 12px 0 0 #5b8c5a, 16px 0 0 #5b8c5a,
+    /* head + face */
+    8px 4px 0 #f4c07a, 12px 4px 0 #f4c07a, 16px 4px 0 #f4c07a,
+    8px 8px 0 #f4c07a, 12px 8px 0 #2a2040, 16px 8px 0 #2a2040,
+    /* body */
+    4px 12px 0 #e85d3a, 8px 12px 0 #e85d3a, 12px 12px 0 #e85d3a, 16px 12px 0 #e85d3a,
+    4px 16px 0 #e85d3a, 8px 16px 0 #e85d3a, 12px 16px 0 #e85d3a, 16px 16px 0 #e85d3a,
+    /* backpack */
+    20px 12px 0 #6366f1, 20px 16px 0 #6366f1, 24px 12px 0 #5254cc,
+    /* arms */
+    0px 16px 0 #f4c07a, 24px 16px 0 #f4c07a,
+    /* legs */
+    4px 20px 0 #3b3f5c, 16px 20px 0 #3b3f5c,
+    0px 24px 0 #3b3f5c, 20px 24px 0 #3b3f5c,
+    /* boots */
+    0px 28px 0 #5b4a3a, 20px 28px 0 #5b4a3a;
+}
+
+@keyframes sherpa-walk {
+  0%, 100% {
+    box-shadow:
+      8px 0 0 #5b8c5a, 12px 0 0 #5b8c5a, 16px 0 0 #5b8c5a,
+      8px 4px 0 #f4c07a, 12px 4px 0 #f4c07a, 16px 4px 0 #f4c07a,
+      8px 8px 0 #f4c07a, 12px 8px 0 #2a2040, 16px 8px 0 #2a2040,
+      4px 12px 0 #e85d3a, 8px 12px 0 #e85d3a, 12px 12px 0 #e85d3a, 16px 12px 0 #e85d3a,
+      4px 16px 0 #e85d3a, 8px 16px 0 #e85d3a, 12px 16px 0 #e85d3a, 16px 16px 0 #e85d3a,
+      20px 12px 0 #6366f1, 20px 16px 0 #6366f1, 24px 12px 0 #5254cc,
+      0px 16px 0 #f4c07a, 24px 16px 0 #f4c07a,
+      4px 20px 0 #3b3f5c, 16px 20px 0 #3b3f5c,
+      0px 24px 0 #3b3f5c, 20px 24px 0 #3b3f5c,
+      0px 28px 0 #5b4a3a, 20px 28px 0 #5b4a3a;
+  }
+  50% {
+    box-shadow:
+      8px 0 0 #5b8c5a, 12px 0 0 #5b8c5a, 16px 0 0 #5b8c5a,
+      8px 4px 0 #f4c07a, 12px 4px 0 #f4c07a, 16px 4px 0 #f4c07a,
+      8px 8px 0 #f4c07a, 12px 8px 0 #2a2040, 16px 8px 0 #2a2040,
+      4px 12px 0 #e85d3a, 8px 12px 0 #e85d3a, 12px 12px 0 #e85d3a, 16px 12px 0 #e85d3a,
+      4px 16px 0 #e85d3a, 8px 16px 0 #e85d3a, 12px 16px 0 #e85d3a, 16px 16px 0 #e85d3a,
+      20px 12px 0 #6366f1, 20px 16px 0 #6366f1, 24px 12px 0 #5254cc,
+      24px 12px 0 #f4c07a, 0px 12px 0 #f4c07a,
+      8px 20px 0 #3b3f5c, 12px 20px 0 #3b3f5c,
+      12px 24px 0 #3b3f5c, 4px 24px 0 #3b3f5c,
+      12px 28px 0 #5b4a3a, 4px 28px 0 #5b4a3a;
+  }
+}
+
+/* --- Starting: 캠프파이어 (4px/pixel) --- */
+.camp-pixel-starting {
+  animation: fire-flicker 0.35s steps(1) infinite;
+  color: transparent;
+  box-shadow:
+    /* logs */
+    0px 28px 0 #5b4a3a, 4px 28px 0 #5b4a3a, 8px 28px 0 #5b4a3a,
+    12px 28px 0 #5b4a3a, 16px 28px 0 #5b4a3a, 20px 28px 0 #5b4a3a, 24px 28px 0 #5b4a3a,
+    4px 24px 0 #5b4a3a, 20px 24px 0 #5b4a3a,
+    /* fire */
+    8px 24px 0 #e85d3a, 12px 24px 0 #f59e0b, 16px 24px 0 #e85d3a,
+    4px 20px 0 #e85d3a, 8px 20px 0 #f59e0b, 12px 20px 0 #fbbf24, 16px 20px 0 #f59e0b, 20px 20px 0 #e85d3a,
+    8px 16px 0 #f59e0b, 12px 16px 0 #fbbf24, 16px 16px 0 #f59e0b,
+    8px 12px 0 #e85d3a, 12px 12px 0 #f59e0b, 16px 12px 0 #e85d3a,
+    12px 8px 0 #f59e0b,
+    /* sparks */
+    4px 8px 0 #fbbf24, 20px 4px 0 #f59e0b;
+}
+
+@keyframes fire-flicker {
+  0%, 100% {
+    box-shadow:
+      0px 28px 0 #5b4a3a, 4px 28px 0 #5b4a3a, 8px 28px 0 #5b4a3a,
+      12px 28px 0 #5b4a3a, 16px 28px 0 #5b4a3a, 20px 28px 0 #5b4a3a, 24px 28px 0 #5b4a3a,
+      4px 24px 0 #5b4a3a, 20px 24px 0 #5b4a3a,
+      8px 24px 0 #e85d3a, 12px 24px 0 #f59e0b, 16px 24px 0 #e85d3a,
+      4px 20px 0 #e85d3a, 8px 20px 0 #f59e0b, 12px 20px 0 #fbbf24, 16px 20px 0 #f59e0b, 20px 20px 0 #e85d3a,
+      8px 16px 0 #f59e0b, 12px 16px 0 #fbbf24, 16px 16px 0 #f59e0b,
+      8px 12px 0 #e85d3a, 12px 12px 0 #f59e0b, 16px 12px 0 #e85d3a,
+      12px 8px 0 #f59e0b,
+      4px 8px 0 #fbbf24, 20px 4px 0 #f59e0b;
+  }
+  50% {
+    box-shadow:
+      0px 28px 0 #5b4a3a, 4px 28px 0 #5b4a3a, 8px 28px 0 #5b4a3a,
+      12px 28px 0 #5b4a3a, 16px 28px 0 #5b4a3a, 20px 28px 0 #5b4a3a, 24px 28px 0 #5b4a3a,
+      4px 24px 0 #5b4a3a, 20px 24px 0 #5b4a3a,
+      8px 24px 0 #f59e0b, 12px 24px 0 #e85d3a, 16px 24px 0 #f59e0b,
+      4px 20px 0 #f59e0b, 8px 20px 0 #e85d3a, 12px 20px 0 #f59e0b, 16px 20px 0 #fbbf24, 20px 20px 0 #f59e0b,
+      4px 16px 0 #e85d3a, 8px 16px 0 #fbbf24, 12px 16px 0 #f59e0b, 16px 16px 0 #fbbf24, 20px 16px 0 #e85d3a,
+      8px 12px 0 #f59e0b, 12px 12px 0 #e85d3a, 16px 12px 0 #f59e0b,
+      12px 8px 0 #e85d3a, 8px 4px 0 #f59e0b,
+      20px 8px 0 #fbbf24, 0px 4px 0 #e85d3a;
+  }
+}
+
+/* --- Stopped: 텐트 + zzz (4px/pixel) --- */
+.camp-pixel-stopped {
+  color: transparent;
+  box-shadow:
+    /* tent peak */
+    12px 4px 0 #4a5170, 16px 4px 0 #4a5170,
+    8px 8px 0 #4a5170, 12px 8px 0 #3b3f5c, 16px 8px 0 #3b3f5c, 20px 8px 0 #4a5170,
+    4px 12px 0 #4a5170, 8px 12px 0 #3b3f5c, 12px 12px 0 #3b3f5c, 16px 12px 0 #3b3f5c, 20px 12px 0 #3b3f5c, 24px 12px 0 #4a5170,
+    0px 16px 0 #4a5170, 4px 16px 0 #3b3f5c, 8px 16px 0 #3b3f5c, 12px 16px 0 #3b3f5c, 16px 16px 0 #3b3f5c, 20px 16px 0 #3b3f5c, 24px 16px 0 #3b3f5c, 28px 16px 0 #4a5170,
+    0px 20px 0 #4a5170, 4px 20px 0 #3b3f5c, 8px 20px 0 #3b3f5c, 12px 20px 0 #1c2030, 16px 20px 0 #1c2030, 20px 20px 0 #3b3f5c, 24px 20px 0 #3b3f5c, 28px 20px 0 #4a5170,
+    /* ground */
+    0px 24px 0 #1c2030, 4px 24px 0 #1c2030, 8px 24px 0 #1c2030, 12px 24px 0 #1c2030,
+    16px 24px 0 #1c2030, 20px 24px 0 #1c2030, 24px 24px 0 #1c2030, 28px 24px 0 #1c2030;
+}
+
+/* Zzz animation */
+.camp-zzz {
+  position: absolute;
+  top: -2px;
+  right: -6px;
+  font-size: 9px;
+  color: var(--text-muted);
+  animation: zzz-float 2s ease-in-out infinite;
+  font-family: var(--font-mono);
+  letter-spacing: -1px;
+  z-index: 3;
+}
+@keyframes zzz-float {
+  0%, 100% { opacity: 0.3; transform: translateY(0); }
+  50% { opacity: 0.8; transform: translateY(-4px); }
+}
+
+/* --- Error: 넘어진 셰르파 (4px/pixel) --- */
+.camp-pixel-error {
+  animation: error-shake 0.3s ease-in-out infinite alternate;
+  color: transparent;
+  box-shadow:
+    /* head on ground */
+    0px 20px 0 #f4c07a, 4px 20px 0 #f4c07a, 8px 20px 0 #f4c07a,
+    0px 16px 0 #5b8c5a, 4px 16px 0 #5b8c5a,
+    4px 20px 0 #2a2040, 8px 20px 0 #2a2040,
+    /* body sprawled */
+    12px 20px 0 #e85d3a, 16px 20px 0 #e85d3a, 20px 20px 0 #e85d3a, 24px 20px 0 #e85d3a,
+    12px 16px 0 #e85d3a, 16px 16px 0 #e85d3a, 20px 16px 0 #e85d3a,
+    /* backpack fallen */
+    24px 16px 0 #6366f1, 28px 16px 0 #5254cc,
+    /* legs up */
+    28px 20px 0 #3b3f5c, 28px 24px 0 #3b3f5c,
+    32px 20px 0 #3b3f5c, 32px 12px 0 #5b4a3a,
+    /* arm reaching */
+    8px 16px 0 #f4c07a,
+    /* sweat/stars */
+    0px 8px 0 #f59e0b, 8px 4px 0 #f59e0b, 16px 8px 0 #f59e0b,
+    /* ground */
+    0px 24px 0 #1c2030, 4px 24px 0 #1c2030, 8px 24px 0 #1c2030, 12px 24px 0 #1c2030,
+    16px 24px 0 #1c2030, 20px 24px 0 #1c2030, 24px 24px 0 #1c2030, 28px 24px 0 #1c2030;
+}
+
+@keyframes error-shake {
+  from { transform: translateX(-1px); }
+  to   { transform: translateX(1px); }
+}
+
+
+/* ============================================================
+   Portal Home
+   ============================================================ */
+
+#portal {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+#portal.hidden {
+  display: none;
+}
+
+.portal-section {
+  margin-bottom: 32px;
+}
+
+.portal-section.hidden {
+  display: none;
+}
+
+.portal-section-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-bottom: 12px;
+}
+
+.portal-work-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.portal-work-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: border-color 0.15s;
+}
+
+.portal-work-item:hover {
+  border-color: var(--accent);
+}
+
+.portal-work-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.portal-work-icon {
+  font-size: 16px;
+}
+
+.portal-work-title {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.portal-work-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+.portal-work-status {
+  font-size: 12px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
+.portal-status-pending { background: #f5a62320; color: #f5a623; }
+.portal-status-approved { background: #4caf5020; color: #4caf50; }
+.portal-status-changes { background: #f4433620; color: #f44336; }
+.portal-status-draft { background: #9e9e9e20; color: #9e9e9e; }
+.portal-status-active { background: #2196f320; color: #2196f3; }
+
+.portal-empty {
+  padding: 24px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.portal-loading {
+  padding: 24px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 13px;
+}
+
+.portal-quickstart {
+  display: flex;
+  gap: 8px;
+}
+
+.portal-quickstart-input {
+  flex: 1;
+}
+
+.portal-quickstart-hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 6px;
+}
+
+/* Portal camps section uses the existing .grid layout */
+#portal-camps-section .grid {
+  padding: 0;
+  margin: 0;
+  max-width: none;
+  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
+}
+
+.hidden { display: none !important; }
+
+.ws-file-new {
+  animation: highlight-fade 2s ease-out;
+}
+@keyframes highlight-fade {
+  0% { background: rgba(255, 214, 0, 0.25); }
+  100% { background: transparent; }
+}
+.ws-changes-summary {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: normal;
+  margin-left: 4px;
+}
+.ws-unsaved-section {
+  background: rgba(255, 214, 0, 0.08);
+  border: 1px solid rgba(255, 214, 0, 0.2);
+  border-radius: 8px;
+  padding: 12px !important;
+}
+.ws-unsaved-section.ws-no-changes {
+  background: transparent;
+  border-color: transparent;
+}
+.ws-summary-text {
+  font-size: 14px;
+  color: var(--text-primary);
+  padding: 4px 0 8px;
+  line-height: 1.4;
+}
+.ws-save-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.btn-save {
+  background: var(--yellow, #eab308);
+  color: #000;
+  font-weight: 600;
+  flex: 1;
+  padding: 8px;
+  border-radius: 6px;
+}
+.ws-autosave-toggle {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.ws-autosave-toggle input {
+  accent-color: var(--accent);
+}
+.btn-save:hover:not(:disabled) {
+  background: #ca9a06;
+}
+.btn-save:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.ws-file-details,
+.ws-log-details {
+  font-size: 13px;
+}
+.ws-file-details summary,
+.ws-log-details summary {
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 12px;
+  user-select: none;
+  padding: 4px 0;
+}
+.ws-file-details summary:hover,
+.ws-log-details summary:hover {
+  color: var(--text-secondary);
+}
+.ws-log-details .ws-log-panel {
+  margin-top: 8px;
+}
+.ws-commit-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 13px;
+  border-bottom: 1px solid var(--border);
+}
+.ws-commit-item:last-child {
+  border-bottom: none;
+}
+.ws-commit-msg {
+  color: var(--text-primary);
+}
+.ws-commit-date {
+  color: var(--text-muted);
+  font-size: 11px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.ws-revert-btn {
+  opacity: 0;
+  transition: opacity 0.15s;
+  font-size: 12px;
+  padding: 2px 6px;
+  flex-shrink: 0;
+}
+.ws-commit-item:hover .ws-revert-btn {
+  opacity: 1;
+}
+
+/* === Gamification: Unsaved pixel blocks === */
+.ws-blocks {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 36px;
+  padding: 4px 0;
+}
+.ws-block {
+  width: 20px;
+  border-radius: 0;
+  image-rendering: pixelated;
+  border: 2px solid rgba(0,0,0,0.3);
+  animation: block-drop 0.3s steps(4);
+  transition: height 0.15s steps(3);
+}
+.ws-block-mod { background: #f59e0b; height: 16px; }
+.ws-block-new { background: #22c55e; height: 24px; }
+.ws-block-del { background: #ef4444; height: 12px; }
+
+@keyframes block-drop {
+  0% { transform: translateY(-16px); opacity: 0; }
+  50% { transform: translateY(2px); }
+  100% { transform: translateY(0); opacity: 1; }
+}
+
+.ws-blocks.ws-blocks-wobble {
+  animation: blocks-wobble 1.5s steps(4) infinite;
+}
+@keyframes blocks-wobble {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(1deg); }
+  75% { transform: rotate(-1deg); }
+}
+
+/* === Gamification: Save effects === */
+.ws-blocks.ws-blocks-flush .ws-block {
+  animation: block-flush 0.4s steps(6) forwards;
+}
+@keyframes block-flush {
+  0% { transform: translateY(0); opacity: 1; }
+  33% { transform: translateY(-8px); }
+  66% { transform: translateY(-20px) scale(0.5); opacity: 0.5; }
+  100% { transform: translateY(-30px) scale(0); opacity: 0; }
+}
+
+/* Save history slide-in animation */
+.ws-commit-slide-in {
+  animation: commit-slide-in 0.4s ease-out;
+}
+@keyframes commit-slide-in {
+  0% { transform: translateX(40px); opacity: 0; max-height: 0; }
+  50% { max-height: 40px; }
+  100% { transform: translateX(0); opacity: 1; max-height: 40px; }
+}
+
+.ws-save-flash {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(251, 191, 36, 0.12);
+  pointer-events: none;
+  z-index: 9999;
+  animation: save-flash 0.4s steps(3) forwards;
+}
+@keyframes save-flash {
+  0% { opacity: 1; }
+  33% { opacity: 0.6; }
+  66% { opacity: 0.2; }
+  100% { opacity: 0; }
+}
+
+.ws-sparkles {
+  position: absolute;
+  inset: -24px;
+  pointer-events: none;
+  overflow: visible;
+}
+.ws-sparkle {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  border-radius: 0;
+  background: #fbbf24;
+  animation: sparkle-fly 0.6s steps(6) forwards;
+}
+.ws-sparkle:nth-child(odd) { background: #f59e0b; }
+.ws-sparkle:nth-child(3n) { background: #fff; width: 2px; height: 2px; }
+@keyframes sparkle-fly {
+  0% { transform: translate(0, 0) scale(1); opacity: 1; }
+  50% { opacity: 1; }
+  100% { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
+}
+
+/* === Gamification: Topbar mini character === */
+.ws-mini-char {
+  width: 2px;
+  height: 2px;
+  position: relative;
+  margin: 4px 16px 4px 12px;
+  flex-shrink: 0;
+}
+/* Sherpa load levels — backpack grows with unsaved changes */
+.ws-mini-char-running {
+  animation: mini-walk 0.5s steps(1) infinite;
+  box-shadow:
+    2px 0 0 #5b8c5a, 4px 0 0 #5b8c5a,
+    2px 2px 0 #f4c07a, 4px 2px 0 #f4c07a,
+    0px 4px 0 #e85d3a, 2px 4px 0 #e85d3a, 4px 4px 0 #e85d3a, 6px 4px 0 #e85d3a,
+    0px 6px 0 #3b3f5c, 4px 6px 0 #3b3f5c,
+    0px 8px 0 #5b4a3a, 4px 8px 0 #5b4a3a;
+}
+/* light load: small backpack */
+.ws-mini-char-load-light {
+  animation: mini-walk 0.5s steps(1) infinite;
+  box-shadow:
+    2px 0 0 #5b8c5a, 4px 0 0 #5b8c5a,
+    2px 2px 0 #f4c07a, 4px 2px 0 #f4c07a,
+    0px 4px 0 #e85d3a, 2px 4px 0 #e85d3a, 4px 4px 0 #e85d3a, 6px 4px 0 #e85d3a,
+    8px 4px 0 #6366f1,
+    0px 6px 0 #3b3f5c, 4px 6px 0 #3b3f5c,
+    0px 8px 0 #5b4a3a, 4px 8px 0 #5b4a3a;
+}
+/* medium load: bigger backpack, slower */
+.ws-mini-char-load-medium {
+  animation: mini-walk-slow 0.8s steps(1) infinite;
+  box-shadow:
+    2px 0 0 #5b8c5a, 4px 0 0 #5b8c5a,
+    2px 2px 0 #f4c07a, 4px 2px 0 #f4c07a,
+    0px 4px 0 #e85d3a, 2px 4px 0 #e85d3a, 4px 4px 0 #e85d3a, 6px 4px 0 #e85d3a,
+    8px 2px 0 #6366f1, 8px 4px 0 #6366f1, 10px 4px 0 #5254cc,
+    0px 6px 0 #3b3f5c, 4px 6px 0 #3b3f5c,
+    0px 8px 0 #5b4a3a, 4px 8px 0 #5b4a3a;
+}
+/* heavy load: huge backpack, stumbling, sweat */
+.ws-mini-char-load-heavy {
+  animation: mini-stumble 1.2s steps(1) infinite;
+  box-shadow:
+    2px 0 0 #5b8c5a, 4px 0 0 #5b8c5a,
+    -2px -2px 0 #64b5f6,
+    2px 2px 0 #f4c07a, 4px 2px 0 #f4c07a,
+    0px 4px 0 #e85d3a, 2px 4px 0 #e85d3a, 4px 4px 0 #e85d3a, 6px 4px 0 #e85d3a,
+    8px 0 0 #6366f1, 10px 0 0 #5254cc,
+    8px 2px 0 #6366f1, 10px 2px 0 #5254cc,
+    8px 4px 0 #6366f1, 10px 4px 0 #5254cc, 12px 4px 0 #4a46b0,
+    0px 6px 0 #3b3f5c, 4px 6px 0 #3b3f5c,
+    0px 8px 0 #5b4a3a, 4px 8px 0 #5b4a3a;
+}
+/* saved celebration — jump + spin */
+.ws-mini-char-saved {
+  animation: mini-celebrate 0.8s steps(1) forwards;
+  box-shadow:
+    2px 0 0 #5b8c5a, 4px 0 0 #5b8c5a,
+    2px 2px 0 #f4c07a, 4px 2px 0 #f4c07a,
+    0px 4px 0 #e85d3a, 2px 4px 0 #e85d3a, 4px 4px 0 #e85d3a, 6px 4px 0 #e85d3a,
+    -2px 4px 0 #f4c07a, 8px 2px 0 #f4c07a,
+    0px 6px 0 #3b3f5c, 4px 6px 0 #3b3f5c,
+    0px 8px 0 #5b4a3a, 4px 8px 0 #5b4a3a;
+}
+@keyframes mini-celebrate {
+  0% { transform: translateY(0); }
+  20% { transform: translateY(-6px); }
+  40% { transform: translateY(-8px) rotate(15deg); }
+  60% { transform: translateY(-4px) rotate(-10deg); }
+  80% { transform: translateY(-1px) rotate(5deg); }
+  100% { transform: translateY(0) rotate(0deg); }
+}
+
+@keyframes mini-walk {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-2px); }
+}
+@keyframes mini-walk-slow {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-1px); }
+}
+@keyframes mini-stumble {
+  0% { transform: translateY(0) rotate(0deg); }
+  25% { transform: translateY(-1px) rotate(2deg); }
+  50% { transform: translateY(0) rotate(0deg); }
+  75% { transform: translateY(-1px) rotate(-3deg); }
+  100% { transform: translateY(0) rotate(0deg); }
+}
+
+.ws-mini-char-starting {
+  animation: mini-fire 0.35s steps(1) infinite;
+  box-shadow:
+    2px 6px 0 #5b4a3a, 4px 6px 0 #5b4a3a, 6px 6px 0 #5b4a3a,
+    2px 4px 0 #e85d3a, 4px 4px 0 #f59e0b, 6px 4px 0 #e85d3a,
+    4px 2px 0 #fbbf24,
+    4px 0px 0 #f59e0b;
+}
+@keyframes mini-fire {
+  0%, 100% { box-shadow:
+    2px 6px 0 #5b4a3a, 4px 6px 0 #5b4a3a, 6px 6px 0 #5b4a3a,
+    2px 4px 0 #e85d3a, 4px 4px 0 #f59e0b, 6px 4px 0 #e85d3a,
+    4px 2px 0 #fbbf24, 4px 0 0 #f59e0b; }
+  50% { box-shadow:
+    2px 6px 0 #5b4a3a, 4px 6px 0 #5b4a3a, 6px 6px 0 #5b4a3a,
+    2px 4px 0 #f59e0b, 4px 4px 0 #e85d3a, 6px 4px 0 #fbbf24,
+    2px 2px 0 #f59e0b, 6px 0px 0 #e85d3a; }
+}
+
+.ws-mini-char-stopped {
+  box-shadow:
+    2px 0 0 #4a5170, 4px 0 0 #4a5170,
+    0px 2px 0 #4a5170, 2px 2px 0 #3b3f5c, 4px 2px 0 #3b3f5c, 6px 2px 0 #4a5170,
+    0px 4px 0 #4a5170, 2px 4px 0 #3b3f5c, 4px 4px 0 #1c2030, 6px 4px 0 #4a5170;
+}
+
+.ws-mini-char-error {
+  animation: mini-sos 0.4s steps(1) infinite;
+  box-shadow:
+    2px 2px 0 #f4c07a,
+    0px 4px 0 #e85d3a, 2px 4px 0 #e85d3a, 4px 4px 0 #e85d3a,
+    0px 6px 0 #f4c07a, 6px 6px 0 #3b3f5c,
+    0px 8px 0 #3b3f5c;
+  transform: rotate(90deg);
+}
+@keyframes mini-sos {
+  0%, 100% { transform: rotate(90deg) translateX(0); }
+  50% { transform: rotate(90deg) translateX(2px); }
+}
+
+/* === Gamification: Quest progress (NES style) === */
+.ws-quest {
+  display: flex;
+  align-items: center;
+  margin-left: 16px;
+}
+.ws-quest-step {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  opacity: 0.25;
+  transition: opacity 0.3s steps(3);
+}
+.ws-quest-step span {
+  font-size: 9px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  letter-spacing: 0.5px;
+}
+.ws-quest-step.ws-quest-active,
+.ws-quest-step.ws-quest-done {
+  opacity: 1;
+}
+.ws-quest-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 0;
+  background: var(--border);
+  border: 2px solid rgba(0,0,0,0.3);
+  transition: background 0.2s steps(2);
+}
+.ws-quest-active .ws-quest-dot {
+  background: #fbbf24;
+  border-color: #b45309;
+  animation: quest-pulse 1.5s steps(2) infinite;
+}
+.ws-quest-done .ws-quest-dot {
+  background: #22c55e;
+  border-color: #15803d;
+}
+@keyframes quest-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
+  50% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0); }
+}
+.ws-quest-line {
+  width: 12px;
+  height: 2px;
+  background: var(--border);
+  margin: 0 2px;
+}
+.ws-quest-done + .ws-quest-line {
+  background: #22c55e;
+}
+
+/* === Ship progress steps === */
+.ship-steps {
+  margin: 12px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.ship-steps.hidden { display: none; }
+.ship-step {
+  font-size: 13px;
+  color: var(--text-muted);
+  padding: 4px 0;
+  opacity: 0.4;
+}
+.ship-step.ship-step-active {
+  opacity: 1;
+  color: #fbbf24;
+}
+.ship-step.ship-step-done {
+  opacity: 1;
+  color: #22c55e;
+}
+.ship-step.ship-step-fail {
+  opacity: 1;
+  color: #ef4444;
+}
+
+/* ============================================================
+   Onboarding Tutorial
+   ============================================================ */
+
+.onboarding-overlay {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 10000;
+}
+
+.onboarding-highlight {
+  position: fixed;
+  border: 2px solid var(--accent, #6366f1);
+  border-radius: 8px;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.4);
+  z-index: 10001;
+  pointer-events: none;
+  animation: onboard-pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes onboard-pulse {
+  0%, 100% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.3); }
+  50% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5), 0 0 30px rgba(99, 102, 241, 0.6); }
+}
+
+.onboarding-tooltip {
+  position: fixed;
+  background: var(--bg-elevated, #1e1e2e);
+  border: 1px solid var(--border, #333);
+  border-radius: 12px;
+  padding: 16px 20px;
+  max-width: 320px;
+  z-index: 10002;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+  animation: onboard-fade-in 0.3s ease-out;
+}
+
+@keyframes onboard-fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.onboarding-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-primary, #fff);
+  margin-bottom: 6px;
+}
+
+.onboarding-text {
+  font-size: 13px;
+  color: var(--text-secondary, #aaa);
+  line-height: 1.5;
+  margin-bottom: 12px;
+}
+
+.onboarding-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.onboarding-step {
+  font-size: 11px;
+  color: var(--text-muted, #666);
+  flex: 1;
+}