/* * LiSense design system — Palantir/HUD-inspired: near-black with ambient glow, * monospace data readouts, glowing accent lines, sharp geometry over soft "SaaS" curves. * Dark mode is the default; light mode overrides via [data-theme="light"] on . */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap'); :root { --background: 220 30% 4%; --background-glow: 190 100% 45%; --foreground: 190 20% 92%; --card: 220 26% 7%; --card-foreground: 190 20% 92%; --sidebar: 220 28% 5%; --sidebar-foreground: 200 12% 62%; --sidebar-active-bg: 190 100% 50% / 0.08; --sidebar-active-foreground: 190 100% 65%; --topbar: 220 28% 5%; --primary: 189 100% 50%; --primary-foreground: 220 30% 4%; --primary-hover: 189 100% 60%; --primary-glow: 189 100% 50%; --muted: 220 20% 11%; --muted-foreground: 210 12% 56%; --accent: 220 20% 12%; --accent-foreground: 190 20% 92%; --border: 200 30% 22% / 0.35; --input: 220 22% 10%; --ring: 189 100% 50%; --success: 152 76% 45%; --success-foreground: 152 76% 95%; --warning: 38 100% 55%; --warning-foreground: 38 92% 10%; --destructive: 350 89% 60%; --destructive-foreground: 0 0% 100%; --info: 199 95% 58%; --radius: 0.625rem; --radius-sm: 0.375rem; --radius-lg: 0.75rem; --shadow-card: 0 8px 30px -8px rgb(0 0 0 / 0.5); --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color-scheme: dark; } :root[data-theme="light"] { --background: 210 30% 97%; --background-glow: 199 89% 55%; --foreground: 222 47% 10%; --card: 0 0% 100%; --card-foreground: 222 47% 10%; --sidebar: 0 0% 100%; --sidebar-foreground: 220 9% 40%; --sidebar-active-bg: 199 89% 45% / 0.08; --sidebar-active-foreground: 199 89% 38%; --topbar: 0 0% 100%; --primary: 199 89% 42%; --primary-foreground: 0 0% 100%; --primary-hover: 199 89% 36%; --primary-glow: 199 89% 42%; --muted: 210 25% 94%; --muted-foreground: 220 9% 44%; --accent: 210 25% 93%; --accent-foreground: 222 47% 10%; --border: 210 20% 85%; --input: 210 20% 94%; --ring: 199 89% 42%; --success: 152 65% 35%; --warning: 38 92% 42%; --destructive: 350 78% 50%; --info: 199 89% 42%; --shadow-card: 0 2px 16px -4px rgb(15 23 42 / 0.1); color-scheme: light; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { --background: 210 30% 97%; --background-glow: 199 89% 55%; --foreground: 222 47% 10%; --card: 0 0% 100%; --card-foreground: 222 47% 10%; --sidebar: 0 0% 100%; --sidebar-foreground: 220 9% 40%; --sidebar-active-bg: 199 89% 45% / 0.08; --sidebar-active-foreground: 199 89% 38%; --topbar: 0 0% 100%; --primary: 199 89% 42%; --primary-foreground: 0 0% 100%; --primary-hover: 199 89% 36%; --primary-glow: 199 89% 42%; --muted: 210 25% 94%; --muted-foreground: 220 9% 44%; --accent: 210 25% 93%; --accent-foreground: 222 47% 10%; --border: 210 20% 85%; --input: 210 20% 94%; --ring: 199 89% 42%; --success: 152 65% 35%; --warning: 38 92% 42%; --destructive: 350 78% 50%; --info: 199 89% 42%; --shadow-card: 0 2px 16px -4px rgb(15 23 42 / 0.1); color-scheme: light; } } * { box-sizing: border-box; } html, body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); } body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; transition: background-color 0.15s ease, color 0.15s ease; position: relative; min-height: 100vh; } /* Ambient embient glow behind the whole app, like a HUD console */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 900px 500px at 15% -10%, hsl(var(--background-glow) / 0.10), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 10%, hsl(var(--background-glow) / 0.06), transparent 55%); } /* Faint technical grid texture */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.35; background-image: linear-gradient(hsl(var(--foreground) / 0.025) 1px, transparent 1px), linear-gradient(90deg, hsl(var(--foreground) / 0.025) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 90%); } :root[data-theme="light"] body::after { opacity: 0.5; } a { color: inherit; } .mono { font-family: var(--font-mono); } /* ── App shell: sidebar + topbar + content ─────────────────────────── */ .app-shell { display: flex; min-height: 100vh; position: relative; z-index: 1; } .ls-sidebar { width: 264px; flex-shrink: 0; background-color: hsl(var(--sidebar) / 0.85); backdrop-filter: blur(14px); border-right: 1px solid hsl(var(--border)); position: fixed; top: 0; left: 0; bottom: 0; overflow-y: auto; z-index: 40; transition: transform 0.2s ease; padding: 1.25rem 1rem; } .ls-sidebar-brand { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.5rem 1.25rem; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.01em; color: hsl(var(--foreground)); } .ls-sidebar-brand .brand-icon { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, hsl(var(--primary)), hsl(220 90% 55%)); display: flex; align-items: center; justify-content: center; color: hsl(var(--primary-foreground)); font-size: 1rem; flex-shrink: 0; box-shadow: 0 0 20px hsl(var(--primary-glow) / 0.45); } .ls-search { display: flex; align-items: center; gap: 0.5rem; background-color: hsl(var(--muted) / 0.6); border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; color: hsl(var(--muted-foreground)); font-size: 0.8rem; margin-bottom: 1.25rem; font-family: var(--font-mono); } .ls-nav-label { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--muted-foreground) / 0.7); padding: 0 0.75rem; margin-bottom: 0.6rem; margin-top: 0.5rem; } .ls-nav { display: flex; flex-direction: column; gap: 0.15rem; } .ls-nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); color: hsl(var(--sidebar-foreground)); font-size: 0.85rem; font-weight: 500; text-decoration: none; border-left: 2px solid transparent; transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .ls-nav-item i, .ls-nav-item svg { width: 1.1rem; text-align: center; flex-shrink: 0; opacity: 0.8; } .ls-nav-item:hover { background-color: hsl(var(--accent) / 0.7); color: hsl(var(--accent-foreground)); } .ls-nav-item.active { background: linear-gradient(90deg, hsl(var(--sidebar-active-bg)), transparent); color: hsl(var(--sidebar-active-foreground)); font-weight: 600; border-left-color: hsl(var(--primary)); } .ls-nav-item.active i, .ls-nav-item.active svg { opacity: 1; filter: drop-shadow(0 0 6px hsl(var(--primary-glow) / 0.6)); } .ls-main { flex: 1; margin-left: 264px; min-width: 0; display: flex; flex-direction: column; } .ls-topbar { height: 4.25rem; flex-shrink: 0; background-color: hsl(var(--topbar) / 0.75); backdrop-filter: blur(14px); border-bottom: 1px solid hsl(var(--border)); display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; position: sticky; top: 0; z-index: 30; } .ls-content { padding: 1.5rem; flex: 1; } .ls-menu-toggle { display: none; background: none; border: none; color: hsl(var(--foreground)); font-size: 1.25rem; cursor: pointer; padding: 0.25rem; } .ls-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgb(0 0 0 / 0.6); z-index: 39; } @media (max-width: 1024px) { .ls-sidebar { transform: translateX(-100%); } .ls-sidebar.open { transform: translateX(0); } .ls-main { margin-left: 0; } .ls-menu-toggle { display: inline-flex; align-items: center; } body.sidebar-open .ls-sidebar-overlay { display: block; } } /* ── Reusable components ─────────────────────────────────────────── */ .ls-card { background-color: hsl(var(--card) / 0.7); backdrop-filter: blur(10px); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); position: relative; } .ls-stat-card { background-color: hsl(var(--card) / 0.7); backdrop-filter: blur(10px); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); padding: 1.25rem; position: relative; overflow: hidden; } .ls-stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, hsl(var(--primary) / 0.8), transparent 70%); } .ls-stat-card .stat-icon { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background-color: hsl(var(--muted)); display: flex; align-items: center; justify-content: center; color: hsl(var(--muted-foreground)); margin-bottom: 0.75rem; } .ls-stat-card .stat-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--muted-foreground)); display: flex; align-items: center; gap: 0.5rem; } .ls-stat-card .stat-value { font-family: var(--font-mono); font-size: 1.85rem; font-weight: 700; color: hsl(var(--foreground)); margin-top: 0.4rem; letter-spacing: -0.01em; } .ls-stat-card .stat-meta { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.5rem; display: flex; align-items: center; justify-content: space-between; } .ls-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; border: 1px solid transparent; } .ls-badge-success { background-color: hsl(var(--success) / 0.12); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.3); } .ls-badge-warning { background-color: hsl(var(--warning) / 0.12); color: hsl(var(--warning)); border-color: hsl(var(--warning) / 0.3); } .ls-badge-danger { background-color: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.3); } .ls-badge-info { background-color: hsl(var(--info) / 0.12); color: hsl(var(--info)); border-color: hsl(var(--info) / 0.3); } .ls-badge-muted { background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); } .ls-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease; } .ls-btn-primary { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 0 0 0 hsl(var(--primary-glow) / 0); } .ls-btn-primary:hover { background-color: hsl(var(--primary-hover)); box-shadow: 0 0 16px hsl(var(--primary-glow) / 0.4); } .ls-btn-outline { background-color: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); } .ls-btn-outline:hover { background-color: hsl(var(--accent)); border-color: hsl(var(--primary) / 0.5); } .ls-btn-ghost { background-color: transparent; color: hsl(var(--muted-foreground)); } .ls-btn-ghost:hover { background-color: hsl(var(--accent)); color: hsl(var(--accent-foreground)); } .ls-btn-danger { background-color: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.3); } .ls-btn-danger:hover { background-color: hsl(var(--destructive) / 0.2); } .ls-input, .ls-select, .ls-textarea { background-color: hsl(var(--input)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-sm); color: hsl(var(--foreground)); padding: 0.55rem 0.75rem; font-size: 0.85rem; width: 100%; font-family: var(--font-sans); } .ls-input::placeholder { color: hsl(var(--muted-foreground)); } .ls-input:focus, .ls-select:focus, .ls-textarea:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15), 0 0 12px hsl(var(--ring) / 0.15); } .ls-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .ls-table th { text-align: left; padding: 0.75rem 1rem; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: hsl(var(--muted-foreground)); border-bottom: 1px solid hsl(var(--border)); } .ls-table td { padding: 0.85rem 1rem; border-bottom: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); } .ls-table tbody tr:hover { background-color: hsl(var(--primary) / 0.04); } .ls-table tbody tr:last-child td { border-bottom: none; } .ls-avatar { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); background-color: hsl(var(--muted)); border: 1px solid hsl(var(--border)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-mono); font-size: 0.85rem; color: hsl(var(--primary)); overflow: hidden; } .ls-theme-toggle { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm); border: 1px solid hsl(var(--border)); background-color: hsl(var(--muted)); color: hsl(var(--foreground)); display: flex; align-items: center; justify-content: center; cursor: pointer; } .ls-theme-toggle:hover { background-color: hsl(var(--accent)); border-color: hsl(var(--primary) / 0.5); } .ls-muted { color: hsl(var(--muted-foreground)); } .ls-back-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.85rem; color: hsl(var(--muted-foreground)); text-decoration: none; margin-bottom: 0.75rem; } .ls-back-link:hover { color: hsl(var(--primary)); } .ls-alert { border-radius: var(--radius-sm); padding: 0.85rem 1rem; font-size: 0.85rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem; border: 1px solid; } .ls-alert-success { background-color: hsl(var(--success) / 0.08); color: hsl(var(--success)); border-color: hsl(var(--success) / 0.3); } .ls-alert-danger { background-color: hsl(var(--destructive) / 0.08); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / 0.3); } .ls-alert-warning { background-color: hsl(var(--warning) / 0.08); color: hsl(var(--warning)); border-color: hsl(var(--warning) / 0.3); } .ls-dropdown { position: relative; display: inline-block; } .ls-dropdown-content { display: none; position: absolute; right: 0; top: calc(100% + 0.25rem); background-color: hsl(var(--card)); backdrop-filter: blur(14px); min-width: 220px; box-shadow: var(--shadow-card); z-index: 20; border-radius: var(--radius-sm); border: 1px solid hsl(var(--border)); overflow: hidden; } .ls-dropdown-content.open { display: block; } .ls-dropdown-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; padding: 0.6rem 0.85rem; font-size: 0.82rem; background: none; border: none; color: hsl(var(--foreground)); cursor: pointer; text-decoration: none; } .ls-dropdown-item:hover { background-color: hsl(var(--accent)); } .ls-modal-overlay { display: none; position: fixed; inset: 0; background: rgb(0 0 0 / 0.65); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 1rem; z-index: 60; } .ls-modal-overlay.open { display: flex; } .ls-modal { background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); width: 100%; max-width: 28rem; max-height: 90vh; overflow-y: auto; box-shadow: 0 0 60px hsl(var(--primary-glow) / 0.15), var(--shadow-card); } /* Status dot with glow, for system-status style rows */ .ls-status-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; display: inline-block; flex-shrink: 0; } .ls-status-dot.on { background-color: hsl(var(--success)); box-shadow: 0 0 8px hsl(var(--success) / 0.8); } .ls-status-dot.off { background-color: hsl(var(--destructive)); box-shadow: 0 0 8px hsl(var(--destructive) / 0.8); } @media (max-width: 640px) { .ls-content { padding: 1rem; } .ls-topbar { padding: 0 1rem; } .hide-mobile { display: none; } }