:root {
  --page: oklch(98.5% .001 286); --canvas: oklch(96.1% .002 248); --surface: oklch(100% 0 0); --inset: oklch(97.9% .002 248); --field: oklch(96.1% .001 286);
  --ink: oklch(24.7% .006 258); --ink-2: oklch(50.6% .01 264); --ink-3: oklch(60% .009 264); --line: oklch(94.6% .003 264); --line-strong: oklch(88% .005 258);
  --accent: oklch(59% .205 255); --accent-ink: oklch(50% .187 255); --accent-tint: oklch(96% .019 253); --button-ink: oklch(100% 0 0);
  --green: oklch(48% .155 151); --green-tint: oklch(95.8% .017 159); --orange: oklch(55% .15 50); --orange-tint: oklch(96.4% .021 68); --red: oklch(53% .192 23); --red-tint: oklch(95.6% .017 17);
  --shadow: 0 0 0 1px var(--line), 0 1px 2px oklch(0% 0 0 / .04); --stripe: oklch(40% 0 0 / .06); --overlay: oklch(15% .01 264 / .4);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color-scheme: light;
}
:root[data-theme="dark"] {
  --page: oklch(20.9% .004 264); --canvas: oklch(23.1% .004 264); --surface: oklch(26% .006 271); --inset: oklch(24.3% .004 264); --field: oklch(29.3% .006 271);
  --ink: oklch(96.4% .002 248); --ink-2: oklch(75% .008 261); --ink-3: oklch(66% .01 264); --line: oklch(30.8% .006 258); --line-strong: oklch(40% .007 264);
  --accent: oklch(68% .173 253); --accent-ink: oklch(78.8% .113 248); --accent-tint: oklch(68% .173 253 / .16); --button-ink: oklch(15% .02 255);
  --green: oklch(75% .154 154); --green-tint: oklch(70.5% .154 154 / .14); --orange: oklch(78% .156 56); --orange-tint: oklch(74.6% .156 56 / .14); --red: oklch(75% .18 21); --red-tint: oklch(66.6% .18 21 / .14);
  --stripe: oklch(100% 0 0 / .04); --overlay: oklch(0% 0 0 / .6); color-scheme: dark;
}
* { box-sizing: border-box; } [hidden] { display: none !important; }
body { margin: 0; background: repeating-linear-gradient(-45deg, transparent 0 7px, var(--stripe) 7px 8px) var(--canvas); color: var(--ink); font: 13px/20px var(--font); -webkit-font-smoothing: antialiased; }
button, input, textarea { color: inherit; font: inherit; } button, a, input, textarea, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; } button:disabled { cursor: wait; opacity: .55; } a { color: var(--accent-ink); text-decoration: none; } a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } h1, h2, h3, p { margin: 0; } h1 { font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -.025em; } h2, h3 { font-size: 13px; font-weight: 600; }
small, .hint { font-size: 12px; line-height: 18px; color: var(--ink-3); } .muted { color: var(--ink-2); } .mono, code, pre { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11.5px; } .grow { flex: 1; min-width: 0; } .wrap { overflow-wrap: anywhere; } .stack { display: grid; gap: 12px; } .gap { margin-top: 16px; }
.frame { max-width: 1568px; min-height: 100vh; margin: 0 auto; background: var(--page); display: grid; grid-template-columns: 224px minmax(0,1fr); box-shadow: var(--shadow); }
aside { position: sticky; top: 0; height: 100dvh; padding: 40px 16px 24px; border-right: 1px dashed var(--line-strong); display: flex; flex-direction: column; gap: 32px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); } .brand b { font-size: 15px; font-weight: 600; letter-spacing: -.025em; } .brand small { display: block; font-size: 11px; } .mark { background: var(--ink); color: var(--page); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 19px; font-weight: 500; }
nav { display: grid; gap: 4px; } nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--ink-2); } nav a:hover { background: var(--canvas); text-decoration: none; } nav a[aria-current] { background: var(--canvas); color: var(--ink); font-weight: 600; } .nav-icon { width: 16px; font-size: 15px; text-align: center; color: var(--ink-3); }
.aside-foot { margin-top: auto; display: grid; gap: 16px; } .controls { display: flex; flex-wrap: wrap; gap: 8px; } .topbar { min-height: 64px; border-bottom: 1px dashed var(--line-strong); padding: 16px 32px; display: flex; align-items: center; gap: 12px; } .eyebrow { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .avatar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink); font-size: 11px; }
main { min-width: 0; } .pagehead { padding: 36px 32px 28px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; } .pagehead p { margin-top: 6px; color: var(--ink-3); font-size: 12.5px; } .pagehead .toolbar { margin-top: 0; } section { padding: 32px; border-top: 1px dashed var(--line-strong); } .section-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .section-head .index { color: var(--ink-3); font: 11px/19px var(--mono); } .section-head p { margin-top: 3px; color: var(--ink-3); font-size: 12.5px; }
.card { padding: 16px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); min-width: 0; } .row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .row .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .row-title { font-weight: 500; } .cardlink { display: block; color: inherit; } .cardlink:hover { text-decoration: none; box-shadow: 0 0 0 1px var(--line-strong); } .project-mark { height: 36px; width: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; background: var(--inset); color: var(--ink-2); font: 13px var(--mono); }
.grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 12px; } .stat { display: grid; gap: 12px; } .stat strong { font: 600 24px/32px var(--mono); } .stat small { color: var(--ink-3); } .facts { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 16px; } .fact { min-width: 0; } .fact dt { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; } .fact dd { margin: 0; overflow-wrap: anywhere; } .facts.compact { margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; border: 0; border-radius: 999px; padding: 5px 14px; background: var(--canvas); color: var(--ink); font-weight: 500; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--line-strong); text-decoration: none; } .btn.primary { background: var(--accent); color: var(--button-ink); } .btn.ghost { background: transparent; box-shadow: 0 0 0 1px var(--line-strong); } .btn.small { min-height: 27px; font-size: 12px; padding: 3px 11px; } .btn.danger { color: var(--red); background: var(--red-tint); } .ibtn { min-width: 32px; padding: 5px 8px; } .toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--field); } .seg button { border: 0; border-radius: 999px; background: none; padding: 3px 10px; font-size: 12px; color: var(--ink-3); min-height: 26px; } .seg button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow); color: var(--ink); }
.chip { display: inline-block; background: var(--inset); padding: 2px 7px; border-radius: 6px; font: 11px/18px var(--mono); color: var(--ink-2); } .st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); } .st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .st.good { color: var(--green); } .st.warn { color: var(--orange); } .st.bad { color: var(--red); }
.field { display: grid; gap: 6px; min-width: 0; } .field > span { font-size: 12px; font-weight: 500; } input, textarea { border: 0; border-radius: 8px; padding: 9px 12px; width: 100%; background: var(--field); box-shadow: inset 0 0 0 1px transparent; min-width: 0; } input:hover, textarea:hover { box-shadow: inset 0 0 0 1px var(--line-strong); } textarea { resize: vertical; min-height: 100px; } input::placeholder, textarea::placeholder { color: var(--ink-3); } .form { display: grid; gap: 16px; max-width: 680px; } .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } .full { grid-column: 1 / -1; } .editor { min-height: 260px; tab-size: 2; font: 12px/20px var(--mono); } .tog { border: 0; border-radius: 8px; background: var(--canvas); color: var(--ink-2); padding: 7px 11px; box-shadow: 0 0 0 1px var(--line-strong); } .tog[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent-ink); box-shadow: 0 0 0 1px var(--accent); }
.listbox, .more { position: relative; display: inline-block; max-width: 100%; } .listbox > button { max-width: 100%; } .listbox-label { max-width: 230px; overflow: hidden; text-overflow: ellipsis; } .menu { position: absolute; top: calc(100% + 7px); left: 0; min-width: 210px; max-width: min(320px,calc(100vw - 48px)); max-height: 310px; overflow-y: auto; z-index: 20; border-radius: 10px; background: var(--surface); padding: 5px; box-shadow: 0 0 0 1px var(--line-strong),0 12px 40px var(--overlay); } .more .menu { left: auto; right: 0; } .menu button { width: 100%; display: block; text-align: left; border: 0; border-radius: 7px; padding: 9px 10px; background: transparent; } .menu button:hover, .menu button:focus { background: var(--canvas); } .menu button[aria-selected="true"] { background: var(--accent-tint); color: var(--accent-ink); } .menu .danger { color: var(--red); } .menu small { display: block; font-size: 11px; color: inherit; opacity: .8; margin-top: 2px; }
.empty { padding: 32px 16px; text-align: center; background: var(--inset); border-radius: 12px; color: var(--ink-3); display: grid; justify-items: center; gap: 12px; } .empty b { font-size: 13px; color: var(--ink-2); font-weight: 500; } .notice { background: var(--accent-tint); border-radius: 10px; padding: 12px 16px; color: var(--accent-ink); font-size: 12px; } .error { background: var(--red-tint); color: var(--red); } .outcome { margin-top: 12px; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; } .secret { border-radius: 10px; background: var(--accent-tint); padding: 16px; display: grid; gap: 12px; } .secret code { padding: 12px; background: var(--surface); border-radius: 8px; overflow-wrap: anywhere; user-select: all; }
.tabs { display: flex; gap: 4px; padding: 0 32px 16px; overflow-x: auto; scrollbar-width: thin; } .tabs button { flex-shrink: 0; } .tabs button[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent-ink); }
.result { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 500px; overflow: auto; line-height: 20px; background: var(--inset); padding: 16px; border-radius: 8px; } .logline { display: grid; grid-template-columns: 145px 60px minmax(0,1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); } .logline:last-child { border: 0; } .stream { max-height: 580px; overflow-y: auto; } .stream-toolbar { margin-bottom: 12px; }
.table-wrap { max-width: 100%; overflow-x: auto; border-radius: 12px; box-shadow: var(--shadow); } table { width: 100%; border-collapse: collapse; background: var(--surface); text-align: left; white-space: nowrap; font-size: 12px; } th { color: var(--ink-3); font-weight: 500; background: var(--inset); } th, td { padding: 12px 16px; border-bottom: 1px solid var(--line); } tr:last-child td { border: 0; }
.file-field { display: grid; gap: 8px; border: 1px dashed var(--line-strong); border-radius: 10px; padding: 24px 16px; background: var(--inset); justify-items: center; text-align: center; } .file-field.drag { border-color: var(--accent); background: var(--accent-tint); } .file-field input { display: none; }
dialog { border: 0; padding: 0; max-width: min(560px,calc(100vw - 32px)); width: 560px; max-height: calc(100dvh - 40px); background: var(--surface); color: var(--ink); border-radius: 16px; box-shadow: var(--shadow); } dialog::backdrop { background: var(--overlay); } .dialog-body { padding: 24px; display: grid; gap: 16px; } .dialog-body h2 { font-size: 18px; line-height: 26px; } .dialog-body .toolbar { justify-content: flex-end; } .danger-note { color: var(--red); }
.auth-shell { min-height: 100dvh; display: grid; place-items: center; padding: 32px 20px; } .auth-card { width: 100%; max-width: 420px; display: grid; gap: 32px; padding: 32px; } .auth-card .form { gap: 20px; } .auth-card .btn.primary { width: 100%; min-height: 38px; } .auth-head { display: grid; gap: 8px; } .auth-foot { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .boot { padding: 40px; color: var(--ink-3); } .loading { min-height: 160px; padding: 40px 32px; color: var(--ink-3); } .loading::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; margin-right: 10px; animation: pulse 1.1s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .25; } } @media(prefers-reduced-motion:reduce) { * { animation: none !important; } }
@media (min-width: 1200px) { .pagehead { padding-top: 44px; } section { padding: 40px 32px; } }
@media (max-width: 900px) { .frame { grid-template-columns: 180px minmax(0,1fr); } aside { padding: 32px 12px 20px; } .topbar { padding: 16px 24px; } .pagehead { padding: 28px 24px 24px; } section { padding: 24px; } .tabs { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 680px) { .frame { display: block; } aside { height: auto; position: static; padding: 16px 20px 12px; border-right: 0; border-bottom: 1px dashed var(--line-strong); gap: 16px; } .brand { gap: 8px; } .brand small { display: inline; margin-left: 6px; } .brand .mark { width: 28px; height: 28px; } nav { display: flex; overflow-x: auto; padding-bottom: 4px; gap: 4px; } nav a { white-space: nowrap; padding: 7px 10px; font-size: 12px; } nav .nav-icon { display: none; } .aside-foot { display: none; } .topbar { padding: 12px 20px; min-height: 56px; } .topbar .eyebrow, .topbar .user-name { display: none; } .mobile-controls { display: flex !important; } .pagehead { padding: 24px 20px; } .pagehead > .toolbar { width: 100%; } section { padding: 24px 20px; } .tabs { padding-left: 20px; padding-right: 20px; } .grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .card { padding: 12px; } .form-grid { grid-template-columns: 1fr; } .full { grid-column: auto; } .row { gap: 12px; } .row > .toolbar { width: 100%; } .row > .project-mark + .grow { min-width: calc(100% - 60px); } .facts { grid-template-columns: repeat(2,minmax(0,1fr)); } .logline { grid-template-columns: 1fr auto; gap: 4px 8px; } .logline > :last-child { grid-column: 1 / -1; } .auth-card { padding: 24px; } .table-wrap { overflow: visible; box-shadow: none; } table, tbody, tr, td { display: block; white-space: normal; } table { background: none; } thead { display: none; } tr { padding: 12px; margin-bottom: 12px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow); } td { padding: 5px 0; border: 0; overflow-wrap: anywhere; display: flex; align-items: center; justify-content: space-between; gap: 12px; } td::before { content: attr(data-label); color: var(--ink-3); font-size: 11px; } .listbox-label { max-width: 160px; } }
@media (max-width: 390px) { .grid { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr; } .topbar { gap: 8px; } }
.pending-secrets { padding: 24px 32px 0; }
@media(max-width:680px) { .pending-secrets { padding: 20px 20px 0; } }