@profoundlogic/coderflow-server 0.2.1

package/dist/web-ui/public/environments.css

@@ -0,0 +1,3942 @@
+/* Environment Management - Modern UI matching index.html */
+
+/* ============================================================
+   REPOSITORY STATUS (Top Bar)
+   ============================================================ */
+
+.repo-status-indicator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-medium);
+  font-size: 13px;
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+
+.repo-status-indicator #repo-status-icon {
+  font-size: 14px;
+}
+
+.repo-status-indicator #repo-status-text {
+  font-weight: 500;
+}
+
+.repo-branch {
+  color: var(--color-text-muted);
+  font-size: 12px;
+  margin-left: 4px;
+}
+
+.repo-branch::before {
+  content: '•';
+  margin-right: 6px;
+}
+
+/* ============================================================
+   ENVIRONMENT TABS
+   ============================================================ */
+
+.env-tabs-container {
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  gap: 4px;
+}
+
+.env-tabs-wrapper {
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+  position: relative;
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 0,
+    black 100%,
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 0,
+    black 100%,
+    transparent 100%
+  );
+  transition: mask-image 0.2s ease, -webkit-mask-image 0.2s ease;
+}
+
+.env-tabs-wrapper::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
+
+/* Fade effect when content overflows on the left */
+.env-tabs-wrapper.fade-left {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 24px,
+    black 100%,
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 24px,
+    black 100%,
+    transparent 100%
+  );
+}
+
+/* Fade effect when content overflows on the right */
+.env-tabs-wrapper.fade-right {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 0,
+    black calc(100% - 24px),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 0,
+    black calc(100% - 24px),
+    transparent 100%
+  );
+}
+
+/* Fade effect on both sides */
+.env-tabs-wrapper.fade-left.fade-right {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 24px,
+    black calc(100% - 24px),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 24px,
+    black calc(100% - 24px),
+    transparent 100%
+  );
+}
+
+.env-tabs {
+  display: flex;
+  gap: 8px;
+  min-height: 48px;
+  align-items: center;
+  padding: 0 4px;
+}
+
+/* Scroll buttons */
+.env-tabs-scroll-btn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  border-radius: var(--radius-medium);
+  color: var(--color-text);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.env-tabs-scroll-btn.visible {
+  display: flex;
+}
+
+.env-tabs-scroll-btn:hover {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: white;
+  box-shadow: 0 2px 8px rgba(var(--color-accent-rgb, 99, 102, 241), 0.3);
+}
+
+.env-tabs-scroll-btn:active {
+  transform: scale(0.95);
+}
+
+.env-tabs-scroll-btn svg {
+  width: 18px;
+  height: 18px;
+  min-width: 18px;
+  min-height: 18px;
+  flex-shrink: 0;
+  display: block;
+}
+
+.env-tab {
+  background: none;
+  border: none;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+  position: relative;
+}
+
+.env-tab::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--color-accent);
+  transform: scaleX(0);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.env-tab:hover {
+  color: var(--color-text);
+}
+
+.env-tab:hover::before {
+  transform: scaleX(0.5);
+  opacity: 0.5;
+}
+
+.env-tab.active {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.env-tab.active::before {
+  transform: scaleX(1);
+  opacity: 1;
+}
+
+/* ============================================================
+   EMPTY STATE
+   ============================================================ */
+
+.empty-state-card {
+  background: var(--color-surface);
+  border-radius: var(--radius-large);
+  box-shadow: var(--shadow-card);
+  padding: 80px 40px;
+  text-align: center;
+}
+
+.empty-state-icon {
+  font-size: 64px;
+  margin-bottom: 20px;
+  opacity: 0.5;
+}
+
+.empty-state-card h2 {
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0 0 8px 0;
+  color: var(--color-text);
+}
+
+.empty-state-card p {
+  font-size: 15px;
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+/* ============================================================
+   ENVIRONMENT DETAILS
+   ============================================================ */
+
+.env-details-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Status Card */
+/* ============================================================
+   ENVIRONMENT HEADER
+   ============================================================ */
+
+.env-header-card {
+  background: var(--color-surface);
+  border-radius: var(--radius-large);
+  box-shadow: var(--shadow-card);
+  padding: 20px 28px;
+  margin-bottom: 16px;
+}
+
+.env-header-content {
+  max-width: 800px;
+}
+
+.env-title-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.env-title {
+  font-size: 28px;
+  font-weight: 700;
+  margin: 0;
+  color: var(--color-text);
+}
+
+.env-rename-btn {
+  background: none;
+  border: none;
+  padding: 6px;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  border-radius: var(--radius-small);
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.6;
+}
+
+.env-rename-btn:hover {
+  color: var(--color-accent);
+  background: var(--color-surface-muted);
+  opacity: 1;
+}
+
+.env-rename-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.env-description-display {
+  font-size: 15px;
+  color: var(--color-text-muted);
+  margin: 0;
+  line-height: 1.6;
+}
+
+/* ============================================================
+   CONTENT NAVIGATION
+   ============================================================ */
+
+.content-nav-container {
+  display: flex;
+  align-items: center;
+  position: relative;
+  gap: 4px;
+  margin-bottom: 16px;
+}
+
+.content-nav {
+  display: flex;
+  gap: 6px;
+  padding: 0;
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  border-bottom: 1px solid var(--color-border);
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 0,
+    black 100%,
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 0,
+    black 100%,
+    transparent 100%
+  );
+  transition: mask-image 0.2s ease, -webkit-mask-image 0.2s ease;
+}
+
+.content-nav::-webkit-scrollbar {
+  display: none;
+}
+
+/* Fade effect when content overflows on the left */
+.content-nav.fade-left {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 24px,
+    black 100%,
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 24px,
+    black 100%,
+    transparent 100%
+  );
+}
+
+/* Fade effect when content overflows on the right */
+.content-nav.fade-right {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 0,
+    black calc(100% - 24px),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 0,
+    black calc(100% - 24px),
+    transparent 100%
+  );
+}
+
+/* Fade effect on both sides */
+.content-nav.fade-left.fade-right {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 24px,
+    black calc(100% - 24px),
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    black 24px,
+    black calc(100% - 24px),
+    transparent 100%
+  );
+}
+
+/* Content nav scroll buttons */
+.content-nav-scroll-btn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  border-radius: var(--radius-medium);
+  color: var(--color-text);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.content-nav-scroll-btn.visible {
+  display: flex;
+}
+
+.content-nav-scroll-btn:hover {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+  color: white;
+  box-shadow: 0 2px 8px rgba(var(--color-accent-rgb, 99, 102, 241), 0.3);
+}
+
+.content-nav-scroll-btn:active {
+  transform: scale(0.95);
+}
+
+.content-nav-scroll-btn svg {
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+  flex-shrink: 0;
+  display: block;
+}
+
+.content-tab {
+  background: none;
+  border: none;
+  padding: 12px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+  position: relative;
+}
+
+.content-tab::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--color-accent);
+  transform: scaleX(0);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.content-tab:hover {
+  color: var(--color-text);
+}
+
+.content-tab:hover::after {
+  transform: scaleX(0.6);
+  opacity: 0.5;
+}
+
+.content-tab.active {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.content-tab.active::after {
+  transform: scaleX(1);
+  opacity: 1;
+}
+
+/* ============================================================
+   TAB CONTENT
+   ============================================================ */
+
+.tab-content-wrapper {
+  min-height: 400px;
+}
+
+.tab-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* Content Cards */
+.content-card {
+  background: var(--color-surface);
+  border-radius: var(--radius-large);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.card-header {
+  padding: 24px 28px;
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-header h3,
+.card-header h4 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.card-body {
+  padding: 28px;
+}
+
+/* Form Elements */
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+/* Single column form layout */
+.form-single-column {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 800px;
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  gap: 16px;
+  align-items: center;
+}
+
+.form-row label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text);
+  text-align: left;
+}
+
+.form-row .form-input,
+.form-row .form-textarea {
+  margin: 0;
+}
+
+.form-input,
+.form-textarea {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-small);
+  font-size: 14px;
+  font-family: inherit;
+  transition: all 0.2s;
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+.form-input:hover,
+.form-textarea:hover {
+  border-color: var(--color-accent);
+}
+
+.form-input:focus,
+.form-textarea:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.1);
+}
+
+.form-textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.code-font {
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 13px;
+}
+
+.form-hint {
+  grid-column: 2;
+  font-size: 11px;
+  color: var(--color-text-muted);
+  margin-top: -8px;
+}
+
+.form-hint code {
+  background: var(--color-surface-elevated);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 10px;
+}
+
+/* Toggle Switch */
+.toggle-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.toggle-switch input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: relative;
+  width: 48px;
+  height: 24px;
+  background: var(--color-border);
+  border-radius: 12px;
+  transition: all 0.3s;
+}
+
+.toggle-slider::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transition: all 0.3s;
+}
+
+.toggle-switch input:checked ~ .toggle-slider {
+  background: var(--color-accent);
+}
+
+.toggle-switch input:checked ~ .toggle-slider::after {
+  transform: translateX(24px);
+}
+
+.toggle-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+/* Stats Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.stat-card {
+  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-muted) 100%);
+  border-radius: var(--radius-medium);
+  padding: 24px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  border: 1px solid var(--color-border);
+  transition: all 0.2s;
+}
+
+.stat-card.clickable {
+  cursor: pointer;
+}
+
+.stat-card.clickable:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+  border-color: var(--color-accent);
+}
+
+.stat-icon {
+  font-size: 32px;
+  opacity: 0.8;
+}
+
+.stat-icon-svg svg {
+  stroke: #3b82f6;
+}
+
+.stat-card:hover .stat-icon-svg svg {
+  stroke: #2563eb;
+}
+
+.stat-content {
+  flex: 1;
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--color-text);
+  line-height: 1;
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  font-weight: 500;
+}
+
+/* Action Buttons */
+.action-buttons {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+/* ============================================================
+   LIST CONTAINERS (Repos, Tests, Templates, History)
+   ============================================================ */
+
+.list-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.list-item {
+  background: var(--color-surface-muted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-medium);
+  padding: 20px;
+  transition: all 0.2s;
+}
+
+.list-item:hover {
+  border-color: var(--color-accent);
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
+}
+
+.list-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+
+.list-item-title {
+  font-weight: 600;
+  font-size: 15px;
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.list-item-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.list-item-meta {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  line-height: 1.6;
+}
+
+.list-item-description {
+  font-size: 14px;
+  color: var(--color-text-muted);
+  margin-bottom: 8px;
+}
+
+/* Code Elements */
+code {
+  background: #f6f8fa;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 12px;
+  color: #e36209;
+}
+
+/* ============================================================
+   CODE EDITOR
+   ============================================================ */
+
+.code-editor {
+  width: 100%;
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+  padding: 16px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-medium);
+  background: #f6f8fa;
+  color: var(--color-text);
+  resize: vertical;
+  transition: all 0.2s;
+}
+
+.code-editor:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 3px rgba(63, 114, 255, 0.1);
+}
+
+.editor-footer {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  text-align: right;
+}
+
+.markdown-preview-container {
+  padding: 20px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-medium);
+  background: var(--color-surface);
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+/* ============================================================
+   FILES TAB
+   ============================================================ */
+
+.files-card {
+  padding: 0;
+}
+
+.files-layout {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  min-height: 500px;
+}
+
+.files-sidebar {
+  background: var(--color-surface-muted);
+  border-right: 1px solid var(--color-border);
+  padding: 16px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.file-tab {
+  background: none;
+  border: none;
+  padding: 12px 20px;
+  text-align: left;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--color-text-muted);
+  position: relative;
+}
+
+.file-tab::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--color-accent);
+  transform: scaleY(0);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.file-tab:hover {
+  color: var(--color-text);
+}
+
+.file-tab:hover::before {
+  transform: scaleY(0.5);
+  opacity: 0.5;
+}
+
+.file-tab.active {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.file-tab.active::before {
+  transform: scaleY(1);
+  opacity: 1;
+}
+
+.file-icon {
+  font-size: 16px;
+}
+
+#new-repo-tab .repo-icon,
+#new-test-tab .test-icon,
+#new-template-tab .template-icon,
+#new-deploy-profile-tab .deploy-add-icon {
+  filter: grayscale(1) opacity(0.6);
+}
+
+.deploy-add-icon {
+  font-size: 16px;
+}
+
+.files-content {
+  padding: 24px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.file-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.file-header h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+/* ============================================================
+   REPOS TAB
+   ============================================================ */
+
+.repos-card {
+  padding: 0;
+}
+
+.repos-layout {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  min-height: 500px;
+}
+
+.repos-sidebar {
+  background: var(--color-surface-muted);
+  border-right: 1px solid var(--color-border);
+  padding: 16px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.repo-tab {
+  background: none;
+  border: none;
+  padding: 12px 20px;
+  text-align: left;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--color-text-muted);
+  position: relative;
+}
+
+.repo-tab::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--color-accent);
+  transform: scaleY(0);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.repo-tab:hover {
+  color: var(--color-text);
+}
+
+.repo-tab:hover::before {
+  transform: scaleY(0.5);
+  opacity: 0.5;
+}
+
+.repo-tab.active {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.repo-tab.active::before {
+  transform: scaleY(1);
+  opacity: 1;
+}
+
+.repo-icon {
+  font-size: 16px;
+}
+
+.repos-content {
+  padding: 24px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.repo-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.repo-header h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.repo-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ============================================================
+   TESTS TAB
+   ============================================================ */
+
+.tests-card {
+  padding: 0;
+}
+
+.tests-layout {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  min-height: 500px;
+}
+
+.tests-sidebar {
+  background: var(--color-surface-muted);
+  border-right: 1px solid var(--color-border);
+  padding: 16px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.test-tab {
+  background: none;
+  border: none;
+  padding: 12px 20px;
+  text-align: left;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--color-text-muted);
+  position: relative;
+}
+
+.test-tab::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--color-accent);
+  transform: scaleY(0);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.test-tab:hover {
+  color: var(--color-text);
+}
+
+.test-tab:hover::before {
+  transform: scaleY(0.5);
+  opacity: 0.5;
+}
+
+.test-tab.active {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.test-tab.active::before {
+  transform: scaleY(1);
+  opacity: 1;
+}
+
+.test-icon {
+  font-size: 16px;
+}
+
+.tests-content {
+  padding: 24px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.test-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.test-header h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.test-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ============================================================
+   TEMPLATES TAB
+   ============================================================ */
+
+.templates-card {
+  padding: 0;
+}
+
+.templates-layout {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  min-height: 500px;
+}
+
+.templates-sidebar {
+  background: var(--color-surface-muted);
+  border-right: 1px solid var(--color-border);
+  padding: 16px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.template-tab {
+  background: none;
+  border: none;
+  padding: 12px 20px;
+  text-align: left;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--color-text-muted);
+  position: relative;
+}
+
+.template-tab::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--color-accent);
+  transform: scaleY(0);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.template-tab:hover {
+  color: var(--color-text);
+}
+
+.template-tab:hover::before {
+  transform: scaleY(0.5);
+  opacity: 0.5;
+}
+
+.template-tab.active {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.template-tab.active::before {
+  transform: scaleY(1);
+  opacity: 1;
+}
+
+.template-icon {
+  font-size: 16px;
+}
+
+.templates-content {
+  padding: 24px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.template-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.template-header h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.template-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* ============================================================
+   DEPLOY TAB
+   ============================================================ */
+
+.deploy-card {
+  padding: 0;
+}
+
+.deploy-layout {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  min-height: 500px;
+}
+
+.deploy-sidebar {
+  background: var(--color-surface-muted);
+  border-right: 1px solid var(--color-border);
+  padding: 16px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.deploy-profile-tab {
+  background: none;
+  border: none;
+  padding: 12px 20px;
+  text-align: left;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--color-text-muted);
+  position: relative;
+}
+
+.deploy-profile-tab::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--color-accent);
+  transform: scaleY(0);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.deploy-profile-tab:hover {
+  color: var(--color-text);
+}
+
+.deploy-profile-tab:hover::before {
+  transform: scaleY(0.5);
+  opacity: 0.5;
+}
+
+.deploy-profile-tab.active {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.deploy-profile-tab.active::before {
+  transform: scaleY(1);
+  opacity: 1;
+}
+
+.deploy-profile-tab.missing-script {
+  color: var(--color-warning);
+}
+
+.deploy-profile-tab.missing-script::after {
+  content: '⚠';
+  margin-left: auto;
+  font-size: 12px;
+}
+
+.deploy-profile-icon {
+  width: 16px;
+  height: 16px;
+  stroke: #3b82f6;
+  flex-shrink: 0;
+}
+
+.deploy-profile-tab:hover .deploy-profile-icon {
+  stroke: #2563eb;
+}
+
+.deploy-profile-tab.active .deploy-profile-icon {
+  stroke: #2563eb;
+}
+
+.deploy-content {
+  padding: 24px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.deploy-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.deploy-header h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.deploy-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.deploy-section {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-small);
+  background: var(--color-surface);
+  overflow: hidden;
+}
+
+.deploy-section + .deploy-section {
+  margin-top: 16px;
+}
+
+.profile-editor .deploy-section + .deploy-section {
+  margin-top: 0;
+}
+
+.deploy-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--color-surface-muted);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.deploy-section-toggle {
+  background: none;
+  border: none;
+  color: var(--color-text);
+  font-size: 14px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  padding: 0;
+}
+
+.deploy-section-toggle::after {
+  content: '▾';
+  font-size: 14px;
+  color: var(--color-text-muted);
+  transition: transform 0.2s ease;
+}
+
+.deploy-section-toggle[aria-expanded="false"]::after {
+  transform: rotate(-90deg);
+}
+
+.deploy-section-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.deploy-section-count {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+}
+
+.deploy-section-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.deploy-profile-info {
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-small);
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.deploy-profile-info-row {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.deploy-profile-info-row:last-child {
+  margin-bottom: 0;
+}
+
+.deploy-profile-info-label {
+  font-weight: 500;
+  color: var(--color-text-muted);
+  min-width: 100px;
+}
+
+.deploy-profile-info-value {
+  color: var(--color-text);
+}
+
+.deploy-profile-help {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  margin-top: 8px;
+  padding: 12px;
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-small);
+  border-left: 3px solid var(--color-accent);
+}
+
+.deployment-progress {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-small);
+  background: var(--color-surface-muted);
+  padding: 16px;
+}
+
+.deployment-progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.deployment-progress-header h4 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.deployment-progress-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  margin-bottom: 12px;
+}
+
+.deployment-status-badge {
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.deployment-status-badge.running {
+  background: #e8f4ff;
+  color: #0b61a4;
+}
+
+.deployment-status-badge.completed {
+  background: #e6f4ea;
+  color: #1a7f37;
+}
+
+.deployment-status-badge.failed {
+  background: #fdecea;
+  color: #b42318;
+}
+
+.deployment-status-badge.cancelled {
+  background: #f2f2f2;
+  color: #5f6b7a;
+}
+
+.deployment-output-container {
+  background: #0f172a;
+  border-radius: var(--radius-small);
+  padding: 12px;
+  max-height: 240px;
+  overflow: auto;
+  border: 1px solid #1e293b;
+}
+
+#deployment-output {
+  color: #e2e8f0;
+  font-size: 12px;
+  line-height: 1.4;
+  margin: 0;
+  white-space: pre-wrap;
+}
+
+.deploy-history-section .deploy-section-body {
+  padding-top: 0;
+}
+
+.deployment-history-item {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-small);
+  padding: 12px;
+  background: var(--color-surface);
+  margin-bottom: 10px;
+}
+
+.deployment-history-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.deployment-history-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.deployment-history-meta {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  margin-top: 6px;
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.deployment-history-output {
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-small);
+  padding: 10px;
+  margin-top: 10px;
+  font-size: 12px;
+  white-space: pre-wrap;
+  max-height: 180px;
+  overflow: auto;
+}
+
+.deployment-param-row {
+  margin-bottom: 12px;
+}
+
+.deployment-param-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.deployment-param-description {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  margin-top: 4px;
+}
+
+.deployment-param-row .param-required {
+  font-size: 11px;
+  color: var(--color-warning, #f59e0b);
+  margin-left: 8px;
+}
+
+/* Alerts */
+.alert {
+  display: flex;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: var(--radius-small);
+  font-size: 13px;
+  margin-bottom: 16px;
+}
+
+.alert-warning {
+  background: #fff3cd;
+  border: 1px solid #ffc107;
+  color: #856404;
+}
+
+.alert-icon {
+  font-size: 20px;
+  flex-shrink: 0;
+}
+
+.alert strong {
+  display: block;
+  margin-bottom: 4px;
+  font-weight: 600;
+}
+
+.alert p {
+  margin: 0;
+}
+
+/* ============================================================
+   SUBSECTIONS
+   ============================================================ */
+
+.subsection {
+  margin-top: 28px;
+  padding-top: 28px;
+  border-top: 1px solid var(--color-border);
+}
+
+.subsection-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.subsection-header h4 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.subsection-actions {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.config-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.config-item {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-small);
+  border: 1px solid var(--color-border);
+}
+
+.config-item input {
+  flex: 1;
+  min-width: 0;
+}
+
+.config-item button {
+  flex-shrink: 0;
+}
+
+.primary-url-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.primary-url-toggle input {
+  margin: 0;
+}
+
+.primary-url-toggle.is-primary {
+  color: var(--color-text);
+  background: rgba(76, 129, 255, 0.12);
+  border-color: rgba(76, 129, 255, 0.35);
+}
+
+/* ============================================================
+   COMMIT MODAL
+   ============================================================ */
+
+.commit-author {
+  padding: 12px 16px;
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-small);
+  font-size: 13px;
+  color: var(--color-text-muted);
+  margin-bottom: 20px;
+}
+
+.commit-author strong {
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+.modified-files-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.modified-files-list li {
+  padding: 8px 12px;
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-small);
+  font-size: 13px;
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  color: var(--color-text);
+  margin-bottom: 6px;
+}
+
+.modified-files-list li::before {
+  content: '●';
+  color: var(--color-warning);
+  margin-right: 8px;
+}
+
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 20px;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  user-select: none;
+  font-size: 14px;
+  color: var(--color-text);
+}
+
+.checkbox-label input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+
+/* ============================================================
+   UTILITIES
+   ============================================================ */
+
+.text-muted {
+  color: var(--color-text-muted);
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 60px;
+  color: var(--color-text-muted);
+  font-size: 14px;
+}
+
+/* ============================================================
+   RESPONSIVE
+   ============================================================ */
+
+@media (max-width: 768px) {
+  .status-row {
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .status-actions {
+    margin-left: 0;
+    width: 100%;
+  }
+
+  .status-actions button {
+    flex: 1;
+  }
+
+  .content-nav {
+    gap: 4px;
+  }
+
+  .content-tab {
+    padding: 10px 16px;
+    font-size: 13px;
+  }
+
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .stats-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .files-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .files-sidebar {
+    border-right: none;
+    border-bottom: 1px solid var(--color-border);
+    flex-direction: row;
+    overflow-x: auto;
+    padding: 12px;
+    gap: 4px;
+  }
+
+  .file-tab {
+    white-space: nowrap;
+  }
+
+  .file-tab::before {
+    left: 0;
+    right: 0;
+    top: auto;
+    bottom: 0;
+    width: auto;
+    height: 3px;
+    transform: scaleX(0);
+  }
+
+  .file-tab:hover::before {
+    transform: scaleX(0.5);
+  }
+
+  .file-tab.active::before {
+    transform: scaleX(1);
+  }
+
+  .templates-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .templates-sidebar {
+    border-right: none;
+    border-bottom: 1px solid var(--color-border);
+    flex-direction: row;
+    overflow-x: auto;
+    padding: 12px;
+    gap: 4px;
+  }
+
+  .template-tab {
+    white-space: nowrap;
+  }
+
+  .template-tab::before {
+    left: 0;
+    right: 0;
+    top: auto;
+    bottom: 0;
+    width: auto;
+    height: 3px;
+    transform: scaleX(0);
+  }
+
+  .template-tab:hover::before {
+    transform: scaleX(0.5);
+  }
+
+  .template-tab.active::before {
+    transform: scaleX(1);
+  }
+
+  .repos-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .repos-sidebar {
+    border-right: none;
+    border-bottom: 1px solid var(--color-border);
+    flex-direction: row;
+    overflow-x: auto;
+    padding: 12px;
+    gap: 4px;
+  }
+
+  .repo-tab {
+    white-space: nowrap;
+  }
+
+  .repo-tab::before {
+    left: 0;
+    right: 0;
+    top: auto;
+    bottom: 0;
+    width: auto;
+    height: 3px;
+    transform: scaleX(0);
+  }
+
+  .repo-tab:hover::before {
+    transform: scaleX(0.5);
+  }
+
+  .repo-tab.active::before {
+    transform: scaleX(1);
+  }
+
+  .tests-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .tests-sidebar {
+    border-right: none;
+    border-bottom: 1px solid var(--color-border);
+    flex-direction: row;
+    overflow-x: auto;
+    padding: 12px;
+    gap: 4px;
+  }
+
+  .test-tab {
+    white-space: nowrap;
+  }
+
+  .test-tab::before {
+    left: 0;
+    right: 0;
+    top: auto;
+    bottom: 0;
+    width: auto;
+    height: 3px;
+    transform: scaleX(0);
+  }
+
+  .test-tab:hover::before {
+    transform: scaleX(0.5);
+  }
+
+  .test-tab.active::before {
+    transform: scaleX(1);
+  }
+
+  .deploy-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .deploy-sidebar {
+    border-right: none;
+    border-bottom: 1px solid var(--color-border);
+    flex-direction: row;
+    overflow-x: auto;
+    padding: 12px;
+    gap: 4px;
+  }
+
+  .deploy-profile-tab {
+    white-space: nowrap;
+  }
+
+  .deploy-profile-tab::before {
+    left: 0;
+    right: 0;
+    top: auto;
+    bottom: 0;
+    width: auto;
+    height: 3px;
+    transform: scaleX(0);
+  }
+
+  .deploy-profile-tab:hover::before {
+    transform: scaleX(0.5);
+  }
+
+  .deploy-profile-tab.active::before {
+    transform: scaleX(1);
+  }
+}
+
+/* Smooth animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.tab-panel {
+  animation: fadeIn 0.3s ease;
+}
+
+/* ============================================================
+   DROPDOWN MENU
+   ============================================================ */
+
+.dropdown-container {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 200px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-medium);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  padding: 4px 0;
+}
+
+.dropdown-item {
+  width: 100%;
+  padding: 8px 16px;
+  text-align: left;
+  background: none;
+  border: none;
+  color: var(--color-text);
+  font-size: 13px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  transition: background-color 0.15s ease;
+}
+
+.dropdown-item:hover:not(:disabled) {
+  background: var(--color-surface-muted);
+}
+
+.dropdown-item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dropdown-item span {
+  font-size: 14px;
+}
+
+.dropdown-divider {
+  height: 1px;
+  background: var(--color-border);
+  margin: 4px 0;
+}
+
+/* ============================================================
+   BUILD SECRETS LIST
+   ============================================================ */
+
+.build-secrets-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.build-secret-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  background: var(--color-surface-muted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-medium);
+  transition: all 0.2s;
+}
+
+.build-secret-item:hover {
+  border-color: var(--color-accent);
+}
+
+.build-secret-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.build-secret-id {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--color-text);
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+}
+
+.build-secret-path {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  word-break: break-all;
+}
+
+.build-secret-path-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  margin-top: 2px;
+}
+
+.build-secret-path-status.warning {
+  color: var(--color-warning);
+}
+
+.build-secret-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.path-validation {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  margin-top: 8px;
+  border-radius: var(--radius-small);
+  font-size: 13px;
+}
+
+.path-validation.exists {
+  background: #d1f7d6;
+  color: #1e7e34;
+  border: 1px solid #b7ebb5;
+}
+
+.path-validation.not-exists {
+  background: #fff3cd;
+  color: #856404;
+  border: 1px solid #ffc107;
+}
+
+#build-secret-path-status {
+  font-size: 16px;
+}
+
+#build-secret-path-message {
+  flex: 1;
+}
+
+/* ============================================================
+   BASE IMAGE BUILD HISTORY (Compact)
+   ============================================================ */
+
+.build-history-compact-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.build-history-row {
+  display: grid;
+  grid-template-columns: 24px 1fr auto auto;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-small);
+  font-size: 13px;
+}
+
+.build-history-row.success {
+  border-left: 3px solid var(--color-success, #22c55e);
+}
+
+.build-history-row.failed {
+  border-left: 3px solid var(--color-error, #ef4444);
+}
+
+.build-history-row .build-status-icon {
+  font-size: 14px;
+}
+
+.build-history-row .build-date {
+  color: var(--color-text);
+}
+
+.build-history-row .build-duration {
+  color: var(--color-text-muted);
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.build-history-row .build-triggered-by {
+  color: var(--color-text-muted);
+  font-size: 12px;
+}
+
+/* Medium modal size for base image build */
+.modal-content.modal-medium {
+  max-width: 550px;
+}
+
+/* Wide modal size for repo modal with provider selection */
+.modal-content.modal-content-wide {
+  max-width: 600px;
+}
+
+/* Form section divider */
+.form-section-divider {
+  margin-top: 24px;
+  padding-top: 20px;
+  border-top: 1px solid var(--color-border);
+}
+
+.form-section-divider h4 {
+  margin: 0 0 4px 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.form-section-divider p {
+  margin: 0 0 16px 0;
+  font-size: 13px;
+}
+
+/* ============================================================
+   EMAIL SETTINGS
+   ============================================================ */
+
+.email-test-result {
+  margin-top: 12px;
+  padding: 10px 14px;
+  border-radius: var(--radius-medium);
+  font-size: 13px;
+  background: var(--color-surface-muted);
+  border: 1px solid var(--color-border);
+}
+
+.email-test-result.success {
+  background: var(--color-success-bg, rgba(34, 197, 94, 0.1));
+  border-color: var(--color-success, #22c55e);
+  color: var(--color-success, #22c55e);
+}
+
+.email-test-result.error {
+  background: var(--color-error-bg, rgba(239, 68, 68, 0.1));
+  border-color: var(--color-error, #ef4444);
+  color: var(--color-error, #ef4444);
+}
+
+/* SSO Settings Tabs */
+.sso-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 20px;
+}
+
+.sso-tab {
+  padding: 10px 16px;
+  background: none;
+  border: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  position: relative;
+  transition: color 0.2s ease;
+}
+
+.sso-tab::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--color-accent);
+  transform: scaleX(0);
+  transition: transform 0.2s ease;
+}
+
+.sso-tab:hover {
+  color: var(--color-text);
+}
+
+.sso-tab.active {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.sso-tab.active::after {
+  transform: scaleX(1);
+}
+
+.sso-tab-content {
+  display: none;
+}
+
+.sso-tab-content.active {
+  display: block;
+}
+
+/* SSO field description (below form-row) */
+.sso-field-description {
+  margin: -8px 0 16px 0;
+  padding-left: 196px;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  line-height: 1.4;
+}
+
+/* SSO Test Result */
+.sso-test-result {
+  margin-top: 12px;
+  padding: 10px 14px;
+  border-radius: var(--radius-medium);
+  font-size: 13px;
+  background: var(--color-surface-muted);
+  border: 1px solid var(--color-border);
+}
+
+.sso-test-result.success {
+  background: var(--color-success-bg, rgba(34, 197, 94, 0.1));
+  border-color: var(--color-success, #22c55e);
+  color: var(--color-success, #22c55e);
+}
+
+.sso-test-result.error {
+  background: var(--color-error-bg, rgba(239, 68, 68, 0.1));
+  border-color: var(--color-error, #ef4444);
+  color: var(--color-error, #ef4444);
+}
+
+/* ============================================================
+   SECRETS SECTION (Secrets Tab)
+   ============================================================ */
+
+.card-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.card-header-actions .filter-label {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  margin-right: -4px;
+}
+
+.secrets-filter-dropdown {
+  padding: 6px 12px;
+  font-size: 13px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-medium);
+  background: var(--color-surface);
+  color: var(--color-text);
+  cursor: pointer;
+  min-width: 90px;
+}
+
+.secrets-filter-dropdown:hover {
+  border-color: var(--color-border-hover, var(--color-accent));
+}
+
+.secrets-filter-dropdown:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-accent-muted, rgba(99, 102, 241, 0.2));
+}
+
+.secrets-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.secrets-empty {
+  text-align: center;
+  padding: 24px;
+  color: var(--color-text-muted);
+}
+
+.secrets-empty p {
+  margin: 0;
+}
+
+.secrets-empty p + p {
+  margin-top: 8px;
+}
+
+.secret-item {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 16px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-medium);
+  transition: all 0.2s;
+}
+
+.secret-item:hover {
+  border-color: var(--color-border-hover, var(--color-accent));
+  background: var(--color-surface-muted);
+}
+
+.secret-icon {
+  font-size: 18px;
+  color: var(--color-text-muted);
+}
+
+.secret-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.secret-name {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.secret-meta {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.secret-type-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-small);
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.secret-type-badge.file {
+  color: var(--color-info, #3b82f6);
+  background: rgba(59, 130, 246, 0.1);
+}
+
+.secret-type-badge.value {
+  color: var(--color-success, #22c55e);
+  background: rgba(34, 197, 94, 0.1);
+}
+
+/* Availability badges for secrets (Build/Deploy) */
+.secret-availability-badges {
+  display: inline-flex;
+  gap: 4px;
+}
+
+.availability-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  border-radius: var(--radius-small);
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.availability-badge.deploy {
+  color: #1565c0;
+  background: #e3f2fd;
+}
+
+.availability-badge.build {
+  color: #e65100;
+  background: #fff3e0;
+}
+
+.availability-badge.tasks {
+  color: #2e7d32;
+  background: #e8f5e9;
+}
+
+/* Dark mode overrides for availability badges */
+[data-theme="dark"] .availability-badge.deploy {
+  color: #90caf9;
+  background: rgba(144, 202, 249, 0.15);
+}
+
+[data-theme="dark"] .availability-badge.build {
+  color: #ffcc80;
+  background: rgba(255, 204, 128, 0.15);
+}
+
+[data-theme="dark"] .availability-badge.tasks {
+  color: #a5d6a7;
+  background: rgba(165, 214, 167, 0.15);
+}
+
+/* Secret modal - increase height to fit Git PAT fields without scrollbar */
+#secret-modal .modal-content {
+  max-height: 95vh;
+}
+
+/* Git PAT badge styling */
+.git-pat-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  border-radius: var(--radius-small);
+  font-size: 10px;
+  font-weight: 500;
+  color: #6a1b9a;
+  background: #f3e5f5;
+}
+
+[data-theme="dark"] .git-pat-badge {
+  color: #ce93d8;
+  background: rgba(206, 147, 216, 0.15);
+}
+
+.secret-description {
+  color: var(--color-text-muted);
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 300px;
+}
+
+.secret-source {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--color-text-muted);
+  background: var(--color-surface);
+  padding: 2px 6px;
+  border-radius: var(--radius-small);
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.secret-meta-column {
+  min-width: 0;
+}
+
+.secret-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.secret-edit,
+.secret-delete {
+  background: none;
+  border: none;
+  padding: 6px 10px;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  border-radius: var(--radius-small);
+  font-size: 14px;
+  transition: all 0.2s;
+}
+
+.secret-edit:hover {
+  color: var(--color-accent);
+  background: var(--color-surface);
+}
+
+.secret-delete:hover {
+  color: var(--color-error, #ef4444);
+  background: rgba(239, 68, 68, 0.1);
+}
+
+/* Radio group styling */
+.radio-group {
+  display: flex;
+  gap: 16px;
+}
+
+.radio-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.radio-label input[type="radio"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+/* Field validation styling */
+.field-validation {
+  margin-top: 6px;
+  padding: 8px 12px;
+  border-radius: var(--radius-small);
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.field-validation.valid {
+  background: rgba(34, 197, 94, 0.1);
+  color: var(--color-success, #22c55e);
+  border: 1px solid rgba(34, 197, 94, 0.3);
+}
+
+.field-validation.invalid {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--color-error, #ef4444);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+}
+
+.field-validation.warning {
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--color-warning, #f59e0b);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+}
+
+/* Form row actions */
+.form-row-actions {
+  display: flex;
+  gap: 8px;
+}
+
+/* Secret meta text */
+.secret-meta-text {
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+.secret-meta-text.warning {
+  color: var(--color-warning, #f59e0b);
+}
+
+/* ============================================================
+   PROFILE EDITOR (Deploy Tab)
+   ============================================================ */
+
+.profile-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-top: 16px;
+}
+
+.profile-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.profile-section .section-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 0;
+}
+
+.profile-section .section-header h5 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.profile-section .script-filename {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--color-text-muted);
+  background: var(--color-surface-muted);
+  padding: 2px 8px;
+  border-radius: var(--radius-small);
+}
+
+.profile-section .monaco-editor-container {
+  height: 300px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-medium);
+  overflow: hidden;
+}
+
+.profile-section .text-muted.small {
+  font-size: 12px;
+  margin: 0;
+}
+
+.profile-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.profile-list-empty {
+  padding: 16px;
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: 13px;
+  background: var(--color-surface);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-medium);
+}
+
+/* Profile secret and parameter items */
+.profile-secret-item,
+.profile-param-item {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  gap: 8px;
+  align-items: center;
+  padding: 10px 12px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-medium);
+}
+
+.profile-secret-item:hover,
+.profile-param-item:hover {
+  border-color: var(--color-border-hover, var(--color-accent));
+}
+
+.profile-item-key {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+.profile-item-value {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.profile-item-meta {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.profile-item-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.profile-item-edit,
+.profile-item-delete {
+  background: none;
+  border: none;
+  padding: 4px 8px;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  border-radius: var(--radius-small);
+  font-size: 13px;
+  transition: all 0.2s;
+}
+
+.profile-item-edit:hover {
+  color: var(--color-accent);
+  background: var(--color-surface-muted);
+}
+
+.profile-item-delete:hover {
+  color: var(--color-error, #ef4444);
+  background: rgba(239, 68, 68, 0.1);
+}
+
+/* Profile secret items specific */
+.profile-secret-item {
+  grid-template-columns: auto 1fr auto auto;
+}
+
+.profile-secret-item .secret-expose-type {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  border-radius: var(--radius-small);
+}
+
+.profile-secret-item .secret-expose-type.env_var {
+  color: var(--color-success, #22c55e);
+  background: rgba(34, 197, 94, 0.1);
+}
+
+.profile-secret-item .secret-expose-type.file {
+  color: var(--color-info, #3b82f6);
+  background: rgba(59, 130, 246, 0.1);
+}
+
+/* Profile param items specific */
+.profile-param-item {
+  grid-template-columns: auto 1fr auto auto auto;
+}
+
+.profile-param-item .param-type-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  border-radius: var(--radius-small);
+  color: var(--color-text-muted);
+  background: var(--color-surface-muted);
+}
+
+.profile-param-item .param-required {
+  font-size: 11px;
+  color: var(--color-warning, #f59e0b);
+}
+
+/* Validation warnings in profile */
+.profile-validation-warning {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: rgba(245, 158, 11, 0.1);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+  border-radius: var(--radius-medium);
+  color: var(--color-warning, #f59e0b);
+  font-size: 13px;
+}
+
+.profile-validation-warning .warning-icon {
+  font-size: 16px;
+}
+
+/* Profile secret warning state (secret not found in environment) */
+.profile-secret-item.warning {
+  border-color: var(--color-warning, #f59e0b);
+  background: rgba(245, 158, 11, 0.05);
+}
+
+/* ============================================================
+   Parameter Options Editor (for list type parameters)
+   ============================================================ */
+.options-editor {
+  width: 100%;
+}
+
+.options-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.options-empty {
+  padding: 16px;
+  text-align: center;
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-small);
+  font-size: 13px;
+}
+
+.option-item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-small);
+  border: 1px solid var(--color-border);
+}
+
+.option-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.option-row .option-value-input {
+  flex: 1;
+  min-width: 120px;
+}
+
+.option-row .option-label-input {
+  flex: 1;
+  min-width: 120px;
+}
+
+.option-item .option-desc-input {
+  width: 100%;
+  font-size: 12px;
+}
+
+/* Danger icon button for removing options */
+.btn-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-small);
+  background: transparent;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.btn-icon:hover {
+  background: var(--color-surface-muted);
+}
+
+.btn-icon[disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+  background: transparent;
+}
+
+.btn-danger-icon {
+  color: var(--color-text-muted);
+}
+
+.btn-danger-icon:hover {
+  color: var(--color-error, #ef4444);
+  background: rgba(239, 68, 68, 0.1);
+}
+
+/* Medium modal size for parameter modal */
+.modal-content.modal-medium {
+  max-width: 600px;
+}
+
+/* ============================================================
+   SKILLS (OVERVIEW + MODAL)
+   ============================================================ */
+
+.skills-chip-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 0;
+}
+
+.skills-chip-grid-inline {
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  padding-bottom: 2px;
+}
+
+.skills-chip-grid-inline.skills-chip-grid-empty {
+  flex-wrap: wrap;
+  overflow-x: visible;
+}
+
+.skills-form-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.skills-form-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+
+.skills-empty {
+  color: var(--color-text-muted);
+  font-size: 12px;
+  white-space: nowrap;
+  margin-right: auto;
+}
+
+.skills-add-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 10px;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-muted);
+  color: var(--color-text);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex: 0 0 auto;
+}
+
+.skills-add-btn svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  flex-shrink: 0;
+  stroke: currentColor;
+}
+
+.skills-add-btn:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.skill-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: var(--color-surface-muted);
+  border: 1px solid var(--color-border);
+  font-size: 12px;
+  color: var(--color-text);
+}
+
+.skill-chip-name {
+  font-weight: 600;
+}
+
+.skill-chip-id {
+  color: var(--color-text-muted);
+  font-size: 11px;
+}
+
+.skill-chip-remove {
+  border: none;
+  background: transparent;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  padding: 2px 4px;
+  border-radius: 999px;
+}
+
+.skill-chip-remove:hover {
+  color: var(--color-accent);
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.skills-modal-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
+  gap: 20px;
+  margin-top: 16px;
+}
+
+.skills-modal-panel {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-medium);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  min-height: 320px;
+}
+
+.skills-modal-search {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.skills-modal-search-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.skills-modal-search-icon {
+  position: absolute;
+  left: 10px;
+  color: var(--color-text-muted);
+}
+
+.skills-modal-search-input input {
+  padding-left: 32px;
+}
+
+.skills-modal-search-clear {
+  position: absolute;
+  right: 8px;
+  background: transparent;
+  border: none;
+  font-size: 16px;
+  color: var(--color-text-muted);
+  cursor: pointer;
+}
+
+.skills-modal-search-meta {
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+.skills-modal-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  color: var(--color-text-muted);
+  font-size: 13px;
+}
+
+.skills-modal-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.skills-modal-item {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-medium);
+  padding: 10px 12px;
+  background: var(--color-surface-muted);
+  transition: border-color 0.2s ease, background 0.2s ease;
+}
+
+.skills-modal-item.selected {
+  border-color: var(--color-accent);
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.skills-modal-item label {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 10px;
+  align-items: start;
+  cursor: pointer;
+}
+
+.skills-modal-item input[type="checkbox"] {
+  margin-top: 2px;
+}
+
+.skills-modal-item-name {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--color-text);
+}
+
+.skills-modal-item-id {
+  font-size: 11px;
+  color: var(--color-text-muted);
+  margin-left: 6px;
+}
+
+.skills-modal-item-desc {
+  display: block;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  margin-top: 4px;
+}
+
+.skills-modal-selected-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.skills-modal-selected-count {
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: var(--color-surface-muted);
+  border: 1px solid var(--color-border);
+  color: var(--color-text-muted);
+}
+
+.skills-modal-selected-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.skills-modal-selected .skill-chip {
+  background: var(--color-surface-muted);
+}
+
+.skills-modal-manage-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-right: auto;
+  color: var(--color-text-muted);
+  font-size: 13px;
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.skills-modal-manage-link:hover {
+  color: var(--color-primary);
+}
+
+.skills-modal-manage-link svg {
+  opacity: 0.7;
+}
+
+.skills-modal-manage-link:hover svg {
+  opacity: 1;
+}
+
+@media (max-width: 960px) {
+  .skills-modal-layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ============================================================
+   Settings List (for Git Providers Settings modal)
+   ============================================================ */
+
+.settings-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.settings-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: var(--color-surface-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-small);
+}
+
+.settings-list-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.settings-list-name {
+  font-weight: 500;
+  font-family: var(--font-family-mono);
+  color: var(--color-text-primary);
+}
+
+.settings-list-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+.settings-list-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  background: var(--color-surface-muted);
+  border-radius: 9999px;
+  font-size: 11px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.settings-list-detail {
+  color: var(--color-text-muted);
+}
+
+.settings-list-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.list-header {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 16px;
+}
+
+/* Token Expiry Settings */
+.token-expiry-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.token-expiry-suffix {
+  font-size: 14px;
+  color: var(--color-text-muted);
+}
+
+/* Providers Section Header */
+.providers-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+  padding-top: 16px;
+  margin-bottom: 16px;
+  border-top: 1px solid var(--color-border);
+}
+
+.providers-section-header h4 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+/* ============================================================
+   Repository Access (Environment Tab)
+   ============================================================ */
+
+.section-description {
+  margin-bottom: 20px;
+  color: var(--color-text-muted);
+}
+
+.repo-checkbox-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 8px;
+  background: var(--color-surface-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-small);
+}
+
+.repo-checkbox-item {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 12px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-small);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.repo-checkbox-item:hover {
+  background: var(--color-surface-muted);
+}
+
+.repo-checkbox-item input[type="checkbox"] {
+  margin-right: 8px;
+}
+
+.repo-checkbox-name {
+  font-family: var(--font-family-mono);
+  font-weight: 500;
+}
+
+.repo-checkbox-desc {
+  font-size: 12px;
+  color: var(--color-text-muted);
+  margin-left: 24px;
+  margin-top: 4px;
+}
+
+.spinner-small {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.form-section {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-start;
+  padding-top: 16px;
+  border-top: 1px solid var(--color-border);
+  margin-top: 8px;
+}
+
+/* Modal description text */
+.modal-description {
+  margin-bottom: 20px;
+  color: var(--color-text-muted);
+  line-height: 1.5;
+}
+
+/* ============================================================
+   BUILD TAB - DOCKER CONFIGURATION
+   ============================================================ */
+
+.docker-config-section {
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-medium);
+  padding: 20px;
+}
+
+.input-with-hint {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.empty-list-message {
+  padding: 24px;
+  text-align: center;
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-medium);
+  border: 1px dashed var(--color-border);
+}
+
+.empty-list-message p {
+  margin: 0;
+}
+
+/* Custom Build Commands List */
+#docker-commands-list .command-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 16px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-medium);
+  margin-bottom: 8px;
+}
+
+#docker-commands-list .command-item:last-child {
+  margin-bottom: 0;
+}
+
+.command-order {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-top: 8px;
+}
+
+.command-order button {
+  background: none;
+  border: none;
+  padding: 2px;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  border-radius: var(--radius-small);
+  transition: all 0.2s;
+}
+
+.command-order button:hover {
+  color: var(--color-text);
+  background: var(--color-surface-muted);
+}
+
+.command-order button:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.command-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.command-content input,
+.command-content select {
+  font-size: 13px;
+}
+
+.command-timing {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+.command-timing select {
+  padding: 4px 8px;
+  font-size: 12px;
+  background: var(--color-surface-muted);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-small);
+  color: var(--color-text);
+}
+
+.command-actions {
+  display: flex;
+  align-items: flex-start;
+  padding-top: 6px;
+}
+
+.command-actions button {
+  background: none;
+  border: none;
+  padding: 6px;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  border-radius: var(--radius-small);
+  transition: all 0.2s;
+}
+
+.command-actions button:hover {
+  color: var(--color-danger);
+  background: var(--color-danger-bg, rgba(239, 68, 68, 0.1));
+}
+
+/* ============================================================
+   COLLAPSIBLE SECTIONS
+   ============================================================ */
+
+.collapsible-card {
+  overflow: hidden;
+}
+
+.collapsible-header {
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.2s;
+}
+
+.collapsible-header:hover {
+  background: var(--color-surface-muted);
+}
+
+.collapsible-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.collapsible-title h3 {
+  margin: 0;
+}
+
+.collapse-icon {
+  transition: transform 0.25s ease;
+}
+
+.collapsible-card.expanded .collapse-icon {
+  transform: rotate(180deg);
+}
+
+.collapsible-body {
+  border-top: 1px solid var(--color-border);
+  padding-top: 20px;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  border-radius: 9999px;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.badge-muted {
+  background: var(--color-surface-muted);
+  color: var(--color-text-muted);
+  border: 1px solid var(--color-border);
+}
+
+/* ============================================================
+   SCRIPTS TABS (setup.sh / cleanup.sh)
+   ============================================================ */
+
+.scripts-tabs-container {
+  margin-bottom: 16px;
+}
+
+.scripts-tabs {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: 12px;
+}
+
+.script-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 12px;
+  background: none;
+  border: none;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+
+.script-tab::after {
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--color-accent);
+  transform: scaleX(0);
+  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.script-tab:hover {
+  color: var(--color-text);
+}
+
+.script-tab:hover::after {
+  transform: scaleX(0.6);
+  opacity: 0.5;
+}
+
+.script-tab.active {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.script-tab.active::after {
+  transform: scaleX(1);
+  opacity: 1;
+}
+
+.script-tab svg {
+  opacity: 0.7;
+}
+
+.script-tab.active svg {
+  opacity: 1;
+}
+
+.script-description {
+  font-size: 13px;
+  color: var(--color-text-muted);
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-small);
+  border-left: 3px solid var(--color-accent);
+}
+
+/* ============================================================
+   DOCKERFILE PREVIEW MODAL
+   ============================================================ */
+
+#dockerfile-preview-content {
+  position: relative;
+}
+
+#dockerfile-preview-text {
+  counter-reset: line;
+}
+
+#dockerfile-preview-text .line {
+  display: block;
+}
+
+#dockerfile-preview-text .line::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 2em;
+  margin-right: 1em;
+  text-align: right;
+  color: var(--color-text-muted);
+  opacity: 0.5;
+}
+
+/* Syntax highlighting for Dockerfile */
+.dockerfile-keyword {
+  color: var(--color-accent);
+  font-weight: 600;
+}
+
+.dockerfile-comment {
+  color: var(--color-text-muted);
+  font-style: italic;
+}
+
+.dockerfile-string {
+  color: var(--color-success, #10b981);
+}
+
+/* ============================================================
+   RESPONSIVE ADJUSTMENTS FOR BUILD TAB
+   ============================================================ */
+
+@media (max-width: 768px) {
+  .scripts-tabs {
+    overflow-x: auto;
+  }
+
+  .script-tab {
+    white-space: nowrap;
+  }
+
+  .command-item {
+    flex-direction: column;
+  }
+
+  .command-order {
+    flex-direction: row;
+    padding-top: 0;
+  }
+}
+
+/* ============================================================
+   GITHUB APP SETUP WIZARD
+   ============================================================ */
+
+.wizard-step {
+  animation: fadeIn 0.2s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.wizard-action-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 32px 24px;
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-medium);
+  margin: 16px 0;
+}
+
+.wizard-action-panel .btn-large {
+  padding: 12px 32px;
+  font-size: 15px;
+}
+
+.wizard-hint {
+  margin-top: 12px;
+  font-size: 13px;
+}
+
+.wizard-success-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  background: color-mix(in srgb, var(--color-success) 10%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
+  border-radius: var(--radius-medium);
+  margin-bottom: 16px;
+}
+
+.wizard-success-banner .success-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  background: var(--color-success);
+  color: white;
+  border-radius: 50%;
+  font-size: 14px;
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+.wizard-success-banner strong {
+  display: block;
+  margin-bottom: 4px;
+}
+
+.wizard-success-banner p {
+  margin: 0;
+  font-size: 13px;
+  color: var(--color-text-muted);
+}
+
+/* Provider Type Selection */
+.provider-type-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.provider-type-option {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-medium);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  text-align: left;
+  width: 100%;
+}
+
+.provider-type-option:hover {
+  background: var(--color-surface-muted);
+  border-color: var(--color-border-strong);
+}
+
+.provider-type-option:active {
+  transform: scale(0.98);
+}
+
+.provider-type-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: var(--color-surface-muted);
+  border-radius: var(--radius-medium);
+  color: var(--color-text);
+}
+
+.provider-type-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.provider-type-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.provider-type-info strong {
+  font-size: 14px;
+  color: var(--color-text);
+}
+
+.provider-type-desc {
+  font-size: 12px;
+  color: var(--color-text-muted);
+}
+
+/* Form section */
+.form-section {
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid var(--color-border);
+}
+
+.form-section-title {
+  margin: 0 0 8px 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-text);
+}