/* ═══════════════════════════════════════════════════════════════════════════
Egbert Design System — shared CSS
Single source of truth for variables, components, and responsive rules.
Loaded by all base templates (app, admin, demo, public).
═══════════════════════════════════════════════════════════════════════════ */
/* ── Fonts ────────────────────────────────────────────────────────────────── */
/* Loaded via in HTML — NOT via @import.
@import blocks rendering; + font-display:swap does not. */
/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
/* Typography */
--font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-display: 'Fraunces', Georgia, serif;
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* Colors — warmer editorial palette */
--bg: #f6efe7;
--bg-top: #fffaf4;
--bg-accent: #f1e4d2;
--surface: rgba(255, 250, 244, 0.94);
--surface-strong: #fffdfa;
--surface-soft: #f8efe3;
--border: #dfcfbc;
--border-strong: #cdb69f;
--text: #2b2119;
--text-strong: #1b140f;
--muted: #756252;
--muted-strong: #5b4a3d;
/* Colors — brand */
--accent: #d1662f;
--accent-rgb: 209, 102, 47;
--accent-soft: rgba(209, 102, 47, 0.10);
--accent-hover: rgba(209, 102, 47, 0.18);
--accent-secondary: #186d73;
--brand-orange: #d1662f;
--logo-orange: #E8601C;
--brand-navy: #203542;
--ink-navy: #203542;
/* Colors — semantic */
--good: #1d7a61;
--good-soft: rgba(29, 122, 97, 0.10);
--warn: #a76a1c;
--warn-soft: rgba(167, 106, 28, 0.10);
--bad: #c34d58;
--bad-soft: rgba(195, 77, 88, 0.08);
/* Shadows — 3-tier system */
--shadow-sm: 0 8px 18px rgba(58, 37, 22, 0.08);
--shadow-md: 0 18px 40px rgba(58, 37, 22, 0.11);
--shadow-lg: 0 30px 80px rgba(58, 37, 22, 0.14);
/* Keep legacy alias */
--shadow: var(--shadow-lg);
/* Border radius — standardized 5-value scale */
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 26px;
--radius-pill: 999px;
/* Spacing scale (4px base) */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
/* Transitions */
--transition-fast: 0.12s ease;
--transition-normal: 0.2s ease;
--transition-slow: 0.35s ease;
/* Responsive breakpoints (used in media queries) */
/* --bp-mobile: 480px; */
/* --bp-tablet: 768px; */
/* --bp-desktop: 1080px; */
/* --bp-wide: 1480px; */
color-scheme: light;
}
:root[data-theme="dark"] {
--bg: #18110f;
--bg-top: #211815;
--bg-accent: #2e211c;
--surface: rgba(33, 24, 21, 0.93);
--surface-strong: #2a1f1b;
--surface-soft: #352823;
--border: #5a4437;
--border-strong: #7f6251;
--text: #f3e7dc;
--text-strong: #fff9f3;
--muted: #c1ab9a;
--muted-strong: #e0cdbf;
--accent-soft: rgba(209, 102, 47, 0.18);
--accent-hover: rgba(209, 102, 47, 0.24);
--good-soft: rgba(29, 122, 97, 0.18);
--warn-soft: rgba(167, 106, 28, 0.18);
--bad-soft: rgba(195, 77, 88, 0.18);
--shadow-sm: 0 10px 20px rgba(5, 2, 1, 0.30);
--shadow-md: 0 18px 42px rgba(5, 2, 1, 0.42);
--shadow-lg: 0 34px 82px rgba(5, 2, 1, 0.54);
color-scheme: dark;
}
/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: var(--font-sans);
font-size: 14px;
margin: 0;
color: var(--text);
line-height: 1.6;
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--bg);
transition: background-color var(--transition-normal), color var(--transition-normal);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre { font-family: var(--font-mono); }
input, select, textarea, button { font: inherit; font-variant-numeric: inherit; }
/* ── Page backgrounds ─────────────────────────────────────────────────────── */
.bg-app {
background:
radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.08), transparent 26rem),
linear-gradient(180deg, var(--bg-top) 0%, var(--bg-accent) 18rem, var(--bg) 100%);
min-height: 100vh;
}
.bg-admin {
background:
radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.06), transparent 26rem),
linear-gradient(180deg, var(--bg-top) 0%, var(--bg-accent) 18rem, var(--bg) 100%);
min-height: 100vh;
}
.bg-auth {
background:
radial-gradient(circle at 30% 20%, rgba(var(--accent-rgb), 0.07), transparent 30rem),
linear-gradient(180deg, var(--bg-accent) 0%, var(--bg) 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* ── Page-load animation ──────────────────────────────────────────────────── */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-in {
animation: fadeInUp var(--transition-slow) ease-out both;
}
.animate-in-delay-1 { animation-delay: 0.08s; }
.animate-in-delay-2 { animation-delay: 0.16s; }
.animate-in-delay-3 { animation-delay: 0.24s; }
/* ── Spinner animation ────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
display: inline-block; width: 16px; height: 16px;
border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
border-radius: 50%; animation: spin 0.6s linear infinite;
}
.spinner-dark {
border-color: rgba(0,184,169,0.2); border-top-color: var(--accent);
}
.spinner-lg { width: 24px; height: 24px; border-width: 3px; }
/* ── Shell ─────────────────────────────────────────────────────────────────── */
.app-shell { max-width: 1480px; margin: 0 auto; padding: var(--space-6); }
/* ── Typography ───────────────────────────────────────────────────────────── */
h1 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 24px; line-height: 1.04; letter-spacing: -0.03em; color: var(--text-strong); }
h2 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: 18px; line-height: 1.14; letter-spacing: -0.02em; color: var(--text-strong); }
h3 { margin: 0 0 var(--space-2); font-size: 15px; line-height: 1.35; color: var(--text-strong); }
.meta { color: var(--muted); font-size: 12px; }
.subtle { color: var(--muted); }
.mono, .num { font-family: var(--font-mono); }
.eyebrow {
margin: 0 0 4px;
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.13em; color: var(--accent);
}
/* ── Logo / brand ─────────────────────────────────────────────────────────── */
.brand {
display: flex; align-items: center; gap: 10px;
font-weight: 700; color: var(--text-strong);
font-size: 20px; letter-spacing: -0.03em;
text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-logo {
width: 28px; height: 28px;
border-radius: var(--radius-xs);
flex-shrink: 0;
}
.brand-subtitle { margin: 0; color: var(--muted); font-size: 13px; max-width: 70ch; }
/* ── Theme toggle ───────────────────────────────────────────────────────── */
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px 8px 12px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.72);
box-shadow: var(--shadow-sm);
backdrop-filter: blur(16px);
}
:root[data-theme="dark"] .theme-toggle {
background: rgba(11, 24, 37, 0.84);
}
.theme-toggle-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
white-space: nowrap;
}
.theme-toggle-select {
min-width: 92px;
padding: 8px 28px 8px 10px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface-strong);
color: var(--text-strong);
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.theme-toggle-select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}
/* ── Public marketing shell ──────────────────────────────────────────────── */
.public-shell {
max-width: 1220px;
margin: 0 auto;
padding: 28px;
}
.public-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: 16px 20px;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(18px);
}
.public-nav-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.public-nav-links {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.public-nav-links a:not(.btn):not(.btn-primary) {
color: var(--muted-strong);
font-size: 13px;
font-weight: 600;
padding: 10px 12px;
border-radius: var(--radius-md);
}
.public-nav-links a:not(.btn):not(.btn-primary):hover {
color: var(--text-strong);
background: var(--accent-soft);
text-decoration: none;
}
.public-hero {
margin-top: 20px;
padding: 40px;
border: 1px solid var(--border);
border-radius: 36px;
background:
radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.18), transparent 24rem),
radial-gradient(circle at bottom left, rgba(24, 109, 115, 0.12), transparent 28rem),
linear-gradient(
145deg,
color-mix(in srgb, var(--surface-strong) 96%, transparent),
color-mix(in srgb, var(--surface-soft) 92%, transparent)
);
box-shadow: var(--shadow-lg);
}
.public-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
gap: 24px;
align-items: start;
}
.public-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: var(--radius-pill);
border: 1px solid rgba(209, 102, 47, 0.18);
background: var(--accent-soft);
color: var(--accent);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.public-hero h1 {
margin-top: 18px;
margin-bottom: 16px;
font-size: clamp(40px, 6vw, 68px);
line-height: 0.98;
letter-spacing: -0.05em;
max-width: 10ch;
}
.public-lead {
margin: 0;
max-width: 60ch;
color: var(--muted-strong);
font-size: 16px;
}
.public-cta-row {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 24px;
}
.public-note {
margin-top: 12px;
color: var(--muted);
font-size: 13px;
}
.public-aside {
padding: 22px;
border: 1px solid var(--border);
border-radius: 24px;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--surface-strong) 94%, transparent),
color-mix(in srgb, var(--surface-soft) 88%, transparent)
);
box-shadow: var(--shadow-sm);
}
.public-aside h2,
.public-aside h3 {
margin-bottom: 10px;
}
.public-meta-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
}
.public-stat {
padding: 14px;
border: 1px solid var(--border);
border-radius: 18px;
background: var(--surface-strong);
}
.public-stat-label {
color: var(--muted);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.public-stat-value {
margin-top: 6px;
color: var(--text-strong);
font-family: var(--font-mono);
font-size: 18px;
font-weight: 700;
}
.public-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
gap: 20px;
margin-top: 20px;
}
.public-panel,
.public-card {
padding: 24px;
border: 1px solid var(--border);
border-radius: 24px;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--surface-strong) 95%, transparent),
color-mix(in srgb, var(--surface-soft) 90%, transparent)
);
box-shadow: var(--shadow-lg);
}
.public-panel h2,
.public-card h2 {
font-size: 28px;
margin-bottom: 10px;
}
.public-kicker {
margin: 0 0 10px;
color: var(--accent);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.public-body {
color: var(--muted-strong);
font-size: 15px;
}
.public-stack {
display: grid;
gap: 16px;
}
.public-feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}
.public-feature {
padding: 18px;
border: 1px solid var(--border);
border-radius: 18px;
background: var(--surface-soft);
}
.public-feature h3 {
font-size: 16px;
margin-bottom: 6px;
}
.public-feature p {
margin: 0;
color: var(--muted);
font-size: 13px;
}
.public-list {
display: grid;
gap: 10px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.public-list li {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--muted-strong);
}
.public-list li::before {
content: "•";
color: var(--accent);
font-weight: 700;
}
.public-auth-shell {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 32px 20px;
}
.public-auth-card {
width: 100%;
max-width: 460px;
padding: 34px;
border: 1px solid var(--border);
border-radius: 28px;
background:
radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.10), transparent 14rem),
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-strong) 96%, transparent),
color-mix(in srgb, var(--surface-soft) 92%, transparent)
);
box-shadow: var(--shadow-lg);
}
.public-auth-head {
text-align: center;
margin-bottom: 24px;
}
.public-auth-head .brand {
justify-content: center;
margin-bottom: 12px;
}
.public-auth-title {
margin: 0 0 8px;
font-size: 28px;
letter-spacing: -0.03em;
}
.public-auth-copy {
margin: 0;
color: var(--muted);
font-size: 14px;
}
.public-links-inline {
display: flex;
gap: 10px 14px;
justify-content: center;
flex-wrap: wrap;
}
.public-links-inline a {
color: var(--muted-strong);
font-size: 12px;
font-weight: 600;
}
.public-footer {
margin-top: 20px;
padding: 16px 0 8px;
color: var(--muted);
font-size: 12px;
text-align: center;
}
/* ── Header (app shell) ──────────────────────────────────────────────────── */
.header {
display: grid; gap: 18px;
margin-bottom: 22px; padding: var(--space-6) var(--space-7);
border: 1px solid var(--border); border-radius: var(--radius-xl);
background:
radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.12), transparent 24rem),
radial-gradient(circle at bottom left, rgba(24, 109, 115, 0.08), transparent 28rem),
linear-gradient(
180deg,
color-mix(in srgb, var(--surface-strong) 96%, transparent) 0%,
color-mix(in srgb, var(--surface-soft) 92%, transparent) 100%
);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(18px);
}
.header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.brand-wrap { display: grid; gap: 8px; }
.brand-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.header-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
/* ── Navigation ───────────────────────────────────────────────────────────── */
nav { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
nav a {
display: inline-block; padding: 10px 16px;
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--surface-strong) 80%, transparent);
border: 1px solid transparent;
color: var(--muted-strong);
text-decoration: none; font-size: 13px; font-weight: 700;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
nav a:hover {
background: var(--accent-soft); border-color: rgba(209, 102, 47, 0.20);
color: var(--accent); text-decoration: none;
}
nav a.active {
background: var(--accent-soft); border-color: rgba(209, 102, 47, 0.20);
color: var(--accent);
}
/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 10px 18px; border-radius: var(--radius-md);
font-size: 13px; font-weight: 700;
border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
color: var(--text-strong); cursor: pointer;
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: background var(--transition-fast), border-color var(--transition-fast),
color var(--transition-fast), box-shadow var(--transition-fast),
filter var(--transition-fast);
}
.btn:hover {
background: rgba(209, 102, 47, 0.10); color: var(--accent);
border-color: rgba(209, 102, 47, 0.24); text-decoration: none;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }
.btn-sm { padding: 6px 14px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-lg { padding: 14px 28px; font-size: 15px; border-radius: var(--radius-md); }
.btn-primary {
background: var(--accent); color: #fff; border-color: var(--accent);
box-shadow: 0 10px 24px rgba(209, 102, 47, 0.28);
}
.btn-primary:hover { filter: brightness(1.06); color: #fff; background: var(--accent); }
.btn-primary:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
outline: 3px solid rgba(209, 102, 47, 0.28);
outline-offset: 2px;
}
.btn-good { background: var(--good); color: #fff; border-color: var(--good); }
.btn-good:hover { filter: brightness(1.06); color: #fff; background: var(--good); }
.btn-warn { color: var(--warn); border-color: rgba(183,121,31,0.2); }
.btn-warn:hover { background: var(--warn-soft); }
.btn-danger { color: var(--bad); border-color: rgba(216,72,98,0.2); }
.btn-danger:hover { background: var(--bad-soft); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--accent-soft); }
/* Header link style */
.header-link {
display: inline-flex; align-items: center; justify-content: center;
padding: 10px 16px; border-radius: var(--radius-md);
border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
color: var(--text-strong); text-decoration: none;
font-size: 12px; font-weight: 700;
box-shadow: var(--shadow-sm);
transition: background var(--transition-fast), color var(--transition-fast);
}
.header-link:hover { background: var(--surface-soft); color: var(--text-strong); text-decoration: none; }
/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
display: inline-flex; align-items: center;
padding: 3px 8px; border-radius: var(--radius-pill);
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.07em; border: 1px solid transparent;
transition: background var(--transition-fast);
}
/* Status badges */
.badge-drafting { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.badge-backtesting { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.badge-ready { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.badge-pending_approval { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.badge-pending { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.badge-paper { background: #f0fdfa; color: #0f766e; border-color: #99f6e4; }
.badge-live { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.badge-paused { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.badge-disabled { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; }
/* Mode badges */
.badge-mode-standalone { background: var(--accent-soft); color: var(--accent); border-color: rgba(0,184,169,.16); }
.badge-mode-combined { background: rgba(15,159,110,.08); color: #0f766e; border-color: rgba(15,159,110,.2); }
/* Semantic badges */
.badge-good { background: var(--good-soft); color: var(--good); border-color: rgba(15,159,110,.16); }
.badge-warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(183,121,31,.16); }
.badge-bad { background: var(--bad-soft); color: var(--bad); border-color: rgba(216,72,98,.16); }
/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: var(--space-5);
box-shadow: var(--shadow-md);
transition: box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.card:hover { box-shadow: var(--shadow-lg); }
.card-flat { box-shadow: none; }
.card-flat:hover { box-shadow: var(--shadow-sm); }
.card-header {
padding: var(--space-5) var(--space-6) var(--space-4);
border-bottom: 1px solid var(--border);
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: var(--space-3);
}
/* ── Metric boxes ─────────────────────────────────────────────────────────── */
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.metric-box {
background: var(--surface-soft); border: 1px solid var(--border);
border-radius: var(--radius-md); padding: var(--space-3) var(--space-3);
transition: border-color var(--transition-fast);
}
.metric-box:hover { border-color: var(--border-strong); }
.metric-box .lbl {
font-size: 10px; color: var(--muted); text-transform: uppercase;
letter-spacing: 0.08em; font-weight: 700;
}
.metric-box .val {
font-size: 14px; font-weight: 700; color: var(--text-strong);
font-family: var(--font-mono); margin-top: 2px;
}
.val.good { color: var(--good); }
.val.bad { color: var(--bad); }
.val.warn { color: var(--warn); }
/* ── Tables ───────────────────────────────────────────────────────────────── */
table {
border-collapse: separate; border-spacing: 0; width: 100%; overflow: hidden;
border: 1px solid var(--border); border-radius: var(--radius-lg);
background: var(--surface-strong);
}
th, td {
border-bottom: 1px solid var(--border);
padding: 12px 14px; text-align: left; vertical-align: top;
}
th {
background: #f7efe4; color: var(--muted);
font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
}
tbody tr:last-child td { border-bottom: 0; }
tr { transition: background var(--transition-fast); }
tr:hover td { background: rgba(209, 102, 47, 0.04); }
/* ── Forms ─────────────────────────────────────────────────────────────────── */
.input {
width: 100%; padding: 12px 14px;
border-radius: var(--radius-md);
border: 1px solid var(--border); background: var(--surface-soft);
font-size: 14px; color: var(--text);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(0,184,169,0.08);
}
.input::placeholder { color: #94a3b8; }
textarea.input { min-height: 80px; resize: vertical; line-height: 1.6; }
.form-label {
display: block; margin-bottom: var(--space-2);
font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--muted);
}
/* ── Pre / code blocks ────────────────────────────────────────────────────── */
pre {
background: #f4f8fb; padding: 14px 16px; overflow-x: auto;
font-size: 12px; border-radius: var(--radius-md);
border: 1px solid var(--border);
font-family: var(--font-mono); line-height: 1.7;
}
/* ── Empty states ─────────────────────────────────────────────────────────── */
.empty-state {
text-align: center; padding: var(--space-12) var(--space-6);
color: var(--muted);
}
.empty-state-icon {
width: 64px; height: 64px; margin: 0 auto var(--space-5);
border-radius: var(--radius-lg);
background: var(--accent-soft);
display: flex; align-items: center; justify-content: center;
font-size: 28px;
}
.empty-state h3 {
font-size: 16px; font-weight: 700; color: var(--text-strong);
margin-bottom: var(--space-2);
}
.empty-state p {
font-size: 13px; color: var(--muted); max-width: 360px; margin: 0 auto var(--space-5);
line-height: 1.5;
}
/* ── Toast / alerts ───────────────────────────────────────────────────────── */
.toast {
display: none; padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md); font-size: 13px;
margin-top: var(--space-3);
animation: fadeInUp 0.2s ease-out;
}
.toast.visible { display: block; }
.toast-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.toast-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.toast-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
/* ── Skeleton loading ─────────────────────────────────────────────────────── */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(90deg, var(--surface-soft) 25%, #e4eef5 37%, var(--surface-soft) 63%);
background-size: 200% 100%;
animation: shimmer 1.5s ease infinite;
border-radius: var(--radius-sm);
}
.skeleton-line { height: 14px; margin-bottom: var(--space-2); }
.skeleton-box { height: 120px; }
.skeleton-card { height: 200px; border-radius: var(--radius-lg); }
/* ── Auth cards (login, register, forgot password) ────────────────────────── */
.auth-card {
width: 100%; max-width: 420px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-xl); padding: var(--space-8) var(--space-7);
box-shadow: var(--shadow-lg);
}
.auth-card .brand { justify-content: center; margin-bottom: var(--space-6); }
.auth-card h1 { text-align: center; font-size: 20px; margin-bottom: var(--space-2); }
.auth-card .subtitle { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: var(--space-6); }
/* ── Agent grid ───────────────────────────────────────────────────────────── */
.agent-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-4);
}
.agent-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: var(--space-5);
box-shadow: var(--shadow-sm);
display: flex; flex-direction: column; gap: var(--space-3);
transition: box-shadow var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
}
.agent-card:hover {
box-shadow: var(--shadow-md); border-color: var(--border-strong);
transform: translateY(-2px);
}
/* ── Responsive ───────────────────────────────────────────────────────────── */
/* Mobile: 0 – 480px */
@media (max-width: 480px) {
.app-shell { padding: var(--space-4); }
.header { padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); }
.header-top { display: grid; }
.header-actions { justify-content: flex-start; }
.metric-grid { grid-template-columns: repeat(2, 1fr); }
.agent-grid { grid-template-columns: 1fr; }
h1 { font-size: 20px; }
}
/* Tablet: 481 – 768px */
@media (max-width: 768px) {
.header-top { flex-wrap: wrap; }
.results-grid { grid-template-columns: 1fr !important; }
.public-hero-grid,
.public-grid,
.public-feature-grid {
grid-template-columns: 1fr;
}
}
/* Desktop narrow: 769 – 1080px */
@media (max-width: 1080px) {
.header-actions { justify-content: flex-start; }
}
@media (max-width: 640px) {
.public-shell { padding: 16px; }
.public-nav { padding: 14px 16px; }
.public-nav,
.public-nav-links {
flex-direction: column;
align-items: flex-start;
}
.public-hero,
.public-panel,
.public-card,
.public-auth-card {
padding: 22px;
}
.public-cta-row {
align-items: stretch;
}
.public-cta-row .btn,
.public-cta-row .btn-primary {
width: 100%;
}
}