aidevops 3.21.12 → 3.22.0

package/packages/gui-web/src/styles.css

@@ -0,0 +1,1540 @@
+:root {
+  --accent-hue: 123;
+  --accent: hsl(var(--accent-hue) 50% 36%);
+  --accent-strong: hsl(var(--accent-hue) 56% 28%);
+  --bg-primary: #ffffff;
+  --bg-secondary: #f8f8f8;
+  --bg-tertiary: #f0f0f0;
+  --border: color-mix(in srgb, rgb(0 0 0 / 13%) 62%, rgb(255 255 255 / 54%));
+  --border-hover: color-mix(in srgb, rgb(0 0 0 / 24%) 64%, rgb(255 255 255 / 48%));
+  --code-bg: hsl(var(--accent-hue) 55% 91%);
+  --desktop-titlebar-height: 0px;
+  --font-family-app: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --font-size-app: 16px;
+  --glass-panel-shadow: inset 0 1px 0 rgb(255 255 255 / 58%), inset 0 -1px 0 rgb(0 0 0 / 3%), var(--shadow-soft);
+  --shell-gutter: 8px;
+  --shadow-soft: 0 18px 56px rgb(15 23 42 / 9%);
+  --surface-elevated: #ffffff;
+  --surface-muted: #f0f0f0;
+  --success-bg: hsl(var(--accent-hue) 50% 36% / 14%);
+  --success-text: var(--accent-strong);
+  --text-muted: rgb(17 17 17 / 55%);
+  --text-primary: #111111;
+  --text-secondary: rgb(17 17 17 / 75%);
+  background: var(--bg-secondary);
+  color: var(--text-primary);
+  color-scheme: light;
+  font-family: var(--font-family-app);
+}
+
+:root[data-desktop-shell="macos"] {
+  --desktop-titlebar-height: 22px;
+}
+
+:root[data-theme="dark"] {
+  --accent: hsl(var(--accent-hue) 74% 66%);
+  --accent-strong: hsl(var(--accent-hue) 75% 72%);
+  --bg-primary: #0a0a0a;
+  --bg-secondary: #111111;
+  --bg-tertiary: #1a1a1a;
+  --border: color-mix(in srgb, rgb(255 255 255 / 11%) 76%, rgb(255 255 255 / 30%));
+  --border-hover: color-mix(in srgb, rgb(255 255 255 / 22%) 74%, rgb(255 255 255 / 40%));
+  --code-bg: hsl(var(--accent-hue) 18% 6%);
+  --glass-panel-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), inset 0 -1px 0 rgb(0 0 0 / 24%), var(--shadow-soft);
+  --shadow-soft: 0 24px 80px rgb(0 0 0 / 40%);
+  --surface-elevated: #151515;
+  --surface-muted: #202020;
+  --success-bg: hsl(var(--accent-hue) 74% 66% / 12%);
+  --success-text: var(--accent);
+  --text-muted: rgb(255 255 255 / 40%);
+  --text-primary: #ffffff;
+  --text-secondary: rgb(255 255 255 / 70%);
+  color-scheme: dark;
+}
+
+:root[data-borders="hidden"] {
+  --border: transparent;
+  --border-hover: transparent;
+  --glass-panel-shadow: var(--shadow-soft);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  background:
+    radial-gradient(ellipse at top left, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 36%),
+    var(--bg-secondary);
+  color: var(--text-primary);
+  line-height: 1.6;
+  margin: 0;
+  font-size: var(--font-size-app);
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+code {
+  background: var(--code-bg);
+  border-radius: 6px;
+  color: var(--accent-strong);
+  font-size: 0.82em;
+  padding: 2px 5px;
+}
+
+.app-shell {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: 72px 302px minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) auto;
+  height: 100vh;
+  padding: calc(var(--shell-gutter) + var(--desktop-titlebar-height)) var(--shell-gutter) var(--shell-gutter);
+}
+
+.app-shell.machine-rail-collapsed {
+  grid-template-columns: 302px minmax(0, 1fr);
+}
+
+.desktop-titlebar-tagline {
+  display: none;
+}
+
+:root[data-desktop-shell="macos"] .desktop-titlebar-tagline {
+  align-items: center;
+  color: var(--accent);
+  display: flex;
+  font-family: var(--font-family-app);
+  font-size: 0.875rem;
+  font-style: italic;
+  font-weight: 600;
+  height: 24px;
+  justify-content: center;
+  left: 136px;
+  line-height: 1;
+  pointer-events: none;
+  position: fixed;
+  right: 116px;
+  top: 0;
+  transform: translateY(3.5px);
+  z-index: 20;
+}
+
+.machine-rail,
+.app-sidebar,
+.app-inset {
+  background: color-mix(in srgb, var(--surface-elevated) 96%, transparent);
+  backdrop-filter: saturate(180%) blur(22px);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  box-shadow: var(--glass-panel-shadow);
+  min-height: 0;
+  -webkit-backdrop-filter: saturate(180%) blur(22px);
+}
+
+.machine-rail,
+.app-sidebar,
+.app-inset {
+  grid-row: 1;
+}
+
+.machine-rail {
+  align-content: start;
+  display: grid;
+  gap: 10px;
+  justify-items: center;
+  padding: 12px 8px;
+}
+
+.machine-orb,
+.client-folder-orb {
+  align-items: center;
+  background: var(--surface-muted);
+  border: 1px solid transparent;
+  border-radius: 16px;
+  color: var(--text-secondary);
+  display: inline-flex;
+  height: 48px;
+  justify-content: center;
+  padding: 0;
+  width: 48px;
+}
+
+.machine-orb span {
+  font-weight: 800;
+  letter-spacing: -0.04em;
+}
+
+.machine-orb.active {
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
+  color: var(--accent);
+}
+
+.client-folder-orb {
+  border-radius: 14px;
+  font-size: 1.35rem;
+}
+
+.app-sidebar {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  overflow: hidden;
+}
+
+.sidebar-header,
+.sidebar-footer {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+}
+
+.brand-lockup,
+.sidebar-titlebar,
+.sidebar-history-controls,
+.sidebar-mode-tabs,
+.theme-control-heading,
+.appearance-panel-tab,
+.header-title,
+.header-actions,
+.workspace-search,
+.version-pill,
+.surface-link,
+.object-list li,
+.path-actions,
+.file-entry,
+.file-entry-row,
+.preview-header,
+.toggle-row,
+.install-row {
+  align-items: center;
+  display: flex;
+}
+
+.brand-lockup {
+  gap: 12px;
+  padding: 2px 4px;
+}
+
+.sidebar-titlebar {
+  gap: 10px;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.brand-lockup strong {
+  display: block;
+  font-size: 1.45rem;
+  font-weight: 900;
+  letter-spacing: -0.05em;
+}
+
+.terminal-mark {
+  align-items: center;
+  background: color-mix(in srgb, var(--accent) 15%, #0a0a0a);
+  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
+  border-radius: 11px;
+  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 28%, transparent);
+  color: var(--accent);
+  display: inline-flex;
+  font-size: 1.2rem;
+  font-weight: 900;
+  height: 44px;
+  justify-content: center;
+  width: 44px;
+}
+
+.sidebar-history-controls {
+  background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  gap: 2px;
+  padding: 2px;
+}
+
+.sidebar-history-controls button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: var(--text-secondary);
+  display: inline-flex;
+  height: 26px;
+  justify-content: center;
+  padding: 0;
+  width: 26px;
+}
+
+.sidebar-history-controls button:hover:not(:disabled),
+.sidebar-history-controls button:focus-visible {
+  background: var(--surface-elevated);
+  color: var(--text-primary);
+  outline: none;
+}
+
+.sidebar-history-controls svg {
+  height: 18px;
+  stroke-width: 2.4;
+  width: 18px;
+}
+
+.sidebar-content {
+  overflow: auto;
+  padding: 0 10px 12px;
+}
+
+.sidebar-mode-tabs {
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  gap: 4px;
+  margin: 0 6px 12px;
+  padding: 4px;
+}
+
+.sidebar-mode-tabs button {
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: var(--text-muted);
+  flex: 1 1 0;
+  font-size: 0.78rem;
+  font-weight: 900;
+  padding: 8px 10px;
+  text-transform: uppercase;
+}
+
+.sidebar-mode-tabs button.active,
+.sidebar-mode-tabs button:hover,
+.sidebar-mode-tabs button:focus-visible {
+  background: var(--surface-elevated);
+  color: var(--accent);
+  outline: none;
+}
+
+.sidebar-group {
+  margin-bottom: 14px;
+}
+
+.sidebar-group h2,
+.sidebar-footer p,
+.eyebrow {
+  color: var(--text-muted);
+  font-size: 0.76rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  margin: 11px 8px 5px;
+  text-transform: uppercase;
+}
+
+.sidebar-top-link,
+.sidebar-group ul,
+.object-list,
+.tag-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.surface-link {
+  background: transparent;
+  border: 0;
+  border-radius: 8px;
+  color: var(--text-secondary);
+  gap: 9px;
+  min-height: 32px;
+  padding: 5px 8px;
+  text-align: left;
+  width: 100%;
+}
+
+.surface-link:hover,
+.surface-link:focus-visible {
+  background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
+  outline: none;
+}
+
+.surface-link.active {
+  background: color-mix(in srgb, var(--accent) 15%, transparent);
+  color: var(--text-primary);
+}
+
+.surface-link.active:hover,
+.surface-link.active:focus-visible {
+  background: color-mix(in srgb, var(--accent) 19%, transparent);
+}
+
+.surface-icon {
+  align-items: center;
+  color: var(--accent);
+  display: inline-flex;
+  flex: 0 0 auto;
+  height: 20px;
+  justify-content: center;
+  width: 20px;
+}
+
+.surface-icon svg {
+  height: 17px;
+  stroke-width: 2.25;
+  width: 17px;
+}
+
+.surface-copy {
+  display: grid;
+  flex: 1;
+  min-width: 0;
+}
+
+.surface-title-row {
+  align-items: baseline;
+  display: flex;
+  gap: 5px;
+  min-width: 0;
+}
+
+.surface-copy small,
+.metric-card small,
+.planned-home small,
+.install-row small,
+.file-entry small {
+  color: var(--text-muted);
+}
+
+.surface-copy strong {
+  font-size: 1em;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.surface-count {
+  color: var(--text-muted);
+  flex: 0 0 auto;
+  font-size: 0.84em;
+  font-weight: 700;
+}
+
+.sidebar-group h2 {
+  font-size: max(12.5px, 0.84em);
+}
+
+.surface-link.active .surface-copy strong {
+  font-weight: 700;
+}
+
+.surface-link em {
+  background: var(--surface-muted);
+  border-radius: 999px;
+  color: var(--text-muted);
+  font-size: 0.74rem;
+  font-style: normal;
+  font-weight: 900;
+  padding: 3px 7px;
+}
+
+.sidebar-footer {
+  border-top: 1px solid var(--border);
+  padding-top: 12px;
+}
+
+.theme-control.compact {
+  background: var(--surface-muted);
+  border: 0;
+  border-radius: 12px;
+  display: grid;
+  gap: 4px;
+  grid-template-columns: repeat(3, 1fr);
+  margin: 0;
+  min-inline-size: 0;
+  padding: 4px;
+}
+
+.theme-option {
+  background: transparent;
+  border: 0;
+  border-radius: 9px;
+  color: var(--text-muted);
+  font-size: 0.72rem;
+  font-weight: 900;
+  padding: 7px 6px;
+  text-transform: uppercase;
+}
+
+.theme-option:hover,
+.theme-option.active {
+  background: var(--surface-elevated);
+  color: var(--accent);
+}
+
+.appearance-panel {
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  display: grid;
+  overflow: hidden;
+}
+
+.appearance-panel-tab {
+  background: transparent;
+  border: 0;
+  color: var(--text-secondary);
+  gap: 8px;
+  justify-content: center;
+  padding: 8px 10px;
+  text-transform: uppercase;
+  width: 100%;
+}
+
+.appearance-chevron {
+  color: var(--accent);
+  height: 20px;
+  stroke-width: 2.6;
+  width: 20px;
+}
+
+.appearance-panel-tab:hover,
+.appearance-panel-tab:focus-visible {
+  background: color-mix(in srgb, var(--accent) 10%, transparent);
+  outline: none;
+}
+
+.appearance-panel-body {
+  border-top: 1px solid var(--border);
+  display: grid;
+  gap: 12px;
+  padding: 12px;
+}
+
+.appearance-panel.collapsed .appearance-panel-tab {
+  border-radius: 14px;
+}
+
+.theme-hue-control,
+.font-size-control,
+.font-control {
+  display: grid;
+  gap: 8px;
+}
+
+.theme-control-heading {
+  gap: 8px;
+  justify-content: space-between;
+}
+
+.hue-label-row {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  min-width: 0;
+}
+
+.theme-control-heading label,
+.font-size-control label,
+.font-control span {
+  color: var(--text-muted);
+  font-size: 0.74rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hue-number-input {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  color: var(--text-primary);
+  font-size: 0.78rem;
+  font-weight: 800;
+  min-width: 0;
+  padding: 5px 6px;
+  width: 58px;
+}
+
+.icon-reset-button {
+  align-items: center;
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text-secondary);
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  padding: 0;
+  width: 28px;
+}
+
+.icon-reset-button svg {
+  height: 15px;
+  width: 15px;
+}
+
+.theme-hue-control input[type="range"],
+.font-size-control input[type="range"] {
+  accent-color: var(--accent);
+  width: 100%;
+}
+
+.range-labels {
+  color: var(--text-muted);
+  display: grid;
+  font-size: 0.7rem;
+  font-weight: 900;
+  grid-template-columns: repeat(5, 1fr);
+  text-transform: uppercase;
+}
+
+.range-labels span {
+  text-align: center;
+}
+
+.range-labels span:first-child {
+  text-align: left;
+}
+
+.range-labels span:last-child {
+  text-align: right;
+}
+
+.range-labels .active {
+  color: var(--accent);
+}
+
+.font-control select {
+  appearance: none;
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  color: var(--text-primary);
+  min-width: 0;
+  padding: 9px 10px;
+  width: 100%;
+}
+
+.app-inset {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.workspace-header {
+  align-items: center;
+  background: color-mix(in srgb, var(--surface-elevated) 94%, transparent);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  gap: 16px;
+  min-height: 58px;
+  padding: 10px 14px;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.header-title {
+  flex: 0 0 auto;
+  gap: 10px;
+  min-width: 0;
+}
+
+.header-title p {
+  color: var(--text-muted);
+  font-size: 0.76rem;
+  font-weight: 900;
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.header-title h1 {
+  font-size: 1rem;
+  margin: 0;
+}
+
+.path-actions button,
+.secondary-action {
+  background: var(--surface-muted);
+  border: 1px solid transparent;
+  border-radius: 10px;
+  color: var(--text-secondary);
+}
+
+.workspace-surface-icon {
+  align-items: center;
+  color: var(--accent);
+  display: inline-flex;
+  height: 34px;
+  justify-content: center;
+  width: 34px;
+}
+
+.workspace-surface-icon svg {
+  height: 24px;
+  stroke-width: 2.2;
+  width: 24px;
+}
+
+.header-actions {
+  flex: 1 1 auto;
+  gap: 10px;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.workspace-search {
+  background: var(--surface-muted);
+  border-radius: 999px;
+  flex: 1 1 auto;
+  gap: 8px;
+  min-width: 160px;
+  padding: 8px 12px;
+}
+
+.workspace-search span,
+.workspace-search input {
+  color: var(--text-muted);
+}
+
+.workspace-search input {
+  background: transparent;
+  border: 0;
+  min-width: 0;
+  outline: none;
+  width: 100%;
+}
+
+.version-pill {
+  background: var(--surface-muted);
+  border-radius: 999px;
+  color: var(--text-secondary);
+  font-size: 0.82rem;
+  font-weight: 900;
+  padding: 8px 11px;
+  white-space: nowrap;
+}
+
+.workspace-scroll {
+  display: grid;
+  gap: 16px;
+  overflow: auto;
+  padding: 18px;
+}
+
+.surface-page {
+  display: grid;
+  gap: 16px;
+}
+
+.hero-panel,
+.panel,
+.metric-card,
+.planned-home {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  box-shadow: var(--glass-panel-shadow);
+}
+
+.hero-panel {
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%),
+    var(--surface-elevated);
+  padding: clamp(24px, 5vw, 42px);
+}
+
+.compact-hero h2 {
+  font-size: clamp(3rem, 10vw, 5rem);
+  letter-spacing: -0.08em;
+  line-height: 0.95;
+  margin: 0;
+}
+
+.metric-grid,
+.planned-home-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.metric-card,
+.planned-home,
+.panel {
+  padding: 18px;
+}
+
+.metric-card span,
+.planned-home span,
+.data-row.header-row,
+.editable-row.header-row {
+  color: var(--accent);
+  display: block;
+  font-size: 0.76rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.metric-card strong {
+  display: block;
+  font-size: 1.7rem;
+  letter-spacing: -0.05em;
+  margin: 8px 0 4px;
+}
+
+.planned-home {
+  display: grid;
+  gap: 8px;
+}
+
+.section-heading {
+  margin-bottom: 18px;
+  max-width: 860px;
+}
+
+.section-heading h2 {
+  font-size: 1.7rem;
+  letter-spacing: -0.05em;
+  line-height: 1.04;
+  margin: 6px 0 8px;
+}
+
+.section-heading p,
+.empty-state {
+  color: var(--text-secondary);
+}
+
+.split-heading {
+  align-items: flex-start;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  max-width: none;
+}
+
+.object-list {
+  display: grid;
+  gap: 10px;
+}
+
+.object-list li {
+  background: var(--surface-muted);
+  border-radius: 14px;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 12px;
+}
+
+.object-list li span:not(.path-actions) {
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  border-radius: 999px;
+  color: var(--accent);
+  font-size: 0.78rem;
+  font-weight: 900;
+  padding: 4px 9px;
+}
+
+.object-list li small {
+  color: var(--text-muted);
+}
+
+.path-actions {
+  gap: 4px;
+  margin-left: auto;
+}
+
+.path-actions button {
+  height: 30px;
+  width: 30px;
+}
+
+.explorer-panel {
+  min-height: calc(100vh - 116px);
+}
+
+.file-workspace {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+.file-list-pane,
+.file-list,
+.file-preview,
+.data-table,
+.editable-table,
+.installation-list {
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+}
+
+.file-list-pane {
+  max-height: 68vh;
+  min-width: 260px;
+  overflow: auto;
+  resize: horizontal;
+  width: clamp(280px, 24vw, 460px);
+}
+
+.file-list {
+  align-content: start;
+  display: grid;
+  gap: 4px;
+  height: 100%;
+  list-style: none;
+  margin: 0;
+  min-height: 100%;
+  overflow: auto;
+  padding: 8px;
+}
+
+.file-entry-row {
+  gap: 6px;
+}
+
+.file-entry {
+  background: transparent;
+  border: 0;
+  border-radius: 10px;
+  color: var(--text-secondary);
+  flex: 1;
+  gap: 8px;
+  min-width: 0;
+  padding: 8px;
+  text-align: left;
+}
+
+.file-entry:hover {
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+  color: var(--text-primary);
+}
+
+.file-entry strong {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.parent-entry {
+  border: 1px dashed var(--border);
+}
+
+.file-preview {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  max-height: 68vh;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.empty-preview {
+  align-content: center;
+  color: var(--text-muted);
+  justify-content: center;
+  padding: 24px;
+}
+
+.preview-header {
+  border-bottom: 1px solid var(--border);
+  gap: 16px;
+  justify-content: space-between;
+  padding: 12px;
+}
+
+.preview-header strong {
+  word-break: break-word;
+}
+
+.toggle-row {
+  color: var(--text-secondary);
+  gap: 8px;
+  white-space: nowrap;
+}
+
+.code-preview,
+.markdown-preview {
+  margin: 0;
+  overflow: auto;
+  padding: 16px;
+}
+
+.code-preview {
+  background: var(--code-bg);
+  color: var(--text-secondary);
+}
+
+.code-preview code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+}
+
+.markdown-preview h2,
+.markdown-preview h3,
+.markdown-preview h4,
+.markdown-preview p {
+  margin: 0 0 0.75rem;
+}
+
+.markdown-preview h2,
+.markdown-preview h3,
+.markdown-preview h4 {
+  color: var(--text-primary);
+  letter-spacing: -0.04em;
+}
+
+.markdown-bullet {
+  color: var(--text-secondary);
+  padding-left: 1rem;
+}
+
+.notice,
+.empty-state {
+  border-radius: 14px;
+  margin: 0;
+  padding: 12px 14px;
+}
+
+.notice {
+  background: var(--success-bg);
+  color: var(--success-text);
+}
+
+.compact-notice {
+  margin-bottom: 12px;
+}
+
+.data-table,
+.editable-table,
+.installation-list {
+  display: grid;
+  overflow: hidden;
+}
+
+.data-row,
+.editable-row {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  padding: 12px;
+}
+
+.data-row + .data-row,
+.editable-row + .editable-row,
+.install-row + .install-row {
+  border-top: 1px solid var(--border);
+}
+
+.data-row span,
+.editable-row span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.editable-row input {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text-primary);
+  min-width: 0;
+  padding: 9px 10px;
+}
+
+.secondary-action {
+  padding: 9px 12px;
+}
+
+.installation-list {
+  margin-bottom: 12px;
+}
+
+.install-row {
+  gap: 12px;
+  justify-content: space-between;
+  padding: 12px;
+}
+
+.install-row div {
+  display: grid;
+  flex: 1;
+}
+
+.toggle-pill {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--text-muted);
+  font-size: 0.76rem;
+  font-weight: 900;
+  padding: 6px 10px;
+  text-transform: uppercase;
+}
+
+.toggle-pill.checked {
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+  color: var(--accent);
+}
+
+.pill-tabs {
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  display: flex;
+  gap: 4px;
+  padding: 5px;
+  width: min(100%, 520px);
+}
+
+.pill-tabs button {
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  color: var(--text-secondary);
+  flex: 1 1 0;
+  font-weight: 800;
+  min-height: 38px;
+  padding: 9px 14px;
+}
+
+.pill-tabs button.active,
+.pill-tabs button:hover,
+.pill-tabs button:focus-visible {
+  background: var(--surface-elevated);
+  color: var(--text-primary);
+  outline: none;
+}
+
+.count-pill,
+.repo-summary-strip span {
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
+  border-radius: 999px;
+  color: var(--accent);
+  font-size: 0.78rem;
+  font-weight: 900;
+  padding: 6px 10px;
+  white-space: nowrap;
+}
+
+.repo-summary-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.repo-card-grid,
+.provider-grid,
+.setup-card-grid,
+.ai-app-grid {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+
+.repo-setup-card,
+.provider-card,
+.setup-target-card,
+.ai-app-card {
+  background: var(--surface-muted);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  display: grid;
+  gap: 14px;
+  min-width: 0;
+  padding: 14px;
+}
+
+.repo-setup-card header,
+.provider-card header,
+.setup-target-card header,
+.ai-app-card header,
+.repo-card-footer {
+  align-items: flex-start;
+  display: flex;
+  gap: 10px;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.repo-setup-card h3,
+.provider-card h3,
+.setup-target-card h3,
+.ai-app-card h3 {
+  font-size: 1rem;
+  margin: 0 0 5px;
+}
+
+.repo-setup-card code,
+.repo-remotes code,
+.setup-path-row code {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  color: var(--text-secondary);
+  display: block;
+  font-size: 0.78rem;
+  overflow-wrap: anywhere;
+  padding: 5px 7px;
+}
+
+.repo-card-meta {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+}
+
+.repo-card-meta span {
+  background: var(--surface-elevated);
+  border-radius: 12px;
+  display: grid;
+  gap: 4px;
+  padding: 9px;
+}
+
+.repo-card-meta small,
+.repo-remotes span,
+.provider-account-list small,
+.setup-path-row small {
+  color: var(--text-muted);
+  font-size: 0.74rem;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.repo-card-meta strong,
+.provider-account-list strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.repo-remotes {
+  display: grid;
+  gap: 6px;
+}
+
+.setup-path-list {
+  display: grid;
+  gap: 8px;
+}
+
+.setup-path-row {
+  align-items: center;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+}
+
+.setup-path-row code {
+  min-width: 0;
+}
+
+.status-pill {
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
+  border-radius: 999px;
+  color: var(--accent);
+  font-size: 0.75rem;
+  font-weight: 900;
+  padding: 5px 9px;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.status-pill.warn {
+  background: color-mix(in srgb, #d97706 16%, transparent);
+  border-color: color-mix(in srgb, #d97706 42%, transparent);
+  color: #b45309;
+}
+
+.repo-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.repo-tags span {
+  background: var(--surface-elevated);
+  border-radius: 999px;
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  padding: 5px 8px;
+}
+
+.switch-control {
+  align-items: center;
+  color: var(--text-secondary);
+  display: inline-flex;
+  gap: 8px;
+}
+
+.appearance-switch {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.appearance-switch strong {
+  color: var(--text-muted);
+  font-size: 0.74rem;
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  margin-right: auto;
+  text-transform: uppercase;
+}
+
+.desktop-status-bar {
+  align-items: center;
+  background: color-mix(in srgb, var(--surface-elevated) 96%, transparent);
+  backdrop-filter: saturate(180%) blur(22px);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: var(--glass-panel-shadow);
+  color: var(--text-muted);
+  display: flex;
+  font-size: 0.78rem;
+  font-variant-numeric: tabular-nums;
+  font-weight: 800;
+  gap: 10px;
+  grid-column: 1 / -1;
+  grid-row: 2;
+  height: 30px;
+  justify-content: center;
+  line-height: 1;
+  overflow: hidden;
+  padding: 0 12px;
+  white-space: nowrap;
+  -webkit-backdrop-filter: saturate(180%) blur(22px);
+}
+
+.desktop-status-bar strong {
+  align-items: center;
+  color: var(--text-secondary);
+  display: inline-flex;
+  line-height: 1;
+  transform: translateY(3px);
+}
+
+.desktop-status-bar span:not(.status-dot) {
+  align-items: center;
+  display: inline-flex;
+  line-height: 1;
+  transform: translateY(3px);
+}
+
+.desktop-status-bar span:not(.status-dot)::before {
+  color: var(--border-hover);
+  content: "•";
+  margin-right: 10px;
+}
+
+.desktop-status-bar .status-dot + strong + span::before {
+  content: "";
+  margin-right: 0;
+}
+
+.status-dot {
+  background: var(--accent);
+  border-radius: 999px;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
+  flex: 0 0 auto;
+  height: 8px;
+  width: 8px;
+}
+
+.status-dot.warn {
+  background: #d97706;
+  box-shadow: 0 0 0 3px color-mix(in srgb, #d97706 16%, transparent);
+}
+
+.switch-control input {
+  inline-size: 0;
+  opacity: 0;
+  position: absolute;
+}
+
+.switch-control span {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  display: inline-flex;
+  height: 24px;
+  position: relative;
+  width: 44px;
+}
+
+.switch-control span::after {
+  background: var(--text-muted);
+  border-radius: 999px;
+  content: "";
+  height: 18px;
+  left: 3px;
+  position: absolute;
+  top: 2px;
+  transition: transform 0.16s ease;
+  width: 18px;
+}
+
+.switch-control input:checked + span {
+  background: color-mix(in srgb, var(--accent) 22%, transparent);
+  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
+}
+
+.switch-control input:checked + span::after {
+  background: var(--accent);
+  transform: translateX(18px);
+}
+
+.provider-card > header > strong {
+  color: var(--accent);
+  font-size: 1.8rem;
+  letter-spacing: -0.06em;
+}
+
+.provider-actions {
+  border: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+}
+
+.provider-actions button,
+.provider-account-list button {
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--text-muted);
+  padding: 7px 10px;
+}
+
+.provider-account-list {
+  display: grid;
+  gap: 8px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.provider-account-list li {
+  align-items: center;
+  background: var(--surface-elevated);
+  border-radius: 12px;
+  display: grid;
+  gap: 6px;
+  grid-template-columns: minmax(0, 1.5fr) auto auto auto auto;
+  padding: 10px;
+}
+
+.provider-account-list span {
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+  border-radius: 999px;
+  color: var(--accent);
+  font-size: 0.75rem;
+  font-weight: 900;
+  padding: 4px 8px;
+}
+
+.compact-empty {
+  padding: 10px;
+}
+
+@media (max-width: 1100px) {
+  .file-workspace {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 980px) {
+  .app-shell {
+    grid-template-columns: 1fr;
+    height: auto;
+    min-height: 100vh;
+  }
+
+  .app-shell.machine-rail-collapsed {
+    grid-template-columns: 1fr;
+  }
+
+  .machine-rail,
+  .app-sidebar,
+  .app-inset,
+  .desktop-status-bar {
+    grid-column: 1;
+    grid-row: auto;
+  }
+
+  .desktop-status-bar {
+    flex-wrap: wrap;
+    white-space: normal;
+  }
+
+  .app-sidebar,
+  .app-inset {
+    min-height: auto;
+  }
+
+  .workspace-header,
+  .header-actions,
+  .split-heading {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .workspace-search {
+    min-width: 0;
+    width: 100%;
+  }
+}
+
+@media (max-width: 720px) {
+  .app-shell {
+    --shell-gutter: 0px;
+  }
+
+  .app-sidebar,
+  .app-inset {
+    border-radius: 0;
+  }
+
+  .data-row,
+  .editable-row,
+  .provider-account-list li {
+    grid-template-columns: 1fr;
+  }
+
+  .pill-tabs {
+    width: 100%;
+  }
+
+  .repo-setup-card header,
+  .provider-card header,
+  .setup-target-card header,
+  .ai-app-card header,
+  .setup-path-row,
+  .repo-card-footer {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .setup-path-row {
+    grid-template-columns: 1fr;
+  }
+}