/* ============================= Design tokens ============================= Dark "agent platform" theme — same variable names as before so every component rule below picks up the new palette for free; only the values changed. Second pass on the palette: the first version borrowed the wireframe's colors literally (custom neon violet/mint/orange), which read as loud/uneven against pure black. This pass keeps the same dark canvas and the same violet-vs-blue split (New Starters vs Timesheets), but pulls every accent from one consistent, slightly muted color family (Tailwind's 500-level tones) so they read as one cohesive palette rather than five competing bright hues — calmer, still clearly colored for scanability, not garish. */ :root { color-scheme: dark; --color-bg: #0a0d12; --color-surface: #12151c; --color-bg-subtle: #171b23; --color-surface-raised: #1d222b; --color-border: #252a34; --color-text: #e5e7eb; --color-text-muted: #8a93a3; --color-text-faint: #575f6d; --color-primary: #6366f1; --color-primary-dark: #4f46e5; --color-primary-light: #818cf8; --color-primary-bg: rgba(99, 102, 241, 0.14); --color-teal: #3b82f6; --color-teal-dark: #2563eb; --color-teal-bg: rgba(59, 130, 246, 0.14); --color-emerald: #10b981; --color-emerald-dark: #059669; --color-emerald-bg: rgba(16, 185, 129, 0.14); --color-emerald-text: #6ee7b7; --color-amber: #f59e0b; --color-amber-bg: rgba(245, 158, 11, 0.14); --color-amber-border: rgba(245, 158, 11, 0.35); --color-amber-text: #fbbf24; --color-red: #ef4444; --color-red-bg: rgba(239, 68, 68, 0.14); --color-red-text: #f87171; --color-blue-bg: rgba(59, 130, 246, 0.14); --color-blue-text: #93c5fd; --color-pink: #f472b6; --color-pink-bg: rgba(244, 114, 182, 0.14); --color-cyan: #2dd4bf; --color-cyan-bg: rgba(45, 212, 191, 0.14); --sidebar-bg: #0a0d12; --sidebar-bg-raised: #12161f; --sidebar-border: #202531; --sidebar-text: #e5e7eb; --sidebar-text-muted: #8a93a3; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.55); --radius: 14px; --radius-sm: 9px; --radius-md: 12px; } /* ============================= Light mode ============================= Same variable names, same accent hue family (indigo/blue/emerald/amber/ red) as the dark theme above — only the backgrounds/text/shadows flip to light values, so every component still reads as one consistent palette in either mode. The sidebar is deliberately NOT overridden here — it stays the dark chrome in both themes (a common pattern: Vercel, Linear, etc. keep the nav dark regardless of the content theme), which also means none of the sidebar's own hardcoded glow/shadow colors need a second variant. Toggled via [data-theme] on ; dark (the default, no attribute needed) stays the :root block above. */ :root[data-theme="light"] { color-scheme: light; --color-bg: #f5f6fa; --color-surface: #ffffff; --color-bg-subtle: #f0f2f7; --color-surface-raised: #ffffff; --color-border: #e3e6ee; --color-text: #1a1d29; --color-text-muted: #5c6470; --color-text-faint: #8991a0; --color-primary-bg: #eef0ff; --color-teal-bg: #eaf2ff; --color-emerald: #059669; --color-emerald-dark: #047857; --color-emerald-bg: #e7f9f1; --color-emerald-text: #04724f; --color-amber: #d97706; --color-amber-bg: #fff7e6; --color-amber-border: #f3d38a; --color-amber-text: #8a5b09; --color-red: #dc2626; --color-red-bg: #fdeeee; --color-red-text: #b32323; --color-blue-bg: #eaf2ff; --color-blue-text: #2563eb; --color-pink: #db2777; --color-pink-bg: #fdf0f7; --color-cyan: #0d9488; --color-cyan-bg: #eafaf8; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04); --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.05); --shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.14); } * { box-sizing: border-box; } /* Any component rule that sets display (grid/flex/block) silently beats the UA's [hidden] rule, so an element toggled via el.hidden stays on screen. This had already been patched per-component three times below; one rule fixes the whole class of bug. */ [hidden] { display: none !important; } body { margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; } /* Themed scrollbars — the default OS/browser scrollbar is a plain white bar that stands out badly against the dark sidebar in particular. */ * { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } .sidebar *, .tabs, .ws-menu { scrollbar-color: var(--sidebar-border) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 8px; } .sidebar ::-webkit-scrollbar-thumb, .tabs::-webkit-scrollbar-thumb, .ws-menu::-webkit-scrollbar-thumb { background: var(--sidebar-border); } *::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); } svg { display: block; } svg[hidden] { display: none; } /* the [hidden] UA rule doesn't reliably win against the bare `svg` type selector above in all engines — force it */ .app-shell { display: flex; min-height: 100vh; align-items: stretch; } /* ============================= Sidebar ============================= */ .sidebar { width: 268px; flex-shrink: 0; background: radial-gradient(560px 320px at 10% -10%, rgba(99, 102, 241, 0.24), transparent 60%), var(--sidebar-bg); color: var(--sidebar-text); /* Sage is the default active workspace; app.js overrides this inline when switching to Capium. */ --ws-tint: var(--color-emerald); display: flex; flex-direction: column; padding: 1.5rem 1.15rem 1.25rem; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--sidebar-border); } .sidebar-brand { display: flex; align-items: center; gap: 0.7rem; padding: 0.3rem 0.4rem 1.35rem; border-bottom: 1px solid var(--sidebar-border); margin-bottom: 1.1rem; } .brand-mark { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; background: linear-gradient(135deg, var(--color-primary), var(--color-teal)); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35); } .brand-mark svg { width: 21px; height: 21px; } .brand-text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; } .brand-name { font-size: 0.88rem; font-weight: 700; color: var(--sidebar-text); line-height: 1.2; } .brand-org { font-size: 0.72rem; color: var(--sidebar-text-muted); font-weight: 500; } .agent-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 500; color: var(--sidebar-text-muted); background: var(--sidebar-bg-raised); border: 1px solid var(--sidebar-border); border-radius: 999px; padding: 0.4rem 0.7rem 0.4rem 0.55rem; margin-bottom: 1.35rem; width: fit-content; } .theme-toggle { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; align-items: center; height: 44px; width: 44px; padding: 0; overflow: hidden; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: width 0.2s ease, padding 0.2s ease, border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .theme-toggle:hover { width: auto; padding-right: 1rem; border-color: var(--color-primary); transform: translateY(-1px); } .theme-toggle-icon { width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--color-primary-light); } :root[data-theme="light"] .theme-toggle-icon { color: var(--color-primary-dark); } .theme-toggle-icon svg { width: 17px; height: 17px; } #theme-toggle-label { white-space: nowrap; max-width: 0; opacity: 0; transition: max-width 0.2s ease, opacity 0.15s ease; } .theme-toggle:hover #theme-toggle-label { max-width: 8rem; opacity: 1; } .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-emerald); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); animation: pulse-dot 2s ease-out infinite; } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); } 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } /* ============================= Nav (Tabs) ============================= */ .tabs { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-height: 0; overflow-y: auto; /* room for a 13-item nav without it looking cramped against the footer */ padding-bottom: 0.5rem; } /* ============================= Workspace switcher ============================= One workspace visible at a time (Sage or Capium) — a labelled, switchable header, with a left accent rail bracketing every tab beneath it so the whole visible group reads as belonging to that one workspace. Replaces the old two-stacked-section-labels layout. */ .ws-switcher-wrap { padding: 0 0.7rem 0.9rem; } .ws-caption { font-size: 0.64rem; font-weight: 700; color: var(--sidebar-text-muted); text-transform: uppercase; letter-spacing: 0.07em; padding: 0 0.2rem 0.4rem; } .ws-card-wrap { position: relative; } .ws-card { display: flex; align-items: center; gap: 0.6rem; width: 100%; box-sizing: border-box; padding: 0.55rem 0.65rem; border-radius: var(--radius-sm); background: var(--sidebar-bg-raised); border: 1px solid var(--sidebar-border); cursor: pointer; font-family: inherit; transition: border-color 0.15s; } .ws-card:hover { border-color: var(--ws-tint, var(--color-primary)); } .ws-badge { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.78rem; flex-shrink: 0; background: var(--ws-tint, var(--color-primary)); color: var(--sidebar-bg); } .ws-card-text { flex: 1; min-width: 0; text-align: left; } .ws-name { display: block; color: var(--sidebar-text); font-weight: 700; font-size: 0.85rem; line-height: 1.15; } .ws-conn { display: flex; align-items: center; gap: 0.3rem; color: var(--sidebar-text-muted); font-size: 0.68rem; margin-top: 0.15rem; } .ws-conn-dot { width: 6px; height: 6px; border-radius: 6px; background: var(--ws-tint, var(--color-primary)); flex-shrink: 0; } .ws-chevron { color: var(--sidebar-text-muted); flex-shrink: 0; width: 15px; height: 15px; } .ws-menu { position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; background: var(--sidebar-bg-raised); border: 1px solid var(--sidebar-border); border-radius: var(--radius-sm); padding: 0.3rem; z-index: 20; box-shadow: var(--shadow-lg); } .ws-opt { display: flex; align-items: center; gap: 0.55rem; width: 100%; box-sizing: border-box; padding: 0.5rem 0.55rem; border-radius: var(--radius-sm); background: transparent; border: none; cursor: pointer; color: var(--sidebar-text); font-size: 0.8rem; font-family: inherit; text-align: left; } .ws-opt:hover { background: var(--sidebar-bg); } .ws-opt-badge { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.68rem; color: var(--sidebar-bg); flex-shrink: 0; } .ws-opt-name { flex: 1; } .ws-opt-check { width: 15px; height: 15px; flex-shrink: 0; } /* the rail brackets whichever tab group is currently visible */ .tabs { position: relative; padding-left: 1rem; } .nav-rail { position: absolute; left: 0.3rem; top: 0.2rem; bottom: 0.3rem; width: 3px; border-radius: 3px; background: linear-gradient(var(--ws-tint, var(--color-primary)), transparent); } .ws-tabs:not([hidden]) { display: flex; flex-direction: column; gap: 0.3rem; } .tab-btn { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.7rem; border: none; border-radius: var(--radius-sm); background: transparent; cursor: pointer; font-size: 0.87rem; font-weight: 600; color: var(--sidebar-text); text-align: left; font-family: inherit; transition: background 0.15s, color 0.15s; position: relative; } .tab-btn span:not(.count-badge) { flex: 1; } .tab-svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--sidebar-text-muted); transition: color 0.15s; } .tab-btn:hover { background: var(--sidebar-bg-raised); color: var(--sidebar-text); } .tab-btn.active { background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(59, 130, 246, 0.85)); color: white; box-shadow: 0 6px 16px rgba(99, 102, 241, 0.3); } .tab-btn.active .tab-svg { color: white; } .count-badge { background: var(--color-amber); color: white; font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; flex: 0 0 auto !important; } .tab-btn.active .count-badge { background: rgba(255, 255, 255, 0.28); } .sidebar-footer { margin-top: auto; padding-top: 1rem; } .pii-tag { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.72rem; font-weight: 500; line-height: 1.4; /* Pinned to the dark-mode red values (not the theme-following --color-red-* tokens) — the sidebar stays dark in both themes, so this badge shouldn't visually change when the rest of the page does. */ color: #f87171; background: rgba(239, 68, 68, 0.14); border: 1px solid rgba(239, 68, 68, 0.3); padding: 0.6rem 0.7rem; border-radius: var(--radius-sm); } .pii-tag svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 0.1rem; } /* ============================= Main content ============================= */ .main-content { flex: 1; min-width: 0; padding: 2.1rem 2.75rem 4rem; max-width: 1240px; } /* Capium's console pages are built to fill the column */ .main-content:has(.capium-console.active), .main-content:has(#tab-capium-agent-studio.active) { max-width: none; } .topbar { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem; } .topbar h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.25rem; letter-spacing: -0.01em; } .subtitle { color: var(--color-text-muted); font-size: 0.88rem; margin: 0; max-width: 46ch; } .stat-row { display: flex; gap: 0.6rem; flex-wrap: wrap; } .stat-chip { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.55rem 1rem; display: flex; flex-direction: column; align-items: flex-start; min-width: 92px; box-shadow: var(--shadow-sm); } .stat-value { font-size: 1.15rem; font-weight: 800; line-height: 1.15; } .stat-key { font-size: 0.68rem; font-weight: 600; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.04em; } .stat-review .stat-value { color: var(--color-amber); } .stat-approved .stat-value { color: var(--color-emerald); } .stat-total .stat-value { color: var(--color-primary); } .stat-teal .stat-value { color: var(--color-teal); } /* ============================= Dashboard ============================= */ .dash-bars { display: flex; flex-direction: column; gap: 0.6rem; } .dash-bar-row { display: grid; grid-template-columns: 100px 1fr 44px; align-items: center; gap: 0.7rem; font-size: 0.82rem; } .dash-bar-label { color: var(--color-text-muted); } .dash-bar-track { height: 8px; background: var(--color-border); border-radius: 999px; overflow: hidden; } .dash-bar-fill { height: 100%; border-radius: 999px; transition: width 0.3s ease; } .dash-bar-fill.dash-pending { background: var(--color-blue-text); } .dash-bar-fill.dash-needs_review { background: var(--color-amber); } .dash-bar-fill.dash-approved { background: var(--color-emerald); } .dash-bar-fill.dash-rejected { background: var(--color-red); } .dash-bar-count { text-align: right; font-weight: 700; color: var(--color-text); } .dash-section-header { margin: 1.5rem 0 0.85rem; } .dash-section-header:first-child { margin-top: 0; } .dash-section-header h2 { font-size: 1.05rem; margin-bottom: 0.2rem; } .dash-cols { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.25rem; margin-bottom: 1.5rem; } @media (max-width: 960px) { .dash-cols { grid-template-columns: 1fr; } } .status-group-label { font-size: 0.68rem; font-weight: 700; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.6rem; } .dash-table-card { padding-bottom: 0.3rem; } .dash-col-right { text-align: right; } /* ---- Recent activity table (Dashboard) ---- */ .dash-activity-table .dash-who { font-weight: 600; } .dash-activity-table .dash-code { color: var(--color-text-faint); font-weight: 400; font-variant-numeric: tabular-nums; } .dash-activity-table .dash-sub { font-size: 0.74rem; color: var(--color-text-faint); margin-top: 0.15rem; } .dash-status-dot { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; } .dash-status-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .dash-status-dot.status-approved { color: var(--color-emerald); } .dash-status-dot.status-needs_review, .dash-status-dot.status-pending { color: var(--color-amber); } .dash-status-dot.status-rejected { color: var(--color-red); } .dash-ago { text-align: right; color: var(--color-text-faint); font-size: 0.78rem; font-variant-numeric: tabular-nums; } /* ---- Per-client table mini bar ---- */ .dash-client-bar-wrap { display: flex; align-items: center; gap: 0.6rem; } .dash-client-bar-track { flex: 1; min-width: 60px; height: 6px; border-radius: 4px; background: var(--color-border); overflow: hidden; } .dash-client-bar-fill { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-teal)); } .dash-client-money { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---- Agent cards ---- */ .agent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; } @media (max-width: 900px) { .agent-grid { grid-template-columns: 1fr; } } .agent-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm); } .agent-card-header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.9rem; } .agent-card-robot { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary-bg, #eef0ff); color: var(--color-primary); } .agent-card[data-agent="timesheet_row"] .agent-card-robot { background: var(--color-teal-bg); color: var(--color-teal); } .agent-card-robot svg { width: 26px; height: 26px; } .agent-card-name { font-size: 0.98rem; font-weight: 700; margin-bottom: 0.15rem; } .agent-card-desc { font-size: 0.76rem; color: var(--color-text-faint); line-height: 1.35; } .agent-card-pipeline { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1rem; } .pipeline-chip { font-size: 0.66rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--color-bg-subtle, #f3f4f8); border: 1px solid var(--color-border); color: var(--color-text-muted); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .pipeline-arrow { color: var(--color-text-faint); font-size: 0.75rem; } .agent-card-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; } .agent-stat { display: flex; flex-direction: column; gap: 0.1rem; } .agent-stat-value { font-size: 1.05rem; font-weight: 800; color: var(--color-text); } .agent-stat-label { font-size: 0.65rem; font-weight: 600; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.03em; } /* ---- Draft agents (Dashboard) — created in the Create Agent wizard, laid out in Agent Studio. Dashed border keeps these visually distinct from the real agent-card grid above: no run stats exist for these since nothing has actually run yet. ---- */ .draft-agent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.25rem; } @media (max-width: 900px) { .draft-agent-grid { grid-template-columns: 1fr; } } .draft-agent-card { background: var(--color-surface); border: 1.5px dashed var(--color-border); border-radius: var(--radius-md); padding: 1rem 1.1rem; } .draft-agent-header { display: flex; align-items: center; gap: 0.75rem; } .draft-agent-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--tint-bg, var(--color-primary-bg)); color: var(--tint, var(--color-primary)); } .draft-agent-icon svg { width: 16px; height: 16px; } .draft-agent-name { color: var(--color-text); font-weight: 700; font-size: 0.86rem; } .draft-agent-tagline { color: var(--color-text-muted); font-size: 0.76rem; margin-top: 0.6rem; line-height: 1.45; } .draft-agent-meta { color: var(--color-text-faint); font-size: 0.7rem; margin-top: 0.5rem; } .draft-agent-open-btn { margin-top: 0.8rem; } /* ---- Activity chart (Dashboard) ---- */ .activity-chart { display: flex; align-items: flex-end; gap: 0.5rem; height: 130px; padding: 0.5rem 0.25rem 0; } .activity-bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.35rem; } .activity-bar { width: 100%; max-width: 26px; min-height: 3px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--color-primary), var(--color-teal)); transition: height 0.3s ease; } .activity-bar-count { font-size: 0.68rem; font-weight: 700; color: var(--color-text-muted); } .activity-bar-label { font-size: 0.62rem; color: var(--color-text-faint); white-space: nowrap; } .tab-panel { display: none; } .tab-panel.active { display: block; animation: card-in 0.2s ease; } /* ============================= Cards ============================= */ .panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; } @media (max-width: 900px) { .panel-grid { grid-template-columns: 1fr; } } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); margin-bottom: 1.25rem; transition: box-shadow 0.2s, transform 0.2s; } .upload-card:hover { box-shadow: var(--shadow-md); } .card-title { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 1.1rem; } .card-title h2 { font-size: 1rem; margin: 0 0 0.2rem; font-weight: 700; } .card-desc { margin: 0; font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.45; } .card-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .card-icon svg { width: 19px; height: 19px; } .icon-indigo { background: var(--color-primary-bg); color: var(--color-primary); } .icon-teal { background: var(--color-teal-bg); color: var(--color-teal); } .icon-slate { background: var(--color-bg-subtle); color: var(--color-text-muted); } .icon-emerald { background: var(--color-emerald-bg); color: var(--color-emerald); } .icon-amber { background: var(--color-amber-bg); color: var(--color-amber); } .hint { color: var(--color-text-muted); font-size: 0.85rem; margin: 0 0 0.9rem; line-height: 1.5; } /* ============================= Dropzone / upload ============================= */ .dropzone { position: relative; border: 1.5px dashed var(--color-border); border-radius: var(--radius-sm); padding: 1.75rem 1rem; text-align: center; cursor: pointer; margin-bottom: 1rem; background: var(--color-bg-subtle); transition: border-color 0.15s, background 0.15s; } .dropzone:hover { border-color: var(--color-primary); background: var(--color-primary-bg); } .dropzone-clear { position: absolute; top: 0.5rem; right: 0.5rem; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-faint); cursor: pointer; z-index: 2; } .dropzone-clear:hover { color: var(--color-red); border-color: var(--color-red); background: var(--color-red-bg); } .dropzone-clear svg { width: 12px; height: 12px; display: block; } .dropzone-inner { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--color-text-muted); font-size: 0.88rem; font-weight: 500; } .dropzone-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; color: var(--color-text-faint); margin-bottom: 0.15rem; } .dropzone-icon svg { width: 18px; height: 18px; } .dropzone-hint { font-size: 0.72rem; color: var(--color-text-faint); font-weight: 400; } .btn { padding: 0.7rem 1.2rem; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.88rem; font-weight: 600; color: white; font-family: inherit; transition: filter 0.15s, transform 0.05s, box-shadow 0.15s; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; } .btn svg { width: 16px; height: 16px; } /* Spinner shown inside a button while an upload is in flight */ .spinner { width: 15px; height: 15px; border: 2.5px solid rgba(255, 255, 255, 0.4); border-top-color: white; border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Indeterminate progress bar shown under an upload button while it runs */ .progress-bar { width: 100%; height: 4px; background: var(--color-border); border-radius: 999px; overflow: hidden; margin-top: 0.7rem; } .progress-fill { width: 40%; height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)); border-radius: 999px; animation: progress-slide 1.1s ease-in-out infinite; } @keyframes progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } .btn:active:not(:disabled) { transform: translateY(1px); } .btn:disabled { opacity: 0.55; cursor: default; } .btn-block { width: 100%; } .btn-primary { background: var(--color-primary); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); } .btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); } .btn-teal { background: var(--color-teal); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } .btn-teal:hover:not(:disabled) { background: var(--color-teal-dark); } .btn-emerald { background: var(--color-emerald); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } .btn-emerald:hover:not(:disabled) { background: var(--color-emerald-dark); } .status-text { font-size: 0.82rem; color: var(--color-text-muted); margin: 0.65rem 0 0; min-height: 1.1em; } .status-text.error { color: var(--color-red-text); } /* Per-file queue shown while uploading several New Starter files one at a time — each row updates live as its own file finishes, instead of the user waiting for the whole batch with no feedback. */ .upload-queue { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.75rem; } .upload-queue-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: 0.82rem; } /* The agent, drawn as a small robot — one clear symbol for "the agent is working on this file" instead of a row of stage-name text. Its state (pending/uploading/done/error) is driven by the real events streamed back from NewStarterAgent.run_stages, not a fake timer: it animates for exactly as long as the agent is genuinely doing something. */ .agent-robot { position: relative; width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--color-text-faint); } .agent-robot .robot-svg { width: 28px; height: 28px; } .agent-robot[data-state="pending"] { opacity: 0.5; } .agent-robot[data-state="uploading"] { color: var(--color-primary); } .agent-robot[data-state="uploading"] .robot-svg { animation: robot-bounce 0.9s ease-in-out infinite; } .agent-robot[data-state="uploading"] .robot-eye { transform-box: fill-box; transform-origin: center; animation: robot-blink 1.4s ease-in-out infinite; } .agent-robot[data-state="uploading"] .robot-antenna-dot { animation: stage-pulse 0.8s ease-in-out infinite; } .agent-robot[data-state="done"] { color: var(--color-emerald); } .agent-robot[data-state="error"] { color: var(--color-red-text); } @keyframes robot-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes robot-blink { 0%, 80%, 100% { transform: scaleY(1); } 90% { transform: scaleY(0.15); } } .agent-robot-badge { position: absolute; bottom: -2px; right: -2px; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-surface); border: 1.5px solid currentColor; } .agent-robot-badge svg { width: 9px; height: 9px; } .upload-queue-main { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; overflow: hidden; min-width: 0; } .upload-queue-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); } .upload-queue-item.q-done .upload-queue-name { color: var(--color-text); } .upload-queue-status { font-size: 0.76rem; color: var(--color-text-faint); flex-shrink: 0; } .upload-queue-item.q-error .upload-queue-status { color: var(--color-red-text); } @keyframes stage-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ============================= Review sub-tabs ============================= */ .review-tabs, .history-type-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; } .review-tab-btn, .history-type-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.1rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); font-family: inherit; transition: background 0.15s, color 0.15s, border-color 0.15s; } .review-tab-btn svg, .history-type-btn svg { width: 15px; height: 15px; } .review-tab-btn:hover, .history-type-btn:hover { border-color: var(--color-primary-light); color: var(--color-text); } .review-tab-btn.active, .history-type-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: white; } .review-group, .history-type-group { display: none; } .review-group.active, .history-type-group.active { display: block; } .upload-group { display: none; } .upload-group.active { display: block; } @keyframes capSpin { to { transform: rotate(360deg); } } .cap-dropzone { margin-bottom: 0; } /* ===================== Reconciliation Agent ===================== One agent: statement in, matched records out, exceptions surfaced. Layout is a vertical flow — inputs, the run, then results — because that is the order the work actually happens in. */ .rec { display: flex; flex-direction: column; gap: 1.1rem; } .rec-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.4rem 1.5rem; } .rec-card-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; } .rec-card-h h2 { font-size: 1.08rem; font-weight: 700; margin: 0 0 0.3rem; letter-spacing: -0.01em; } .rec-card-h p { margin: 0; max-width: 64ch; font-size: 0.82rem; line-height: 1.5; color: var(--color-text-muted); } .rec-format { flex-shrink: 0; padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-bg-subtle); border: 1px solid var(--color-border); } /* ====================================================================== AGENT STUDIO · the console One dark panel in either theme (a deliberate instrument look), with the machine — statement → agent → Capium ledgers — as the centrepiece and the controls along the bottom. Every token below is re-scoped so the panel keeps its own palette while the rest of the page follows the theme. ====================================================================== */ .rec { --rec-accent-text: var(--color-primary-light); } /* ---- console theme variables: dark by default, light under the light theme ---- */ .rx, .capium-console, .rec-recent { --cx-glass-2: rgba(255, 255, 255, 0.025); --cx-glass: rgba(255, 255, 255, 0.05); --cx-line: rgba(255, 255, 255, 0.09); --cx-line-strong: rgba(255, 255, 255, 0.14); --cx-hi: rgba(255, 255, 255, 0.05); --cx-dot: rgba(255, 255, 255, 0.07); --cx-menu-bg: #151924; --cx-deck-bg: rgba(20, 24, 33, 0.85); --cx-well: rgba(0, 0, 0, 0.25); --cx-core-a: #1d2230; --cx-core-b: #0e1117; --cx-shadow-deep: rgba(0, 0, 0, 0.5); --cx-frame-bg: radial-gradient(1200px 500px at 15% -10%, rgba(99, 102, 241, 0.22), transparent 60%), radial-gradient(900px 500px at 100% 110%, rgba(45, 212, 191, 0.12), transparent 60%), linear-gradient(180deg, #0f1218 0%, #0b0e14 100%); --cx-frame-shadow: 0 30px 80px rgba(2, 6, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); --cx-title-grad: linear-gradient(90deg, #fff 0%, #c7d2fe 100%); } :root[data-theme="light"] .rx, :root[data-theme="light"] .capium-console, :root[data-theme="light"] .rec-recent { color-scheme: light; --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-bg-subtle: #f0f2f7; --color-border: #e3e6ee; --color-text: #1a1d29; --color-text-muted: #5c6470; --color-text-faint: #8991a0; --color-primary-bg: #eef0ff; --color-emerald-bg: #e7f9f1; --color-emerald-text: #04724f; --color-amber-bg: #fff7e6; --color-amber-border: #f3d38a; --color-amber-text: #8a5b09; --color-red-bg: #fdeeee; --color-red-text: #b32323; --color-blue-bg: #eaf2ff; --color-blue-text: #2563eb; --rec-accent-text: #4f46e5; --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.05); --cx-glass-2: rgba(15, 23, 42, 0.025); --cx-glass: rgba(15, 23, 42, 0.045); --cx-line: rgba(15, 23, 42, 0.1); --cx-line-strong: rgba(15, 23, 42, 0.16); --cx-hi: rgba(255, 255, 255, 0.85); --cx-dot: rgba(15, 23, 42, 0.08); --cx-menu-bg: #ffffff; --cx-deck-bg: rgba(255, 255, 255, 0.84); --cx-well: rgba(15, 23, 42, 0.04); --cx-core-a: #ffffff; --cx-core-b: #e4e7f5; --cx-shadow-deep: rgba(15, 23, 42, 0.16); --cx-frame-bg: radial-gradient(1200px 500px at 15% -10%, rgba(99, 102, 241, 0.14), transparent 60%), radial-gradient(900px 500px at 100% 110%, rgba(13, 148, 136, 0.08), transparent 60%), linear-gradient(180deg, #ffffff 0%, #f3f4fb 100%); --cx-frame-shadow: 0 24px 60px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9); --cx-title-grad: linear-gradient(90deg, #1a1d29 0%, #4338ca 100%); } .rx { color-scheme: dark; --color-surface: #11141b; --color-surface-raised: #1a1e28; --color-bg-subtle: #161a22; --color-border: #262b37; --color-text: #eceef2; --color-text-muted: #98a0b0; --color-text-faint: #5f6675; --color-primary-bg: rgba(99, 102, 241, 0.16); --color-emerald-bg: rgba(16, 185, 129, 0.16); --color-emerald-text: #6ee7b7; --color-amber-bg: rgba(245, 158, 11, 0.16); --color-amber-border: rgba(245, 158, 11, 0.4); --color-amber-text: #fbbf24; --color-red-bg: rgba(239, 68, 68, 0.16); --color-red-text: #f87171; --rec-accent-text: #a5b4fc; --th-accent: var(--color-primary); --th-accent-soft: var(--color-primary-bg); position: relative; overflow: visible; padding: 1.6rem 1.7rem 1.5rem; border-radius: 20px; color: var(--color-text); background: var(--cx-frame-bg); box-shadow: var(--cx-frame-shadow); animation: rxIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .rx[data-state="ready"] { --th-accent: var(--color-primary); } .rx[data-state="done"] { --th-accent: var(--color-emerald); --th-accent-soft: var(--color-emerald-bg); } .rx[data-state="failed"] { --th-accent: var(--color-red); --th-accent-soft: var(--color-red-bg); } @keyframes rxIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* the atmosphere: two drifting glows and a dot grid */ .rx-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; } .rx-bg i { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(80px); opacity: 0.32; background: var(--th-accent-soft); transition: background 0.8s; } .rx-bg i:nth-child(1) { top: -260px; left: -140px; animation: recDrift 16s ease-in-out infinite alternate; } .rx-bg i:nth-child(2) { bottom: -300px; right: -160px; animation: recDrift 20s ease-in-out infinite alternate-reverse; } .rx-bg i:nth-child(3) { top: 35%; left: 40%; width: 300px; height: 300px; opacity: 0.18; animation: recDrift 12s ease-in-out infinite alternate; } .rx-bg b { position: absolute; inset: 0; background-image: radial-gradient(var(--cx-dot) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%); } @keyframes recDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.15); } } .rx > *:not(.rx-bg) { position: relative; } /* ---- header ---- */ .rx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; margin-bottom: 1.4rem; } .rx-ident { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; } .rx-mark { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--color-primary), #8b5cf6); box-shadow: 0 10px 24px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .rx-mark svg { width: 24px; height: 24px; } .rx-kicker { display: block; margin-bottom: 0.3rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rec-accent-text); } .rx-title { margin: 0 0 0.35rem; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; background: var(--cx-title-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .rx-sub { margin: 0; max-width: 60ch; font-size: 0.84rem; line-height: 1.55; color: var(--color-text-muted); } .rx-status { display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem; flex-shrink: 0; } .rx-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.32rem 0.75rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); background: var(--cx-glass); border: 1px solid var(--cx-line); transition: color 0.3s, background 0.3s, border-color 0.3s; } .rx-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .rx-pill[data-state="ready"] { color: var(--color-emerald-text); background: var(--color-emerald-bg); border-color: transparent; } .rx-pill[data-state="ready"] i { box-shadow: 0 0 10px var(--color-emerald); } .rx-pill[data-state="running"] { color: var(--rec-accent-text); background: var(--color-primary-bg); border-color: transparent; } .rx-pill[data-state="running"] i { animation: recPulse 1.1s ease-in-out infinite; } .rx-pill[data-state="done"] { color: var(--color-emerald-text); background: var(--color-emerald-bg); border-color: transparent; } .rx-pill[data-state="failed"] { color: var(--color-red-text); background: var(--color-red-bg); border-color: transparent; } .rx-clock { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.4rem 0.8rem; border-radius: 10px; background: var(--cx-glass); border: 1px solid var(--cx-line); animation: recFresh 0.3s ease-out; } .rx-clock span { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); } .rx-clock time { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.05rem; font-variant-numeric: tabular-nums; } /* ---- the machine ---- */ .rx-machine { display: grid; grid-template-columns: 210px minmax(0, 1fr) 210px; align-items: center; gap: 0; min-height: 300px; padding: 1.2rem 1.4rem 1.6rem; border-radius: 18px; border: 1px solid var(--cx-line); background: radial-gradient(55% 90% at 50% 50%, var(--th-accent-soft), transparent 70%), var(--cx-glass-2); transition: background 0.8s; } .rx-part { position: relative; display: flex; flex-direction: column; gap: 0.7rem; } .rx-caption { margin: 0; font-size: 0.72rem; line-height: 1.45; color: var(--color-text-muted); } .rx-caption b { display: block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: 0.15rem; } .rx-caption strong { color: var(--color-text); font-weight: 600; } .rx-caption-core { position: absolute; left: 50%; bottom: -1.1rem; transform: translateX(-50%); text-align: center; white-space: nowrap; } /* a node */ .rx-node { position: relative; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.95rem 1rem; border-radius: 14px; border: 1px solid var(--cx-line); background: linear-gradient(180deg, var(--cx-glass), var(--cx-glass-2)); box-shadow: inset 0 1px 0 var(--cx-hi); transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s, background 0.3s; } .rx-node-t { font-size: 0.84rem; font-weight: 600; } .rx-node-s { font-size: 0.7rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rx-node-ic { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 0.5rem; border-radius: 10px; color: var(--color-text-muted); background: var(--cx-glass); transition: color 0.3s, background 0.3s; } .rx-node-ic svg { width: 17px; height: 17px; position: absolute; transition: opacity 0.25s, transform 0.25s; } .rx-node.is-active { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg), 0 14px 30px rgba(99, 102, 241, 0.22); transform: translateY(-2px); } .rx-node.is-active .rx-node-ic { color: var(--rec-accent-text); background: var(--color-primary-bg); } .rx-node.is-done { border-color: var(--color-emerald); } .rx-node.is-done .rx-node-ic { color: var(--color-emerald); background: var(--color-emerald-bg); } /* the statement slot — a dropzone dressed as a machine part */ .rx-slot { cursor: pointer; border-style: dashed; border-color: rgba(165, 180, 252, 0.35); background: rgba(99, 102, 241, 0.06); min-height: 150px; } .rx-slot:hover, .rx-slot.is-dragover { border-color: var(--color-primary); background: var(--color-primary-bg); transform: translateY(-2px); } .rx-slot.is-dragover { border-style: solid; box-shadow: 0 0 0 4px var(--color-primary-bg), 0 14px 30px rgba(99, 102, 241, 0.3); } .rx-slot .dropzone-clear { display: none; } .rx-slot .rx-node-ic { color: var(--rec-accent-text); background: var(--color-primary-bg); } .rx-slot .rx-ic-up { animation: recBob 1.6s ease-in-out infinite; } .rx-slot .rx-ic-doc { opacity: 0; transform: scale(0.4); } .rx-slot-full { display: none; } .rx-slot-badge { position: absolute; top: -0.55rem; right: 0.75rem; padding: 0.14rem 0.5rem; border-radius: 999px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6rem; font-weight: 700; color: #fff; background: var(--color-emerald); transform: scale(0); transition: transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); } .rx-slot-badge.is-xlsx { background: var(--color-teal); } .rx-slot-bank { display: none; margin-top: 0.45rem; font-style: normal; font-size: 0.68rem; color: var(--color-text-muted); } .rx-slot-bank::before { content: "→ "; color: var(--color-text-faint); } .rec-th-lines { display: flex; flex-direction: column; gap: 4px; margin-top: 0.6rem; } .rec-th-lines i { display: block; height: 5px; border-radius: 3px; background: var(--cx-line); } .rec-th-lines i:nth-child(1) { width: 90%; } .rec-th-lines i:nth-child(2) { width: 70%; } .rec-th-lines i:nth-child(3) { width: 82%; } .rec-th-lines i:nth-child(4) { width: 55%; } /* with a file in the slot */ .rx-slot.has-file { border-style: solid; border-color: var(--color-emerald); background: linear-gradient(180deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.03)); } .rx-slot.has-file .rx-node-ic { color: var(--color-emerald); background: var(--color-emerald-bg); } .rx-slot.has-file .rx-ic-up { opacity: 0; transform: scale(0.4); animation: none; } .rx-slot.has-file .rx-ic-doc { opacity: 1; transform: none; } .rx-slot.has-file .rx-slot-empty { display: none; } .rx-slot.has-file .rx-slot-full { display: inline; } .rx-slot.has-file .rx-node-s { color: var(--color-emerald-text); font-weight: 500; } .rx-slot.has-file .rec-th-lines i { background: var(--color-emerald); opacity: 0.5; } .rx-slot.has-file .rx-slot-badge { transform: scale(1); } .rx-slot.has-file .rx-slot-bank.is-in { display: block; } .rx-slot-meta { display: none; margin-top: 0.35rem; font-size: 0.66rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .rx-slot.has-file .rx-slot-meta { display: block; } .rx-slot-remove { position: absolute; right: 0.6rem; bottom: 0.6rem; display: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--cx-line); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; } .rx-slot-remove svg { width: 11px; height: 11px; } .rx-slot.has-file .rx-slot-remove { display: flex; } .rx-slot-remove:hover { color: var(--color-red-text); background: var(--color-red-bg); border-color: var(--color-red); } /* while the run reads it */ .rx-node.is-active .rec-th-lines i { background: linear-gradient(90deg, var(--cx-line) 0%, var(--rec-accent-text) 50%, var(--cx-line) 100%); background-size: 200% 100%; opacity: 1; animation: recShimmer 1.3s linear infinite; } .rx-node.is-active .rec-th-lines i:nth-child(2) { animation-delay: 0.15s; } .rx-node.is-active .rec-th-lines i:nth-child(3) { animation-delay: 0.3s; } .rx-node.is-active .rec-th-lines i:nth-child(4) { animation-delay: 0.45s; } .rx-node.is-done .rec-th-lines i { background: var(--color-emerald); opacity: 0.55; animation: none; } @keyframes recShimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } @keyframes recBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* record counts that pop onto a ledger once fetched */ .rec-th-count { position: absolute; top: -0.55rem; right: 0.75rem; font-style: normal; font-size: 0.62rem; font-weight: 700; padding: 0.14rem 0.5rem; border-radius: 999px; color: #fff; background: var(--color-emerald); transform: scale(0); transition: transform 0.35s cubic-bezier(0.2, 1.4, 0.4, 1); } .rec-th-count.is-in { transform: scale(1); } /* the middle: wires + the agent core */ .rec-th-mid { position: relative; height: 262px; justify-content: center; } .rec-th-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .rec-wire { fill: none; stroke: var(--cx-line); stroke-width: 2; stroke-linecap: round; transition: stroke 0.4s; } /* ambient: faint slow flow so the machine looks alive before a run */ .rx[data-state="idle"] .rec-wire, .rx[data-state="ready"] .rec-wire { stroke-dasharray: 3 11; animation: recWireFlow 3s linear infinite; } .rx[data-state="ready"] .rec-wire { stroke: rgba(165, 180, 252, 0.45); animation-duration: 1.8s; } .rec-wire.is-active { stroke: var(--color-primary); stroke-dasharray: 6 8; animation: recWireFlow 0.9s linear infinite; } .rec-wire.is-active.is-reverse { animation-direction: reverse; } .rec-wire.is-done { stroke: var(--color-emerald); stroke-dasharray: none; animation: none; } @keyframes recWireFlow { to { stroke-dashoffset: -14; } } .rec-wire-dot { fill: var(--rec-accent-text); opacity: 0; transition: opacity 0.3s; filter: drop-shadow(0 0 5px var(--color-primary)); } .rec-wire-dot.is-active { opacity: 1; } .rec-th-core { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--th-accent); background: radial-gradient(circle at 35% 30%, var(--cx-core-a), var(--cx-core-b)); box-shadow: 0 0 0 1px var(--cx-line), 0 20px 40px var(--cx-shadow-deep), inset 0 1px 0 var(--cx-line); transition: color 0.4s, transform 0.4s; } .rec-th-core-ic { position: relative; width: 34px; height: 34px; animation: recBreathe 2.6s ease-in-out infinite; } .rec-th-core-ic svg { position: absolute; inset: 0; width: 34px; height: 34px; transition: opacity 0.3s, transform 0.3s; } .rx-core-ok { opacity: 0; transform: scale(0.4); } .rx[data-state="done"] .rx-core-swap { opacity: 0; transform: scale(0.4); } .rx[data-state="done"] .rx-core-ok { opacity: 1; transform: none; } @keyframes recBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } } .rec-th-ring { position: absolute; inset: -6px; border-radius: 50%; padding: 3px; background: conic-gradient(from 0deg, transparent 0 40%, var(--th-accent) 80%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: capSpin 5s linear infinite; opacity: 0.55; transition: opacity 0.4s; } .rx[data-state="ready"] .rec-th-ring { animation-duration: 2.6s; opacity: 0.85; } .rx[data-state="running"] .rec-th-ring { animation-duration: 1.4s; opacity: 1; } .rx[data-state="failed"] .rec-th-ring { animation: none; opacity: 0.5; } .rec-th-halo { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--th-accent); opacity: 0; animation: recHaloBig 4s ease-out infinite; } .rec-th-halo:nth-child(2) { animation-delay: 2s; } .rx[data-state="running"] .rec-th-halo { animation-duration: 2.4s; } .rx[data-state="running"] .rec-th-halo:nth-child(2) { animation-delay: 1.2s; } .rx[data-state="done"] .rec-th-halo, .rx[data-state="failed"] .rec-th-halo { animation: none; } @keyframes recHaloBig { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.5); opacity: 0; } } .rec-th-orbit { position: absolute; inset: -18px; border-radius: 50%; animation: capSpin 4s linear infinite; opacity: 0; transition: opacity 0.4s; } .rec-th-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--th-accent); box-shadow: 0 0 10px var(--th-accent); } .rec-th-orbit i:nth-child(1) { top: -3px; left: 50%; } .rec-th-orbit i:nth-child(2) { bottom: 12%; left: 6%; } .rec-th-orbit i:nth-child(3) { bottom: 12%; right: 6%; } .rx-machine[data-stage="match"] .rec-th-orbit { opacity: 1; animation-duration: 1.6s; } .rx-machine[data-stage="match"] .rec-th-core { transform: scale(1.1); } .rec-th-core-txt { position: absolute; left: 50%; top: calc(50% + 64px); transform: translateX(-50%); text-align: center; white-space: nowrap; } .rec-th-core-txt strong { display: block; font-size: 0.78rem; font-weight: 600; } .rec-th-core-txt small { display: block; margin-top: 0.15rem; font-size: 0.72rem; color: var(--rec-accent-text); min-height: 1em; } .rec-th-core-txt small.is-fresh { animation: recFresh 0.4s ease-out; } @keyframes recFresh { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes recPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.45; } } /* ---- the control deck ---- */ .rx-deck { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(9rem, auto) auto auto; align-items: stretch; gap: 0.6rem; margin-top: 1rem; padding: 0.65rem; border-radius: 16px; border: 1px solid var(--cx-line); background: var(--cx-deck-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 16px 40px var(--cx-shadow-deep), inset 0 1px 0 var(--cx-hi); } .rx-field { position: relative; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: 0.5rem 0.75rem; border-radius: 11px; background: var(--cx-glass-2); border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; } .rx-field:hover { background: var(--cx-glass); } .rx-field:focus-within { border-color: var(--color-primary); background: rgba(99, 102, 241, 0.08); } .rx-label { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); } .rx-select { position: relative; display: block; } .rx-select::after { content: ""; position: absolute; right: 0.2rem; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 2px solid var(--color-text-muted); border-bottom: 2px solid var(--color-text-muted); transform: rotate(45deg); pointer-events: none; } .rx-select select { width: 100%; padding: 0.15rem 1.3rem 0.15rem 0; border: none; background: transparent; color: var(--color-text); font-family: inherit; font-size: 0.88rem; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; } .rx-select select:focus { outline: none; } .rx-select select option { background: var(--cx-menu-bg); color: var(--color-text); } /* Capium sync: one button, a note underneath */ .rx-field-sync { justify-content: space-between; } .rx-sync { display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start; padding: 0.3rem 0.7rem 0.3rem 0.55rem; border-radius: 9px; border: 1px solid var(--cx-line); background: var(--cx-glass); color: var(--color-text); font-family: inherit; font-size: 0.84rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .rx-sync svg { width: 15px; height: 15px; color: var(--rec-accent-text); } .rx-sync:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-primary-bg); } .rx-sync:disabled { opacity: 0.6; cursor: default; } .rx-sync.is-busy svg { animation: capSpin 0.9s linear infinite; } .rx-sync-note { font-size: 0.66rem; color: var(--color-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rx-sync-note.is-ok { color: var(--color-emerald-text); } .rx-sync-note.is-warn { color: var(--color-amber-text); } /* thresholds: a compact readout that opens a popover */ .rx-tuning { min-width: 7.5rem; } .rx-tuning summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 0.25rem; } .rx-tuning summary::-webkit-details-marker { display: none; } .rx-th { display: inline-flex; align-items: baseline; gap: 0.15rem; font-size: 0.95rem; font-weight: 700; font-variant-numeric: tabular-nums; } .rx-th .is-auto { color: var(--color-emerald-text); } .rx-th .is-review { color: var(--color-amber-text); } .rx-th i { font-style: normal; color: var(--color-text-faint); font-weight: 500; } .rx-th small { font-size: 0.66rem; color: var(--color-text-faint); margin-left: 0.15rem; } .rx-tuning[open] { border-color: var(--color-primary); background: rgba(99, 102, 241, 0.08); } .rx-pop { position: absolute; right: 0; bottom: calc(100% + 0.6rem); width: 22rem; max-width: 80vw; padding: 0.9rem 1rem 1rem; border-radius: 14px; border: 1px solid var(--cx-line); background: var(--cx-menu-bg); box-shadow: 0 24px 60px var(--cx-shadow-deep); z-index: 5; animation: recResultIn 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); } .rx-pop-h strong { display: block; font-size: 0.82rem; font-weight: 700; } .rx-pop-h span { display: block; margin-top: 0.1rem; font-size: 0.7rem; color: var(--color-text-muted); } .rx-pop > p { margin: 0.7rem 0 0; font-size: 0.68rem; color: var(--color-text-faint); } .rx-pop-fields { display: flex; gap: 1rem; } .rec-band { display: flex; gap: 3px; height: 10px; margin: 0.9rem 0 0.55rem; } .rec-band > span { display: block; min-width: 6px; border-radius: 999px; transition: flex-basis 0.2s; } .rec-band-manual { background: var(--color-red); opacity: 0.55; } .rec-band-review { background: var(--color-amber); } .rec-band-auto { background: var(--color-emerald); } .rec-band-legend { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.7rem; color: var(--color-text-muted); } .rec-band-legend li { display: inline-flex; align-items: center; gap: 0.4rem; } .rec-band-legend b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); } .rec-band-legend i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .rec-band-legend .is-manual i { background: var(--color-red); opacity: 0.7; } .rec-band-legend .is-review i { background: var(--color-amber); } .rec-band-legend .is-auto i { background: var(--color-emerald); } .rec-tune { display: flex; flex-direction: column; gap: 0.3rem; } .rec-tune > span { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); } /* the start button */ .rx-start { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; align-self: stretch; padding: 0 1.5rem 0 1.25rem; min-height: 52px; border: none; border-radius: 12px; font-family: inherit; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.005em; color: #fff; background: linear-gradient(135deg, var(--color-primary), #7c3aed); box-shadow: 0 10px 28px rgba(99, 102, 241, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s, filter 0.2s; } .rx-start::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-120%); } .rx-start:not(:disabled)::after { animation: rxSheen 2.8s ease-in-out infinite; } @keyframes rxSheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } .rx-start:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(99, 102, 241, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .rx-start:not(:disabled):active { transform: translateY(0); } .rx-start:disabled { cursor: default; opacity: 0.4; filter: saturate(0.4); box-shadow: none; } .rx-start-ic { width: 16px; height: 16px; } .rx-start .spinner { width: 15px; height: 15px; } .rx-start .spinner:not([hidden]) + .rx-start-ic { display: none; } /* running: the controls give way to a readout of what's being run */ .rx-deck-summary { display: none; grid-column: 1 / -1; align-items: center; gap: 1.5rem; padding: 0.35rem 0.5rem; flex-wrap: wrap; } .rx-sum { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .rx-sum b { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); } .rx-sum span { font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rec[data-mode="running"] .rx-deck > .rx-field, .rec[data-mode="running"] .rx-deck > .rx-start, .rec[data-mode="done"] .rx-deck > .rx-field, .rec[data-mode="done"] .rx-deck > .rx-start, .rec[data-mode="failed"] .rx-deck > .rx-field, .rec[data-mode="failed"] .rx-deck > .rx-start { display: none; } .rec[data-mode="running"] .rx-deck-summary, .rec[data-mode="done"] .rx-deck-summary, .rec[data-mode="failed"] .rx-deck-summary { display: flex; animation: recFresh 0.3s ease-out; } .rec[data-mode="running"] .rx-foot, .rec[data-mode="done"] .rx-foot, .rec[data-mode="failed"] .rx-foot, .rec[data-mode="running"] .rec-existing, .rec[data-mode="done"] .rec-existing, .rec[data-mode="failed"] .rec-existing, .rec[data-mode="running"] .rx-caption, .rec[data-mode="done"] .rx-caption, .rec[data-mode="failed"] .rx-caption { display: none; } .rec[data-mode="running"] .rx-slot, .rec[data-mode="done"] .rx-slot, .rec[data-mode="failed"] .rx-slot { pointer-events: none; } /* under the deck */ .rx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; margin-top: 0.7rem; padding: 0 0.4rem; min-height: 1.4em; } .rec-ready-hint { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.78rem; color: var(--color-text-muted); } .rec-ready-hint svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--color-text-faint); } .rec-ready-hint[data-state="ready"] { color: var(--color-emerald-text); } .rec-ready-hint[data-state="ready"] svg { color: var(--color-emerald); } .rec-bank-state { margin: 0; font-size: 0.74rem; color: var(--color-text-faint); } /* ---- reading the chosen account from Capium: motion in the deck, the hint and the machine ---- */ .rx-hint-spin { display: none; } .rec-ready-hint[data-state="reading"] { color: var(--rec-accent-text); } .rec-ready-hint[data-state="reading"] .rx-hint-info { display: none; } .rec-ready-hint[data-state="reading"] .rx-hint-spin { display: block; color: var(--color-primary); animation: capSpin 0.8s linear infinite; } .rec-ready-hint[data-state="reading"] span::after, .rx[data-busy="account"] #rec-th-verb::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: rxDots 1.2s steps(4, end) infinite; } @keyframes rxDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } } /* the bank-account field shows an indeterminate bar along its bottom edge */ .rx-field.is-reading { overflow: hidden; border-color: var(--color-primary-bg); } .rx-field.is-reading::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--color-primary) 45%, var(--color-primary-light) 55%, transparent 100%); background-size: 45% 100%; background-repeat: no-repeat; animation: recComet 1.1s linear infinite; } .rx-field.is-reading .cx-sel-chev { display: none; } .rx-field.is-reading .cx-sel::after { content: ""; width: 13px; height: 13px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--color-primary-bg); border-top-color: var(--color-primary); animation: capSpin 0.8s linear infinite; } /* the console pill and core pick up the pace */ .rx-pill[data-state="busy"] { color: var(--rec-accent-text); background: var(--color-primary-bg); border-color: transparent; } .rx-pill[data-state="busy"] i { animation: recPulse 1.1s ease-in-out infinite; } .rx[data-busy="account"] .rec-th-ring { animation-duration: 1.4s; opacity: 1; } .rx[data-busy="account"] .rec-th-halo { animation-duration: 2.4s; } .rx[data-busy="account"] .rec-th-halo:nth-child(2) { animation-delay: 1.2s; } .rx[data-busy="account"] .rx-slot-bank { color: var(--rec-accent-text); } .rx[data-busy="account"] .rx-slot-bank::before { color: var(--color-primary); } .rx-foot .status-text { margin: 0; flex: 1 1 100%; } /* what's already sitting in the chosen account */ .rec-existing { margin: 0.7rem 0 0; padding: 0.6rem 0.85rem; border-radius: 12px; border: 1px solid var(--color-amber-border); background: var(--color-amber-bg); animation: recFresh 0.3s ease-out; } .rec-existing-h { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .rec-existing-h strong { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: 600; color: var(--color-amber-text); } .rec-existing-h strong::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-amber); flex-shrink: 0; } .rec-existing-toggle { border: none; background: none; padding: 0.15rem 0.45rem; border-radius: 6px; font-family: inherit; font-size: 0.72rem; font-weight: 600; color: var(--color-amber-text); cursor: pointer; } .rec-existing-toggle:hover { background: rgba(245, 158, 11, 0.16); } .rec-existing-list { list-style: none; margin: 0.6rem 0 0; padding: 0; max-height: 210px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; } .rec-existing-list li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 0.6rem; align-items: baseline; padding: 0.4rem 0.5rem; border-radius: 6px; background: var(--cx-glass); font-size: 0.78rem; } .rec-existing-date { color: var(--color-text-faint); font-variant-numeric: tabular-nums; } .rec-existing-desc strong { display: block; font-weight: 600; } .rec-existing-desc small { display: block; color: var(--color-text-faint); font-size: 0.72rem; } .rec-existing-amount { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ---- the run: rail + log ---- */ .rx-run { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: 1rem; margin-top: 1rem; animation: recResultIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); transition: opacity 0.3s, transform 0.3s; } .rx-run.is-leaving { opacity: 0; transform: translateY(-6px); pointer-events: none; } .rx-run.is-done { grid-template-columns: 1fr; } .rx-run.is-done .rec-th-log { display: none; } .rec-flow { list-style: none; margin: 0; padding: 1.1rem 0.6rem 0.9rem; border-radius: 16px; border: 1px solid var(--cx-line); background: var(--cx-glass-2); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-content: start; } .rec-flow li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 0.3rem; opacity: 0.45; transition: opacity 0.3s; } .rec-flow li::before, .rec-flow li::after { content: ""; position: absolute; top: 21px; height: 2px; left: calc(-50% + 22px); width: calc(100% - 44px); border-radius: 2px; } .rec-flow li:first-child::before, .rec-flow li:first-child::after { display: none; } .rec-flow li::before { background: var(--cx-line); } .rec-flow li::after { background: var(--color-emerald); transform-origin: left center; transform: scaleX(0); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .rec-flow li.is-done::after { transform: scaleX(1); } .rec-flow li.is-running::after { transform: scaleX(1); background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%); background-size: 50% 100%; background-repeat: no-repeat; animation: recComet 1.1s linear infinite; } @keyframes recComet { from { background-position: -50% 0; } to { background-position: 200% 0; } } .rec-flow li.is-running, .rec-flow li.is-done, .rec-flow li.is-error { opacity: 1; } .rec-flow-mark { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 0.65rem; border-radius: 50%; color: var(--color-text-faint); background: var(--color-bg-subtle); border: 2px solid var(--cx-line); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s; z-index: 1; } .rec-flow-ic, .rec-flow-ok { width: 20px; height: 20px; position: absolute; transition: opacity 0.25s, transform 0.25s; } .rec-flow-ok { opacity: 0; transform: scale(0.4); stroke-dasharray: 30; stroke-dashoffset: 30; } .rec-flow li.is-running .rec-flow-mark { transform: scale(1.15); color: var(--rec-accent-text); background: var(--color-surface); border-color: transparent; box-shadow: 0 0 0 1px var(--color-primary-bg), 0 10px 26px rgba(99, 102, 241, 0.4); } .rec-flow li.is-running .rec-flow-mark::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; padding: 2px; background: conic-gradient(from 0deg, transparent 0 55%, var(--color-primary) 85%, var(--color-primary-light) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: capSpin 1.1s linear infinite; } .rec-flow li.is-running .rec-flow-mark::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--color-primary); animation: recHalo 1.6s ease-out infinite; } .rec-flow li.is-running .rec-flow-ic { animation: recBob 1.2s ease-in-out infinite; } @keyframes recHalo { from { transform: scale(1); opacity: 0.7; } to { transform: scale(2.1); opacity: 0; } } .rec-flow li.is-done .rec-flow-mark { color: #fff; background: var(--color-emerald); border-color: var(--color-emerald); box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35); animation: recPop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); } .rec-flow li.is-done .rec-flow-ic { opacity: 0; transform: scale(0.4); } .rec-flow li.is-done .rec-flow-ok { opacity: 1; transform: scale(1); animation: recDraw 0.45s 0.1s ease-out both; } @keyframes recDraw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } } @keyframes recPop { 0% { transform: scale(0.85); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } } .rec-flow li.is-error .rec-flow-mark { color: #fff; background: var(--color-red); border-color: var(--color-red); animation: recShake 0.4s ease-in-out; } @keyframes recShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .rec-flow-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; width: 100%; } .rec-flow-body strong { font-size: 0.76rem; font-weight: 600; } .rec-flow-body small { font-size: 0.66rem; line-height: 1.4; color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rec-flow-body small.is-fresh { animation: recFresh 0.5s ease-out; } .rec-flow li.is-running .rec-flow-body strong { color: var(--rec-accent-text); } .rec-flow li.is-error .rec-flow-body strong { color: var(--color-red-text); } .rec-flow-time { font-style: normal; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6rem; color: var(--color-text-faint); min-height: 0.9em; font-variant-numeric: tabular-nums; } .rec-flow li.is-done .rec-flow-time { color: var(--color-emerald-text); } .rec-th-log { display: flex; flex-direction: column; min-height: 0; max-height: 260px; border-radius: 16px; border: 1px solid var(--cx-line); background: var(--cx-well); overflow: hidden; } .rec-th-log-h { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--cx-line); } .rec-th-log-h strong { font-size: 0.76rem; font-weight: 600; } .rec-th-log-h span { font-size: 0.66rem; color: var(--color-text-faint); font-variant-numeric: tabular-nums; } .rec-th-log ol { list-style: none; margin: 0; padding: 0.5rem 0.6rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; } .rec-th-log li { display: grid; grid-template-columns: auto 8px minmax(0, 1fr); align-items: baseline; gap: 0.5rem; padding: 0.33rem 0.4rem; border-radius: 6px; font-size: 0.71rem; line-height: 1.4; animation: recLogIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); } @keyframes recLogIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } .rec-th-log time { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6rem; color: var(--color-text-faint); font-variant-numeric: tabular-nums; } .rec-th-log li i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-faint); align-self: center; } .rec-th-log li.is-start i { background: var(--color-primary); box-shadow: 0 0 6px var(--color-primary); } .rec-th-log li.is-done i { background: var(--color-emerald); } .rec-th-log li.is-error i { background: var(--color-red); } .rec-th-log li.is-error { background: var(--color-red-bg); color: var(--color-red-text); } .rec-th-log li.is-done { color: var(--color-text); } .rec-th-log li.is-start { color: var(--color-text-muted); } .rec-th-log li span { min-width: 0; overflow-wrap: anywhere; } /* ---- the result ---- */ .rec-th-result { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.5rem; align-items: center; margin-top: 1rem; padding: 1.2rem 1.4rem; border-radius: 16px; border: 1px solid rgba(16, 185, 129, 0.25); background: radial-gradient(80% 120% at 0% 50%, var(--color-emerald-bg), transparent 60%), var(--cx-glass-2); animation: recResultIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes recResultIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .rec-th-gauge { position: relative; width: 150px; height: 150px; margin: 0 auto; } .rec-th-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); } .rec-g-track { fill: none; stroke: var(--cx-line); stroke-width: 10; } .rec-g-fill { fill: none; stroke: var(--color-emerald); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.8, 0.2, 1); filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5)); } .rec-th-gauge-val { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .rec-th-gauge-val b { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .rec-th-gauge-val i { position: absolute; font-style: normal; font-size: 0.85rem; font-weight: 700; margin-top: -0.35rem; transform: translateX(2.45rem); color: var(--color-text-muted); } .rec-th-gauge-val small { margin-top: 0.35rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); } .rec-th-burst { position: absolute; inset: 10px; border-radius: 50%; border: 3px solid var(--color-emerald); opacity: 0; animation: recBurst 1.1s 0.2s ease-out both; } @keyframes recBurst { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } } .rec-th-result-body { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .rec-done { display: flex; align-items: flex-start; gap: 0.75rem; } .rec-done-mark { width: 24px; height: 24px; flex-shrink: 0; margin-top: 0.1rem; border-radius: 50%; background: var(--color-emerald) no-repeat center/13px 13px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); animation: recPop 0.5s 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) both; } .rec-done strong { display: block; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; } .rec-done small { display: block; font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.2rem; } .rec-th-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; max-width: 30rem; } .rec-th-kpi { padding: 0.65rem 0.8rem; border-radius: 12px; border: 1px solid var(--cx-line); border-left-width: 3px; background: var(--cx-glass-2); animation: recResultIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .rec-th-kpi:nth-child(1) { animation-delay: 0.25s; } .rec-th-kpi:nth-child(2) { animation-delay: 0.35s; } .rec-th-kpi:nth-child(3) { animation-delay: 0.45s; } .rec-th-kpi.is-ok { border-left-color: var(--color-emerald); } .rec-th-kpi.is-ex { border-left-color: var(--color-amber); } .rec-th-kpi b { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .rec-th-kpi.is-ok b { color: var(--color-emerald-text); } .rec-th-kpi.is-ex b { color: var(--color-amber-text); } .rec-th-kpi span { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-faint); } .rec-th-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .rx .btn-muted { background: var(--cx-glass); color: var(--color-text); border: 1px solid var(--cx-line); } .rx .btn-muted:hover { background: var(--cx-line); } /* ---- failure ---- */ .rec-th-fail { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 16px; border: 1px solid rgba(239, 68, 68, 0.3); background: var(--color-red-bg); animation: recResultIn 0.45s ease-out both; } .rec-th-fail-mark { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; font-weight: 800; color: #fff; background: var(--color-red); animation: recShake 0.4s 0.2s ease-in-out; } .rec-th-fail > div { flex: 1 1 14rem; min-width: 0; } .rec-th-fail strong { display: block; font-size: 0.9rem; font-weight: 700; } .rec-th-fail p { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--color-red-text); } /* ---- recent runs (themed like the rest of the page) ---- */ .rec-recent { padding: 1.1rem 1.5rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-sm); } .rec-recent-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; } .rec-recent-h strong { display: block; font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; } .rec-recent-h small { display: block; font-size: 0.74rem; color: var(--color-text-muted); margin-top: 0.1rem; } .rec-link { border: none; background: none; padding: 0.3rem 0.55rem; border-radius: 6px; font-family: inherit; font-size: 0.76rem; font-weight: 600; color: var(--rec-accent-text); cursor: pointer; transition: background 0.15s, color 0.15s; } :root[data-theme="light"] .rec-recent .rec-link { color: var(--color-primary-dark); } .rec-link:hover { background: var(--color-primary-bg); } .rec-recent-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.6rem; } .rec-recent-list li { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-bg-subtle); cursor: pointer; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; } .rec-recent-list li:hover { border-color: var(--color-primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .rec-recent-list li.is-current { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg); } .rec-recent-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .rec-recent-top strong { font-size: 0.8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .rec-recent-top time { font-size: 0.68rem; color: var(--color-text-faint); white-space: nowrap; font-variant-numeric: tabular-nums; } .rec-recent-bar { display: flex; height: 5px; border-radius: 999px; overflow: hidden; background: var(--color-border); } .rec-recent-bar i { display: block; height: 100%; } .rec-recent-bar .is-ok { background: var(--color-emerald); } .rec-recent-bar .is-ex { background: var(--color-amber); } .rec-recent-nums { display: flex; gap: 0.75rem; font-size: 0.7rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } .rec-recent-nums b { font-weight: 700; color: var(--color-text); } .rec-recent-nums .is-ok b { color: var(--color-emerald-text); } .rec-recent-nums .is-ex b { color: var(--color-amber-text); } /* ---- shared select styling for the HITL tab (lives here historically) ---- */ #hitl-run-select, .hitl-doc { width: 100%; padding: 0.65rem 2.4rem 0.65rem 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-subtle); color: var(--color-text); font-family: inherit; font-size: 0.88rem; font-weight: 500; appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } #hitl-run-select:hover, .hitl-doc:hover { border-color: var(--color-text-faint); } #hitl-run-select:focus, .hitl-doc:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface-raised); box-shadow: 0 0 0 3px var(--color-primary-bg); } /* ---- responsive ---- */ @media (max-width: 1180px) { .rx-deck { grid-template-columns: 1fr 1fr; } .rx-start { grid-column: 1 / -1; } .rx-tuning { min-width: 0; } .rx-pop { right: auto; left: 0; } .rx-run { grid-template-columns: 1fr; } .rec-th-log { max-height: 200px; } } @media (max-width: 900px) { .rx { padding: 1.2rem 1.1rem; border-radius: 16px; } .rx-head { flex-direction: column; } .rx-status { flex-direction: row; align-items: center; } .rx-title { font-size: 1.3rem; } .rx-machine { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; min-height: 0; } .rec-th-mid { height: 170px; } .rec-th-wires { display: none; } .rx-caption-core { display: none; } .rx-part-src { flex-direction: row; flex-wrap: wrap; } .rx-part-src .rx-node { flex: 1 1 10rem; } .rx-part-src .rx-caption { flex: 1 1 100%; } .rec-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; } .rec-flow li:nth-child(4)::before, .rec-flow li:nth-child(4)::after { display: none; } .rec-th-result { grid-template-columns: 1fr; justify-items: center; text-align: center; } .rec-th-kpis { max-width: none; width: 100%; } .rec-th-actions { justify-content: center; } } @media (max-width: 560px) { .rx-deck { grid-template-columns: 1fr; } } /* ---- reduced motion: keep every state change, drop the perpetual motion ---- */ @media (prefers-reduced-motion: reduce) { .rx-bg i, .rec-th-ring, .rec-th-halo, .rec-th-orbit, .rec-th-core-ic, .rx-slot .rx-ic-up, .rx-start::after, .rec-wire, .rec-wire.is-active, .rx-pill i, .rec-flow li.is-running::after, .rec-flow li.is-running .rec-flow-mark::before, .rec-flow li.is-running .rec-flow-mark::after, .rec-flow li.is-running .rec-flow-ic, .rx-node.is-active .rec-th-lines i { animation: none !important; } .rec-wire-dot { display: none; } .rec-flow li.is-running .rec-flow-mark { box-shadow: 0 0 0 3px var(--color-primary-bg); border-color: var(--color-primary); } } /* ====================================================================== CAPIUM · console pages Every Capium tab is one dark instrument panel, like Agent Studio. The tokens are re-scoped here so the components those tabs already render (cards, tiles, tables, review cards, the wizard) pick up the palette, then the surfaces are tuned to the same glass look as the studio. ====================================================================== */ .capium-console, .rec-recent { color-scheme: dark; --color-surface: #11141b; --color-surface-raised: #1a1e28; --color-bg-subtle: #161a22; --color-border: #262b37; --color-text: #eceef2; --color-text-muted: #98a0b0; --color-text-faint: #5f6675; --color-primary-bg: rgba(99, 102, 241, 0.16); --color-emerald-bg: rgba(16, 185, 129, 0.16); --color-emerald-text: #6ee7b7; --color-amber-bg: rgba(245, 158, 11, 0.16); --color-amber-border: rgba(245, 158, 11, 0.4); --color-amber-text: #fbbf24; --color-red-bg: rgba(239, 68, 68, 0.16); --color-red-text: #f87171; --color-blue-bg: rgba(59, 130, 246, 0.16); --color-blue-text: #93c5fd; --rec-accent-text: #a5b4fc; --shadow-sm: none; --shadow-md: 0 16px 40px var(--cx-shadow-deep); color: var(--color-text); } .tab-panel.capium-console { position: relative; overflow: visible; padding: 3.4rem 1.7rem 1.6rem; border-radius: 20px; background: var(--cx-frame-bg); box-shadow: var(--cx-frame-shadow); } /* the kicker line, and the dot grid, both without extra markup */ .tab-panel.capium-console::before { content: attr(data-kicker); position: absolute; inset: 0; padding: 1.5rem 1.7rem; pointer-events: none; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cx-kicker, var(--rec-accent-text)); background-image: radial-gradient(var(--cx-dot) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 100%); mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 100%); z-index: 0; } .tab-panel.capium-console::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(520px 420px at 8% 0%, rgba(99, 102, 241, 0.22), transparent 70%), radial-gradient(420px 360px at 96% 100%, rgba(45, 212, 191, 0.1), transparent 70%); pointer-events: none; animation: rxGlowShift 18s ease-in-out infinite alternate; z-index: 0; } @keyframes rxGlowShift { from { opacity: 0.8; } to { opacity: 1; } } .tab-panel.capium-console > * { position: relative; z-index: 1; } /* whatever section currently holds an open menu or popover floats above its siblings */ .tab-panel.capium-console > *:has(.cx-menu), .rx > *:has(.cx-menu), .rx > *:has(.rx-tuning[open]) { z-index: 30; } .review-card:has(.cx-menu), .hitl-run-pick:has(.cx-menu), .rx-field:has(.cx-menu) { position: relative; z-index: 30; } /* the kicker's padding is the text position; keep the mask from hiding it */ .tab-panel.capium-console::before { -webkit-mask-image: none; mask-image: none; } /* ---- shared surfaces ---- */ .capium-console .card, .capium-console .rec-card, .capium-console .tile-card, .capium-console .rec-kpi, .capium-console .review-card, .capium-console .draft-agent-card, .capium-console .aw-card, .capium-console .dash-table-card { background: linear-gradient(180deg, var(--cx-glass), var(--cx-glass-2)); border-color: var(--cx-line); border-radius: 16px; box-shadow: inset 0 1px 0 var(--cx-hi); } .capium-console .card { margin-bottom: 1rem; } .capium-console .draft-agent-card { border-style: solid; } .capium-console .aw-card { max-width: none; box-shadow: inset 0 1px 0 var(--cx-hi), 0 16px 40px var(--cx-shadow-deep); } .capium-console .dash-section-header { margin: 1.6rem 0 0.8rem; } .capium-console .dash-section-header:first-child { margin-top: 0; } .capium-console .dash-section-header h2, .capium-console .card-title h2, .capium-console .rec-card-h h2, .capium-console .hitl-head h2 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; } .capium-console .card-desc { color: var(--color-text-muted); } /* headline numbers */ .capium-console .tile-card { padding: 1.05rem 1.15rem; } .capium-console .tile-card-value, .capium-console .rec-kpi-value { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em; background: var(--cx-title-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .capium-console .tile-card-label, .capium-console .rec-kpi-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; color: var(--color-text-faint); } .capium-console .rec-kpi.is-good .rec-kpi-value { background: linear-gradient(90deg, var(--color-emerald-text), var(--color-emerald)); -webkit-background-clip: text; background-clip: text; } .capium-console .rec-kpi.is-warn .rec-kpi-value { background: linear-gradient(90deg, var(--color-amber-text), var(--color-amber)); -webkit-background-clip: text; background-clip: text; } /* tables */ .capium-console .history-table th { font-size: 0.64rem; letter-spacing: 0.1em; color: var(--color-text-faint); border-bottom: 1px solid var(--cx-line); } .capium-console .history-table td { border-bottom-color: var(--cx-glass); } .capium-console .history-table tr:hover td { background: var(--cx-glass-2); } .capium-console .dash-bar-track { background: var(--cx-line); } /* segmented tabs (HITL) */ .capium-console .status-tabs { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.3rem; margin-bottom: 1rem; border: 1px solid var(--cx-line); border-bottom: 1px solid var(--cx-line); border-radius: 12px; background: var(--cx-glass); } .capium-console .status-tab-btn { margin: 0; padding: 0.5rem 0.9rem; border: none; border-radius: 9px; font-size: 0.82rem; transition: background 0.15s, color 0.15s, box-shadow 0.15s; } .capium-console .status-tab-btn.active { color: #fff; background: linear-gradient(135deg, var(--color-primary), #7c3aed); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35); } .capium-console .status-tab-btn.active .count-pill { background: rgba(255, 255, 255, 0.22); color: #fff; } .capium-console .count-pill { background: var(--cx-line); } /* buttons and fields */ .capium-console .btn-primary, .rx .btn-primary { background: linear-gradient(135deg, var(--color-primary), #7c3aed); box-shadow: 0 10px 24px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .capium-console .btn-muted { background: var(--cx-glass); color: var(--color-text); border: 1px solid var(--cx-line); } .capium-console .btn-muted:hover:not(:disabled) { background: var(--cx-line); } .capium-console .save-btn { background: var(--cx-glass); border: 1px solid var(--cx-line); } .capium-console .save-btn:hover:not(:disabled) { background: var(--cx-line); } .capium-console .field-row input, .capium-console .lbl-field input, .capium-console .lbl-field textarea, .capium-console input[type="text"], .capium-console input[type="email"], .capium-console input[type="password"], .capium-console input[type="number"] { background: var(--cx-glass); border-color: var(--cx-line); color: var(--color-text); } .capium-console .field-row input:focus, .capium-console .lbl-field input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg); outline: none; } .capium-console .field-row.is-locked input { background: var(--cx-glass-2); color: var(--color-text-muted); } .capium-console .settings-row { border-bottom-color: var(--cx-line); } .capium-console .switch-track { background: var(--cx-line-strong); } .capium-console .studio-empty { padding: 1.1rem 0 0.2rem; color: var(--color-text-muted); } .capium-console .hint { color: var(--color-text-muted); } .capium-console .card-icon { background: var(--cx-glass); color: var(--rec-accent-text); } /* HITL layout polish */ .capium-console .hitl-head { align-items: flex-end; } .capium-console .hitl-run-pick > span { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); } .capium-console .hitl-side h4 { color: var(--color-text-faint); } .capium-console .hitl-evidence summary { color: var(--rec-accent-text); } .capium-console .rec-empty { color: var(--color-text-faint); } /* recent runs, now in the same palette */ .rec-recent { border: 1px solid var(--cx-line); background: var(--cx-frame-bg); box-shadow: var(--cx-frame-shadow); border-radius: 20px; } .rec-recent-list li { background: var(--cx-glass-2); border-color: var(--cx-line); } .rec-recent-bar { background: var(--cx-line); } /* ====================================================================== SAGE · console pages Same instrument-panel system as Capium, with Sage's green as the accent, plus the surfaces Sage's own components need (agent cards, export card, review groups, the sheet, pills and filters). ====================================================================== */ .capium-console.sage-console { --cx-kicker: #6ee7b7; --cx-accent-a: #10b981; --cx-accent-b: #0d9488; --cx-frame-bg: radial-gradient(1200px 500px at 15% -10%, rgba(16, 185, 129, 0.18), transparent 60%), radial-gradient(900px 500px at 100% 110%, rgba(99, 102, 241, 0.12), transparent 60%), linear-gradient(180deg, #0f1218 0%, #0b0e14 100%); } :root[data-theme="light"] .capium-console.sage-console { --cx-kicker: #047857; --cx-frame-bg: radial-gradient(1200px 500px at 15% -10%, rgba(16, 185, 129, 0.13), transparent 60%), radial-gradient(900px 500px at 100% 110%, rgba(99, 102, 241, 0.08), transparent 60%), linear-gradient(180deg, #ffffff 0%, #f2f7f5 100%); } .tab-panel.capium-console.sage-console::after { background: radial-gradient(520px 420px at 8% 0%, rgba(16, 185, 129, 0.2), transparent 70%), radial-gradient(420px 360px at 96% 100%, rgba(99, 102, 241, 0.1), transparent 70%); } /* surfaces */ .sage-console .agent-card, .sage-console .export-card, .sage-console .upload-card, .sage-console .review-group, .sage-console .history-type-group > .card { background: linear-gradient(180deg, var(--cx-glass), var(--cx-glass-2)); border-color: var(--cx-line); border-radius: 16px; box-shadow: inset 0 1px 0 var(--cx-hi); } .sage-console .agent-card { transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; } .sage-console .agent-card:hover { transform: translateY(-2px); border-color: var(--cx-accent-a); box-shadow: inset 0 1px 0 var(--cx-hi), 0 14px 30px var(--cx-shadow-deep); } .sage-console .agent-stat-value { font-weight: 800; letter-spacing: -0.02em; } .sage-console .agent-stat-label { font-size: 0.6rem; letter-spacing: 0.1em; color: var(--color-text-faint); } /* the header chips already carry these three numbers */ .sage-console #dash-kpis { display: none; } /* primary actions in Sage green */ .sage-console .btn-primary, .sage-console .btn-emerald, .sage-console .btn-teal { background: linear-gradient(135deg, var(--cx-accent-a), var(--cx-accent-b)); box-shadow: 0 10px 24px rgba(16, 185, 129, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .sage-console .btn-primary:hover:not(:disabled), .sage-console .btn-emerald:hover:not(:disabled), .sage-console .btn-teal:hover:not(:disabled) { filter: brightness(1.06); } .sage-console .status-tab-btn.active { background: linear-gradient(135deg, var(--cx-accent-a), var(--cx-accent-b)); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); } /* New Starters | Timesheets switch */ .sage-console .review-tabs, .sage-console .history-type-tabs { display: inline-flex; gap: 0.3rem; padding: 0.3rem; margin-bottom: 1.1rem; border-radius: 14px; border: 1px solid var(--cx-line); background: var(--cx-glass); } .sage-console .review-tab-btn, .sage-console .history-type-btn { border: none; border-radius: 10px; background: transparent; color: var(--color-text-muted); box-shadow: none; } .sage-console .review-tab-btn:hover, .sage-console .history-type-btn:hover { color: var(--color-text); border-color: transparent; } .sage-console .review-tab-btn.active, .sage-console .history-type-btn.active { color: #fff; background: linear-gradient(135deg, var(--cx-accent-a), var(--cx-accent-b)); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); } /* history filter chips */ .sage-console .filter-btn { border: 1px solid var(--cx-line); background: var(--cx-glass); color: var(--color-text-muted); border-radius: 999px; } .sage-console .filter-btn:hover { color: var(--color-text); border-color: var(--cx-line-strong); } .sage-console .filter-btn.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--cx-accent-a), var(--cx-accent-b)); } /* fields, dates, the sheet */ .capium-console input[type="date"], .capium-console .cell-input { background: var(--cx-glass); border: 1px solid var(--cx-line); color: var(--color-text); border-radius: 10px; } .capium-console input[type="date"]:focus, .capium-console .cell-input:focus { outline: none; border-color: var(--cx-accent-a, var(--color-primary)); box-shadow: 0 0 0 3px var(--color-emerald-bg); } .sage-console .field-row input:focus, .sage-console .lbl-field input:focus, .sage-console .lbl-field textarea:focus { border-color: var(--cx-accent-a); box-shadow: 0 0 0 3px var(--color-emerald-bg); } .sage-console .sheet-scroll { border-radius: 14px; border: 1px solid var(--cx-line); background: var(--cx-glass-2); } .sage-console .sheet-table th { font-size: 0.62rem; letter-spacing: 0.1em; color: var(--color-text-faint); border-bottom: 1px solid var(--cx-line); } .sage-console .sheet-table td { border-bottom-color: var(--cx-line); } .sage-console .sheet-toolbar { padding: 0.2rem 0 0.8rem; } /* HITL: the fields the agent flagged are the ones that should catch the eye */ .sage-console .field-row.field-missing .field-label { color: var(--color-amber-text); font-weight: 700; } .sage-console .field-row.field-missing .field-label::after { content: " · check"; font-weight: 600; opacity: 0.8; } .sage-console .field-row.field-missing input { border-color: var(--color-amber); background: var(--color-amber-bg); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12); } .sage-console .review-card { transition: border-color 0.2s, box-shadow 0.2s; } .sage-console .review-card:focus-within { box-shadow: inset 0 1px 0 var(--cx-hi), 0 0 0 1px var(--cx-line-strong); } /* history group rows */ .sage-console .history-table .group-title { font-weight: 700; letter-spacing: -0.01em; } .sage-console .history-table .group-count { background: var(--cx-glass); border: 1px solid var(--cx-line); color: var(--color-text-muted); } .sage-console .history-table .group-totals { color: var(--color-text-muted); } /* settings: the tag-label table's controls */ .sage-console .tag-label-actions button, .sage-console .tag-label-delete-btn, .sage-console .tag-label-cancel-btn { padding: 0.35rem 0.75rem; border-radius: 8px; border: 1px solid var(--cx-line); background: var(--cx-glass); color: var(--color-text); font-family: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .sage-console .tag-label-actions button:hover { border-color: var(--cx-accent-a); background: var(--color-emerald-bg); } .sage-console .tag-label-actions .tag-label-delete-btn:hover { border-color: var(--color-red); background: var(--color-red-bg); color: var(--color-red-text); } .sage-console .tag-label-actions .btn-primary { border: none; color: #fff; } .sage-console .switch input:checked + .switch-track { background: var(--cx-accent-a); } /* inside a table cell the switch is an inline label, so its size was ignored */ .capium-console td .switch { display: inline-block; vertical-align: middle; } /* progress while an upload streams */ .capium-console .progress-bar { background: var(--cx-line); border-radius: 999px; overflow: hidden; } .sage-console .progress-fill { background: linear-gradient(90deg, var(--cx-accent-a), var(--cx-accent-b)); } /* dashboard chart in the accent */ .sage-console .activity-chart { height: 170px; } .sage-console .activity-bar { max-width: 34px; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, var(--cx-accent-a), var(--cx-accent-b)); box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25); } .sage-console .activity-bar-col:hover .activity-bar { filter: brightness(1.15); } .sage-console .activity-bar-count { color: var(--color-text); } /* Agent Studio sits straight on the console */ .capium-console .studio-v2 { --paper: transparent; } .studio-v2 .chip.is-live { color: var(--ledger); background: var(--ledger-soft); border-color: transparent; } /* ====================================================================== SAGE · INTAKE DESK A paper-and-desk language on purpose, unlike Capium's machine: a tray to drop into, paper slips for what's chosen, a lane board the files travel across, rubber stamps for outcomes, and a printed receipt at the end. ====================================================================== */ .dk { display: flex; flex-direction: column; gap: 1.1rem; } /* under the desk: the pipeline it feeds */ .dk-divider { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 1.8rem 0 1rem; padding-top: 1.4rem; border-top: 1px dashed var(--cx-line-strong); } .dk-divider strong { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; } .dk-divider span { font-size: 0.8rem; color: var(--color-text-muted); } .dk .upload-group { display: none; } .dk .upload-group.active { display: block; animation: dkRise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); } .dk .upload-queue, .dk .progress-bar { display: none !important; } @keyframes dkRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---- the two bays ---- */ .dk-bays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } .dk-bay { position: relative; display: flex; align-items: center; gap: 0.95rem; padding: 1rem 1.15rem; border-radius: 18px; border: 1px solid var(--cx-line); background: linear-gradient(180deg, var(--cx-glass), var(--cx-glass-2)); color: var(--color-text); font-family: inherit; text-align: left; cursor: pointer; overflow: hidden; transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s, background 0.18s; } .dk-bay:hover { transform: translateY(-2px); border-color: var(--cx-line-strong); } .dk-bay.active { border-color: var(--cx-accent-a); box-shadow: 0 0 0 3px var(--color-emerald-bg), 0 14px 30px var(--cx-shadow-deep); } .dk-bay-ic { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px; color: var(--color-text-muted); background: var(--cx-glass); border: 1px solid var(--cx-line); transition: background 0.2s, color 0.2s, transform 0.2s; } .dk-bay-ic svg { width: 22px; height: 22px; } .dk-bay.active .dk-bay-ic { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--cx-accent-a), var(--cx-accent-b)); transform: rotate(-4deg); } .dk-bay-txt { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 auto; } .dk-bay-txt strong { font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; } .dk-bay-txt small { font-size: 0.76rem; line-height: 1.45; color: var(--color-text-muted); } .dk-bay-tick { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; color: #fff; background: var(--cx-accent-a); transform: scale(0); transition: transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); } .dk-bay-tick svg { width: 12px; height: 12px; } .dk-bay.active .dk-bay-tick { transform: scale(1); } /* ---- the tray ---- */ .dk-stage { display: flex; flex-direction: column; gap: 0.9rem; } .dk-tray { position: relative; display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 1.8rem; min-height: 240px; margin: 0; padding: 1.8rem 2.2rem; border: none; border-radius: 20px; text-align: left; cursor: pointer; background: radial-gradient(80% 120% at 0% 50%, var(--color-emerald-bg), transparent 65%), var(--cx-glass-2); transition: background 0.2s, transform 0.2s; } .dk-tray:hover { background: radial-gradient(80% 120% at 0% 50%, var(--color-emerald-bg), transparent 75%), var(--cx-glass); } .dk-tray .dropzone-clear { display: none; } .dk-tray-border { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .dk-tray-border rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); fill: none; stroke: var(--cx-line-strong); stroke-width: 2; stroke-dasharray: 10 9; transition: stroke 0.2s; } .dk-tray:hover .dk-tray-border rect, .dk-tray.is-dragover .dk-tray-border rect { stroke: var(--cx-accent-a); animation: dkMarch 0.7s linear infinite; } .dk-tray.has-files .dk-tray-border rect { stroke: var(--cx-accent-a); stroke-dasharray: none; } @keyframes dkMarch { to { stroke-dashoffset: -19; } } .dk-tray.is-dragover { transform: scale(1.008); } /* a small stack of paper, fanned, with a scanner beam */ .dk-tray-art { position: relative; width: 170px; height: 170px; margin: 0 auto; } .dk-tray-art i { position: absolute; left: 32px; top: 18px; width: 106px; height: 136px; border-radius: 10px; border: 1px solid var(--cx-line-strong); background: linear-gradient(var(--cx-line) 0 0) 16px 26px / 60% 5px no-repeat, linear-gradient(var(--cx-line) 0 0) 16px 44px / 72% 5px no-repeat, linear-gradient(var(--cx-line) 0 0) 16px 62px / 48% 5px no-repeat, linear-gradient(var(--cx-line) 0 0) 16px 80px / 66% 5px no-repeat, linear-gradient(var(--cx-line) 0 0) 16px 98px / 38% 5px no-repeat, var(--color-surface); box-shadow: 0 10px 22px var(--cx-shadow-deep); transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1); } .dk-tray-art.is-sheet i { background: linear-gradient(var(--cx-line) 0 0) 0 30px / 100% 1px no-repeat, linear-gradient(var(--cx-line) 0 0) 0 56px / 100% 1px no-repeat, linear-gradient(var(--cx-line) 0 0) 0 82px / 100% 1px no-repeat, linear-gradient(var(--cx-line) 0 0) 0 108px / 100% 1px no-repeat, linear-gradient(90deg, transparent 33%, var(--cx-line) 33% calc(33% + 1px), transparent calc(33% + 1px) 66%, var(--cx-line) 66% calc(66% + 1px), transparent calc(66% + 1px)), linear-gradient(var(--color-emerald-bg) 0 0) 0 0 / 100% 30px no-repeat, var(--color-surface); } .dk-tray-art i:nth-child(1) { transform: rotate(-9deg) translate(-12px, 6px); } .dk-tray-art i:nth-child(2) { transform: rotate(6deg) translate(12px, 4px); } .dk-tray-art i:nth-child(3) { transform: rotate(-1deg); } .dk-tray:hover .dk-tray-art i:nth-child(1), .dk-tray.is-dragover .dk-tray-art i:nth-child(1) { transform: rotate(-15deg) translate(-26px, 2px); } .dk-tray:hover .dk-tray-art i:nth-child(2), .dk-tray.is-dragover .dk-tray-art i:nth-child(2) { transform: rotate(12deg) translate(26px, 0); } .dk-tray:hover .dk-tray-art i:nth-child(3), .dk-tray.is-dragover .dk-tray-art i:nth-child(3) { transform: translateY(-8px); } .dk-beam { position: absolute; left: 22px; right: 22px; top: 18px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--cx-accent-a), transparent); box-shadow: 0 0 14px 2px rgba(16, 185, 129, 0.55); opacity: 0; } .dk-tray:hover .dk-beam, .dk-tray.is-dragover .dk-beam { opacity: 1; animation: dkScan 1.6s ease-in-out infinite; } @keyframes dkScan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(134px); } } .dk-tray-copy { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; } .dk-tray-copy strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; overflow-wrap: anywhere; } .dk-tray.has-files .dk-tray-copy strong { color: var(--color-emerald-text); } .dk-tray-copy .dropzone-hint { font-size: 0.84rem; color: var(--color-text-muted); } .dk-types { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; } .dk-types em { font-style: normal; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.68rem; padding: 0.18rem 0.5rem; border-radius: 6px; color: var(--color-text-muted); background: var(--cx-glass); border: 1px solid var(--cx-line); } /* ---- paper slips for the chosen files ---- */ .dk-slips { list-style: none; margin: 0; padding: 4px 0.3rem 6px 2px; display: flex; flex-wrap: wrap; gap: 0.55rem; max-height: 138px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cx-line-strong) transparent; } .dk-slips::-webkit-scrollbar { width: 6px; } .dk-slips::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--cx-line-strong); } .dk-slip { position: relative; display: flex; align-items: center; gap: 0.6rem; max-width: 100%; padding: 0.5rem 0.55rem 0.5rem 0.6rem; border-radius: 10px 10px 10px 3px; border: 1px solid var(--cx-line); background: var(--color-surface); box-shadow: 0 6px 14px var(--cx-shadow-deep); animation: dkSlipIn 0.4s cubic-bezier(0.2, 1.2, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 45ms); } .dk-slip:nth-child(odd) { transform: rotate(-0.6deg); } .dk-slip:nth-child(even) { transform: rotate(0.5deg); } @keyframes dkSlipIn { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } } .dk-slip-ext { display: flex; align-items: center; justify-content: center; min-width: 34px; height: 26px; padding: 0 0.35rem; border-radius: 6px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; color: #fff; background: var(--cx-accent-a); } .dk-slip-ext.is-zip { background: var(--color-amber); } .dk-slip-ext.is-img { background: var(--color-primary); } .dk-slip-ext.is-xls { background: var(--cx-accent-b); } .dk-slip-txt { display: flex; flex-direction: column; min-width: 0; } .dk-slip-txt strong { font-size: 0.8rem; font-weight: 600; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-slip-txt small { font-size: 0.66rem; color: var(--color-text-faint); font-variant-numeric: tabular-nums; } .dk-slip-x { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border: none; border-radius: 6px; background: transparent; color: var(--color-text-faint); cursor: pointer; } .dk-slip-x svg { width: 11px; height: 11px; } .dk-slip-x:hover { color: var(--color-red-text); background: var(--color-red-bg); } /* ---- tip + go ---- */ .dk-go { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; } .dk-tip { margin: 0; flex: 1 1 22rem; font-size: 0.8rem; line-height: 1.55; color: var(--color-text-muted); } .dk-tip b { color: var(--color-text); font-weight: 700; } .dk .dk-start { width: auto; min-width: 13rem; padding: 0.85rem 1.6rem; border-radius: 14px; font-size: 0.95rem; font-weight: 700; transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s, filter 0.2s; } .dk .dk-start.is-empty { opacity: 0.4; filter: saturate(0.4); box-shadow: none; pointer-events: none; } .dk .dk-start:not(.is-empty):not(:disabled):hover { transform: translateY(-1px); } .dk .status-text { margin: 0; min-height: 0; } .dk .status-text:empty { display: none; } .dk .status-text.error { color: var(--color-red-text); } .dk-group.is-running .dk-stage { display: none; } /* ---- the board ---- */ .dk-board { display: flex; flex-direction: column; gap: 0.85rem; animation: dkRise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); } .dk-board-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .dk-board-h strong { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; } .dk-board-h small { display: block; margin-top: 0.15rem; font-size: 0.78rem; color: var(--color-text-muted); } .dk-meter { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .dk-meter span, .dk-meter time { padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.72rem; color: var(--color-text-muted); background: var(--cx-glass); border: 1px solid var(--cx-line); font-variant-numeric: tabular-nums; } .dk-meter b { font-weight: 800; color: var(--color-text); margin-right: 0.15rem; } .dk-meter .is-ok b { color: var(--color-emerald-text); } .dk-meter .is-warn b { color: var(--color-amber-text); } .dk-meter .is-bad b { color: var(--color-red-text); } .dk-meter time { font-family: "JetBrains Mono", ui-monospace, monospace; color: var(--color-text); } .dk-rail { height: 6px; border-radius: 999px; background: var(--cx-line); overflow: hidden; } .dk-rail i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cx-accent-a), var(--cx-accent-b)); transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .dk-lanes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.65rem; align-items: start; } .dk-lane { min-height: 200px; padding: 0.7rem; border-radius: 16px; border: 1px dashed var(--cx-line-strong); background: var(--cx-glass-2); transition: border-color 0.25s, background 0.25s, box-shadow 0.25s; } .dk-lane h4 { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin: 0 0 0.6rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); } .dk-lane h4 b { min-width: 18px; padding: 0.08rem 0.35rem; border-radius: 999px; font-size: 0.62rem; text-align: center; color: var(--color-text-muted); background: var(--cx-glass); } .dk-lane h4 b:empty { display: none; } .dk-lane.is-hot { border-style: solid; border-color: var(--cx-accent-a); background: var(--color-emerald-bg); box-shadow: 0 0 0 3px var(--color-emerald-bg); } .dk-lane.is-hot h4 { color: var(--color-emerald-text); } /* each lane scrolls on its own, so fifty files never stretch the page */ .dk-lane-body { display: flex; flex-direction: column; gap: 0.5rem; max-height: min(44vh, 400px); overflow-y: auto; overscroll-behavior: contain; margin-right: -0.35rem; padding: 2px 0.35rem 2px 2px; scrollbar-width: thin; scrollbar-color: var(--cx-line-strong) transparent; } .dk-lane-body::-webkit-scrollbar { width: 6px; } .dk-lane-body::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--cx-line-strong); } .dk-lane-body::-webkit-scrollbar-track { background: transparent; } .dk-lane-body:empty::after { content: "—"; display: block; padding: 1.2rem 0; text-align: center; font-size: 0.8rem; color: var(--color-text-faint); opacity: 0.6; } /* files waiting for a person stay in Decide, and the lane says so */ .dk-lane.has-review { border-style: solid; border-color: var(--color-amber); background: var(--color-amber-bg); } .dk-lane.has-review h4 { color: var(--color-amber-text); } .dk-lane.has-review.is-hot { border-color: var(--cx-accent-a); } .dk-card.is-review { border-color: var(--color-amber); } /* a card in flight between lanes is drawn above everything, never clipped by a lane */ .dk-ghost { position: fixed; z-index: 95; margin: 0; pointer-events: none; } .dk-card.is-flying { visibility: hidden; } /* a file, as a small sheet of paper */ .dk-card { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0.6rem; align-items: center; padding: 0.55rem 0.6rem; border-radius: 12px 12px 12px 3px; border: 1px solid var(--cx-line); background: var(--color-surface); box-shadow: 0 6px 14px var(--cx-shadow-deep); will-change: transform; } .dk-card[data-state="pending"] { opacity: 0.7; } .dk-card[data-state="working"] { border-color: var(--cx-accent-a); box-shadow: 0 0 0 2px var(--color-emerald-bg), 0 10px 22px var(--cx-shadow-deep); } .dk-card[data-state="error"] { border-color: var(--color-red); } .dk-doc { position: relative; width: 32px; height: 40px; border-radius: 5px; border: 1px solid var(--cx-line-strong); background: linear-gradient(var(--cx-line-strong) 0 0) 6px 9px / 58% 2px no-repeat, linear-gradient(var(--cx-line-strong) 0 0) 6px 16px / 70% 2px no-repeat, linear-gradient(var(--cx-line-strong) 0 0) 6px 23px / 46% 2px no-repeat, linear-gradient(var(--cx-line-strong) 0 0) 6px 30px / 62% 2px no-repeat, var(--cx-glass); overflow: hidden; } .dk-doc span { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cx-accent-a); box-shadow: 0 0 8px 1px rgba(16, 185, 129, 0.7); opacity: 0; } .dk-card[data-state="working"] .dk-doc span { opacity: 1; animation: dkScanSmall 1.1s ease-in-out infinite; } @keyframes dkScanSmall { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(38px); } } .dk-card-txt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .dk-card-txt strong { font-size: 0.76rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-card-txt small { font-size: 0.67rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dk-card[data-state="working"] .dk-card-txt small { color: var(--color-emerald-text); } .dk-card[data-state="error"] .dk-card-txt small { color: var(--color-red-text); white-space: normal; } /* the rubber stamp */ .dk-stamp { grid-column: 1 / -1; justify-self: start; margin-top: 0.15rem; padding: 0.12rem 0.5rem; border-radius: 5px; border: 1.5px solid currentColor; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; transform: rotate(-4deg); animation: dkStamp 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both; } .dk-stamp:empty { display: none; } .dk-stamp.is-auto { color: var(--color-emerald-text); } .dk-stamp.is-review { color: var(--color-amber-text); } .dk-stamp.is-fail { color: var(--color-red-text); } @keyframes dkStamp { 0% { opacity: 0; transform: rotate(-16deg) scale(2.2); } 60% { opacity: 1; transform: rotate(-2deg) scale(0.94); } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } } /* ---- the receipt ---- */ .dk-receipt { position: relative; align-self: center; width: min(100%, 27rem); margin-top: 0.6rem; padding: 1.2rem 1.4rem 1.7rem; border: 1px solid var(--cx-line); border-bottom: none; border-radius: 12px 12px 0 0; background: var(--color-surface); box-shadow: 0 18px 40px var(--cx-shadow-deep); font-family: "JetBrains Mono", ui-monospace, monospace; animation: dkPrint 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes dkPrint { from { clip-path: inset(0 0 100% 0); transform: translateY(-12px); } to { clip-path: inset(0 0 -20px 0); transform: none; } } .dk-receipt::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -9px; height: 10px; background: linear-gradient(135deg, var(--color-surface) 5px, transparent 0) 0 0 / 12px 10px repeat-x, linear-gradient(225deg, var(--color-surface) 5px, transparent 0) 0 0 / 12px 10px repeat-x; } .dk-receipt h5 { margin: 0 0 0.2rem; font-family: inherit; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; } .dk-receipt-sub { margin: 0 0 0.8rem; font-size: 0.66rem; text-align: center; color: var(--color-text-faint); } .dk-receipt dl { margin: 0; padding: 0.7rem 0; border-top: 1px dashed var(--cx-line-strong); border-bottom: 1px dashed var(--cx-line-strong); display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; font-size: 0.76rem; } .dk-receipt dt { color: var(--color-text-muted); } .dk-receipt dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .dk-receipt dd.is-ok { color: var(--color-emerald-text); } .dk-receipt dd.is-warn { color: var(--color-amber-text); } .dk-receipt dd.is-bad { color: var(--color-red-text); } .dk-receipt-actions { display: flex; gap: 0.5rem; margin-top: 0.9rem; font-family: "Inter", system-ui, sans-serif; } .dk-receipt-actions .btn { flex: 1 1 0; justify-content: center; } @media (max-width: 1100px) { .dk-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dk-lane { min-height: 0; } } @media (max-width: 760px) { .dk-bays { grid-template-columns: 1fr; } .dk-tray { grid-template-columns: 1fr; text-align: center; padding: 1.4rem 1.1rem; } .dk-types { justify-content: center; } .dk-lanes { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .dk-beam, .dk-doc span, .dk-tray-border rect { animation: none !important; } .dk-stamp, .dk-receipt, .dk-slip { animation-duration: 0.01s !important; } } /* ====================================================================== SAGE · HISTORY & DOWNLOADS — the export builder Left: the choices, as numbered steps. Right: the package those choices produce, with a live count, and the one Download button. ====================================================================== */ .hx { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; margin-bottom: 1rem; } .hx-build { display: flex; flex-direction: column; padding: 1.2rem 1.3rem 0.4rem; border-radius: 18px; border: 1px solid var(--cx-line); background: linear-gradient(180deg, var(--cx-glass), var(--cx-glass-2)); box-shadow: inset 0 1px 0 var(--cx-hi); } .hx-step { position: relative; display: flex; gap: 0.9rem; padding-bottom: 1.15rem; } .hx-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 32px; bottom: 6px; width: 2px; background: var(--cx-line); } .hx-step[hidden] { display: none; } .hx-no { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; font-size: 0.76rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--cx-accent-a), var(--cx-accent-b)); box-shadow: 0 6px 14px rgba(16, 185, 129, 0.3); } .hx-step-body { flex: 1 1 auto; min-width: 0; } .hx-step-body h3 { margin: 0.25rem 0 0.6rem; font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; } .hx-step.is-off { opacity: 0.4; pointer-events: none; } /* choices */ .hx-opts, .hx-formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.55rem; } .hx-opt, .hx-format { display: flex; gap: 0.7rem; align-items: center; padding: 0.7rem 0.85rem; border-radius: 12px; border: 1px solid var(--cx-line); background: var(--cx-glass-2); color: var(--color-text); font-family: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s; } .hx-opt { flex-direction: column; align-items: flex-start; gap: 0.15rem; } .hx-opt:hover, .hx-format:hover { border-color: var(--cx-line-strong); transform: translateY(-1px); } .hx-opt.active, .hx-format.active { border-color: var(--cx-accent-a); background: var(--color-emerald-bg); box-shadow: 0 0 0 3px var(--color-emerald-bg); } .hx-opt strong, .hx-format strong { display: block; font-size: 0.84rem; font-weight: 700; } .hx-opt small, .hx-format small { display: block; font-size: 0.72rem; line-height: 1.4; color: var(--color-text-muted); } .hx-opt small b { color: var(--color-text); font-variant-numeric: tabular-nums; } .hx-format-ext { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 34px; padding: 0 0.4rem; border-radius: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; color: var(--color-text-muted); background: var(--cx-glass); border: 1px solid var(--cx-line); transition: background 0.15s, color 0.15s, border-color 0.15s; } .hx-format.active .hx-format-ext { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--cx-accent-a), var(--cx-accent-b)); } .hx-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .hx-chip { padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--cx-line); background: var(--cx-glass-2); color: var(--color-text-muted); font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; } .hx-chip:hover { color: var(--color-text); border-color: var(--cx-line-strong); } .hx-chip.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--cx-accent-a), var(--cx-accent-b)); } .hx-chip small { margin-left: 0.35rem; font-size: 0.68rem; opacity: 0.75; font-variant-numeric: tabular-nums; } .hx-dates { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.7rem; animation: dkRise 0.25s ease-out; } .hx-dates[hidden] { display: none; } .hx-dates .lbl-field { min-width: 11rem; } /* the package */ .hx-pack { position: sticky; top: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 1.3rem 1.2rem 1.2rem; border-radius: 18px; border: 1px solid var(--cx-line); background: radial-gradient(120% 70% at 50% 0%, var(--color-emerald-bg), transparent 70%), linear-gradient(180deg, var(--cx-glass), var(--cx-glass-2)); box-shadow: inset 0 1px 0 var(--cx-hi); text-align: center; } .hx-pack-art { position: relative; width: 74px; height: 66px; } .hx-pack-art i { position: absolute; left: 6px; right: 6px; bottom: 0; height: 26px; border-radius: 4px 4px 12px 12px; border: 2px solid var(--cx-accent-a); border-top: none; } .hx-pack-art i::before, .hx-pack-art i::after { content: ""; position: absolute; top: 0; width: 12px; height: 2px; background: var(--cx-accent-a); } .hx-pack-art i::before { left: -2px; } .hx-pack-art i::after { right: -2px; } .hx-pack-art span { position: absolute; left: 50%; top: 0; width: 34px; height: 34px; margin-left: -17px; color: var(--cx-accent-a); animation: hxBob 2.2s ease-in-out infinite; } .hx-pack-art span svg { width: 34px; height: 34px; } .hx-pack-art span svg path:last-child { display: none; } @keyframes hxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } .hx-pack.is-dropping .hx-pack-art span { animation: hxDrop 0.9s cubic-bezier(0.3, 0, 0.2, 1); } @keyframes hxDrop { 0% { transform: translateY(-6px); opacity: 1; } 55% { transform: translateY(30px); opacity: 1; } 70% { transform: translateY(30px); opacity: 0; } 71% { transform: translateY(-14px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .hx-pack-count { display: flex; align-items: baseline; gap: 0.4rem; } .hx-pack-count b { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; background: var(--cx-title-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hx-pack-count span { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); } .hx-pack-count b.is-bump { animation: hxBump 0.3s ease-out; } @keyframes hxBump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } } .hx-pack-facts { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 0.3rem; } .hx-pack-facts li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.35rem 0.6rem; border-radius: 8px; background: var(--cx-glass-2); font-size: 0.74rem; color: var(--color-text-muted); } .hx-pack-facts li b { color: var(--color-text); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hx-pack-file { max-width: 100%; padding: 0.3rem 0.6rem; border-radius: 7px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.68rem; color: var(--color-text-muted); background: var(--cx-glass); border: 1px dashed var(--cx-line-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hx-download { width: 100%; justify-content: center; gap: 0.5rem; padding: 0.85rem 1rem; border-radius: 14px; font-size: 0.95rem; font-weight: 700; } .hx-download svg { width: 17px; height: 17px; } .hx-download:disabled { opacity: 0.4; filter: saturate(0.4); box-shadow: none; cursor: default; } .hx-pack-note { margin: 0; font-size: 0.68rem; line-height: 1.5; color: var(--color-text-faint); } /* the batch list */ .hx-list-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .hx-list-h h2 { margin: 0 0 0.2rem; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.015em; } .hx-list-h .card-desc { max-width: 62ch; } .hx-search { display: flex; align-items: center; gap: 0.5rem; min-width: 17rem; padding: 0.5rem 0.75rem; border-radius: 11px; border: 1px solid var(--cx-line); background: var(--cx-glass); color: var(--color-text-muted); transition: border-color 0.15s, box-shadow 0.15s; } .hx-search:focus-within { border-color: var(--cx-accent-a); box-shadow: 0 0 0 3px var(--color-emerald-bg); } .hx-search svg { width: 15px; height: 15px; flex-shrink: 0; } .capium-console .hx-search input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; color: var(--color-text); font-family: inherit; font-size: 0.84rem; padding: 0; box-shadow: none; } .hx-search input:focus { outline: none; } .group-header-inner { display: flex; align-items: center; } .group-header-inner .group-toggle { flex: 1 1 auto; min-width: 0; } .group-quick { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; margin-left: 0.5rem; border-radius: 9px; border: 1px solid var(--cx-line, var(--color-border)); background: var(--cx-glass, var(--color-bg-subtle)); color: var(--color-text-muted); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s; } .group-quick svg { width: 15px; height: 15px; } .group-quick:hover:not(:disabled) { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--cx-accent-a, #10b981), var(--cx-accent-b, #0d9488)); transform: translateY(-1px); } .group-quick:disabled { opacity: 0.3; cursor: default; } /* ---- History list: tools row, document ticking, and the ticked-items bar ---- */ .hx-tools { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .hx-tools .history-filters { margin: 0; } .hx-daterange { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; padding: 0.35rem 0.5rem 0.35rem 0.7rem; border-radius: 13px; border: 1px solid var(--cx-line); background: var(--cx-glass); transition: border-color 0.15s, box-shadow 0.15s; } .hx-daterange:focus-within, .hx-daterange.is-set { border-color: var(--cx-accent-a); box-shadow: 0 0 0 3px var(--color-emerald-bg); } .hx-daterange-ic { display: flex; color: var(--color-text-muted); } .hx-daterange-ic svg { width: 16px; height: 16px; } .hx-daterange.is-set .hx-daterange-ic { color: var(--cx-accent-a); } .hx-daterange label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; font-weight: 600; color: var(--color-text-faint); white-space: nowrap; } .hx-daterange i { font-style: normal; color: var(--color-text-faint); } .capium-console .hx-daterange input[type="date"] { padding: 0.3rem 0.45rem; border-radius: 8px; border: 1px solid transparent; background: var(--cx-glass-2); font-family: inherit; font-size: 0.8rem; font-weight: 600; box-shadow: none; } .capium-console .hx-daterange input[type="date"]:focus { border-color: var(--cx-accent-a); box-shadow: none; } .hx-daterange-quick { display: flex; gap: 0.25rem; padding-left: 0.5rem; margin-left: 0.15rem; border-left: 1px solid var(--cx-line); } .hx-daterange-quick button { padding: 0.3rem 0.6rem; border: none; border-radius: 8px; background: transparent; color: var(--color-text-muted); font-family: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; } .hx-daterange-quick button:hover { background: var(--cx-glass-2); color: var(--color-text); } .hx-daterange-quick button.active { color: #fff; background: linear-gradient(135deg, var(--cx-accent-a), var(--cx-accent-b)); } .hx-daterange-quick .is-clear { color: var(--color-red-text); } /* ticking a document */ .capium-console .history-table input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; flex-shrink: 0; border-radius: 7px; border: 1.5px solid var(--cx-line-strong); background: var(--cx-glass) center / 0 no-repeat; cursor: pointer; vertical-align: middle; transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s, transform 0.12s; } .capium-console .history-table input[type="checkbox"]:hover { border-color: var(--cx-accent-a); box-shadow: 0 0 0 3px var(--color-emerald-bg); } .capium-console .history-table input[type="checkbox"]:active { transform: scale(0.9); } .capium-console .history-table input[type="checkbox"]:checked { border-color: transparent; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat, linear-gradient(135deg, var(--cx-accent-a), var(--cx-accent-b)); box-shadow: 0 6px 14px rgba(16, 185, 129, 0.3); animation: hxTick 0.28s cubic-bezier(0.2, 1.5, 0.4, 1); } .capium-console .history-table input[type="checkbox"]:indeterminate { border-color: transparent; background: linear-gradient(#fff 0 0) center / 10px 2.5px no-repeat, linear-gradient(135deg, var(--cx-accent-a), var(--cx-accent-b)); } @keyframes hxTick { 0% { transform: scale(0.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } .capium-console .group-select-checkbox { margin-right: 0.35rem; } .capium-console .group-header-row td { transition: background 0.18s, box-shadow 0.18s; } .capium-console .group-header-row:hover td { background: var(--cx-glass-2); } .capium-console .group-header-row.is-selected td { background: var(--color-emerald-bg); box-shadow: inset 3px 0 0 var(--cx-accent-a); } .capium-console .group-header-row.is-selected .group-title { color: var(--color-emerald-text); } /* the bar that appears once something is ticked */ .hx-selbar { position: sticky; bottom: 14px; z-index: 25; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 1rem; padding: 0.7rem 0.8rem 0.7rem 0.9rem; border-radius: 16px; border: 1px solid var(--cx-accent-a); background: var(--cx-deck-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 44px var(--cx-shadow-deep), 0 0 0 3px var(--color-emerald-bg); animation: hxBarIn 0.35s cubic-bezier(0.2, 0.9, 0.2, 1); } .hx-selbar[hidden] { display: none; } @keyframes hxBarIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .hx-selbar-tick { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--cx-accent-a), var(--cx-accent-b)); } .hx-selbar-tick svg { width: 16px; height: 16px; } .hx-selbar-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 14rem; } .hx-selbar-txt strong { font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; } .hx-selbar-txt small { font-size: 0.74rem; color: var(--color-text-muted); } .hx-selbar-txt small.is-warn { color: var(--color-amber-text); } .hx-selbar-formats { display: flex; gap: 0.2rem; padding: 0.22rem; border-radius: 11px; background: var(--cx-glass); border: 1px solid var(--cx-line); } .hx-selbar-formats button { padding: 0.35rem 0.7rem; border: none; border-radius: 8px; background: transparent; color: var(--color-text-muted); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; transition: background 0.15s, color 0.15s; } .hx-selbar-formats button:hover { color: var(--color-text); } .hx-selbar-formats button.active { color: #fff; background: linear-gradient(135deg, var(--cx-accent-a), var(--cx-accent-b)); } .hx-selbar-go { gap: 0.45rem; padding: 0.65rem 1.1rem; border-radius: 12px; font-weight: 700; } .hx-selbar-go svg { width: 16px; height: 16px; } .hx-selbar-go:disabled { opacity: 0.45; filter: saturate(0.4); box-shadow: none; cursor: default; } .hx-selbar-clear { padding: 0.5rem 0.7rem; border: none; border-radius: 9px; background: transparent; color: var(--color-text-muted); font-family: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; } .hx-selbar-clear:hover { color: var(--color-red-text); background: var(--color-red-bg); } @media (max-width: 1150px) { .hx { grid-template-columns: 1fr; } .hx-pack { position: static; } } @media (prefers-reduced-motion: reduce) { .hx-pack-art span { animation: none !important; } } /* ====================================================================== CONSOLE DROPDOWNS A styled listbox over the real