Spaces:
Sleeping
Sleeping
| :root { | |
| --bg: #eef3fb; | |
| --bg-alt: #f7f9fc; | |
| --surface: #ffffff; | |
| --surface-muted: #f8fafc; | |
| --ink: #0f172a; | |
| --muted: #5b6b82; | |
| --line: #d9e2ef; | |
| --line-strong: #c3d1e3; | |
| --accent: #2563eb; | |
| --accent-strong: #1d4ed8; | |
| --accent-soft: #dbeafe; | |
| --accent-soft-strong: #bfdbfe; | |
| --success: #15803d; | |
| --success-soft: #dcfce7; | |
| --warning: #b45309; | |
| --warning-soft: #fef3c7; | |
| --danger: #c2410c; | |
| --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.08); | |
| --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06); | |
| --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.05); | |
| --radius-xl: 22px; | |
| --radius-lg: 16px; | |
| --radius-md: 12px; | |
| --radius-sm: 10px; | |
| font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| min-height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| background: | |
| radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 34%), | |
| linear-gradient(180deg, var(--bg), var(--bg-alt)); | |
| color: var(--ink); | |
| font: 14px/1.5 "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; | |
| } | |
| button, | |
| input, | |
| textarea { | |
| font: inherit; | |
| } | |
| button { | |
| border: 0; | |
| } | |
| .app-shell { | |
| min-height: 100vh; | |
| } | |
| .app-shell.app-live { | |
| background: | |
| radial-gradient(circle at top right, rgba(21, 128, 61, 0.06), transparent 34%), | |
| linear-gradient(180deg, var(--bg), var(--bg-alt)); | |
| } | |
| .app-shell.app-alert { | |
| background: | |
| radial-gradient(circle at top right, rgba(180, 83, 9, 0.07), transparent 34%), | |
| linear-gradient(180deg, var(--bg), var(--bg-alt)); | |
| } | |
| .sidebar-shell { | |
| min-height: 100vh; | |
| padding: 14px; | |
| } | |
| .surface-card, | |
| .screen-card, | |
| .settings-panel, | |
| .workflow-card, | |
| .category-group, | |
| .launch-panel, | |
| .selection-tile, | |
| .stat-card, | |
| .escalation-block { | |
| background: var(--surface); | |
| border: 1px solid var(--line); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .topbar, | |
| .settings-panel, | |
| .screen-card { | |
| border-radius: var(--radius-xl); | |
| } | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 14px 16px; | |
| margin-bottom: 10px; | |
| } | |
| .brand-lockup { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| min-width: 0; | |
| } | |
| .brand-mark { | |
| display: grid; | |
| place-items: center; | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 12px; | |
| background: linear-gradient(180deg, var(--accent), var(--accent-strong)); | |
| color: #fff; | |
| font-size: 16px; | |
| font-weight: 800; | |
| } | |
| .brand-name, | |
| .brand-subtitle, | |
| .field-label, | |
| .step-label, | |
| .workflow-kicker, | |
| .dashboard-kicker, | |
| .group-title, | |
| .screen-card h2, | |
| .screen-copy, | |
| .status-copy, | |
| .group-count, | |
| .dashboard-metric, | |
| .launch-title, | |
| .workflow-card h3, | |
| .workflow-card p { | |
| margin: 0; | |
| } | |
| .brand-name { | |
| font-size: 18px; | |
| font-weight: 700; | |
| line-height: 1.1; | |
| } | |
| .brand-subtitle, | |
| .field-label, | |
| .step-label, | |
| .workflow-kicker, | |
| .dashboard-kicker { | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| } | |
| .settings-panel { | |
| margin-bottom: 10px; | |
| padding: 14px; | |
| } | |
| .screen-card { | |
| min-height: calc(100vh - 92px); | |
| padding: 16px; | |
| } | |
| .screen-intro { | |
| display: grid; | |
| gap: 4px; | |
| margin-bottom: 12px; | |
| } | |
| .screen-card h2, | |
| .dashboard-metric, | |
| .launch-title { | |
| letter-spacing: -0.03em; | |
| } | |
| .screen-card h2 { | |
| font-size: 28px; | |
| line-height: 1.08; | |
| font-weight: 750; | |
| } | |
| .screen-copy, | |
| .muted, | |
| .settings-note, | |
| .empty-copy { | |
| color: var(--muted); | |
| } | |
| .field-label { | |
| display: block; | |
| margin-bottom: 8px; | |
| } | |
| .identity-chip, | |
| .metric-badge, | |
| .group-count, | |
| .selection-indicator { | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 30px; | |
| padding: 6px 11px; | |
| border-radius: 999px; | |
| font-size: 12px; | |
| font-weight: 700; | |
| } | |
| .identity-chip, | |
| .selection-indicator { | |
| border: 1px solid var(--line); | |
| background: var(--surface-muted); | |
| color: var(--ink); | |
| } | |
| .metric-badge, | |
| .group-count, | |
| .selection-indicator-on { | |
| border: 1px solid var(--accent-soft-strong); | |
| background: var(--accent-soft); | |
| color: var(--accent-strong); | |
| } | |
| .section-topline { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 8px; | |
| margin-bottom: 12px; | |
| } | |
| .text-button { | |
| padding: 0; | |
| background: transparent; | |
| color: var(--muted); | |
| font-size: 12px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| } | |
| .text-button:hover { | |
| color: var(--ink); | |
| } | |
| .text-input, | |
| .input-area { | |
| width: 100%; | |
| border: 1px solid var(--line); | |
| border-radius: 16px; | |
| padding: 14px 15px; | |
| background: var(--surface); | |
| color: var(--ink); | |
| outline: none; | |
| transition: border-color 140ms ease, box-shadow 140ms ease; | |
| } | |
| .text-input:focus, | |
| .input-area:focus { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); | |
| } | |
| .input-area { | |
| min-height: 220px; | |
| resize: vertical; | |
| } | |
| .button-row, | |
| .action-row { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 14px; | |
| } | |
| .compact-actions { | |
| margin-top: 10px; | |
| } | |
| .centered-actions { | |
| justify-content: center; | |
| } | |
| .split-actions > * { | |
| flex: 1; | |
| } | |
| .primary-button, | |
| .secondary-button, | |
| .ghost-button { | |
| min-height: 42px; | |
| padding: 11px 16px; | |
| border-radius: 999px; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: transform 140ms ease, box-shadow 140ms ease; | |
| } | |
| .primary-button { | |
| background: var(--accent); | |
| color: #fff; | |
| box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22); | |
| } | |
| .secondary-button { | |
| background: var(--accent-soft); | |
| color: var(--accent-strong); | |
| border: 1px solid var(--accent-soft-strong); | |
| } | |
| .ghost-button { | |
| background: var(--surface); | |
| color: var(--ink); | |
| border: 1px solid var(--line); | |
| } | |
| .primary-button:hover, | |
| .secondary-button:hover, | |
| .ghost-button:hover, | |
| .workflow-card:hover { | |
| transform: translateY(-1px); | |
| } | |
| button[disabled] { | |
| opacity: 0.48; | |
| cursor: not-allowed; | |
| transform: none; | |
| box-shadow: none; | |
| } | |
| .status-copy { | |
| margin-top: 10px; | |
| font-size: 12px; | |
| } | |
| .error-copy { | |
| color: var(--danger); | |
| } | |
| .category-grid, | |
| .workflow-grid, | |
| .dashboard-stats, | |
| .escalation-grid { | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .category-group, | |
| .workflow-card, | |
| .stat-card, | |
| .launch-panel, | |
| .escalation-block { | |
| padding: 14px; | |
| border-radius: var(--radius-lg); | |
| } | |
| .group-header, | |
| .workflow-card-topline, | |
| .dashboard-hero { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 10px; | |
| } | |
| .selection-list, | |
| .workflow-card ul { | |
| margin: 10px 0 0; | |
| padding-left: 0; | |
| list-style: none; | |
| } | |
| .selection-list li + li, | |
| .workflow-card li + li { | |
| margin-top: 8px; | |
| } | |
| .selection-tile { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 11px 12px; | |
| border-radius: var(--radius-md); | |
| background: var(--surface-muted); | |
| } | |
| .selection-tile input { | |
| width: 18px; | |
| height: 18px; | |
| accent-color: var(--accent); | |
| } | |
| .selection-tile span { | |
| font-weight: 600; | |
| } | |
| .workflow-card { | |
| width: 100%; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .workflow-card-selected { | |
| border-color: var(--accent-soft-strong); | |
| background: #f8fbff; | |
| box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08); | |
| } | |
| .workflow-card h3 { | |
| margin-top: 10px; | |
| font-size: 20px; | |
| font-weight: 700; | |
| } | |
| .workflow-owner { | |
| margin-top: 10px; | |
| } | |
| .dashboard-hero { | |
| align-items: center; | |
| padding: 14px 16px; | |
| border-radius: var(--radius-lg); | |
| background: linear-gradient(180deg, #f8fbff, #f3f7ff); | |
| border: 1px solid var(--accent-soft-strong); | |
| } | |
| .dashboard-metric { | |
| margin-top: 4px; | |
| font-size: 28px; | |
| font-weight: 750; | |
| } | |
| .dashboard-stats { | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| margin-top: 12px; | |
| } | |
| .stat-card { | |
| background: var(--surface-muted); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .stat-card span { | |
| display: block; | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| .stat-card strong { | |
| display: block; | |
| margin-top: 4px; | |
| font-size: 26px; | |
| font-weight: 700; | |
| } | |
| .compact-panel { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .deploy-status { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .live-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 999px; | |
| background: var(--success); | |
| } | |
| .two-up { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| @media (max-width: 560px) { | |
| .sidebar-shell { | |
| padding: 12px; | |
| } | |
| .topbar, | |
| .settings-panel, | |
| .screen-card { | |
| border-radius: 20px; | |
| } | |
| .screen-card { | |
| min-height: calc(100vh - 84px); | |
| padding: 14px; | |
| } | |
| .screen-card h2 { | |
| font-size: 24px; | |
| } | |
| .dashboard-stats, | |
| .two-up, | |
| .split-actions { | |
| grid-template-columns: 1fr; | |
| } | |
| .button-row, | |
| .action-row, | |
| .section-topline, | |
| .compact-panel { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| } | |