/* ktk design system — tokens + base styles, from the "Light & Dark" design. Dark is the default (:root); [data-theme="light"] on flips the surface tokens. The accent (#8a93a8) stays constant across themes. */ :root { --ktk-display: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif; --ktk-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --ktk-hw: 800; --ktk-accent: #8a93a8; --ktk-accent-text: #c4c9d3; --ktk-accent-muted: #a7adba; --ktk-accent-bg: #1c1f25; --ktk-accent-bd: #3a3f4a; --ktk-on-accent: #0e0e0e; /* admin console surfaces (dark) */ --ad-bg: #0e0e0e; --ad-panel: #0a0a0a; --ad-card: #0e0e0e; --ad-border: #1e1e1e; --ad-fg: #ededed; --ad-muted: #8a8a82; --ad-row: #0b0b0b; --ad-input: #141414; --ad-input-bd: #2a2a2a; --ad-danger: #d8645c; --ad-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); } :root[data-theme='light'] { --ktk-accent-text: #505561; --ktk-accent-bg: #f3f4f6; --ktk-accent-bd: #dee1e7; --ad-bg: #f4f4ef; --ad-panel: #ffffff; --ad-card: #ffffff; --ad-border: #e6e6de; --ad-fg: #14140f; --ad-muted: #6e6e64; --ad-row: #fafaf7; --ad-input: #ffffff; --ad-input-bd: #cecec4; --ad-shadow: 0 24px 60px rgba(0, 0, 0, 0.12); } * { box-sizing: border-box; } body { margin: 0; background: var(--ad-bg); color: var(--ad-fg); font-family: var(--ktk-display); -webkit-font-smoothing: antialiased; transition: background 0.18s ease, color 0.18s ease; } .codicon { font-size: inherit; line-height: 1; } h1, h2, h3 { letter-spacing: -0.02em; } h2 { font: var(--ktk-hw) 18px var(--ktk-display); margin: 0; } h3 { font: 700 14px var(--ktk-display); margin: 0; } a { color: var(--ktk-accent-text); text-decoration: none; } .muted { color: var(--ad-muted); } .error { color: var(--ad-danger); } .mono { font-family: var(--ktk-mono); } button { font: 600 13px var(--ktk-display); color: var(--ktk-on-accent); background: var(--ktk-accent); border: 0; border-radius: 8px; padding: 9px 14px; cursor: pointer; } button:hover { filter: brightness(1.06); } button.ghost { color: var(--ad-fg); background: var(--ad-input); border: 1px solid var(--ad-input-bd); } button.danger { color: #fff; background: var(--ad-danger); } button:disabled { opacity: 0.5; cursor: default; } input, select, textarea { font: 400 13px var(--ktk-display); color: var(--ad-fg); background: var(--ad-input); border: 1px solid var(--ad-input-bd); border-radius: 8px; padding: 9px 11px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--ktk-accent-bd); outline-offset: -1px; } table { width: 100%; border-collapse: collapse; margin-top: 10px; } th { text-align: left; font: 600 10px var(--ktk-mono); letter-spacing: 0.08em; color: var(--ad-muted); padding: 8px 12px; border-bottom: 1px solid var(--ad-border); } td { padding: 11px 12px; border-bottom: 1px solid var(--ad-border); font-size: 13px; } tbody tr:hover { background: var(--ad-row); } .card { background: var(--ad-card); border: 1px solid var(--ad-border); border-radius: 12px; padding: 18px; } .row { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-top: 12px; } /* Add-model form: labelled fields that wrap, button aligned to the inputs. */ .addform { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 14px; } .addform .f { display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px; } .addform .f.grow { flex: 2 1 220px; } .addform .f.narrow { flex: 0 0 96px; } .addform .f > span { font: 600 11px var(--ktk-display); color: var(--ad-muted); letter-spacing: .01em; } .addform .f > span em { font-style: normal; font-weight: 400; opacity: .6; } .addform .f > span .info { font-style: normal; opacity: .5; cursor: help; } .addform .f > span .info:hover { opacity: 1; color: var(--ktk-accent-text); } .addform .f input, .addform .f select { width: 100%; box-sizing: border-box; } /* brand mark */ .ktk-mark { display: inline-flex; align-items: center; justify-content: center; background: var(--ktk-accent); border-radius: 8px; color: var(--ktk-on-accent); } /* status pills */ .pill { display: inline-flex; align-items: center; gap: 5px; font: 600 10px var(--ktk-mono); letter-spacing: 0.04em; border-radius: 6px; padding: 3px 8px; border: 1px solid var(--ad-border); color: var(--ad-muted); } .pill.accent { color: var(--ktk-accent-text); background: var(--ktk-accent-bg); border-color: var(--ktk-accent-bd); } .pill.running { color: var(--ktk-accent-text); background: var(--ktk-accent-bg); border-color: var(--ktk-accent-bd); } .pill.succeeded { color: #4caf7d; } .pill.failed { color: var(--ad-danger); } .pill.cancelled { color: var(--ad-muted); } /* ---- admin console layout ---- */ .console { display: flex; min-height: 100vh; } .sidebar { width: 210px; flex-shrink: 0; background: var(--ad-panel); border-right: 1px solid var(--ad-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; border-bottom: 1px solid var(--ad-border); font: var(--ktk-hw) 17px var(--ktk-display); } .sidebar nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; } .sidebar nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; font: 500 13px var(--ktk-display); color: var(--ad-muted); cursor: pointer; } .sidebar nav a:hover { color: var(--ad-fg); background: var(--ad-row); } .sidebar nav a.on { color: var(--ktk-accent-text); background: var(--ktk-accent-bg); font-weight: 600; } .sidebar .foot { margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--ad-border); font: 400 11px var(--ktk-mono); color: var(--ad-muted); } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 26px; border-bottom: 1px solid var(--ad-border); background: color-mix(in srgb, var(--ad-bg) 86%, transparent); backdrop-filter: blur(8px); } .topbar .right { display: flex; align-items: center; gap: 14px; } .topbar .who { display: flex; align-items: center; gap: 8px; font: 500 13px var(--ktk-display); color: var(--ad-fg); } .content { padding: 24px 26px 60px; max-width: 920px; width: 100%; } .content section { margin-bottom: 40px; scroll-margin-top: 80px; } .content section > .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .content p.sub { margin: 4px 0 0; font: 400 13px var(--ktk-display); color: var(--ad-muted); } .stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; } .stat-grid.six { grid-template-columns: repeat(6, 1fr); } @media (max-width: 760px) { .stat-grid, .stat-grid.six { grid-template-columns: repeat(3, 1fr); } } .stat { background: var(--ad-card); border: 1px solid var(--ad-border); border-radius: 10px; padding: 14px; } .stat .k { font: 600 9px var(--ktk-mono); letter-spacing: 0.08em; color: var(--ad-muted); } .stat .v { font: var(--ktk-hw) 22px var(--ktk-mono); margin-top: 6px; } .charts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; } @media (max-width: 760px) { .charts2 { grid-template-columns: 1fr; } } /* CSS bar chart (no chart library) */ .chart { display: flex; align-items: flex-end; gap: 3px; height: 110px; margin-top: 6px; } .chart .bar { flex: 1; display: flex; align-items: flex-end; min-width: 2px; } .chart .bar > span { display: block; width: 100%; background: var(--ktk-accent); border-radius: 3px 3px 0 0; opacity: 0.85; transition: opacity 0.1s; } .chart .bar:hover > span { opacity: 1; } .mbar { margin-top: 12px; } .mbar:first-child { margin-top: 4px; } .mbar-top { display: flex; justify-content: space-between; font: 500 12px var(--ktk-display); margin-bottom: 5px; } .mbar-track { height: 8px; background: var(--ad-border); border-radius: 99px; overflow: hidden; } .mbar-fill { height: 100%; background: var(--ktk-accent); border-radius: 99px; } /* sign-in */ .signin-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; position: relative; overflow: hidden; } .signin-glow { position: absolute; top: -180px; left: 50%; transform: translateX(-50%); width: 820px; height: 560px; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--ktk-accent) 18%, transparent), transparent 66%); } .signin-card { position: relative; width: 412px; max-width: 100%; background: var(--ad-card); border: 1px solid var(--ad-border); border-radius: 18px; box-shadow: var(--ad-shadow); padding: 38px 36px 30px; } .signin-card .gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; background: #fff; color: #1f1f1f; font: 600 15px var(--ktk-display); border: 0; border-radius: 12px; padding: 14px; cursor: pointer; } .signin-card .footer { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--ad-border); display: flex; align-items: center; justify-content: space-between; font: 400 12px var(--ktk-display); color: var(--ad-muted); } @keyframes spin { to { transform: rotate(360deg); } } .spinner { width: 18px; height: 18px; border: 2px solid var(--ad-input-bd); border-top-color: var(--ktk-accent); border-radius: 50%; animation: spin 0.7s linear infinite; } /* modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: flex-start; justify-content: center; padding: 60px 20px; z-index: 50; overflow-y: auto; } .modal { width: 520px; max-width: 100%; background: var(--ad-panel); border: 1px solid var(--ad-border); border-radius: 14px; box-shadow: var(--ad-shadow); } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--ad-border); } .modal-head h2 { font: var(--ktk-hw) 17px var(--ktk-display); } .modal-x { padding: 4px 9px; } .modal-body { padding: 18px; } .fld { display: block; font: 500 12px var(--ktk-display); color: var(--ad-muted); margin-bottom: 12px; } .fld input, .fld select { display: block; width: 100%; margin-top: 5px; } .kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } .kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; } .json { background: var(--ad-bg); border: 1px solid var(--ad-border); border-radius: 8px; padding: 10px 12px; font: 400 12px var(--ktk-mono); overflow-x: auto; margin: 6px 0 0; } .json.error { color: var(--ad-danger); } /* segmented theme toggle */ .seg { display: inline-flex; background: var(--ad-input); border: 1px solid var(--ad-input-bd); border-radius: 9px; padding: 3px; } .seg button { display: flex; align-items: center; gap: 6px; background: transparent; color: var(--ad-muted); border-radius: 7px; padding: 7px 12px; font: 600 12px var(--ktk-display); } .seg button.on { background: var(--ktk-accent); color: var(--ktk-on-accent); } :root[data-theme='light'] .seg button.on { color: #fff; } /* Overview error alert + Diagnostics link cards */ .alert { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; padding: 11px 14px; border-radius: 10px; background: rgba(220,90,90,.10); border: 1px solid rgba(220,90,90,.38); color: var(--ad-fg); font: 400 13px var(--ktk-display); } .alert > .codicon { color: #e06666; } .alert > span { flex: 1; } .alert a { white-space: nowrap; } .diaggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; } .diaglink { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: 10px; background: var(--ad-input); border: 1px solid var(--ad-input-bd); text-decoration: none; color: var(--ad-fg); transition: border-color .12s; } .diaglink:hover { border-color: var(--ktk-accent); } .diaglink > .codicon { color: var(--ktk-accent-text); font-size: 13px; } .diaglink .t { font: 600 13px var(--ktk-display); } .diaglink .s { font: 400 12px var(--ktk-display); color: var(--ad-muted); }