:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color:#172033; background:#f5f7fa; } * { box-sizing:border-box; } body { margin:0; } button,input,select,textarea { font:inherit; } button { border:1px solid #b7c2d0; border-radius:5px; padding:7px 11px; color:#172033; background:white; cursor:pointer; } button:hover { border-color:#3273dc; color:#1557ae; } button.primary { background:#1769d2; border-color:#1769d2; color:white; } button.danger { color:#b42318; } .app-shell { min-height:100vh; display:grid; grid-template-columns:220px 1fr; } .sidebar { background:#101b2d; color:#d4deeb; padding:18px 12px; display:flex; flex-direction:column; gap:26px; } .brand { color:#fff; font-size:21px; text-decoration:none; font-weight:700; padding:0 10px; } nav { display:grid; gap:4px; } nav a { text-decoration:none; color:#b6c4d6; padding:9px 10px; border-radius:4px; } nav a.active,nav a:hover { background:#1b2a42; color:white; } .sidebar footer { margin-top:auto; display:grid; gap:4px; padding:10px; border-top:1px solid #283951; font-size:12px; } .sidebar footer span:first-child { color:#8ee1bd; } main { min-width:0; } .bar { min-height:72px; padding:14px 28px; background:white; border-bottom:1px solid #dce3eb; display:flex; justify-content:space-between; align-items:center; } .bar div { display:grid; gap:3px; } .bar small { color:#637187; } .bar-actions { display:flex; align-items:center; gap:10px; } #scope { display:flex; gap:8px; } #scope select { width:auto; min-width:120px; padding:6px 8px; font-size:12px; } #mobile-nav { display:none; } #mobile-nav-toggle { display:none; } #screen { padding:26px 28px; max-width:1420px; } #notice { min-height:0; padding:0 28px; color:#b42318; } #notice:not(:empty) { padding-top:12px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:24px; } h2 { font-size:17px; } h3 { font-size:14px; } .grid { display:grid; gap:16px; } .grid.stats { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:20px; } .grid.two { grid-template-columns:minmax(0,2fr) minmax(280px,1fr); } .card { background:#fff; border:1px solid #dce3eb; border-radius:6px; padding:18px; } .stat { display:grid; gap:6px; } .stat span,.muted,small { color:#637187; } .stat strong { font-size:27px; } table { width:100%; border-collapse:collapse; } th,td { padding:10px 8px; border-bottom:1px solid #e5eaf0; text-align:left; font-size:13px; vertical-align:top; } th { color:#637187; font-weight:600; } .status { display:inline-block; border-radius:12px; padding:2px 8px; background:#e8eff8; color:#315f93; font-size:12px; } .status.active,.status.running { background:#e7f5ec; color:#197444; } .status.failed,.status.invalid { background:#fdeceb; color:#b42318; } .status.awaiting_approval { background:#fff4d6; color:#946600; } .actions { display:flex; flex-wrap:wrap; gap:8px; } form { display:grid; gap:12px; } label { display:grid; gap:5px; color:#3e4c60; font-size:13px; } input,select,textarea { width:100%; border:1px solid #b7c2d0; border-radius:4px; padding:8px; background:white; } textarea { min-height:110px; resize:vertical; } .event { padding:9px 10px; border-left:3px solid #7da4d6; background:#f7f9fc; margin:7px 0; font-size:13px; } .event time { color:#637187; font-size:11px; display:block; margin-top:5px; } .tabs { display:flex; border-bottom:1px solid #dce3eb; margin-bottom:16px; gap:4px; } .tabs button { border:0; border-radius:0; } .tabs button.active { border-bottom:2px solid #1769d2; color:#1769d2; } .split { display:grid; grid-template-columns:300px minmax(0,1fr); gap:16px; } .list button { display:block; width:100%; text-align:left; border:0; border-radius:0; border-bottom:1px solid #e5eaf0; padding:11px; } .list button.selected { border-left:3px solid #1769d2; background:#f2f7ff; } .risk { color:#946600; background:#fff4d6; padding:8px; } .error { color:#b42318; background:#fdeceb; padding:8px; } .validation { margin:10px 0; padding:10px 10px 10px 28px; font-size:13px; } .validation.error { color:#b42318; background:#fdeceb; } .validation.warning { color:#946600; background:#fff4d6; } .slot { border:1px dashed #7d90aa; padding:16px; color:#637187; } .artifact-preview { margin-top:12px; padding:12px; border:1px solid #c9d6e5; background:#f7f9fc; } .artifact-preview .actions { justify-content:space-between; align-items:center; } .artifact-preview h3 { margin:0; } .artifact-preview pre { max-height:360px; margin:10px 0 0; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; color:#172033; } code { font-size:12px; overflow-wrap:anywhere; } @media(max-width:800px){ .app-shell{grid-template-columns:1fr}.sidebar{display:none}.bar{padding:10px 18px;align-items:flex-start}.route-heading{min-width:0}.route-heading small{line-height:1.2}.bar-actions{flex-wrap:wrap;justify-content:flex-end;gap:5px}#scope select{min-width:0;max-width:114px}#mobile-nav-toggle{display:inline-block}#mobile-nav{display:none;grid-template-columns:repeat(2,minmax(0,1fr));padding:8px 18px 14px;background:#101b2d;gap:4px}#mobile-nav.open{display:grid}#mobile-nav a{color:#d4deeb;padding:9px 10px}.grid.stats,.grid.two,.split{grid-template-columns:1fr}#screen{padding:18px}.workspace-layout{min-height:0} }