:root { color-scheme: light; --ink:#182338; --muted:#738096; --line:#e5e9f0; --blue:#4169e1; --blue-dark:#3156c7; --canvas:#f6f8fb; --navy:#111c33; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:var(--canvas); color:var(--ink); font-family:'DM Sans','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:14px; }
button,a { font:inherit; }
a { color:inherit; text-decoration:none; }
.layout { min-height:100vh; }
.sidebar { position:fixed; inset:0 auto 0 0; width:246px; display:flex; flex-direction:column; padding:26px 16px 18px; background:var(--navy); color:#cad3e3; z-index:4; }
.brand { display:flex; align-items:center; gap:11px; padding:0 11px 30px; color:#fff; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:linear-gradient(145deg,#80a3ff,#456ce8); color:white; font-weight:700; font-size:20px; box-shadow:0 6px 16px #3156c766; }
.brand strong { display:block; font-size:15px; letter-spacing:.2px; }
.brand small { display:block; margin-top:2px; color:#8390a6; font-size:9px; letter-spacing:1.5px; }
.nav-caption { padding:7px 11px; color:#7f8ba1; font-size:11px; font-weight:600; letter-spacing:.6px; }
.nav-caption-spaced { margin-top:27px; }
nav { display:flex; flex-direction:column; gap:5px; }
.nav-item { display:flex; align-items:center; gap:12px; min-height:42px; padding:0 12px; border-radius:8px; color:#b7c1d3; font-size:13px; transition:background .16s,color .16s; }
.nav-item:hover { background:#1c2a45; color:#fff; }
.nav-item.active { background:#26385a; color:#fff; box-shadow:inset 3px 0 #81a3ff; }
.nav-icon { width:18px; text-align:center; color:#8ea6d3; font-size:17px; }
.nav-item.active .nav-icon { color:#a9c0ff; }
.external { margin-left:auto; color:#8190a7; }
.sub-item { margin-left:16px; min-height:38px; font-size:12px; }
.sidebar-bottom { display:flex; align-items:center; gap:8px; margin-top:auto; padding:15px 11px 0; border-top:1px solid #28344b; font-size:12px; color:#c4cede; }
.status-dot,.secure-dot { width:7px; height:7px; display:inline-block; border-radius:50%; background:#38c994; box-shadow:0 0 0 3px #38c99422; }
.env-pill { margin-left:auto; border:1px solid #52617b; border-radius:5px; padding:4px 7px; color:#b8c9ef; font-size:9px; font-weight:700; letter-spacing:.8px; }
.main { min-height:100vh; margin-left:246px; display:flex; flex-direction:column; }
.topbar { height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 42px; background:#fff; border-bottom:1px solid var(--line); }
.breadcrumbs { font-size:12px; color:#7c8798; }.breadcrumbs span { padding:0 9px; color:#c1c8d3; }
.topbar-right { display:flex; align-items:center; gap:8px; color:#647187; font-size:12px; }
.content { width:min(100%,1180px); margin:0 auto; padding:43px 42px 28px; flex:1; }
.hidden { display:none!important; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:42px; }
.eyebrow { color:#6c83b5; font-size:10px; font-weight:700; letter-spacing:1.7px; }
h1 { margin:9px 0 7px; color:#17233a; font-size:30px; line-height:1.2; letter-spacing:-.6px; }
.page-heading p { margin:0; color:#7a8799; font-size:13px; }
.host-card { display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid var(--line); background:#fff; border-radius:10px; box-shadow:0 2px 7px #1b31500a; }
.host-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:8px; color:#5175d5; background:#eff3ff; font-size:19px; }
.host-card small,.host-card strong { display:block; }.host-card small { color:#8792a2; font-size:10px; }.host-card strong { margin-top:3px; font-size:12px; }
.online { display:flex; align-items:center; gap:5px; margin-left:12px; color:#2f9c73; font-size:11px; }.online i { width:6px; height:6px; border-radius:50%; background:#37c58f; }
.section-title { margin:0 0 17px; }.section-title h2 { margin:0; font-size:16px; }.section-title p { margin:5px 0 0; color:#8a95a6; font-size:12px; }
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.tool-card { display:block; min-height:207px; width:100%; padding:21px; border:1px solid #e4e9f1; border-radius:12px; background:#fff; text-align:left; box-shadow:0 4px 14px #1a2a4306; transition:transform .18s,box-shadow .18s,border-color .18s; cursor:pointer; }
.tool-card:hover { transform:translateY(-2px); border-color:#cad6f2; box-shadow:0 10px 22px #1a2a4310; }
.card-top { display:flex; align-items:center; justify-content:space-between; }.tool-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:11px; font-size:19px; font-weight:700; }
.supabase-icon { background:#e9f8f0; color:#3bb17d; }.cicd-icon { background:#edf1ff; color:#5272dc; font-size:25px; }
.arrow { color:#8e9aae; font-size:18px; }.tool-card h3 { margin:18px 0 7px; font-size:15px; }.tool-card p { min-height:34px; margin:0; color:#7c899c; font-size:12px; line-height:1.65; }
.card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:17px; color:#5672c3; font-size:11px; font-weight:600; }.card-foot b { padding-left:4px; font-size:15px; }
.tag { border-radius:4px; background:#f1f4fa; padding:5px 7px; color:#738097; font-size:10px; font-weight:500; }
.info-strip { display:flex; align-items:center; gap:12px; margin-top:24px; padding:15px 17px; border:1px solid #e3eaf7; border-radius:9px; background:#f0f5ff; }
.info-icon { display:grid; flex:none; place-items:center; width:20px; height:20px; border:1px solid #7592d7; border-radius:50%; color:#5574c4; font-size:12px; font-weight:700; }.info-strip strong { display:block; color:#425987; font-size:11px; }.info-strip p { margin:3px 0 0; color:#73829e; font-size:11px; line-height:1.5; }.info-host { margin-left:auto; color:#8795ad; font:11px ui-monospace,monospace; }
.compact-heading { margin-bottom:25px; }.large-pill { margin-left:0; padding:7px 10px; border-color:#d6def2; background:#edf2ff; color:#506ab2; font-size:10px; }
.pipeline-card { padding:23px 24px 0; border:1px solid #e4e9f1; border-radius:12px; background:#fff; box-shadow:0 4px 14px #1a2a4306; }
.pipeline-header { display:flex; align-items:center; gap:14px; }.pipeline-title { flex:1; }.pipeline-title h2 { margin:0 0 5px; font-size:15px; }.pipeline-title p { margin:0; color:#7e8a9c; font-size:12px; }.branch-pill { border:1px solid #e4e9f0; border-radius:6px; padding:7px 10px; color:#63718a; font-size:11px; }.branch-pill span { margin-right:5px; color:#657fc4; }
.pipeline-steps { display:flex; align-items:center; margin:26px 0 24px; padding:17px 20px; border:1px solid #edf0f5; border-radius:9px; background:#fafbfe; }.step { display:flex; align-items:center; gap:9px; color:#59677e; font-size:11px; white-space:nowrap; }.step-number { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#e9eeff; color:#5470cf; font-size:10px; font-weight:700; }.step-line { flex:1; height:1px; margin:0 14px; background:#dfe5f0; }
.pipeline-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 0 20px; border-top:1px solid #edf0f4; }.action-note strong,.action-note span { display:block; }.action-note strong { color:#56637a; font-size:11px; }.action-note span { margin-top:4px; color:#8a94a4; font-size:10px; }
.primary-button { display:flex; align-items:center; gap:9px; border:0; border-radius:7px; padding:10px 15px; background:var(--blue); color:#fff; font-weight:600; font-size:12px; box-shadow:0 4px 9px #4169e133; cursor:pointer; transition:background .15s,transform .15s; }.primary-button:hover { background:var(--blue-dark); transform:translateY(-1px); }.primary-button:disabled { cursor:wait; opacity:.65; transform:none; }.primary-button span { font-size:16px; }
.job-panel { margin:0 -24px; padding:15px 24px 20px; border-top:1px solid #edf0f4; }.job-header { display:flex; align-items:center; justify-content:space-between; font-size:11px; }.job-status { border-radius:20px; padding:4px 8px; background:#f1f3f7; color:#68758a; font-size:10px; }.job-status.running { background:#fff4df; color:#b77b20; }.job-status.succeeded { background:#e7f8f0; color:#21885e; }.job-status.failed { background:#fff0f0; color:#b74848; }.job-log { max-height:250px; overflow:auto; margin:12px 0 0; padding:12px; border-radius:7px; background:#111a2b; color:#d4dfef; font:10px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
footer { display:flex; justify-content:space-between; margin:0 42px; padding:14px 0 22px; border-top:1px solid #e7ebf2; color:#98a2b1; font-size:10px; }
@media(max-width:900px) { .sidebar { width:210px; }.main { margin-left:210px; }.content { padding:32px 25px 22px; }.topbar { padding:0 25px; }footer { margin:0 25px; } }
@media(max-width:650px) { .sidebar { width:62px; padding:18px 8px; }.brand { justify-content:center; padding:0 0 26px; }.brand>span:last-child,.nav-caption,.nav-item>span:not(.nav-icon),.sidebar-bottom>span:not(.status-dot) { display:none; }.nav-item { justify-content:center; padding:0; }.nav-icon { font-size:19px; }.nav-item.sub-item { margin-left:0; }.env-pill { display:none; }.sidebar-bottom { justify-content:center; padding:15px 0 0; }.main { margin-left:62px; }.topbar { height:54px; padding:0 16px; }.content { padding:28px 16px 20px; }.page-heading { align-items:flex-start; flex-direction:column; margin-bottom:30px; }.host-card { width:100%; }.cards { grid-template-columns:1fr; gap:12px; }.tool-card { min-height:190px; }.pipeline-card { padding:17px 16px 0; }.pipeline-header { align-items:flex-start; flex-wrap:wrap; }.pipeline-title { min-width:calc(100% - 65px); }.branch-pill { margin-left:56px; }.pipeline-steps { align-items:flex-start; flex-direction:column; gap:13px; margin:18px 0; padding:14px; }.step-line { width:1px; height:9px; margin:-9px 0 -9px 10px; flex:none; }.pipeline-actions { align-items:stretch; flex-direction:column; }.primary-button { justify-content:center; }.job-panel { margin:0 -16px; padding:14px 16px 18px; }.info-host { display:none; }footer { margin:0 16px; } }