/* CLAB AI Factory design system :: Argus (Lucid Analytics) theme. Two modes from one token set: Bright (default) and Dark, switched by data-theme on . One restrained Cyber Cyan accent, emerald/amber/rose semantics, JetBrains Mono for exact values, glow reserved for dark emphasis. Mapped onto the sim's existing class vocabulary so all view files keep working. House rule: never use em dashes or en dashes anywhere. No gradients anywhere. */ /* -------------------------------------------------------------------------- 1. TOKENS (Bright: the Argus light palette) -------------------------------------------------------------------------- */ :root { /* Surfaces (slate, cool and calm) */ --paper: #f4f7fc; --canvas: #f4f7fc; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #eef2f9; /* Ink */ --ink: #0f1b2d; --muted: #475569; --faint: #7c8aa0; /* Lines (hairline, low contrast) */ --line: rgba(15, 23, 42, 0.10); --line-2: rgba(15, 23, 42, 0.20); --line-soft: rgba(15, 23, 42, 0.06); /* Brand: Cyber Cyan (hue 189). Replaces the old blue accent. */ --primary: hsl(189 90% 27%); --primary-600: hsl(189 90% 23%); --primary-700: hsl(189 90% 19%); --primary-tint: hsl(189 90% 45% / 0.10); --primary-contrast: #ffffff; /* Back-compat aliases for the sim vocabulary (accent -> primary) */ --accent: var(--primary); --accent-ink: var(--primary-700); --accent-tint: var(--primary-tint); /* Semantics: emerald verified, amber attention, rose alert, cyan info. */ --ok: hsl(160 84% 25%); --ok-tint: hsl(160 84% 40% / 0.12); --warn: hsl(38 92% 29%); --warn-tint: hsl(38 92% 45% / 0.16); --danger: hsl(351 89% 36%); --danger-tint: hsl(351 89% 55% / 0.12); --info: hsl(189 90% 27%); --info-tint: hsl(189 90% 45% / 0.10); --ok-contrast: #ffffff; --danger-contrast: #ffffff; /* Violet reserved for rare AI moments */ --violet: hsl(258 84% 52%); --violet-tint: hsl(258 84% 60% / 0.12); /* Radius (Argus shape scale) */ --r: 12px; /* cards */ --r-ctrl: 8px; /* controls */ --r-pill: 999px; --radius: 12px; /* sim alias */ --radius-sm: 8px; /* sim alias */ /* Shadow (soft, slate tinted) and glow (off in Bright) */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.10); --shadow-lg: 0 24px 56px rgba(15, 23, 42, 0.16); --shadow-lift: var(--shadow-md); --shadow-pop: var(--shadow-lg); --glow: 0 0 0 rgba(0, 0, 0, 0); /* Typography (Argus: Inter UI, Sora display, JetBrains Mono exact) */ --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Sora", var(--font-ui); --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --font-body: var(--font-ui); /* Layout */ --rail-w: 64px; --topbar-h: 60px; --content-max: 1200px; /* Motion (Argus easing, calm and purposeful) */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 180ms; --dur-slow: 340ms; } [data-theme="dark"] { /* Surfaces: the Argus deep-slate stack */ --paper: #070b14; --canvas: #070b14; --surface: #0f1626; --surface-2: #111a2b; --surface-3: #1c2638; --ink: #e8eef9; --muted: #9fb1c8; --faint: #64748b; --line: rgba(148, 163, 184, 0.16); --line-2: rgba(148, 163, 184, 0.30); --line-soft: rgba(148, 163, 184, 0.10); --primary: hsl(189 90% 52%); --primary-600: hsl(189 90% 60%); --primary-700: hsl(189 90% 72%); --primary-tint: hsl(189 90% 55% / 0.14); --primary-contrast: #04141b; --ok: hsl(160 74% 55%); --ok-tint: hsl(160 84% 50% / 0.15); --warn: hsl(43 96% 56%); --warn-tint: hsl(38 92% 55% / 0.15); --danger: hsl(351 95% 71%); --danger-tint: hsl(351 89% 60% / 0.15); --info: hsl(189 90% 52%); --info-tint: hsl(189 90% 55% / 0.14); --ok-contrast: #04141b; --danger-contrast: #2c0710; --violet: hsl(258 90% 72%); --violet-tint: hsl(258 84% 62% / 0.16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow: 0 2px 6px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); /* Glow: the Argus emphasis signature, dark mode only */ --glow: 0 0 24px hsl(189 90% 55% / 0.30); } /* -------------------------------------------------------------------------- 2. RESET / BASE -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; height: 100%; } body { margin: 0; height: 100%; font-family: var(--font-ui); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; font-family: var(--font-display); } p { margin: 0; } a { color: var(--primary); text-decoration: none; } button { font-family: inherit; font-size: inherit; cursor: pointer; } .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-variant-ligatures: none; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 4px var(--primary-tint); } ::selection { background: var(--primary-tint); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; } /* -------------------------------------------------------------------------- 3. APP SHELL :: 64px icon rail + 60px top bar -------------------------------------------------------------------------- */ /* Top bar */ .topbar { position: fixed; top: 0; left: var(--rail-w); right: 0; height: var(--topbar-h); display: flex; align-items: center; gap: 16px; padding: 0 24px; z-index: 30; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } .topbar-left { display: flex; align-items: center; gap: 12px; flex: 0 1 auto; min-width: 0; } /* breadcrumb + page title live in the top bar left */ .topbar-titles { min-width: 0; overflow: hidden; } .topbar-crumb { font-size: 13px; color: var(--muted); letter-spacing: 0.02em; display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-crumb i { font-size: 15px; vertical-align: -1px; flex: none; } .topbar-crumb .crumb-sep { color: var(--faint); } .topbar-title { font-size: 18px; font-weight: 650; letter-spacing: -0.015em; font-family: var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* legacy brand block: only shown on the login (logged-out) screen */ .brand { display: flex; align-items: center; gap: 10px; background: none; border: none; padding: 4px 6px; border-radius: var(--r-ctrl); } .brand:hover { background: var(--surface-3); } .brand-mark { display: inline-flex; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); } .brand-kicker { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } /* global nav search */ .topbar-search { position: relative; flex: 0 1 300px; min-width: 160px; } .topbar-search .ic-search { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 19px; pointer-events: none; } .topbar-search input { width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--surface-2); color: var(--ink); font-family: var(--font-ui); font-size: 14px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .topbar-search input::placeholder { color: var(--faint); } .topbar-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); } /* search results dropdown */ .nav-search-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctrl); box-shadow: var(--shadow-lg); padding: 6px; display: none; max-height: 320px; overflow-y: auto; } .nav-search-menu.open { display: block; } .nav-search-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: transparent; color: var(--ink); font-size: 14px; font-weight: 500; padding: 8px 10px; border-radius: 6px; } .nav-search-item i { font-size: 18px; color: var(--muted); } .nav-search-item .grp { margin-left: auto; font-size: 12px; color: var(--faint); } .nav-search-item:hover, .nav-search-item.hi { background: var(--primary-tint); color: var(--primary-700); } .nav-search-item:hover i, .nav-search-item.hi i { color: var(--primary); } .nav-search-empty { padding: 12px; font-size: 13px; color: var(--muted); text-align: center; } .env-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--warn); background: var(--warn-tint); border: 1px solid color-mix(in srgb, var(--warn) 25%, var(--line)); padding: 5px 12px; border-radius: 999px; white-space: nowrap; } .env-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); } .topbar-spacer { flex: 1 1 auto; min-width: 8px; } .topbar-right { display: flex; align-items: center; gap: 12px; flex: none; } #top-identity, #top-avatar { display: flex; align-items: center; gap: 12px; } #top-identity:empty, #top-avatar:empty { display: none; } .topbar-sep { width: 1px; height: 22px; background: var(--line-2); flex: none; border-radius: 999px; } body.logged-out .topbar-sep { display: none; } /* compact role switcher (segmented control) */ .role-switch { display: flex; gap: 2px; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; } .role-chip { border: none; background: none; color: var(--muted); font-size: 12.5px; font-weight: 550; padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .role-chip:hover { color: var(--ink); } .role-chip.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); font-weight: 650; } .identity { display: flex; align-items: center; gap: 8px; } .identity-name { font-weight: 600; font-size: 13.5px; } /* identity + generic avatar */ .avatar { width: 34px; height: 34px; border-radius: 999px; flex: none; display: grid; place-items: center; font-size: 14px; font-weight: 650; color: #fff; letter-spacing: 0.01em; user-select: none; background: var(--primary); } [data-theme="dark"] .avatar { color: var(--primary-contrast); } .avatar--lg { width: 44px; height: 44px; font-size: 18px; border-radius: 999px; } /* icon buttons in the top bar */ .icon-btn { width: 38px; height: 38px; border-radius: var(--r-ctrl); display: grid; place-items: center; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 22px; transition: color var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); position: relative; } .icon-btn:hover { color: var(--ink); background: var(--surface-3); border-color: var(--line); } .icon-btn i { font-size: 22px; } .icon-btn .ic { width: 18px; height: 18px; } /* -------------------------------------------------------------------------- Icon rail (fixed 64px) -------------------------------------------------------------------------- */ .rail-wrap { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); z-index: 40; background: var(--surface); border-right: 1px solid var(--line); } .rail { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 12px 0; gap: 4px; overflow: hidden; } .rail-mark { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 10px; flex: none; display: grid; place-items: center; border: none; background: var(--primary); color: var(--primary-contrast); font-weight: 800; font-size: 20px; letter-spacing: -0.03em; box-shadow: var(--shadow-sm), var(--glow); font-family: var(--font-display); } .rail-nav { display: flex; flex-direction: column; gap: 4px; align-items: center; width: 100%; overflow-y: auto; overflow-x: hidden; } .rail-nav::-webkit-scrollbar { width: 0; } .rail-foot-spacer { flex: 1; } .rail-item { position: relative; width: 44px; height: 44px; border-radius: var(--r-ctrl); display: grid; place-items: center; color: var(--muted); font-size: 23px; border: none; background: transparent; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .rail-item i { font-size: 23px; } .rail-item:hover { color: var(--ink); background: var(--surface-3); } .rail-item.active { color: var(--primary); background: var(--primary-tint); } .rail-item.active::before { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 999px; background: var(--primary); } .rail-item[data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--paper); font-size: 13px; font-family: var(--font-ui); padding: 5px 9px; border-radius: 6px; white-space: nowrap; z-index: 60; box-shadow: var(--shadow-md); pointer-events: none; } .rail-foot { flex: none; font-size: 0; color: var(--faint); text-align: center; padding-top: 6px; border-top: 1px solid var(--line-soft); width: 40px; } .rail-foot::before { content: "\2022"; font-size: 16px; color: var(--faint); } /* -------------------------------------------------------------------------- 4. CONTENT -------------------------------------------------------------------------- */ .shell { min-height: 100vh; } .view-scroll { padding-left: var(--rail-w); padding-top: var(--topbar-h); min-height: 100vh; } .view { max-width: var(--content-max); margin: 0 auto; padding: 28px 24px 64px; } body.logged-out .rail-wrap { display: none; } body.logged-out .topbar { display: none; } body.logged-out .view-scroll { padding-left: 0; padding-top: 0; } body.logged-out .view { max-width: none; padding: 0; } /* ---------- page header ---------- */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .page-title { font-size: 26px; font-family: var(--font-display); letter-spacing: -0.015em; } .page-sub { color: var(--muted); font-size: 14.5px; margin-top: 3px; } .page-actions { display: flex; gap: 8px; align-items: center; } .section-title { font-size: 12px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; margin: 26px 0 12px; } /* -------------------------------------------------------------------------- 5. CARDS / PANELS -------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: 18px; } .card.hoverable { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .card.hoverable:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line-2); } .card.active-spine { border-left: 3px solid var(--primary); } .card.warn-spine { border-left: 3px solid var(--warn); } .card.danger-spine { border-left: 3px solid var(--danger); } .card.violet-spine { border-left: 3px solid var(--violet); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .card-title { font-size: 15px; font-weight: 650; font-family: var(--font-ui); } .card-sub { color: var(--muted); font-size: 13px; } .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } /* -------------------------------------------------------------------------- 6. KPI STAT CARDS -------------------------------------------------------------------------- */ .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .kpi.hoverable:hover, .kpi:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line-2); } .kpi-label { font-size: 13px; color: var(--muted); font-weight: 550; letter-spacing: 0.01em; } .kpi-value { font-family: var(--font-mono); font-weight: 600; font-size: 31px; line-height: 1.1; margin-top: 6px; letter-spacing: -0.02em; } .kpi-sub { font-size: 13px; color: var(--muted); margin-top: 6px; } .kpi-ok { border-left: 3px solid var(--ok); } .kpi-warn { border-left: 3px solid var(--warn); } .kpi-danger { border-left: 3px solid var(--danger); } .kpi-accent { border-left: 3px solid var(--primary); } .kpi-violet { border-left: 3px solid var(--violet); } .kpi-ok .kpi-value { color: var(--ok); } .kpi-warn .kpi-value { color: var(--warn); } .kpi-danger .kpi-value { color: var(--danger); } .kpi-accent .kpi-value { color: var(--primary); } .kpi-violet .kpi-value { color: var(--violet); } /* -------------------------------------------------------------------------- 7. CHIPS -------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; line-height: 1.45; } .chip-muted { color: var(--muted); background: var(--surface-3); border-color: var(--line); } .chip-accent { color: var(--primary-700); background: var(--primary-tint); border-color: color-mix(in srgb, var(--primary) 22%, transparent); } .chip-ok { color: var(--ok); background: var(--ok-tint); border-color: color-mix(in srgb, var(--ok) 22%, transparent); } .chip-warn { color: var(--warn); background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 26%, transparent); } .chip-danger { color: var(--danger); background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 26%, transparent); } .chip-violet { color: var(--violet); background: var(--violet-tint); border-color: color-mix(in srgb, var(--violet) 26%, transparent); } .chip .ic { width: 12px; height: 12px; } .chip i { font-size: 15px; } .id-chip { font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: var(--surface-3); padding: 1px 6px; border-radius: 5px; } /* -------------------------------------------------------------------------- 8. BUTTONS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-family: var(--font-ui); font-size: 13.5px; font-weight: 650; padding: 8px 15px; border-radius: var(--r-ctrl); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease); white-space: nowrap; } .btn:hover { background: var(--surface-2); border-color: var(--line-2); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn .ic { color: currentColor; } .btn i { font-size: 19px; } .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); } .btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); box-shadow: var(--shadow-sm), var(--glow); } .btn-danger { background: var(--danger); border-color: var(--danger); color: var(--danger-contrast); } .btn-danger:hover { filter: brightness(0.94); background: var(--danger); border-color: var(--danger); } .btn-ghost { border-color: transparent; background: transparent; color: var(--muted); } .btn-ghost:hover { background: var(--surface-3); color: var(--ink); } .btn-sm { padding: 5px 11px; font-size: 12.5px; } .btn-block { width: 100%; } .btn-lg { padding: 11px 22px; font-size: 15px; } /* -------------------------------------------------------------------------- 9. TABLES -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); } .tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl thead th { text-align: left; font-weight: 650; color: var(--muted); font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; } .tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; } .tbl tbody tr:last-child td { border-bottom: none; } .tbl tbody tr { transition: background var(--dur) var(--ease); } .tbl tbody tr.tbl-click { cursor: pointer; } .tbl tbody tr.tbl-click:hover { background: var(--surface-2); } .tbl td.mono { font-family: var(--font-mono); font-size: 12.5px; } .tbl-empty { text-align: center; color: var(--muted); padding: 28px !important; } /* -------------------------------------------------------------------------- 10. BARS -------------------------------------------------------------------------- */ .bars { display: flex; flex-direction: column; gap: 10px; } .bar-row { display: grid; grid-template-columns: 120px 1fr 68px; align-items: center; gap: 12px; } .bar-label { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s var(--ease); } .bar-accent { background: var(--primary); } .bar-ok { background: var(--ok); } .bar-warn { background: var(--warn); } .bar-danger { background: var(--danger); } .bar-violet { background: var(--violet); } .bar-muted { background: var(--faint); } .bar-value { font-size: 12.5px; text-align: right; color: var(--muted); } /* -------------------------------------------------------------------------- 11. SPARKLINE -------------------------------------------------------------------------- */ .spark { display: inline-block; vertical-align: middle; } .spark polyline { stroke-width: 1.6; } .spark-accent polyline { stroke: var(--primary); } .spark-ok polyline { stroke: var(--ok); } .spark-warn polyline { stroke: var(--warn); } .spark-danger polyline { stroke: var(--danger); } .spark-violet polyline { stroke: var(--violet); } .spark-muted polyline { stroke: var(--faint); } /* -------------------------------------------------------------------------- 12. SWITCH (accessible checkbox) -------------------------------------------------------------------------- */ .switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 40px; height: 22px; margin: 0; cursor: pointer; } .switch .track { width: 40px; height: 22px; border-radius: 999px; background: var(--line-2); transition: background var(--dur) var(--ease); position: relative; flex-shrink: 0; } .switch .thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.28); transition: transform var(--dur) var(--ease); } .switch input:checked + .track { background: var(--primary); } .switch input:checked + .track .thumb { transform: translateX(18px); } .switch input:focus-visible + .track { outline: 2px solid var(--primary); outline-offset: 2px; } .switch input:disabled + .track { opacity: 0.45; cursor: not-allowed; } .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); } .switch-row:last-child { border-bottom: none; } .switch-row .switch-label { font-size: 14px; } .switch-row .switch-desc { font-size: 12.5px; color: var(--muted); } /* -------------------------------------------------------------------------- 13. FORM CONTROLS -------------------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .field label { font-size: 13px; font-weight: 600; color: var(--ink); } .field .hint { font-size: 12px; color: var(--muted); } .input, .select, textarea.input { width: 100%; border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: 9px 12px; font-size: 14px; font-family: var(--font-ui); background: var(--surface); color: var(--ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .input.mono { font-family: var(--font-mono); } .select { appearance: none; cursor: pointer; } /* checkbox row used by the Add tenant agent picker */ .check-row { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--surface-2); cursor: pointer; font-size: 13.5px; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .check-row:hover { border-color: var(--line-2); background: var(--surface-3); } .check-row input { width: 16px; height: 16px; accent-color: var(--primary); flex: none; cursor: pointer; } .input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); } .input::placeholder, textarea.input::placeholder { color: var(--faint); } /* -------------------------------------------------------------------------- 14. SEARCH (ui.searchInput) -------------------------------------------------------------------------- */ .search { position: relative; display: inline-flex; align-items: center; } .search .ic { position: absolute; left: 11px; color: var(--faint); pointer-events: none; } .search-input { border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: 9px 12px 9px 34px; font-size: 14px; font-family: var(--font-ui); min-width: 240px; background: var(--surface); color: var(--ink); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); } /* -------------------------------------------------------------------------- 15. MODAL -------------------------------------------------------------------------- */ .modal-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(2, 6, 23, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity var(--dur-slow) var(--ease); } .modal-overlay.open { opacity: 1; } .modal { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); transform: scale(0.96) translateY(8px); transition: transform var(--dur-slow) var(--ease); max-height: 88vh; display: flex; flex-direction: column; } .modal-overlay.open .modal { transform: none; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); } .modal-title { font-size: 18px; font-family: var(--font-display); font-weight: 700; } .modal-body { padding: 20px; overflow-y: auto; } .modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 14px 14px; } /* confirm gate */ .gate-summary { font-size: 15px; margin-bottom: 12px; } .gate-impact { margin: 0 0 4px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; } .gate-impact li { font-size: 13.5px; color: var(--muted); } .gate-step2 { margin-top: 14px; } .gate-warn { display: flex; align-items: flex-start; gap: 9px; background: var(--danger-tint); border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent); color: var(--danger); padding: 11px 13px; border-radius: var(--r-ctrl); font-size: 13.5px; } .gate-warn .ic { flex-shrink: 0; margin-top: 1px; } /* -------------------------------------------------------------------------- 16. TOASTS -------------------------------------------------------------------------- */ #toast-stack { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .toast { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--primary); box-shadow: var(--shadow-lg); border-radius: var(--r-ctrl); padding: 11px 15px; font-size: 13.5px; max-width: 380px; opacity: 0; transform: translateX(24px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .toast.open { opacity: 1; transform: none; } .toast-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; } .toast-msg { color: var(--ink); } .toast-accent { border-left-color: var(--primary); } .toast-accent .toast-dot { background: var(--primary); } .toast-ok { border-left-color: var(--ok); } .toast-ok .toast-dot { background: var(--ok); } .toast-warn { border-left-color: var(--warn); } .toast-warn .toast-dot { background: var(--warn); } .toast-danger { border-left-color: var(--danger); } .toast-danger .toast-dot { background: var(--danger); } .toast-violet { border-left-color: var(--violet); } .toast-violet .toast-dot { background: var(--violet); } /* -------------------------------------------------------------------------- 17. LOCK STATE -------------------------------------------------------------------------- */ .lock-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 44px 24px; color: var(--muted); } .lock-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-3); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); } .lock-msg { max-width: 420px; font-size: 13.5px; } /* muted (module not loaded) card */ .muted-card { border-left: 3px solid var(--line-2); } .muted-card-inner { display: flex; align-items: center; gap: 12px; color: var(--muted); } .muted-card-title { font-weight: 600; color: var(--ink); } .muted-card-sub { font-size: 12.5px; color: var(--muted); } /* -------------------------------------------------------------------------- 18. WIZARD RAIL -------------------------------------------------------------------------- */ .wiz-rail { display: flex; align-items: center; gap: 0; margin-bottom: 22px; overflow-x: auto; } .wiz-step { display: flex; align-items: center; gap: 8px; padding: 0 4px; position: relative; } .wiz-step:not(:last-child)::after { content: ''; width: 26px; height: 2px; background: var(--line); margin: 0 6px; } .wiz-dot { width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; font-family: var(--font-mono); background: var(--surface-3); color: var(--muted); border: 2px solid var(--surface-3); flex-shrink: 0; transition: all var(--dur) var(--ease); } .wiz-label { font-size: 13px; color: var(--muted); font-weight: 550; white-space: nowrap; } .wiz-active .wiz-dot { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); } .wiz-active .wiz-label { color: var(--ink); font-weight: 650; } .wiz-done .wiz-dot { background: var(--ok-tint); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); } .wiz-done .wiz-label { color: var(--ok); } .wiz-done:not(:last-child)::after { background: var(--ok); } /* -------------------------------------------------------------------------- 19. CODE BLOCK -------------------------------------------------------------------------- */ .codeblock { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: 12px 14px; overflow-x: auto; white-space: pre; color: var(--muted); } /* progress list (ingest / discover) */ .progress-track { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .progress-fill { height: 100%; background: var(--primary); border-radius: 999px; width: 0; transition: width 0.5s var(--ease); } /* -------------------------------------------------------------------------- 20. MATRIX GRID -------------------------------------------------------------------------- */ .matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-sm); } .matrix { border-collapse: separate; border-spacing: 0; font-size: 12.5px; width: 100%; } .matrix th, .matrix td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); text-align: center; } .matrix thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 2; font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; } .matrix .row-head, .matrix thead th.corner { position: sticky; left: 0; background: var(--surface); z-index: 3; text-align: left; white-space: nowrap; } .matrix thead th.corner { z-index: 4; } .matrix .row-head { font-weight: 600; } .matrix .killed { position: relative; opacity: 0.45; } .matrix-legend { display: flex; gap: 14px; align-items: center; margin: 12px 2px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; } /* -------------------------------------------------------------------------- 21. GENERIC HELPERS -------------------------------------------------------------------------- */ .row { display: flex; align-items: center; gap: 10px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .wrap { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .stack { display: flex; flex-direction: column; gap: 4px; } .gap-16 { gap: 16px; } .mt-16 { margin-top: 16px; } .mt-8 { margin-top: 8px; } .mt-24 { margin-top: 24px; } .mb-16 { margin-bottom: 16px; } .mb-8 { margin-bottom: 8px; } .muted { color: var(--muted); } .small { font-size: 12.5px; } .strong { font-weight: 600; } .right { text-align: right; } .nowrap { white-space: nowrap; } .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; } .tab { border: none; background: none; color: var(--muted); font-weight: 600; font-size: 14px; padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur) var(--ease); } .tab:hover { color: var(--ink); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); } .info-strip { display: flex; align-items: center; gap: 10px; background: var(--primary-tint); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); border-radius: var(--r-ctrl); padding: 11px 14px; font-size: 13.5px; color: var(--primary-700); margin-bottom: 18px; } .info-strip .ic { flex-shrink: 0; } .info-strip.lock-strip { background: var(--surface-3); border-color: var(--line); color: var(--muted); } .banner { display: flex; align-items: center; gap: 10px; border-radius: var(--r-ctrl); padding: 12px 15px; font-size: 13.5px; font-weight: 500; margin-bottom: 16px; border: 1px solid transparent; } .banner-ok { background: var(--ok-tint); border-color: color-mix(in srgb, var(--ok) 25%, var(--line)); color: var(--ok); } .banner-warn { background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 28%, var(--line)); color: var(--warn); } .banner-danger { background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 28%, var(--line)); color: var(--danger); } .banner-violet { background: var(--violet-tint); border-color: color-mix(in srgb, var(--violet) 28%, var(--line)); color: var(--violet); } /* engine icon chip */ .engine-icon { width: 32px; height: 32px; border-radius: var(--r-ctrl); display: inline-flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--muted); flex-shrink: 0; } /* -------------------------------------------------------------------------- 22. MOTION -------------------------------------------------------------------------- */ @keyframes riseIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .rise { opacity: 0; animation: riseIn var(--dur-slow) var(--ease) forwards; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .skeleton { background: var(--surface-3); border-radius: var(--r-ctrl); animation: pulse 1.3s ease-in-out infinite; } .skel-line { height: 12px; margin: 8px 0; } .skel-block { height: 120px; } @keyframes spin { to { transform: rotate(360deg); } } .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--primary); animation: spin 0.7s linear infinite; display: inline-block; } .streaming::after { content: '\258c'; color: var(--primary); animation: pulse 0.8s steps(1) infinite; margin-left: 1px; } /* watermark */ .watermark { position: absolute; inset: 0; overflow: hidden; pointer-events: none; display: flex; align-items: center; justify-content: center; } .watermark span { font-family: var(--font-display); font-weight: 700; font-size: 96px; color: var(--ink); opacity: 0.04; transform: rotate(-24deg); letter-spacing: 0.1em; white-space: nowrap; } /* chat bubble base (shared) */ .bubble { border-radius: 12px; padding: 11px 14px; font-size: 14px; line-height: 1.55; max-width: 640px; } .bubble-user { background: var(--primary); color: var(--primary-contrast); align-self: flex-end; } .bubble-agent { background: var(--surface); border: 1px solid var(--line); color: var(--ink); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .rise { opacity: 1; } } /* -------------------------------------------------------------------------- 23. RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 760px) { .rail-wrap { transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease); } body.rail-open .rail-wrap { transform: none; } .topbar { left: 0; padding: 0 14px; } .view-scroll { padding-left: 0; } .view { padding: 18px 14px 48px; } .topbar-search { display: none; } .env-chip { display: none; } .topbar-sep { display: none; } .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } .bar-row { grid-template-columns: 90px 1fr 56px; } .role-chip { font-size: 0; padding: 6px 8px; } .role-chip::first-letter { font-size: 12px; } } @media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } /* Keep the top bar uncramped on medium widths: drop the env chip and the spelled-out identity name, and trim the search box. */ @media (max-width: 1080px) { .topbar .env-chip { display: none; } .topbar .env-chip + .topbar-sep { display: none; } .identity .identity-name { display: none; } .topbar-search { flex-basis: 220px; } } @media (max-width: 880px) { .topbar-search { flex-basis: 170px; min-width: 120px; } .role-chip { padding: 5px 9px; } }