diff --git a/base.css b/base.css
index c594a9b..71a18c1 100644
--- a/base.css
+++ b/base.css
@@ -1,36 +1,36 @@
/* ================================================================
- LOTUSGUILD TERMINAL DESIGN SYSTEM v1.0 — base.css
- Unified CSS for all LotusGuild web applications
+ LOTUSGUILD TERMINAL DESIGN SYSTEM v1.2 — base.css
+ Aesthetic: Anduril x Hacker Terminal — dark military-tech,
+ multi-accent neon, angular frames, glitch effects.
- Apps: Tinker Tickets (PHP), PULSE (Node.js), GANDALF (Flask)
- Aesthetic: Retro CRT terminal, phosphor green, ASCII art borders
- Prefix: .lt-* (LotusGuild Terminal)
+ Apps: Tinker Tickets (PHP), PULSE (Node.js), GANDALF (Flask)
+ Prefix: .lt-* (LotusGuild Terminal)
TABLE OF CONTENTS
- 01. CSS Custom Properties
- 02. Reset & Base
- 03. CRT & Terminal Effects
- 04. Typography
- 05. Layout Primitives
- 06. Header & Navigation
- 07. ASCII Frame System
- 08. Card Component
- 09. Buttons
- 10. Forms & Inputs
- 11. Tables
- 12. Status Badges, Chips, Priority
- 13. Modals
- 14. Toast Notifications
- 15. Tab Navigation
- 16. Sidebar / Filter Panel
- 17. Stats Widgets
- 18. Inline Messages
- 19. Loading & Empty States
- 20. Boot Sequence Overlay
- 21. Log / Timeline Entries
- 22. Animations (keyframes)
- 23. Responsive Design
- 24. Utility Classes
+ 01. CSS Custom Properties 27. Progress Bars
+ 02. Reset & Base 28. Tooltips
+ 03. CRT / Grid / Scanline 29. Breadcrumbs
+ 04. Typography 30. Pagination
+ 05. Layout Primitives 31. Accordion
+ 06. Header & Navigation 32. Alert Banners
+ 07. ASCII Frame System 33. Toggle Switch
+ 08. Card Component 34. Range Slider
+ 09. Buttons 35. File Upload / Dropzone
+ 10. Forms & Inputs 36. Command Palette
+ 11. Tables 37. Code Blocks
+ 12. Status Badges / Chips 38. Tags / Chips
+ 13. Modals 39. Notification Badges
+ 14. Toast Notifications 40. Stepper / Wizard
+ 15. Tab Navigation 41. List Groups
+ 16. Sidebar / Filter Panel 42. Key-Value Pairs
+ 17. Stats Widgets 43. Hero / Banner
+ 18. Inline Messages 44. Divider with Label
+ 19. Loading & Empty States 45. Custom Scrollbar
+ 20. Boot Sequence Overlay 46. Responsive Table Cards
+ 21. Log / Timeline Entries 47. Gauge / Meter
+ 22. Animations (keyframes) 48. Spinners / Loaders
+ 23. Responsive Design 49. Tab Bar
+ 24. Utility Classes 50. Utility Additions
25. Print Styles
26. Accessibility
================================================================ */
@@ -40,111 +40,145 @@
---------------------------------------------------------------- */
:root {
/* --- Backgrounds --- */
- --bg-primary: #0a0a0a; /* Main background: near-black */
- --bg-secondary: #1a1a1a; /* Surface: dark grey */
- --bg-tertiary: #2a2a2a; /* Raised surface / hover states */
- --bg-terminal: #001a00; /* Deep green-tinted black for terminal panels */
+ --bg-primary: #030508;
+ --bg-secondary: #060c14;
+ --bg-tertiary: #0d1520;
+ --bg-card: #07101a;
+ --bg-terminal: #010304;
+ --bg-overlay: rgba(3,5,8,0.94);
- /* --- Terminal Green (Primary accent) --- */
- --terminal-green: #00ff41;
- --terminal-green-dim: rgba(0, 255, 65, 0.15);
- --terminal-green-dark: #00cc33;
- --terminal-green-muted: #008822;
+ /* --- Primary accent: Anduril Orange --- */
+ --accent-orange: #FF6B00;
+ --accent-orange-bright: #FF8C2B;
+ --accent-orange-dim: rgba(255,107,0,0.12);
+ --accent-orange-border: rgba(255,107,0,0.35);
+ --accent-amber: #FFB300;
+ --accent-amber-dim: rgba(255,179,0,0.10);
- /* --- Amber (Secondary / highlight / headings) --- */
- --terminal-amber: #ffb000;
- --terminal-amber-dim: rgba(255, 176, 0, 0.15);
+ /* --- Secondary accent: Ice Cyan --- */
+ --accent-cyan: #00D4FF;
+ --accent-cyan-bright: #33DFFF;
+ --accent-cyan-dim: rgba(0,212,255,0.10);
+ --accent-cyan-border: rgba(0,212,255,0.22);
- /* --- Cyan (Tertiary / uplinks / info) --- */
- --terminal-cyan: #00ffff;
- --terminal-cyan-dim: rgba(0, 255, 255, 0.12);
+ /* --- Tertiary accent: Matrix Green --- */
+ --accent-green: #00FF88;
+ --accent-green-bright: #33FFAA;
+ --accent-green-dim: rgba(0,255,136,0.10);
+ --accent-green-border: rgba(0,255,136,0.22);
- /* --- Red (Error / critical / closed) --- */
- --terminal-red: #ff4444;
- --terminal-red-dim: rgba(255, 68, 68, 0.15);
+ /* --- Error / Critical --- */
+ --accent-red: #FF2D55;
+ --accent-red-dim: rgba(255,45,85,0.12);
- /* --- Orange (Warning) --- */
- --terminal-orange: #ff8c00;
- --terminal-orange-dim: rgba(255, 140, 0, 0.15);
+ /* --- Warning --- */
+ --accent-gold: #FFD700;
+ --accent-gold-dim: rgba(255,215,0,0.10);
+
+ /* --- Purple (admin / misc) --- */
+ --accent-purple: #BF5FFF;
+ --accent-purple-dim: rgba(191,95,255,0.10);
+
+ /* Legacy aliases — keeps all existing component HTML working */
+ --terminal-green: var(--accent-green);
+ --terminal-green-dim: var(--accent-green-dim);
+ --terminal-green-dark: #00cc66;
+ --terminal-green-muted: #007744;
+ --terminal-amber: var(--accent-amber);
+ --terminal-amber-dim: var(--accent-amber-dim);
+ --terminal-cyan: var(--accent-cyan);
+ --terminal-cyan-dim: var(--accent-cyan-dim);
+ --terminal-red: var(--accent-red);
+ --terminal-red-dim: var(--accent-red-dim);
+ --terminal-orange: var(--accent-orange);
+ --terminal-orange-dim: var(--accent-orange-dim);
/* --- Text --- */
- --text-primary: #00ff41; /* Body text */
- --text-secondary: #00cc33; /* Subdued text */
- --text-muted: #00bb33; /* Muted / placeholder text */
+ --text-primary: #c4d9ee;
+ --text-secondary: #7fa3bf;
+ --text-muted: #3e607a;
+ --text-dim: #1e3347;
/* --- Borders --- */
- --border-color: rgba(0, 255, 65, 0.35); /* Default border (semi-transparent) */
- --border-color-hi: #00ff41; /* Highlighted / focused border */
- --border-color-dim: rgba(0, 255, 65, 0.12); /* Subtle row separator */
+ --border-color: rgba(0,212,255,0.16);
+ --border-color-hi: var(--accent-cyan);
+ --border-color-dim: rgba(0,212,255,0.07);
+ --border-dim: rgba(0,212,255,0.07); /* alias for v1.2+ components */
+ --border-orange: var(--accent-orange-border);
- /* --- Ticket / workflow status colours --- */
- --status-open: #28a745;
- --status-pending: #9c27b0;
- --status-in-progress: #ffc107;
- --status-closed: #dc3545;
- --status-online: #28a745;
- --status-offline: #dc3545;
- --status-running: #ffc107;
- --status-completed: #28a745;
- --status-failed: #dc3545;
- --status-waiting: #ffc107;
+ /* --- Workflow / status colours --- */
+ --status-open: var(--accent-green);
+ --status-pending: var(--accent-purple);
+ --status-in-progress: var(--accent-amber);
+ --status-closed: var(--accent-red);
+ --status-online: var(--accent-green);
+ --status-offline: var(--accent-red);
+ --status-running: var(--accent-amber);
+ --status-completed: var(--accent-cyan);
+ --status-failed: var(--accent-red);
+ --status-waiting: var(--accent-gold);
- /* --- Priority colours (P1 critical → P5 minimal) --- */
- --priority-1: #ff4d4d; /* Critical */
- --priority-2: #ffa726; /* High */
- --priority-3: #42a5f5; /* Medium */
- --priority-4: #66bb6a; /* Low */
- --priority-5: #9e9e9e; /* Minimal */
+ /* --- Priority colours --- */
+ --priority-1: #FF2D55;
+ --priority-2: #FF6B00;
+ --priority-3: #00D4FF;
+ --priority-4: #00FF88;
+ --priority-5: #3e607a;
- /* --- Glow — text-shadow stacks --- */
- --glow-green: 0 0 5px #00ff41, 0 0 10px #00ff41, 0 0 15px #00ff41;
- --glow-green-intense: 0 0 8px #00ff41, 0 0 16px #00ff41, 0 0 24px #00ff41,
- 0 0 32px rgba(0, 255, 65, 0.5);
- --glow-amber: 0 0 5px #ffb000, 0 0 10px #ffb000, 0 0 15px #ffb000;
- --glow-amber-intense: 0 0 8px #ffb000, 0 0 16px #ffb000, 0 0 24px #ffb000;
- --glow-cyan: 0 0 5px #00ffff, 0 0 10px rgba(0, 255, 255, 0.4);
- --glow-red: 0 0 5px #ff4444, 0 0 10px #ff4444;
+ /* --- Glow: text-shadow stacks --- */
+ --glow-orange: 0 0 6px #FF6B00, 0 0 16px rgba(255,107,0,0.55);
+ --glow-orange-intense: 0 0 8px #FF6B00, 0 0 22px #FF6B00, 0 0 40px rgba(255,107,0,0.45);
+ --glow-cyan: 0 0 6px #00D4FF, 0 0 16px rgba(0,212,255,0.45);
+ --glow-cyan-intense: 0 0 8px #00D4FF, 0 0 22px #00D4FF, 0 0 38px rgba(0,212,255,0.35);
+ --glow-green: 0 0 6px #00FF88, 0 0 16px rgba(0,255,136,0.45);
+ --glow-green-intense: 0 0 8px #00FF88, 0 0 22px #00FF88, 0 0 36px rgba(0,255,136,0.35);
+ --glow-amber: 0 0 6px #FFB300, 0 0 14px rgba(255,179,0,0.40);
+ --glow-amber-intense: 0 0 8px #FFB300, 0 0 20px #FFB300, 0 0 34px rgba(255,179,0,0.45);
+ --glow-red: 0 0 6px #FF2D55, 0 0 16px rgba(255,45,85,0.45);
- /* --- Glow — box-shadow (element halos) --- */
- --box-glow-green: 0 0 12px rgba(0, 255, 65, 0.3);
- --box-glow-amber: 0 0 12px rgba(255, 176, 0, 0.3);
- --box-glow-red: 0 0 12px rgba(255, 68, 68, 0.3);
- --box-glow-cyan: 0 0 12px rgba(0, 255, 255, 0.25);
+ /* --- Glow: box-shadow halos --- */
+ --box-glow-orange: 0 0 18px rgba(255,107,0,0.22), 0 0 36px rgba(255,107,0,0.08);
+ --box-glow-cyan: 0 0 18px rgba(0,212,255,0.18), 0 0 36px rgba(0,212,255,0.06);
+ --box-glow-green: 0 0 18px rgba(0,255,136,0.18), 0 0 36px rgba(0,255,136,0.06);
+ --box-glow-red: 0 0 18px rgba(255,45,85,0.22), 0 0 36px rgba(255,45,85,0.08);
+ --box-glow-amber: 0 0 18px rgba(255,179,0,0.18), 0 0 36px rgba(255,179,0,0.06);
/* --- Typography --- */
- --font-mono: 'Courier New', 'Consolas', 'Monaco', 'Menlo', monospace;
+ --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
+ --font-display: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
- /* --- Spacing scale --- */
- --space-xs: 0.25rem; /* 4px */
- --space-sm: 0.5rem; /* 8px */
- --space-md: 1rem; /* 16px */
- --space-lg: 1.5rem; /* 24px */
- --space-xl: 2rem; /* 32px */
- --space-2xl: 3rem; /* 48px */
+ /* --- Spacing --- */
+ --space-xs: 0.25rem;
+ --space-sm: 0.5rem;
+ --space-md: 1rem;
+ --space-lg: 1.5rem;
+ --space-xl: 2rem;
+ --space-2xl: 3rem;
/* --- Layout --- */
- --sidebar-width: 240px;
+ --sidebar-width: 240px;
--sidebar-width-sm: 200px;
- --header-height: 58px;
- --container-max: 1600px;
+ --header-height: 56px;
+ --container-max: 1600px;
/* --- Transitions --- */
- --transition-fast: all 0.15s ease;
- --transition-default: all 0.3s ease;
+ --transition-fast: all 0.12s ease;
+ --transition-default: all 0.25s ease;
/* --- Z-index ladder --- */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
- --z-modal-backdrop: 400;
- --z-modal: 500;
- --z-popover: 600;
- --z-tooltip: 700;
- --z-toast: 800;
- --z-overlay: 9999;
+ --z-modal-backdrop: 10010; /* above nav drawer (10002) so modals always accessible */
+ --z-modal: 10011;
+ --z-popover: 10012;
+ --z-tooltip: 10013;
+ --z-toast: 10014;
+ --z-overlay: 9999; /* scanlines / CRT effects */
}
+
/* ----------------------------------------------------------------
02. RESET & BASE
---------------------------------------------------------------- */
@@ -155,210 +189,223 @@
}
html {
- font-size: 16px;
+ font-size: 14px;
scroll-behavior: smooth;
+ /* Dot-grid tactical background */
+ background-color: var(--bg-primary);
+ background-image:
+ radial-gradient(circle, rgba(0,212,255,0.055) 1px, transparent 1px);
+ background-size: 28px 28px;
}
body {
- background-color: var(--bg-primary);
+ background-color: transparent;
color: var(--text-primary);
font-family: var(--font-mono);
- line-height: 1.6;
+ font-size: 0.875rem;
+ line-height: 1.65;
min-height: 100vh;
overflow-x: hidden;
- /* Subtle screen flicker every 30 s — authentic CRT feel */
- animation: flicker 0.2s ease-in-out 30s infinite;
+ position: relative;
}
a {
- color: var(--terminal-green);
+ color: var(--accent-cyan);
text-decoration: none;
transition: var(--transition-fast);
}
a:hover {
- color: var(--terminal-amber);
- text-shadow: var(--glow-amber);
+ color: var(--accent-orange);
+ text-shadow: var(--glow-orange);
}
-ul, ol { list-style: none; }
-
+ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
+button { cursor: pointer; font-family: var(--font-mono); }
+
/* ----------------------------------------------------------------
- 03. CRT & TERMINAL EFFECTS
+ 03. CRT / GRID / SCANLINE EFFECTS
---------------------------------------------------------------- */
-/* Horizontal scanline overlay — fixed over the entire viewport */
+/* Horizontal scanlines — fixed, non-interactive overlay */
body::before {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(
0deg,
- rgba(0, 0, 0, 0.15) 0px,
- rgba(0, 0, 0, 0.15) 1px,
+ rgba(0,0,0,0.07) 0px,
+ rgba(0,0,0,0.07) 1px,
transparent 1px,
- transparent 2px
+ transparent 3px
);
pointer-events: none;
z-index: var(--z-overlay);
- animation: scanline 8s linear infinite;
}
-/* Binary data-stream watermark — bottom-right corner */
+/* Corner vignette */
body::after {
- content: '10101010';
+ content: '';
position: fixed;
- bottom: 10px;
- right: 14px;
- font-family: var(--font-mono);
- font-size: 0.55rem;
- color: var(--terminal-green);
- opacity: 0.07;
+ inset: 0;
+ background: radial-gradient(
+ ellipse at center,
+ transparent 55%,
+ rgba(0,0,0,0.60) 100%
+ );
pointer-events: none;
- letter-spacing: 2px;
- animation: data-stream 3s steps(1) infinite;
+ z-index: calc(var(--z-overlay) - 1);
}
+
/* ----------------------------------------------------------------
04. TYPOGRAPHY
---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
- font-family: var(--font-mono);
- font-weight: bold;
+ font-family: var(--font-display);
+ font-weight: 700;
text-transform: uppercase;
- letter-spacing: 0.08em;
- line-height: 1.3;
+ letter-spacing: 0.10em;
+ line-height: 1.25;
}
h1 {
font-size: 1.5rem;
- color: var(--terminal-amber);
- text-shadow: var(--glow-amber-intense);
+ color: var(--accent-orange);
+ text-shadow: var(--glow-orange-intense);
}
-h1::before { content: '>> '; color: var(--terminal-green); text-shadow: var(--glow-green); }
+h1::before { content: '>> '; color: var(--accent-cyan); text-shadow: var(--glow-cyan); }
h2 {
- font-size: 1.2rem;
- color: var(--terminal-amber);
- text-shadow: var(--glow-amber);
+ font-size: 1.15rem;
+ color: var(--accent-orange);
+ text-shadow: var(--glow-orange);
}
+h2::before { content: '> '; color: var(--accent-cyan); opacity: 0.65; }
h3 {
- font-size: 1rem;
- color: var(--terminal-amber);
- text-shadow: var(--glow-amber);
+ font-size: 0.95rem;
+ color: var(--accent-cyan);
+ text-shadow: var(--glow-cyan);
}
-h3::before { content: '═══ '; color: var(--terminal-green); }
-h3::after { content: ' ═══'; color: var(--terminal-green); }
h4 {
- font-size: 0.9rem;
- color: var(--terminal-amber);
- letter-spacing: 0.07em;
+ font-size: 0.85rem;
+ color: var(--text-secondary);
}
-p {
- color: var(--text-primary);
- margin-bottom: var(--space-md);
+p { margin-bottom: var(--space-md); }
+p:last-child { margin-bottom: 0; }
+
+code, pre {
+ font-family: var(--font-mono);
+ font-size: 0.8rem;
+ background: var(--bg-terminal);
+ border: 1px solid var(--border-color);
+ color: var(--accent-green);
}
code {
- font-family: var(--font-mono);
- background: var(--bg-terminal);
- color: var(--terminal-green);
- padding: 2px 6px;
- border: 1px solid var(--border-color-dim);
- font-size: 0.9em;
+ padding: 0.1em 0.35em;
}
pre {
- font-family: var(--font-mono);
- background: var(--bg-terminal);
- color: var(--terminal-green);
padding: var(--space-md);
- border: 1px solid var(--border-color);
overflow-x: auto;
- line-height: 1.5;
+ white-space: pre-wrap;
+ border-left: 2px solid var(--accent-green);
+ text-shadow: var(--glow-green);
}
+hr {
+ border: none;
+ border-top: 1px solid var(--border-color-dim);
+ margin: var(--space-lg) 0;
+}
+
+
/* ----------------------------------------------------------------
05. LAYOUT PRIMITIVES
---------------------------------------------------------------- */
.lt-container {
max-width: var(--container-max);
margin: 0 auto;
- padding: 0 var(--space-lg);
+ padding: var(--space-lg) var(--space-xl);
}
.lt-main {
- padding: var(--space-lg);
- min-height: calc(100vh - var(--header-height));
+ padding-top: calc(var(--header-height) + var(--space-lg));
}
-/* Sidebar + content split */
.lt-layout {
display: flex;
- gap: var(--space-md);
+ gap: var(--space-lg);
align-items: flex-start;
}
.lt-content { flex: 1; min-width: 0; }
-/* Page header (below nav, above content) */
-.lt-page-header {
- margin-bottom: var(--space-lg);
- padding-bottom: var(--space-md);
- border-bottom: 1px solid var(--border-color);
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: var(--space-md);
- flex-wrap: wrap;
+.lt-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-lg); }
+.lt-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-lg); }
+.lt-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-lg); }
+
+.lt-flex { display: flex; align-items: center; }
+.lt-flex-between { display: flex; align-items: center; justify-content: space-between; }
+.lt-flex-center { display: flex; align-items: center; justify-content: center; }
+.lt-flex-col { display: flex; flex-direction: column; }
+.lt-flex-wrap { flex-wrap: wrap; }
+
+.lt-gap-sm { gap: var(--space-sm); }
+.lt-gap-md { gap: var(--space-md); }
+.lt-gap-lg { gap: var(--space-lg); }
+
+.lt-mt-sm { margin-top: var(--space-sm); }
+.lt-mt-md { margin-top: var(--space-md); }
+.lt-mb-sm { margin-bottom: var(--space-sm); }
+.lt-mb-md { margin-bottom: var(--space-md); }
+.lt-p-md { padding: var(--space-md); }
+
+.lt-divider {
+ border: none;
+ border-top: 1px solid var(--border-color-dim);
+ margin: var(--space-xl) 0;
}
-.lt-page-title {
- font-size: 1.05rem;
- font-weight: bold;
- color: var(--terminal-amber);
- text-shadow: var(--glow-amber);
- text-transform: uppercase;
- letter-spacing: 0.08em;
-}
-.lt-page-title::before { content: '>> '; color: var(--terminal-green); }
/* ----------------------------------------------------------------
06. HEADER & NAVIGATION
---------------------------------------------------------------- */
.lt-header {
+ position: fixed;
+ top: 0; left: 0; right: 0;
height: var(--header-height);
- background: var(--bg-secondary);
- border-bottom: 2px solid var(--terminal-green);
- box-shadow: 0 2px 16px rgba(0, 255, 65, 0.12);
- padding: 0 var(--space-lg);
+ background: rgba(3,5,8,0.96);
+ backdrop-filter: blur(14px);
+ border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: space-between;
- position: sticky;
- top: 0;
+ padding: 0 var(--space-xl);
z-index: var(--z-fixed);
+ box-shadow: 0 4px 32px rgba(0,0,0,0.7);
}
-/* Animated glow underline on header */
+/* Gradient rule along bottom edge */
.lt-header::after {
content: '';
position: absolute;
- bottom: -2px;
- left: 0; right: 0;
- height: 2px;
+ bottom: 0; left: 0; right: 0;
+ height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
- var(--terminal-green) 20%,
- var(--terminal-green) 80%,
+ var(--accent-cyan) 20%,
+ var(--accent-orange) 50%,
+ var(--accent-cyan) 80%,
transparent 100%
);
- box-shadow: var(--glow-green);
+ opacity: 0.55;
}
.lt-header-left {
@@ -366,72 +413,85 @@ pre {
align-items: center;
gap: var(--space-xl);
}
+
.lt-header-right {
display: flex;
align-items: center;
gap: var(--space-md);
}
-/* --- Brand / App Title --- */
-.lt-brand { display: flex; flex-direction: column; }
+/* Brand */
+.lt-brand { display: flex; flex-direction: column; line-height: 1.1; }
.lt-brand-title {
- font-size: 1.2rem;
- font-weight: bold;
- color: var(--terminal-amber);
- text-shadow: var(--glow-amber-intense);
- letter-spacing: 0.1em;
- white-space: nowrap;
- animation: subtle-pulse 3s ease-in-out infinite;
-}
-.lt-brand-title::before {
- content: '>> ';
- color: var(--terminal-green);
- text-shadow: var(--glow-green);
+ font-size: 1rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ color: var(--accent-orange);
+ text-shadow: var(--glow-orange);
}
+.lt-brand-title::before { content: '[ '; color: var(--accent-cyan); text-shadow: var(--glow-cyan); }
+.lt-brand-title::after { content: ' ]'; color: var(--accent-cyan); text-shadow: var(--glow-cyan); }
.lt-brand-subtitle {
- font-size: 0.6rem;
+ font-size: 0.58rem;
color: var(--text-muted);
- letter-spacing: 0.12em;
text-transform: uppercase;
+ letter-spacing: 0.22em;
}
-/* --- Nav links (horizontal bar) --- */
+/* Nav links */
.lt-nav {
display: flex;
align-items: center;
- gap: var(--space-xs);
+ gap: 2px;
}
.lt-nav-link {
display: inline-block;
- color: var(--text-muted);
- padding: 4px 10px;
- border: 1px solid transparent;
- font-size: 0.8rem;
+ padding: 0.35rem 0.8rem;
+ font-size: 0.7rem;
+ font-weight: 700;
text-transform: uppercase;
- letter-spacing: 0.06em;
+ letter-spacing: 0.13em;
+ color: var(--text-secondary);
+ border: 1px solid transparent;
+ transition: var(--transition-fast);
+ position: relative;
+}
+
+.lt-nav-link::after {
+ content: '';
+ position: absolute;
+ bottom: -1px;
+ left: 50%; right: 50%;
+ height: 1px;
+ background: var(--accent-cyan);
transition: var(--transition-fast);
- white-space: nowrap;
}
-.lt-nav-link::before { content: '[ '; }
-.lt-nav-link::after { content: ' ]'; }
.lt-nav-link:hover {
- color: var(--terminal-green);
- border-color: var(--border-color);
- background: var(--terminal-green-dim);
- text-shadow: var(--glow-green);
+ color: var(--accent-cyan);
+ text-shadow: var(--glow-cyan);
+ border-color: var(--accent-cyan-border);
+ background: var(--accent-cyan-dim);
}
+.lt-nav-link:hover::after { left: 0; right: 0; box-shadow: var(--glow-cyan); }
+
.lt-nav-link.active {
- color: var(--terminal-amber);
- border-color: var(--terminal-amber);
- background: var(--terminal-amber-dim);
- text-shadow: var(--glow-amber);
+ color: var(--accent-orange);
+ text-shadow: var(--glow-orange);
+ border-color: var(--accent-orange-border);
+ background: var(--accent-orange-dim);
+}
+.lt-nav-link.active::after {
+ left: 0; right: 0;
+ background: var(--accent-orange);
+ box-shadow: var(--glow-orange);
}
-/* --- Dropdown nav --- */
+/* Dropdown */
.lt-nav-dropdown { position: relative; }
.lt-nav-dropdown-menu {
@@ -439,240 +499,227 @@ pre {
position: absolute;
top: calc(100% + 4px);
left: 0;
- min-width: 200px;
- background: var(--bg-secondary);
- border: 1px solid var(--border-color-hi);
- box-shadow: var(--box-glow-green), 0 8px 24px rgba(0,0,0,0.6);
+ min-width: 180px;
+ background: rgba(6,12,20,0.98);
+ border: 1px solid var(--accent-cyan-border);
+ box-shadow: var(--box-glow-cyan), 0 16px 40px rgba(0,0,0,0.8);
z-index: var(--z-dropdown);
- list-style: none;
}
-.lt-nav-dropdown:hover .lt-nav-dropdown-menu,
-.lt-nav-dropdown.open .lt-nav-dropdown-menu { display: block; }
+.lt-nav-dropdown-menu::before {
+ content: '';
+ position: absolute;
+ top: 0; left: 0; right: 0;
+ height: 1px;
+ background: var(--accent-cyan);
+ box-shadow: var(--glow-cyan);
+}
+
+.lt-nav-dropdown:hover .lt-nav-dropdown-menu { display: block; }
.lt-nav-dropdown-menu li a {
display: block;
- padding: 8px 14px;
+ padding: 0.5rem 0.9rem;
+ font-size: 0.7rem;
color: var(--text-secondary);
- font-size: 0.8rem;
border-bottom: 1px solid var(--border-color-dim);
+ text-transform: uppercase;
+ letter-spacing: 0.09em;
transition: var(--transition-fast);
}
-.lt-nav-dropdown-menu li a::before { content: '> '; color: var(--terminal-amber); }
-.lt-nav-dropdown-menu li a:hover {
- background: var(--terminal-green-dim);
- color: var(--terminal-green);
- text-shadow: var(--glow-green);
-}
.lt-nav-dropdown-menu li:last-child a { border-bottom: none; }
+.lt-nav-dropdown-menu li a:hover {
+ color: var(--accent-orange);
+ background: var(--accent-orange-dim);
+ text-shadow: var(--glow-orange);
+ padding-left: 1.1rem;
+}
-/* --- User info widget --- */
+/* Header user + admin badge */
.lt-header-user {
- font-size: 0.78rem;
- color: var(--text-secondary);
- white-space: nowrap;
-}
-.lt-header-user::before { content: '[user: '; color: var(--terminal-amber); }
-.lt-header-user::after { content: ']'; color: var(--terminal-amber); }
-
-/* --- Admin badge --- */
-.lt-badge-admin {
- display: inline-block;
- color: var(--terminal-red);
- border: 1px solid var(--terminal-red);
- padding: 2px 8px;
font-size: 0.7rem;
- font-weight: bold;
- text-shadow: var(--glow-red);
- letter-spacing: 0.05em;
+ color: var(--text-secondary);
text-transform: uppercase;
+ letter-spacing: 0.11em;
}
-.lt-badge-admin::before { content: '['; }
-.lt-badge-admin::after { content: ']'; }
+.lt-header-user::before {
+ content: 'OP: ';
+ color: var(--accent-green);
+ text-shadow: var(--glow-green);
+ font-size: 0.62rem;
+}
+
+.lt-badge-admin {
+ font-size: 0.58rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.16em;
+ padding: 0.15rem 0.5rem;
+ color: var(--accent-purple);
+ border: 1px solid rgba(191,95,255,0.45);
+ background: rgba(191,95,255,0.08);
+ text-shadow: 0 0 6px var(--accent-purple);
+ box-shadow: 0 0 10px rgba(191,95,255,0.18);
+}
+
+/* Page header row */
+.lt-page-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: var(--space-lg);
+ padding-bottom: var(--space-md);
+ border-bottom: 1px solid var(--border-color-dim);
+}
+
+.lt-page-title {
+ font-size: 1.3rem;
+ color: var(--accent-orange);
+ text-shadow: var(--glow-orange-intense);
+ text-transform: uppercase;
+ letter-spacing: 0.13em;
+}
+.lt-page-title::before {
+ content: '// ';
+ color: var(--accent-cyan);
+ text-shadow: var(--glow-cyan);
+}
+
/* ----------------------------------------------------------------
07. ASCII FRAME SYSTEM
---------------------------------------------------------------- */
-
-/* Outer frame — double-line border, for major page sections */
.lt-frame {
position: relative;
- border: 3px double var(--terminal-green);
- background: var(--bg-primary);
- margin-bottom: var(--space-xl);
- animation: boot-up 0.8s ease-out;
+ border: 1px solid var(--border-color);
+ background: var(--bg-card);
+ margin-bottom: var(--space-lg);
+ clip-path: polygon(
+ 0 0,
+ calc(100% - 14px) 0,
+ 100% 14px,
+ 100% 100%,
+ 14px 100%,
+ 0 calc(100% - 14px)
+ );
}
+/* Top-right corner pip */
.lt-frame::before {
- content: '╔';
+ content: '◈';
position: absolute;
- top: -5px; left: -5px;
- font-size: 1.3rem;
- color: var(--terminal-green);
- text-shadow: var(--glow-green);
- animation: corner-pulse 3s ease-in-out infinite;
- line-height: 1;
-}
-.lt-frame::after {
- content: '╗';
- position: absolute;
- top: -5px; right: -5px;
- font-size: 1.3rem;
- color: var(--terminal-green);
- text-shadow: var(--glow-green);
- animation: corner-pulse 3s ease-in-out infinite;
+ top: -1px; right: 3px;
+ font-size: 0.52rem;
+ color: var(--accent-orange);
+ text-shadow: var(--glow-orange);
line-height: 1;
+ pointer-events: none;
}
-/* Bottom corners require explicit child elements:
- ╚
- ╝ */
.lt-frame-bl,
.lt-frame-br {
position: absolute;
- bottom: -5px;
- font-size: 1.3rem;
- color: var(--terminal-green);
- text-shadow: var(--glow-green);
+ bottom: 4px;
+ font-size: 0.65rem;
+ color: var(--accent-cyan);
+ text-shadow: var(--glow-cyan);
line-height: 1;
+ pointer-events: none;
}
-.lt-frame-bl { left: -5px; }
-.lt-frame-br { right: -5px; }
+.lt-frame-bl { left: 6px; }
+.lt-frame-br { right: 6px; }
-/* Inner frame — single-line, for sub-panels inside a .lt-frame */
-.lt-frame-inner {
- position: relative;
- border: 2px solid var(--terminal-green);
- background: var(--bg-secondary);
- padding: var(--space-md);
- margin: var(--space-md);
-}
-.lt-frame-inner::before {
- content: '┌';
- position: absolute;
- top: -3px; left: -3px;
- color: var(--terminal-green);
- line-height: 1;
-}
-.lt-frame-inner::after {
- content: '┐';
- position: absolute;
- top: -3px; right: -3px;
- color: var(--terminal-green);
- line-height: 1;
-}
-
-/* Section header — full-width amber title bar inside a frame */
.lt-section-header {
- padding: 0.75rem 1.5rem;
- background: var(--bg-primary);
- border-bottom: 2px solid var(--terminal-green);
- font-weight: bold;
- font-size: 0.9rem;
- color: var(--terminal-amber);
- text-shadow: var(--glow-amber-intense);
+ font-size: 0.68rem;
+ font-weight: 700;
text-transform: uppercase;
- letter-spacing: 0.1em;
- animation: subtle-pulse 3s ease-in-out infinite;
+ letter-spacing: 0.20em;
+ color: var(--accent-orange);
+ text-shadow: var(--glow-orange);
+ padding: 0.5rem 1rem;
+ border-bottom: 1px solid var(--border-color);
+ background: rgba(255,107,0,0.05);
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
}
.lt-section-header::before {
- content: '╠═══ ';
- color: var(--terminal-green);
- text-shadow: var(--glow-green);
-}
-.lt-section-header::after {
- content: ' ═══╣';
- color: var(--terminal-green);
- text-shadow: var(--glow-green);
+ content: '▸';
+ color: var(--accent-cyan);
+ text-shadow: var(--glow-cyan);
+}
+
+/* Right padding accounts for the 14px clip-path corner cut on .lt-frame */
+.lt-section-body { padding: var(--space-md); padding-right: 22px; }
+
+/* Inner / nested frame */
+.lt-frame-inner {
+ border: 1px solid var(--border-color-dim);
+ margin: var(--space-md);
+ background: rgba(0,212,255,0.018);
}
-/* Subsection header */
.lt-subsection-header {
- padding: 0.5rem var(--space-md);
- background: var(--bg-secondary);
- border-bottom: 1px solid var(--terminal-green);
- font-weight: bold;
- font-size: 0.85rem;
- color: var(--terminal-green);
+ font-size: 0.63rem;
+ font-weight: 700;
text-transform: uppercase;
- letter-spacing: 0.07em;
+ letter-spacing: 0.18em;
+ color: var(--accent-cyan);
+ text-shadow: var(--glow-cyan);
+ padding: 0.4rem 0.9rem;
+ border-bottom: 1px solid var(--border-color-dim);
+ background: rgba(0,212,255,0.03);
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
}
-.lt-subsection-header::before { content: '├─── '; }
-.lt-subsection-header::after { content: ' ───┤'; }
-
-/* Horizontal divider with ASCII end-caps */
-.lt-divider {
- height: 1px;
- background: var(--border-color);
- margin: var(--space-lg) 0;
- position: relative;
-}
-.lt-divider::before {
- content: '╞═══';
- position: absolute;
- left: -2px; top: -10px;
- font-size: 0.7rem;
- color: var(--text-muted);
- line-height: 1;
-}
-.lt-divider::after {
- content: '═══╡';
- position: absolute;
- right: -2px; top: -10px;
- font-size: 0.7rem;
- color: var(--text-muted);
- line-height: 1;
+.lt-subsection-header::before {
+ content: '◦';
+ color: var(--accent-cyan);
+ opacity: 0.55;
}
-/* Content body inside a frame / section */
-.lt-section-body { padding: var(--space-md) var(--space-lg); }
/* ----------------------------------------------------------------
08. CARD COMPONENT
---------------------------------------------------------------- */
.lt-card {
position: relative;
- background: var(--bg-secondary);
- border: 2px solid var(--border-color);
- padding: var(--space-lg);
- transition: var(--transition-default);
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
+ padding: var(--space-md);
+ transition: var(--transition-fast);
+ clip-path: polygon(
+ 0 0,
+ calc(100% - 10px) 0,
+ 100% 10px,
+ 100% 100%,
+ 0 100%
+ );
}
+
+/* Corner accent — top-right triangle */
.lt-card::before {
- content: '┌';
+ content: '';
position: absolute;
- top: -3px; left: -3px;
- color: var(--terminal-green);
- line-height: 1;
-}
-.lt-card::after {
- content: '┐';
- position: absolute;
- top: -3px; right: -3px;
- color: var(--terminal-green);
- line-height: 1;
+ top: 0; right: 0;
+ width: 0; height: 0;
+ border-style: solid;
+ border-width: 0 10px 10px 0;
+ border-color: transparent var(--accent-cyan) transparent transparent;
+ opacity: 0.4;
+ transition: var(--transition-fast);
}
+
.lt-card:hover {
- border-color: var(--terminal-green);
- box-shadow: var(--box-glow-green);
+ border-color: var(--accent-cyan-border);
+ background: var(--bg-tertiary);
+ box-shadow: var(--box-glow-cyan);
+}
+.lt-card:hover::before {
+ opacity: 1;
+ border-right-color: var(--accent-orange);
}
-.lt-card-title {
- font-size: 0.95rem;
- color: var(--terminal-amber);
- text-shadow: var(--glow-amber);
- text-transform: uppercase;
- letter-spacing: 0.06em;
- margin-bottom: var(--space-md);
- padding-bottom: var(--space-sm);
- border-bottom: 1px solid var(--border-color);
-}
-.lt-card-title::before { content: '═══ '; color: var(--terminal-green); }
-.lt-card-title::after { content: ' ═══'; color: var(--terminal-green); }
-
-/* Card grid wrappers */
-.lt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-md); }
-.lt-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
-.lt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
-.lt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
/* ----------------------------------------------------------------
09. BUTTONS
@@ -680,77 +727,101 @@ pre {
.lt-btn {
display: inline-flex;
align-items: center;
- background: transparent;
- color: var(--terminal-green);
- border: 2px solid var(--terminal-green);
- border-radius: 0; /* NO rounded corners — terminal style */
- padding: 10px 20px;
- cursor: pointer;
+ gap: var(--space-sm);
+ padding: 0.4rem 0.9rem;
font-family: var(--font-mono);
- font-size: 0.9rem;
- font-weight: bold;
+ font-size: 0.7rem;
+ font-weight: 700;
text-transform: uppercase;
- letter-spacing: 0.05em;
+ letter-spacing: 0.12em;
+ color: var(--accent-cyan);
+ background: transparent;
+ border: 1px solid var(--accent-cyan-border);
+ transition: var(--transition-fast);
+ cursor: pointer;
text-decoration: none;
- transition: var(--transition-default);
white-space: nowrap;
- user-select: none;
+ position: relative;
+ clip-path: polygon(
+ 0 0,
+ calc(100% - 7px) 0,
+ 100% 7px,
+ 100% 100%,
+ 7px 100%,
+ 0 calc(100% - 7px)
+ );
}
-.lt-btn::before { content: '[ '; flex-shrink: 0; }
-.lt-btn::after { content: ' ]'; flex-shrink: 0; }
.lt-btn:hover {
- background: var(--terminal-green-dim);
- color: var(--terminal-amber);
- border-color: var(--terminal-amber);
- text-shadow: var(--glow-amber-intense);
- box-shadow: var(--box-glow-amber);
- transform: translateY(-2px);
+ color: var(--accent-cyan-bright);
+ border-color: var(--accent-cyan);
+ background: var(--accent-cyan-dim);
+ box-shadow: var(--box-glow-cyan);
+ text-shadow: var(--glow-cyan);
+ text-decoration: none;
}
-.lt-btn:active {
- transform: translateY(0);
- box-shadow: var(--box-glow-green);
-}
-.lt-btn:disabled {
- opacity: 0.4;
+
+.lt-btn:active { transform: translateY(1px); }
+
+.lt-btn:disabled,
+.lt-btn[disabled] {
+ opacity: 0.30;
cursor: not-allowed;
- transform: none;
box-shadow: none;
}
-/* Amber (primary call-to-action) */
+/* Primary — orange */
.lt-btn-primary {
- color: var(--terminal-amber);
- border-color: var(--terminal-amber);
- text-shadow: var(--glow-amber);
+ color: var(--accent-orange);
+ border-color: var(--accent-orange-border);
}
-.lt-btn-primary::before { content: '> '; }
.lt-btn-primary:hover {
- background: var(--terminal-amber-dim);
- box-shadow: var(--box-glow-amber);
+ color: var(--accent-orange-bright);
+ border-color: var(--accent-orange);
+ background: var(--accent-orange-dim);
+ box-shadow: var(--box-glow-orange);
+ text-shadow: var(--glow-orange);
}
-/* Red (destructive / danger) */
+/* Danger — red */
.lt-btn-danger {
- color: var(--terminal-red);
- border-color: var(--terminal-red);
+ color: var(--accent-red);
+ border-color: rgba(255,45,85,0.32);
}
.lt-btn-danger:hover {
- background: var(--terminal-red-dim);
- color: var(--terminal-red);
- border-color: var(--terminal-red);
- text-shadow: var(--glow-red);
+ border-color: var(--accent-red);
+ background: var(--accent-red-dim);
box-shadow: var(--box-glow-red);
+ text-shadow: var(--glow-red);
}
-/* Small variant */
-.lt-btn-sm { padding: 5px 10px; font-size: 0.75rem; border-width: 1px; }
+/* Ghost — minimal */
+.lt-btn-ghost {
+ color: var(--text-muted);
+ border-color: var(--border-color-dim);
+ clip-path: none;
+}
+.lt-btn-ghost:hover {
+ color: var(--text-secondary);
+ border-color: var(--border-color);
+ background: rgba(196,217,238,0.03);
+ box-shadow: none;
+ text-shadow: none;
+}
-/* Ghost (border only, no fill on hover either) */
-.lt-btn-ghost { border-color: var(--border-color); color: var(--text-muted); }
+/* Small */
+.lt-btn-sm {
+ padding: 0.22rem 0.6rem;
+ font-size: 0.62rem;
+}
+
+.lt-btn-group {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-sm);
+ flex-wrap: wrap;
+}
-/* Button group */
-.lt-btn-group { display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
/* ----------------------------------------------------------------
10. FORMS & INPUTS
@@ -763,412 +834,396 @@ pre {
}
.lt-label {
- font-size: 0.75rem;
- font-weight: bold;
- color: var(--terminal-amber);
+ font-size: 0.68rem;
+ font-weight: 700;
text-transform: uppercase;
- letter-spacing: 0.07em;
- text-shadow: var(--glow-amber);
+ letter-spacing: 0.12em;
+ color: var(--text-secondary);
}
-.lt-label-required::after { content: ' *'; color: var(--terminal-red); }
+.lt-label-required::after { content: ' *'; color: var(--accent-red); }
.lt-input,
-.lt-textarea,
-.lt-select {
+.lt-select,
+.lt-textarea {
font-family: var(--font-mono);
- font-size: 0.9rem;
- background: var(--bg-primary);
- color: var(--terminal-green);
- border: 2px solid var(--terminal-green);
- border-radius: 0;
- padding: 10px var(--space-md);
+ font-size: 0.8rem;
+ color: var(--text-primary);
+ background: var(--bg-terminal);
+ border: 1px solid var(--border-color);
+ padding: 0.45rem 0.8rem;
width: 100%;
- transition: var(--transition-fast);
- box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
-}
-.lt-input:focus,
-.lt-textarea:focus,
-.lt-select:focus {
outline: none;
- border-color: var(--terminal-amber);
- box-shadow: var(--glow-amber), inset 0 0 10px rgba(0, 0, 0, 0.5);
- background: rgba(0, 255, 65, 0.03);
- animation: focus-pulse 2s ease-in-out infinite;
+ transition: var(--transition-fast);
+ clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
+
+.lt-input:focus,
+.lt-select:focus,
+.lt-textarea:focus {
+ border-color: var(--accent-cyan);
+ box-shadow: var(--box-glow-cyan);
+ background: rgba(0,212,255,0.025);
+}
+
.lt-input::placeholder,
-.lt-textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
+.lt-textarea::placeholder { color: var(--text-dim); }
-.lt-textarea { min-height: 100px; resize: vertical; }
+.lt-select {
+ cursor: pointer;
+ appearance: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2300D4FF'/%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ background-position: right 0.75rem center;
+ padding-right: 2rem;
+ color-scheme: dark;
+}
-.lt-select option {
- background: var(--bg-secondary);
- color: var(--terminal-green);
+/* Style the native option list — works on Chrome/Firefox/Edge on Windows & Linux.
+ macOS always uses OS-native rendering and ignores these. */
+.lt-select option,
+select option {
+ background: #0d1117;
+ color: #c9d1d9;
+}
+.lt-select option:hover,
+.lt-select option:focus,
+.lt-select option:checked,
+select option:checked {
+ background: #1a2030;
+ color: #FF6B00;
+}
+
+.lt-textarea {
+ min-height: 100px;
+ resize: vertical;
+ clip-path: none;
+}
+
+.lt-form-hint {
+ font-size: 0.63rem;
+ color: var(--text-muted);
+ letter-spacing: 0.04em;
+}
+
+/* Search */
+.lt-search { position: relative; }
+.lt-search-input { padding-left: 2rem; }
+.lt-search::before {
+ content: '⌕';
+ position: absolute;
+ left: 0.6rem;
+ top: 50%;
+ transform: translateY(-50%);
+ color: var(--text-muted);
+ pointer-events: none;
+ font-size: 0.9rem;
+ z-index: 1;
}
/* Checkbox */
.lt-checkbox {
appearance: none;
- width: 18px; height: 18px;
- border: 2px solid var(--terminal-green);
- background: var(--bg-primary);
+ width: 14px;
+ height: 14px;
+ border: 1px solid var(--accent-cyan-border);
+ background: var(--bg-terminal);
cursor: pointer;
- border-radius: 0;
+ position: relative;
flex-shrink: 0;
+ vertical-align: middle;
transition: var(--transition-fast);
}
.lt-checkbox:checked {
- background: var(--terminal-green-dim);
- border-color: var(--terminal-amber);
+ background: var(--accent-cyan-dim);
+ border-color: var(--accent-cyan);
}
-.lt-checkbox:checked::before {
+.lt-checkbox:checked::after {
content: '✓';
+ position: absolute;
+ inset: 0;
display: flex;
align-items: center;
justify-content: center;
- width: 100%; height: 100%;
- color: var(--terminal-amber);
- font-size: 0.8rem;
- line-height: 1;
+ font-size: 0.6rem;
+ color: var(--accent-cyan);
+ text-shadow: var(--glow-cyan);
}
+.lt-checkbox:hover { border-color: var(--accent-cyan); }
-/* Search input with prompt prefix */
-.lt-search { position: relative; }
-.lt-search-input { padding-left: 2.2rem; }
-.lt-search::before {
- content: '>';
- position: absolute;
- left: 10px;
- top: 50%; transform: translateY(-50%);
- color: var(--terminal-amber);
- font-weight: bold;
- pointer-events: none;
- z-index: 1;
-}
-
-/* Form hint */
-.lt-form-hint {
- font-size: 0.7rem;
- color: var(--text-muted);
- margin-top: var(--space-xs);
-}
-
-/* Toolbar row */
-.lt-toolbar {
- display: flex;
- align-items: center;
- gap: var(--space-md);
- flex-wrap: wrap;
- margin-bottom: var(--space-md);
- justify-content: space-between;
-}
-.lt-toolbar-left,
-.lt-toolbar-right { display: flex; align-items: center; gap: var(--space-sm); }
/* ----------------------------------------------------------------
11. TABLES
---------------------------------------------------------------- */
+.lt-table-wrap { overflow-x: auto; }
-/* Standard table — full-grid borders, good for simple data */
.lt-table {
width: 100%;
border-collapse: collapse;
- font-family: var(--font-mono);
- background: var(--bg-secondary);
- border: 2px solid var(--terminal-green);
+ font-size: 0.78rem;
}
+
+.lt-table thead {
+ border-bottom: 1px solid var(--accent-cyan-border);
+ background: rgba(0,212,255,0.04);
+}
+
.lt-table th {
- background: var(--bg-primary);
- padding: 10px 14px;
- font-size: 0.8rem;
- font-weight: bold;
- color: var(--terminal-amber);
+ padding: 0.6rem 0.85rem;
+ text-align: left;
+ font-size: 0.62rem;
+ font-weight: 700;
text-transform: uppercase;
- letter-spacing: 0.1em;
- text-shadow: var(--glow-amber);
- border: 1px solid var(--border-color);
- border-bottom: 2px solid var(--terminal-green);
+ letter-spacing: 0.16em;
+ color: var(--accent-cyan);
+ text-shadow: var(--glow-cyan);
white-space: nowrap;
+ cursor: default;
+}
+
+.lt-table th[data-sort-key] { cursor: pointer; }
+.lt-table th[data-sort-key]:hover {
+ color: var(--accent-orange);
+ text-shadow: var(--glow-orange);
}
-.lt-table th::before { content: '> '; color: var(--terminal-green); }
-.lt-table th:has(input[type="checkbox"])::before { content: none; }
.lt-table td {
- padding: 10px 14px;
- font-size: 0.88rem;
+ padding: 0.55rem 0.85rem;
+ border-bottom: 1px solid var(--border-color-dim);
color: var(--text-primary);
- border: 1px solid var(--border-color-dim);
+ vertical-align: middle;
+ overflow-wrap: break-word;
word-break: break-word;
+ max-width: 280px; /* prevent single cell from expanding table beyond viewport */
}
+
+.lt-table tbody tr { transition: var(--transition-fast); }
.lt-table tbody tr:hover {
- background: rgba(0, 255, 65, 0.06);
- box-shadow: inset 0 0 20px rgba(0, 255, 65, 0.05);
+ background: rgba(0,212,255,0.04);
+ outline: 1px solid var(--border-color-dim);
+ outline-offset: -1px;
}
-/* Data table — compact, row-only separators, good for dense data */
-.lt-data-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); }
-.lt-data-table th {
- padding: 8px 12px;
- font-size: 0.72rem;
- font-weight: bold;
- color: var(--terminal-amber);
- text-transform: uppercase;
- letter-spacing: 0.08em;
- text-shadow: var(--glow-amber);
- background: var(--bg-tertiary);
- border-bottom: 1px solid var(--border-color);
+/* Row priority accent bars */
+.lt-row-critical, .lt-row-p1 {
+ border-left: 2px solid var(--priority-1) !important;
+ background: rgba(255,45,85,0.035) !important;
+}
+.lt-row-warning, .lt-row-p2 { border-left: 2px solid var(--priority-2) !important; }
+.lt-row-p3 { border-left: 2px solid var(--priority-3) !important; }
+.lt-row-p4 { border-left: 2px solid var(--priority-4) !important; }
+
+/* Compact data table */
+.lt-data-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.75rem;
}
-.lt-data-table th::before { content: '> '; color: var(--terminal-green); }
.lt-data-table td {
- padding: 7px 12px;
- font-size: 0.85rem;
- border-bottom: 1px solid rgba(0, 255, 65, 0.08);
+ padding: 0.3rem 0.5rem;
+ border-bottom: 1px solid var(--border-color-dim);
}
-.lt-data-table tbody tr:hover { background: rgba(0, 255, 65, 0.05); }
-
-/* Priority left-border accent (apply to ) */
-.lt-table tbody tr td:first-child,
-.lt-data-table tbody tr td:first-child { border-left: 4px solid transparent; }
-.lt-row-p1 td:first-child { border-left-color: var(--priority-1) !important; }
-.lt-row-p2 td:first-child { border-left-color: var(--priority-2) !important; }
-.lt-row-p3 td:first-child { border-left-color: var(--priority-3) !important; }
-.lt-row-p4 td:first-child { border-left-color: var(--priority-4) !important; }
-.lt-row-p5 td:first-child { border-left-color: var(--priority-5) !important; }
-
-/* Row state tints */
-.lt-row-critical td { background: rgba(255, 68, 68, 0.03); }
-.lt-row-warning td { background: rgba(255, 140, 0, 0.03); }
-.lt-row-success td { background: rgba(40, 167, 69, 0.03); }
-
-/* Keyboard-selected row (vim-style navigation) */
-.lt-row-selected {
- background: rgba(0, 255, 65, 0.12) !important;
- outline: 2px solid var(--terminal-green);
- outline-offset: -2px;
+.lt-data-table thead tr { border-bottom: 1px solid var(--border-color); }
+.lt-data-table th {
+ font-size: 0.62rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ color: var(--accent-cyan);
+ padding: 0.35rem 0.5rem;
}
+.lt-data-table-wrapper { padding: 0 var(--space-xs); }
-/* Scrollable table wrapper */
-.lt-table-wrap { overflow-x: auto; border: 2px solid var(--terminal-green); }
-
-/* Sortable column header */
-.lt-table th[data-sort] { cursor: pointer; }
-.lt-table th[data-sort]:hover { color: var(--terminal-green); text-shadow: var(--glow-green); }
-.lt-table th[data-sort="asc"]::after { content: ' ▲'; color: var(--terminal-green); }
-.lt-table th[data-sort="desc"]::after { content: ' ▼'; color: var(--terminal-green); }
/* ----------------------------------------------------------------
12. STATUS BADGES, CHIPS, PRIORITY
---------------------------------------------------------------- */
-
-/* Full status badge */
.lt-status {
display: inline-block;
- padding: 4px 12px;
- border: 2px solid;
- font-family: var(--font-mono);
- font-size: 0.82rem;
- font-weight: bold;
+ padding: 0.14rem 0.5rem;
+ font-size: 0.58rem;
+ font-weight: 700;
text-transform: uppercase;
- letter-spacing: 0.04em;
+ letter-spacing: 0.15em;
+ border: 1px solid currentColor;
+ background: transparent;
white-space: nowrap;
}
-.lt-status::before { content: '['; }
-.lt-status::after { content: ']'; }
-.lt-status-open { color: var(--status-open); border-color: var(--status-open); text-shadow: 0 0 5px var(--status-open), 0 0 10px var(--status-open); }
-.lt-status-open::before { content: '[●'; }
-.lt-status-pending { color: var(--status-pending); border-color: var(--status-pending); }
-.lt-status-pending::before { content: '[○'; }
-.lt-status-in-progress { color: var(--status-in-progress); border-color: var(--status-in-progress); }
-.lt-status-in-progress::before { content: '[◐'; animation: spin-status 2s linear infinite; }
-.lt-status-closed { color: var(--status-closed); border-color: var(--status-closed); }
-.lt-status-closed::before { content: '[✓'; }
-.lt-status-online { color: var(--status-online); border-color: var(--status-online); text-shadow: 0 0 5px var(--status-online); }
-.lt-status-online::before { content: '[●'; }
-.lt-status-offline { color: var(--status-offline); border-color: var(--status-offline); text-shadow: 0 0 5px var(--status-offline); animation: pulse-red 1.5s infinite; }
-.lt-status-offline::before { content: '[○'; }
-.lt-status-running { color: var(--status-running); border-color: var(--status-running); }
-.lt-status-running::before { content: '[◐'; animation: spin-status 2s linear infinite; }
-.lt-status-completed { color: var(--status-completed); border-color: var(--status-completed); }
-.lt-status-completed::before { content: '[✓'; }
-.lt-status-failed { color: var(--status-failed); border-color: var(--status-failed); text-shadow: 0 0 5px var(--status-failed); }
-.lt-status-failed::before { content: '[✗'; }
+.lt-status-open { color: var(--status-open); background: rgba(0,255,136,0.07); }
+.lt-status-pending { color: var(--status-pending); background: rgba(191,95,255,0.07); }
+.lt-status-in-progress { color: var(--status-in-progress); background: rgba(255,179,0,0.07); }
+.lt-status-closed { color: var(--status-closed); background: rgba(255,45,85,0.07); }
+.lt-status-online { color: var(--status-online); background: rgba(0,255,136,0.07); text-shadow: var(--glow-green); }
+.lt-status-offline { color: var(--status-offline); background: rgba(255,45,85,0.07); }
+.lt-status-running { color: var(--status-running); background: rgba(255,179,0,0.07); animation: pulse-amber 2s infinite; }
+.lt-status-completed { color: var(--status-completed); background: rgba(0,212,255,0.07); }
+.lt-status-failed { color: var(--status-failed); background: rgba(255,45,85,0.07); }
-/* Chip (small, compact status tag) */
-.lt-chip {
+/* Priority badges */
+.lt-priority,
+.lt-p1, .lt-p2, .lt-p3, .lt-p4, .lt-p5 {
display: inline-block;
- padding: 2px 8px;
- border: 1px solid;
- font-size: 0.75rem;
- font-weight: bold;
- letter-spacing: 0.04em;
+ padding: 0.12rem 0.45rem;
+ font-size: 0.58rem;
+ font-weight: 700;
text-transform: uppercase;
+ letter-spacing: 0.12em;
+ border: 1px solid currentColor;
}
-.lt-chip::before { content: '['; }
-.lt-chip::after { content: ']'; }
-.lt-chip-ok { color: var(--terminal-green); border-color: var(--terminal-green); text-shadow: var(--glow-green); }
-.lt-chip-warn { color: var(--terminal-orange); border-color: var(--terminal-orange); }
-.lt-chip-critical { color: var(--terminal-red); border-color: var(--terminal-red); text-shadow: var(--glow-red); animation: pulse-glow 2s infinite; }
-.lt-chip-info { color: var(--terminal-cyan); border-color: var(--terminal-cyan); text-shadow: var(--glow-cyan); }
-/* Badge (inline label, smallest) */
+.lt-p1 { color: var(--priority-1); background: rgba(255,45,85,0.09); border-color: rgba(255,45,85,0.4); text-shadow: var(--glow-red); }
+.lt-p2 { color: var(--priority-2); background: rgba(255,107,0,0.09); border-color: rgba(255,107,0,0.38); }
+.lt-p3 { color: var(--priority-3); background: rgba(0,212,255,0.07); border-color: rgba(0,212,255,0.30); }
+.lt-p4 { color: var(--priority-4); background: rgba(0,255,136,0.07); border-color: rgba(0,255,136,0.30); }
+.lt-p5 { color: var(--priority-5); background: rgba(62,96,122,0.09); border-color: rgba(62,96,122,0.30); }
+
+/* Chips */
+.lt-chip {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.15rem 0.5rem;
+ font-size: 0.58rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.12em;
+ border: 1px solid currentColor;
+}
+
+.lt-chip-ok { color: var(--accent-green); background: var(--accent-green-dim); text-shadow: var(--glow-green); }
+.lt-chip-warn { color: var(--accent-amber); background: var(--accent-amber-dim); }
+.lt-chip-critical { color: var(--accent-red); background: var(--accent-red-dim); text-shadow: var(--glow-red); }
+.lt-chip-info { color: var(--accent-cyan); background: var(--accent-cyan-dim); text-shadow: var(--glow-cyan); }
+
+/* Generic badges */
.lt-badge {
display: inline-block;
- padding: 1px 6px;
- border: 1px solid;
- font-size: 0.7rem;
- font-weight: bold;
- letter-spacing: 0.05em;
- text-transform: uppercase;
+ padding: 0.1rem 0.4rem;
+ font-size: 0.56rem;
+ font-weight: 700;
+ letter-spacing: 0.1em;
+ border: 1px solid currentColor;
}
-.lt-badge::before { content: '['; }
-.lt-badge::after { content: ']'; }
-.lt-badge-green { color: var(--terminal-green); border-color: var(--terminal-green); }
-.lt-badge-amber { color: var(--terminal-amber); border-color: var(--terminal-amber); }
-.lt-badge-red { color: var(--terminal-red); border-color: var(--terminal-red); }
-.lt-badge-cyan { color: var(--terminal-cyan); border-color: var(--terminal-cyan); }
-.lt-badge-muted { color: var(--text-muted); border-color: var(--border-color); }
+.lt-badge-green { color: var(--accent-green); }
+.lt-badge-amber { color: var(--accent-amber); }
+.lt-badge-red { color: var(--accent-red); }
-/* Priority badge */
-.lt-priority {
- display: inline-block;
- padding: 3px 10px;
- border: 1px solid;
- font-size: 0.78rem;
- font-weight: bold;
- letter-spacing: 0.04em;
- text-transform: uppercase;
- white-space: nowrap;
-}
-.lt-priority::before { content: '['; }
-.lt-priority::after { content: ']'; }
-.lt-p1 { color: var(--priority-1); border-color: var(--priority-1); text-shadow: 0 0 5px var(--priority-1); animation: pulse-glow 2s infinite; }
-.lt-p1::before { content: '[▲▲ P1 CRITICAL'; }
-.lt-p2 { color: var(--priority-2); border-color: var(--priority-2); }
-.lt-p2::before { content: '[▲ P2 HIGH'; }
-.lt-p3 { color: var(--priority-3); border-color: var(--priority-3); }
-.lt-p3::before { content: '[● P3 MED'; }
-.lt-p4 { color: var(--priority-4); border-color: var(--priority-4); }
-.lt-p4::before { content: '[▼ P4 LOW'; }
-.lt-p5 { color: var(--priority-5); border-color: var(--priority-5); }
-.lt-p5::before { content: '[▼▼ P5 MIN'; }
-
-/* Inline status dot */
+/* Status dots */
.lt-dot {
display: inline-block;
- width: 8px; height: 8px;
+ width: 8px;
+ height: 8px;
border-radius: 50%;
- border: 2px solid;
flex-shrink: 0;
}
-.lt-dot-up { background: var(--terminal-green); border-color: var(--terminal-green); box-shadow: 0 0 4px var(--terminal-green); }
-.lt-dot-down { background: var(--terminal-red); border-color: var(--terminal-red); animation: pulse-red 1.5s infinite; }
-.lt-dot-warn { background: var(--terminal-orange); border-color: var(--terminal-orange); }
-.lt-dot-idle { background: transparent; border-color: var(--text-muted); }
+.lt-dot-up { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green), 0 0 14px var(--accent-green); animation: pulse-green 2.2s ease-in-out infinite; }
+.lt-dot-down { background: var(--accent-red); box-shadow: 0 0 6px var(--accent-red), 0 0 12px var(--accent-red); }
+.lt-dot-warn { background: var(--accent-amber); box-shadow: 0 0 6px var(--accent-amber), 0 0 12px var(--accent-amber); animation: pulse-amber 2.2s ease-in-out infinite; }
+.lt-dot-idle { background: var(--text-muted); box-shadow: none; }
+
/* ----------------------------------------------------------------
13. MODALS
---------------------------------------------------------------- */
.lt-modal-overlay {
+ display: none;
position: fixed;
inset: 0;
- background: rgba(0, 0, 0, 0.88);
+ background: var(--bg-overlay);
+ backdrop-filter: blur(8px);
z-index: var(--z-modal-backdrop);
- display: none;
align-items: center;
justify-content: center;
- backdrop-filter: blur(2px);
}
-.lt-modal-overlay.show { display: flex; }
+.lt-modal-overlay.is-open { display: flex; }
.lt-modal {
position: relative;
background: var(--bg-secondary);
- border: 3px double var(--terminal-green);
- box-shadow: 0 0 30px rgba(0, 255, 65, 0.2), 0 8px 40px rgba(0, 0, 0, 0.8);
- width: 560px;
- max-width: 95vw;
- max-height: 90vh;
- overflow-y: auto;
- animation: modal-slide-in 0.3s ease;
+ border: 1px solid var(--accent-cyan-border);
+ width: min(520px, 92vw);
+ max-height: 85vh;
+ display: flex;
+ flex-direction: column;
+ box-shadow: var(--box-glow-cyan), 0 40px 80px rgba(0,0,0,0.85);
+ clip-path: polygon(
+ 0 0,
+ calc(100% - 18px) 0,
+ 100% 18px,
+ 100% 100%,
+ 18px 100%,
+ 0 calc(100% - 18px)
+ );
+ animation: modal-in 0.18s ease;
}
-
-/* Double-line corner decorations */
.lt-modal::before {
- content: '╔';
+ content: '';
position: absolute;
- top: -5px; left: -5px;
- font-size: 1.2rem;
- color: var(--terminal-green);
- text-shadow: var(--glow-green);
- line-height: 1;
-}
-.lt-modal::after {
- content: '╗';
- position: absolute;
- top: -5px; right: -5px;
- font-size: 1.2rem;
- color: var(--terminal-green);
- text-shadow: var(--glow-green);
- line-height: 1;
+ top: 0; left: 0; right: 0;
+ height: 1px;
+ background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
+ box-shadow: var(--glow-cyan);
}
.lt-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
- padding: var(--space-md) var(--space-lg);
- border-bottom: 2px solid var(--terminal-green);
- background: var(--bg-primary);
+ padding: 0.75rem 1rem;
+ border-bottom: 1px solid var(--border-color);
+ background: rgba(0,212,255,0.035);
+ flex-shrink: 0;
}
.lt-modal-title {
- font-size: 0.9rem;
- font-weight: bold;
- color: var(--terminal-amber);
- text-shadow: var(--glow-amber);
+ font-size: 0.72rem;
+ font-weight: 700;
text-transform: uppercase;
- letter-spacing: 0.08em;
+ letter-spacing: 0.16em;
+ color: var(--accent-orange);
+ text-shadow: var(--glow-orange);
}
-.lt-modal-title::before { content: '>> '; color: var(--terminal-green); }
.lt-modal-close {
- background: transparent;
- border: 1px solid var(--border-color);
+ background: none;
+ border: none;
color: var(--text-muted);
- cursor: pointer;
- font-family: var(--font-mono);
font-size: 0.85rem;
- padding: 2px 8px;
+ line-height: 1;
+ cursor: pointer;
+ padding: 0.2rem 0.4rem;
transition: var(--transition-fast);
}
-.lt-modal-close::before,
-.lt-modal-close::after { content: ''; } /* Override global btn brackets */
-.lt-modal-close:hover { color: var(--terminal-red); border-color: var(--terminal-red); text-shadow: var(--glow-red); transform: none; }
+.lt-modal-close:hover { color: var(--accent-red); text-shadow: var(--glow-red); }
-.lt-modal-body { padding: var(--space-lg); }
-.lt-modal-footer {
- display: flex;
- gap: var(--space-sm);
- justify-content: flex-end;
- padding: var(--space-md) var(--space-lg);
- border-top: 1px solid var(--border-color);
- background: var(--bg-primary);
+.lt-modal-body {
+ padding: var(--space-lg);
+ overflow-y: auto;
+ flex: 1;
+}
+
+.lt-modal-footer {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: var(--space-sm);
+ padding: 0.75rem 1rem;
+ border-top: 1px solid var(--border-color-dim);
+ background: rgba(0,0,0,0.25);
+ flex-shrink: 0;
}
-/* Wide variant */
-.lt-modal-lg { width: 800px; }
/* ----------------------------------------------------------------
14. TOAST NOTIFICATIONS
---------------------------------------------------------------- */
-.lt-toast-container {
+#lt-toast-container {
position: fixed;
bottom: var(--space-lg);
right: var(--space-lg);
- z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--space-sm);
+ z-index: var(--z-toast);
pointer-events: none;
}
@@ -1176,546 +1231,976 @@ pre {
display: flex;
align-items: center;
gap: var(--space-sm);
- padding: 10px 16px;
- background: var(--bg-secondary);
- border: 2px solid;
- font-family: var(--font-mono);
- font-size: 0.85rem;
- font-weight: bold;
- max-width: 420px;
+ padding: 0.5rem 0.9rem;
+ font-size: 0.7rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ min-width: 240px;
+ max-width: 380px;
+ border-left: 2px solid currentColor;
+ background: rgba(6,12,20,0.97);
+ backdrop-filter: blur(8px);
+ border-top: 1px solid rgba(255,255,255,0.04);
+ border-right: 1px solid rgba(255,255,255,0.04);
+ border-bottom: 1px solid rgba(255,255,255,0.04);
pointer-events: all;
- animation: slide-in-right 0.2s ease-out;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
+ animation: toast-in 0.2s ease;
+ clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
-.lt-toast::before { content: '>> '; flex-shrink: 0; }
-.lt-toast-success { color: var(--terminal-green); border-color: var(--terminal-green); text-shadow: var(--glow-green); }
-.lt-toast-error { color: var(--terminal-red); border-color: var(--terminal-red); text-shadow: var(--glow-red); }
-.lt-toast-warning { color: var(--terminal-amber); border-color: var(--terminal-amber); text-shadow: var(--glow-amber); }
-.lt-toast-info { color: var(--terminal-cyan); border-color: var(--terminal-cyan); text-shadow: var(--glow-cyan); }
-.lt-toast-icon { font-size: 1rem; flex-shrink: 0; }
-.lt-toast-msg { flex: 1; }
-.lt-toast-close {
- background: transparent; border: none;
- color: inherit; cursor: pointer;
- font-family: var(--font-mono);
- opacity: 0.6; font-size: 0.85rem;
- padding: 0 0 0 var(--space-sm);
-}
-.lt-toast-close::before,
-.lt-toast-close::after { content: ''; }
-.lt-toast-close:hover { opacity: 1; transform: none; }
+.lt-toast-success { color: var(--accent-green); border-left-color: var(--accent-green); box-shadow: var(--box-glow-green); }
+.lt-toast-error { color: var(--accent-red); border-left-color: var(--accent-red); box-shadow: var(--box-glow-red); }
+.lt-toast-warning { color: var(--accent-amber); border-left-color: var(--accent-amber); box-shadow: var(--box-glow-amber); }
+.lt-toast-info { color: var(--accent-cyan); border-left-color: var(--accent-cyan); box-shadow: var(--box-glow-cyan); }
+
/* ----------------------------------------------------------------
15. TAB NAVIGATION
---------------------------------------------------------------- */
.lt-tabs {
display: flex;
- gap: var(--space-sm);
- flex-wrap: wrap;
- background: var(--bg-secondary);
- border: 2px solid var(--border-color);
- padding: var(--space-sm);
+ align-items: flex-end;
+ gap: 2px;
+ border-bottom: 1px solid var(--border-color);
margin-bottom: var(--space-lg);
}
.lt-tab {
- display: inline-flex;
- align-items: center;
- padding: 8px 18px;
- background: transparent;
- color: var(--text-muted);
- border: 1px solid var(--border-color);
- cursor: pointer;
+ padding: 0.45rem 0.9rem;
font-family: var(--font-mono);
- font-size: 0.82rem;
- font-weight: bold;
+ font-size: 0.67rem;
+ font-weight: 700;
text-transform: uppercase;
- letter-spacing: 0.05em;
+ letter-spacing: 0.14em;
+ color: var(--text-muted);
+ background: transparent;
+ border: 1px solid transparent;
+ border-bottom: none;
+ cursor: pointer;
transition: var(--transition-fast);
}
-.lt-tab::before { content: '[ '; }
-.lt-tab::after { content: ' ]'; }
.lt-tab:hover {
- color: var(--terminal-green);
- border-color: var(--border-color-hi);
- background: var(--terminal-green-dim);
+ color: var(--text-secondary);
+ background: rgba(0,212,255,0.04);
+ border-color: var(--border-color-dim);
}
.lt-tab.active {
- color: var(--terminal-amber);
- border-color: var(--terminal-amber);
- background: var(--terminal-amber-dim);
- text-shadow: var(--glow-amber);
+ color: var(--accent-orange);
+ text-shadow: var(--glow-orange);
+ background: var(--bg-card);
+ border-color: var(--accent-orange-border);
+ border-bottom-color: var(--bg-card);
}
-.lt-tab-panel { display: none; }
+.lt-tab-panel { display: none; }
.lt-tab-panel.active { display: block; }
+
/* ----------------------------------------------------------------
16. SIDEBAR / FILTER PANEL
---------------------------------------------------------------- */
.lt-sidebar {
width: var(--sidebar-width);
- background: var(--bg-secondary);
- border: 2px solid var(--terminal-green);
flex-shrink: 0;
- overflow-y: auto;
- max-height: calc(100vh - var(--header-height) - 2rem);
- position: sticky;
- top: calc(var(--header-height) + var(--space-md));
+ background: var(--bg-secondary);
+ border: 1px solid var(--border-color);
+ transition: var(--transition-default);
}
+.lt-sidebar.collapsed { width: 32px; overflow: hidden; }
.lt-sidebar-header {
- padding: var(--space-sm) var(--space-md);
- background: var(--bg-primary);
- border-bottom: 1px solid var(--border-color);
- font-size: 0.75rem;
- font-weight: bold;
- color: var(--terminal-amber);
- text-transform: uppercase;
- letter-spacing: 0.08em;
display: flex;
align-items: center;
justify-content: space-between;
+ padding: 0.5rem 0.75rem;
+ font-size: 0.63rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+ color: var(--accent-cyan);
+ text-shadow: var(--glow-cyan);
+ border-bottom: 1px solid var(--border-color);
+ background: rgba(0,212,255,0.035);
}
-.lt-sidebar-header::before { content: '╠═ '; color: var(--terminal-green); }
+
+.lt-sidebar-toggle {
+ background: none;
+ border: none;
+ color: var(--text-muted);
+ font-size: 0.65rem;
+ cursor: pointer;
+ padding: 0.1rem 0.3rem;
+ transition: var(--transition-fast);
+}
+.lt-sidebar-toggle:hover { color: var(--accent-cyan); text-shadow: var(--glow-cyan); }
.lt-sidebar-body { padding: var(--space-md); }
-.lt-filter-group { margin-bottom: var(--space-lg); }
+.lt-filter-group {
+ margin-bottom: var(--space-md);
+ padding-bottom: var(--space-md);
+ border-bottom: 1px solid var(--border-color-dim);
+}
+.lt-filter-group:last-child { border-bottom: none; }
.lt-filter-label {
display: block;
- font-size: 0.75rem;
- font-weight: bold;
- color: var(--terminal-amber);
+ font-size: 0.6rem;
+ font-weight: 700;
text-transform: uppercase;
- letter-spacing: 0.07em;
+ letter-spacing: 0.15em;
+ color: var(--accent-orange);
margin-bottom: var(--space-sm);
- padding-bottom: var(--space-xs);
- border-bottom: 1px solid var(--border-color-dim);
}
.lt-filter-option {
display: flex;
align-items: center;
gap: var(--space-sm);
- padding: var(--space-xs) 0;
+ font-size: 0.75rem;
+ color: var(--text-secondary);
+ margin-bottom: var(--space-xs);
cursor: pointer;
- color: var(--text-primary);
- font-size: 0.85rem;
transition: var(--transition-fast);
}
-.lt-filter-option:hover { color: var(--terminal-amber); }
+.lt-filter-option:hover { color: var(--text-primary); }
-/* Collapse toggle */
-.lt-sidebar.collapsed .lt-sidebar-body { display: none; }
-.lt-sidebar-toggle {
- background: transparent;
- border: none;
- color: var(--text-muted);
- cursor: pointer;
- font-family: var(--font-mono);
- font-size: 0.8rem;
- padding: 0;
-}
-.lt-sidebar-toggle::before,
-.lt-sidebar-toggle::after { content: ''; }
/* ----------------------------------------------------------------
17. STATS WIDGETS
---------------------------------------------------------------- */
.lt-stats-grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.lt-stat-card {
- background: var(--bg-secondary);
- border: 2px solid var(--border-color);
- padding: var(--space-md);
+ position: relative;
display: flex;
align-items: center;
gap: var(--space-md);
- position: relative;
- transition: var(--transition-default);
+ padding: var(--space-md);
+ background: var(--bg-card);
+ border: 1px solid var(--border-color);
cursor: pointer;
-}
-.lt-stat-card::before {
- content: '┌';
- position: absolute;
- top: -3px; left: -3px;
- color: var(--terminal-green);
- line-height: 1;
-}
-.lt-stat-card::after {
- content: '┐';
- position: absolute;
- top: -3px; right: -3px;
- color: var(--terminal-green);
- line-height: 1;
-}
-.lt-stat-card:hover {
- border-color: var(--terminal-amber);
- box-shadow: var(--box-glow-amber);
- transform: translateY(-2px);
-}
-.lt-stat-card.active {
- background: var(--terminal-amber-dim);
- border-color: var(--terminal-amber);
+ transition: var(--transition-fast);
+ clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
+ overflow: hidden;
}
-.lt-stat-icon { font-size: 1.8rem; }
-.lt-stat-info { display: flex; flex-direction: column; gap: 2px; }
+/* Left accent bar */
+.lt-stat-card::before {
+ content: '';
+ position: absolute;
+ top: 0; left: 0;
+ width: 2px; height: 0%;
+ background: var(--accent-cyan);
+ box-shadow: var(--glow-cyan);
+ transition: height 0.3s ease;
+}
+
+.lt-stat-card:hover,
+.lt-stat-card.active {
+ background: var(--bg-tertiary);
+ border-color: var(--accent-cyan-border);
+ box-shadow: var(--box-glow-cyan);
+}
+.lt-stat-card:hover::before,
+.lt-stat-card.active::before { height: 100%; }
+
+.lt-stat-card.active {
+ border-color: var(--accent-orange-border);
+ box-shadow: var(--box-glow-orange);
+}
+.lt-stat-card.active::before {
+ background: var(--accent-orange);
+ box-shadow: var(--glow-orange);
+}
+
+.lt-stat-icon { font-size: 1.3rem; line-height: 1; opacity: 0.80; }
+.lt-stat-info { display: flex; flex-direction: column; }
+
.lt-stat-value {
font-size: 1.6rem;
- font-weight: bold;
- color: var(--terminal-green);
- text-shadow: 0 0 4px currentColor;
+ font-weight: 700;
line-height: 1;
+ color: var(--accent-orange);
+ text-shadow: var(--glow-orange);
}
+
.lt-stat-label {
- font-size: 0.68rem;
- color: var(--text-muted);
+ font-size: 0.58rem;
text-transform: uppercase;
- letter-spacing: 0.07em;
+ letter-spacing: 0.16em;
+ color: var(--text-muted);
+ margin-top: 2px;
}
+
/* ----------------------------------------------------------------
18. INLINE MESSAGES
---------------------------------------------------------------- */
.lt-msg {
- padding: var(--space-md) var(--space-lg);
- border: 2px solid;
- font-family: var(--font-mono);
- margin: var(--space-md) 0;
+ padding: 0.5rem 0.85rem;
+ font-size: 0.75rem;
+ border-left: 2px solid currentColor;
+ margin-bottom: var(--space-sm);
+ display: flex;
+ align-items: flex-start;
+ gap: var(--space-sm);
}
-.lt-msg-error { color: var(--terminal-red); border-color: var(--terminal-red); background: var(--terminal-red-dim); }
-.lt-msg-success { color: var(--status-open); border-color: var(--status-open); background: rgba(40, 167, 69, 0.08); }
-.lt-msg-warning { color: var(--terminal-amber); border-color: var(--terminal-amber); background: var(--terminal-amber-dim); }
-.lt-msg-info { color: var(--terminal-cyan); border-color: var(--terminal-cyan); background: var(--terminal-cyan-dim); }
-.lt-msg-error::before { content: '[✗] ERROR: '; font-weight: bold; }
-.lt-msg-success::before { content: '[✓] SUCCESS: '; font-weight: bold; }
-.lt-msg-warning::before { content: '[!] WARNING: '; font-weight: bold; }
-.lt-msg-info::before { content: '[i] INFO: '; font-weight: bold; }
+.lt-msg::before { flex-shrink: 0; font-weight: 700; }
+
+.lt-msg-error { color: var(--accent-red); background: var(--accent-red-dim); border-left-color: var(--accent-red); }
+.lt-msg-success { color: var(--accent-green); background: var(--accent-green-dim); border-left-color: var(--accent-green); }
+.lt-msg-warning { color: var(--accent-amber); background: var(--accent-amber-dim); border-left-color: var(--accent-amber); }
+.lt-msg-info { color: var(--accent-cyan); background: var(--accent-cyan-dim); border-left-color: var(--accent-cyan); }
+
+.lt-msg-error::before { content: '✗'; }
+.lt-msg-success::before { content: '✓'; }
+.lt-msg-warning::before { content: '!'; }
+.lt-msg-info::before { content: 'i'; }
+
/* ----------------------------------------------------------------
19. LOADING & EMPTY STATES
---------------------------------------------------------------- */
.lt-loading {
- text-align: center;
- padding: var(--space-xl);
- color: var(--terminal-green);
-}
-.lt-loading::before { content: '[ LOADING'; display: block; margin-bottom: var(--space-sm); }
-.lt-loading::after { content: '...'; animation: loading-dots 1.5s steps(4, end) infinite; }
-
-.lt-empty {
- text-align: center;
- padding: var(--space-xl) var(--space-lg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
color: var(--text-muted);
+ font-size: 0.72rem;
}
-.lt-empty::before {
- content: '[ NO DATA ]';
- display: block;
- font-size: 1.1rem;
- color: var(--terminal-green);
- text-shadow: var(--glow-green);
- margin-bottom: var(--space-sm);
+.lt-loading::before {
+ content: '';
+ display: inline-block;
+ width: 14px; height: 14px;
+ border: 2px solid var(--border-color);
+ border-top-color: var(--accent-cyan);
+ border-radius: 50%;
+ animation: spin 0.75s linear infinite;
+}
+.lt-loading::after {
+ content: 'Loading...';
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
}
-/* Skeleton shimmer for async content */
.lt-skeleton {
background: linear-gradient(
90deg,
- rgba(0, 255, 65, 0.04) 0%,
- rgba(0, 255, 65, 0.10) 50%,
- rgba(0, 255, 65, 0.04) 100%
+ var(--bg-secondary) 25%,
+ var(--bg-tertiary) 50%,
+ var(--bg-secondary) 75%
);
- background-size: 200% 100%;
- animation: skeleton-shimmer 1.5s ease-in-out infinite;
- border: 1px solid var(--border-color-dim);
- color: transparent;
- user-select: none;
+ background-size: 300% 100%;
+ animation: shimmer 1.8s ease-in-out infinite;
}
+.lt-empty {
+ color: var(--text-dim);
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ letter-spacing: 0.12em;
+ text-align: center;
+ padding: var(--space-xl);
+}
+.lt-empty::before { content: '[ '; color: var(--text-muted); }
+.lt-empty::after { content: ' ]'; color: var(--text-muted); }
+
+
/* ----------------------------------------------------------------
20. BOOT SEQUENCE OVERLAY
---------------------------------------------------------------- */
.lt-boot-overlay {
position: fixed;
inset: 0;
- background: var(--bg-primary);
- z-index: 99999;
+ background: #000;
+ z-index: calc(var(--z-overlay) + 1);
display: flex;
- align-items: center;
- justify-content: center;
- transition: opacity 0.5s ease;
+ align-items: flex-start;
+ justify-content: flex-start;
+ padding: var(--space-2xl);
+ animation: boot-fade 0.5s ease 2.2s forwards;
}
-.lt-boot-overlay.fade-out { opacity: 0; pointer-events: none; }
.lt-boot-text {
font-family: var(--font-mono);
- font-size: 0.9rem;
- color: var(--terminal-green);
+ font-size: 0.78rem;
+ color: var(--accent-green);
text-shadow: var(--glow-green);
line-height: 1.7;
- white-space: pre;
- padding: var(--space-xl);
+ white-space: pre-wrap;
+ overflow: hidden;
}
+
/* ----------------------------------------------------------------
21. LOG / TIMELINE ENTRIES
---------------------------------------------------------------- */
.lt-log-entry {
- padding: var(--space-md);
- background: var(--bg-secondary);
- border-left: 3px solid var(--terminal-green);
- margin-bottom: var(--space-sm);
- font-size: 0.88rem;
+ padding: 0.5rem 0.75rem;
+ border-left: 2px solid var(--border-color);
+ margin-bottom: 2px;
+ font-size: 0.75rem;
+ background: rgba(0,0,0,0.2);
transition: var(--transition-fast);
}
-.lt-log-entry::before { content: '> '; color: var(--terminal-amber); font-weight: bold; }
-.lt-log-entry:hover { background: var(--terminal-green-dim); border-left-width: 5px; }
-.lt-log-entry.error { border-left-color: var(--terminal-red); }
-.lt-log-entry.warning { border-left-color: var(--terminal-amber); }
-.lt-log-entry.success { border-left-color: var(--status-open); }
+.lt-log-entry:hover { background: rgba(0,212,255,0.025); }
+.lt-log-entry.success { border-left-color: var(--accent-green); }
+.lt-log-entry.warning { border-left-color: var(--accent-amber); }
+.lt-log-entry.error { border-left-color: var(--accent-red); }
.lt-log-ts {
- font-size: 0.78rem;
- color: var(--terminal-amber);
- margin-bottom: var(--space-xs);
+ font-size: 0.6rem;
+ color: var(--text-muted);
+ margin-bottom: 2px;
+ letter-spacing: 0.04em;
}
.lt-log-output {
+ font-size: 0.67rem;
+ color: var(--accent-green);
background: var(--bg-terminal);
- border: 1px solid var(--border-color-dim);
- padding: var(--space-sm);
- margin-top: var(--space-sm);
- max-height: 300px;
- overflow-y: auto;
- font-size: 0.82rem;
+ padding: 0.2rem 0.45rem;
+ margin-top: 0.35rem;
+ border-left: 1px solid var(--accent-green-border);
+ text-shadow: var(--glow-green);
}
-/* Timeline (vertical) */
-.lt-timeline { position: relative; padding-left: var(--space-xl); }
-.lt-timeline::before {
- content: '';
- position: absolute;
- left: 8px; top: 0; bottom: 0;
- width: 1px;
- background: var(--border-color);
-}
-.lt-timeline-item {
- position: relative;
+/* Toolbar row */
+.lt-toolbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--space-md);
+ padding: var(--space-sm) 0;
margin-bottom: var(--space-md);
}
-.lt-timeline-item::before {
- content: '●';
- position: absolute;
- left: calc(-1 * var(--space-xl) + 2px);
- color: var(--terminal-green);
- font-size: 0.6rem;
- top: 0.4rem;
+.lt-toolbar-left,
+.lt-toolbar-right {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
}
+/* Running / pulsing row */
+.lt-item-running { animation: running-pulse 3s ease-in-out infinite; }
+
+
/* ----------------------------------------------------------------
- 22. ANIMATIONS
+ 22. ANIMATIONS (KEYFRAMES)
---------------------------------------------------------------- */
-@keyframes scanline {
- 0% { transform: translateY(0); }
- 100% { transform: translateY(4px); }
+@keyframes pulse-green {
+ 0%, 100% { box-shadow: 0 0 4px var(--accent-green), 0 0 8px var(--accent-green); }
+ 50% { box-shadow: 0 0 8px var(--accent-green), 0 0 22px var(--accent-green), 0 0 36px rgba(0,255,136,0.35); }
}
-@keyframes flicker {
- 0% { opacity: 1; }
- 10% { opacity: 0.95; }
- 20% { opacity: 1; }
- 30% { opacity: 0.97; }
- 40% { opacity: 1; }
+@keyframes pulse-amber {
+ 0%, 100% { box-shadow: 0 0 4px var(--accent-amber), 0 0 8px var(--accent-amber); }
+ 50% { box-shadow: 0 0 8px var(--accent-amber), 0 0 20px var(--accent-amber); }
}
-@keyframes data-stream {
- 0% { content: '10101010'; opacity: 0.07; }
- 25% { content: '01010101'; opacity: 0.10; }
- 50% { content: '11001100'; opacity: 0.07; }
- 75% { content: '00110011'; opacity: 0.10; }
- 100% { content: '10101010'; opacity: 0.07; }
+@keyframes running-pulse {
+ 0%, 100% { border-color: var(--border-color); }
+ 50% { border-color: rgba(255,179,0,0.25); box-shadow: 0 0 14px rgba(255,179,0,0.12); }
}
-@keyframes boot-up {
- 0% { opacity: 0; filter: brightness(2) saturate(0); }
- 30% { opacity: 1; filter: brightness(1.5) saturate(0.5); }
- 100% { opacity: 1; filter: brightness(1) saturate(1); }
+@keyframes spin {
+ to { transform: rotate(360deg); }
}
-@keyframes modal-slide-in {
- from { transform: translateY(-30px); opacity: 0; }
- to { transform: translateY(0); opacity: 1; }
+@keyframes shimmer {
+ 0% { background-position: 100% 50%; }
+ 100% { background-position: 0% 50%; }
}
-@keyframes slide-in-right {
- from { transform: translateX(30px); opacity: 0; }
- to { transform: translateX(0); opacity: 1; }
+@keyframes toast-in {
+ from { opacity: 0; transform: translateX(16px); }
+ to { opacity: 1; transform: translateX(0); }
}
-@keyframes corner-pulse {
- 0%, 100% { text-shadow: var(--glow-green); }
- 50% { text-shadow: var(--glow-green-intense); }
+@keyframes modal-in {
+ from { opacity: 0; transform: scale(0.96) translateY(-10px); }
+ to { opacity: 1; transform: scale(1) translateY(0); }
}
-@keyframes subtle-pulse {
- 0%, 100% { text-shadow: var(--glow-amber); }
- 50% { text-shadow: var(--glow-amber-intense); }
+@keyframes boot-fade {
+ to { opacity: 0; pointer-events: none; }
}
-@keyframes pulse-glow {
- 0%, 100% { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor; }
- 50% { text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor; }
+@keyframes blink {
+ 0%, 49% { opacity: 1; }
+ 50%, 100% { opacity: 0; }
}
-@keyframes pulse-red {
- 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.5); }
- 50% { box-shadow: 0 0 6px 3px rgba(255, 68, 68, 0.2); }
+@keyframes glitch-1 {
+ 0%, 90%, 100% { clip-path: inset(0); transform: skewX(0); }
+ 92% { clip-path: inset(15% 0 72% 0); transform: skewX(-4deg); }
+ 94% { clip-path: inset(54% 0 22% 0); transform: skewX(3deg); }
+ 96% { clip-path: inset(30% 0 48% 0); transform: skewX(-2deg); }
}
-@keyframes focus-pulse {
- 0%, 100% { box-shadow: var(--glow-amber), inset 0 0 10px rgba(0, 0, 0, 0.5); }
- 50% { box-shadow: var(--glow-amber-intense), inset 0 0 10px rgba(0, 0, 0, 0.5); }
+@keyframes glitch-2 {
+ 0%, 90%, 100% { clip-path: inset(0); transform: skewX(0); }
+ 92% { clip-path: inset(60% 0 8% 0); transform: skewX(3deg); }
+ 94% { clip-path: inset(8% 0 68% 0); transform: skewX(-3deg); }
+ 96% { clip-path: inset(42% 0 38% 0); transform: skewX(1deg); }
}
-@keyframes spin-status {
- 0% { content: '[◐'; }
- 25% { content: '[◓'; }
- 50% { content: '[◑'; }
- 75% { content: '[◒'; }
- 100% { content: '[◐'; }
-}
-@keyframes spin-full {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
-}
-
-@keyframes loading-dots {
- 0%, 20% { content: '.'; }
- 40% { content: '..'; }
- 60%, 100% { content: '...'; }
-}
-
-@keyframes skeleton-shimmer {
- 0% { background-position: 200% 0; }
- 100% { background-position: -200% 0; }
-}
-
-@keyframes cursor-blink {
- 0%, 50% { opacity: 1; }
- 51%, 100% { opacity: 0; }
-}
-
-/* Item pulse for actively running tasks */
-@keyframes exec-running-pulse {
- 0%, 100% { border-color: var(--terminal-green); }
- 50% { border-color: var(--status-running); box-shadow: 0 0 8px rgba(255, 193, 7, 0.35); }
-}
-.lt-item-running { animation: exec-running-pulse 2s ease-in-out infinite; }
-
-/* ----------------------------------------------------------------
+/* ================================================================
23. RESPONSIVE DESIGN
- ---------------------------------------------------------------- */
-@media (max-width: 1400px) {
- .lt-grid-4 { grid-template-columns: repeat(3, 1fr); }
- .lt-stats-grid { grid-template-columns: repeat(4, 1fr); }
+
+ Breakpoint system (desktop-first with mobile-first enhancements):
+ xs: ≤ 479px tiny phones (iPhone SE 1st gen, Galaxy A)
+ sm: 480–767px phones (iPhone 14, Pixel 7, Galaxy S)
+ md: 768–1023px tablets (iPad mini/Air portrait)
+ lg: 1024–1279px laptops (iPad Pro landscape, MacBook Air 11")
+ xl: 1280–1535px desktops (MacBook Pro 13", 1080p portrait)
+ 2xl: 1536–1919px large (27" iMac, 1440p)
+ 3xl: 1920–2559px full HD (1080p monitor, 24")
+ 4k: ≥ 2560px 4K/ultrawide (4K, 1440p ultrawide)
+ ================================================================ */
+
+/* ── Breakpoint tokens (read by JS lt.viewport module) ── */
+:root {
+ --bp-xs: 479;
+ --bp-sm: 480;
+ --bp-md: 768;
+ --bp-lg: 1024;
+ --bp-xl: 1280;
+ --bp-2xl: 1536;
+ --bp-3xl: 1920;
+ --bp-4k: 2560;
}
-@media (max-width: 1200px) {
- .lt-sidebar { width: var(--sidebar-width-sm); }
- .lt-grid-4, .lt-grid-3 { grid-template-columns: repeat(2, 1fr); }
- .lt-stats-grid { grid-template-columns: repeat(3, 1fr); }
+/* ── Mobile nav drawer ── */
+.lt-menu-btn {
+ display: none;
+ flex-direction: column;
+ justify-content: center;
+ gap: 5px;
+ width: 36px; height: 36px;
+ padding: 6px;
+ background: none;
+ border: 1px solid var(--border-dim);
+ cursor: pointer;
+ flex-shrink: 0;
+}
+.lt-menu-btn span {
+ display: block;
+ height: 1px;
+ background: var(--accent-cyan);
+ transition: transform 0.2s ease, opacity 0.2s ease;
+ box-shadow: var(--glow-cyan);
+}
+.lt-menu-btn:focus-visible { outline: 1px solid var(--accent-cyan); outline-offset: 2px; }
+.lt-menu-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
+.lt-menu-btn.open span:nth-child(2) { opacity: 0; }
+.lt-menu-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
+
+.lt-nav-drawer {
+ position: fixed;
+ top: 0; left: 0; bottom: 0;
+ width: 280px;
+ background: var(--bg-secondary);
+ border-right: 1px solid var(--border-color);
+ box-shadow: 4px 0 32px rgba(0,0,0,0.8);
+ z-index: calc(var(--z-overlay) + 3);
+ transform: translateX(-100%);
+ transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+ overflow-y: auto;
+ overflow-x: hidden;
+ overscroll-behavior: contain;
+ display: flex;
+ flex-direction: column;
+}
+.lt-nav-drawer.open { transform: translateX(0); }
+
+.lt-nav-drawer-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--space-md) var(--space-lg);
+ border-bottom: 1px solid var(--border-color);
+ min-height: var(--header-height);
+}
+.lt-nav-drawer-close {
+ background: none;
+ border: 1px solid var(--border-dim);
+ color: var(--text-dim);
+ cursor: pointer;
+ width: 44px; height: 44px; /* 44px touch target */
+ font-size: 0.9rem;
+ display: flex; align-items: center; justify-content: center;
+ flex-shrink: 0;
+ transition: color 0.15s, border-color 0.15s;
+}
+.lt-nav-drawer-close:hover { color: var(--accent-red); border-color: var(--accent-red); }
+.lt-nav-drawer-close:focus-visible { outline: 1px solid var(--accent-cyan); outline-offset: 2px; }
+
+.lt-nav-drawer-links { padding: var(--space-sm) 0; flex: 1; }
+.lt-nav-drawer-link {
+ display: flex;
+ align-items: center;
+ padding: 0.75rem var(--space-lg);
+ font-family: var(--font-mono);
+ font-size: 0.8rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ color: var(--text-secondary);
+ text-decoration: none;
+ transition: color 0.15s, background 0.15s, padding-left 0.15s;
+ border-left: 2px solid transparent;
+ min-height: 44px;
+}
+.lt-nav-drawer-link:hover { color: var(--accent-cyan); background: rgba(0,212,255,0.06); padding-left: calc(var(--space-lg) + 4px); }
+.lt-nav-drawer-link:focus-visible { outline: none; color: var(--accent-cyan); background: rgba(0,212,255,0.10); box-shadow: inset 3px 0 0 var(--accent-cyan); }
+.lt-nav-drawer-link.active,
+.lt-nav-drawer-link[aria-current="page"] { color: var(--accent-orange); border-left-color: var(--accent-orange); background: rgba(255,107,0,0.06); }
+.lt-nav-drawer-link--indent { padding-left: calc(var(--space-lg) + var(--space-md)); font-size: 0.75rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
+.lt-nav-drawer-section {
+ padding: var(--space-sm) var(--space-lg) var(--space-xs);
+ font-family: var(--font-mono);
+ font-size: 0.6rem;
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ color: var(--text-dim);
+ border-top: 1px solid var(--border-dim);
+ margin-top: var(--space-xs);
}
-@media (max-width: 1024px) {
- .lt-layout { flex-direction: column; }
- .lt-sidebar { width: 100%; max-height: none; position: static; }
+.lt-nav-drawer-overlay {
+ display: none;
+ position: fixed;
+ inset: 0;
+ background: rgba(0,0,0,0.75);
+ backdrop-filter: blur(2px);
+ z-index: calc(var(--z-overlay) + 2);
+}
+.lt-nav-drawer-overlay.open { display: block; }
+
+
+/* ── Safe areas (iPhone notch / Dynamic Island / home bar) ── */
+@supports (padding: env(safe-area-inset-left)) {
+ /* Header: pad for notch in landscape, Dynamic Island on top */
+ .lt-header {
+ padding-left: max(var(--space-xl), env(safe-area-inset-left));
+ padding-right: max(var(--space-xl), env(safe-area-inset-right));
+ }
+ /* Main content: header-height already includes safe-area-top via header height —
+ only add safe-area-top once to avoid double-counting */
+ .lt-main {
+ padding-top: calc(var(--header-height) + env(safe-area-inset-top) + var(--space-lg));
+ }
+ /* Nav drawer: account for notch on both top and left (landscape) */
+ .lt-nav-drawer {
+ padding-top: max(var(--header-height), env(safe-area-inset-top));
+ padding-left: env(safe-area-inset-left);
+ }
+ /* Toast: stay above home bar */
+ #lt-toast-container {
+ bottom: max(var(--space-lg), calc(env(safe-area-inset-bottom) + var(--space-sm)));
+ right: max(var(--space-lg), env(safe-area-inset-right));
+ right: max(var(--space-sm), env(safe-area-inset-right)); /* SM override merged */
+ }
+ /* Bottom-fixed UI (modals, cmd palette at XS) */
+ .lt-modal-overlay.bottom-safe,
+ .lt-cmd-overlay.bottom-safe {
+ padding-bottom: env(safe-area-inset-bottom);
+ }
+}
+
+
+/* ── Touch / coarse pointer (finger-friendly tap targets) ── */
+@media (pointer: coarse) {
+ .lt-btn, .lt-input, .lt-select, .lt-textarea { min-height: 44px; }
+ .lt-btn-sm { min-height: 36px; }
+ .lt-nav-link { padding: 0 var(--space-md); min-height: 44px; display: inline-flex; align-items: center; }
+ .lt-accordion-header { min-height: 48px; }
+ .lt-tab { min-height: 44px; padding: var(--space-sm) var(--space-lg); }
+ .lt-list-item { min-height: 44px; }
+ .lt-page-btn { min-height: 36px; min-width: 36px; }
+ .lt-checkbox, .lt-radio { width: 20px; height: 20px; }
+ input[type="range"].lt-range { height: 8px; }
+ input[type="range"].lt-range::-webkit-slider-thumb { width: 22px; height: 22px; }
+}
+
+
+/* ── No-hover / touch devices ── */
+@media (hover: none) {
+ /* Suppress hover-only decorations on touch */
+ [data-tooltip]::before,
+ [data-tooltip]::after { display: none; }
+ /* Glitch causes expensive repaints on mobile — disable */
+ .lt-glitch::before,
+ .lt-glitch::after { display: none; }
+ /* Suppress padding-left shift on touch (causes layout jank on tap) */
+ .lt-nav-drawer-link:hover { padding-left: var(--space-lg); }
+}
+
+/* ── Coarse pointer — additional touch performance tweaks ── */
+@media (pointer: coarse) {
+ /* Disable infinite animations that drain battery on mobile */
+ .lt-dot-up, .lt-dot-warn { animation: none; }
+ .lt-status-running { animation: none; }
+ .lt-item-running { animation: none; }
+ /* Use simple pulsing glow instead for coarse-pointer devices */
+ .lt-dot-up { box-shadow: 0 0 6px var(--accent-green); }
+ .lt-dot-warn { box-shadow: 0 0 6px var(--accent-amber); }
+}
+
+
+/* ── High-DPI / Retina ── */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+ .lt-header::after { height: 0.5px; }
+ .lt-frame, .lt-card, .lt-input, .lt-select, .lt-btn { border-width: 0.5px; }
+ .lt-frame::before { font-size: 0.6rem; }
+}
+
+
+/* ── Landscape phone (short viewport) ── */
+@media (max-height: 500px) and (orientation: landscape) {
+ :root { --header-height: 42px; }
+ .lt-main { padding-top: calc(42px + var(--space-md)); }
+ .lt-boot-overlay { display: none; }
+ .lt-modal {
+ align-items: flex-start;
+ padding-top: 48px;
+ overflow-y: auto;
+ }
+ .lt-modal .lt-modal { max-height: calc(100vh - 56px); overflow-y: auto; }
+}
+
+
+/* ── LG — laptops 1024–1279px ── */
+@media (max-width: 1279px) {
+ .lt-grid-4 { grid-template-columns: repeat(2, 1fr); }
+ .lt-container { padding: var(--space-lg); }
+}
+
+
+/* ── MD — tablets portrait 768–1023px ── */
+@media (max-width: 1023px) {
+ .lt-menu-btn { display: flex; }
+ .lt-nav { display: none; }
+
+ .lt-grid-3, .lt-grid-4 { grid-template-columns: repeat(2, 1fr); }
.lt-stats-grid { grid-template-columns: repeat(2, 1fr); }
- .lt-grid-3 { grid-template-columns: repeat(2, 1fr); }
+ .lt-container { padding: var(--space-md) var(--space-lg); }
+ .lt-header { padding: 0 var(--space-lg); }
+
+ /* Sidebar becomes off-canvas on tablets */
+ .lt-sidebar {
+ position: fixed;
+ top: var(--header-height);
+ left: 0; bottom: 0;
+ width: var(--sidebar-width);
+ transform: translateX(-100%);
+ transition: transform 0.25s ease;
+ z-index: var(--z-fixed);
+ border-right: 1px solid var(--border-color);
+ overflow-y: auto;
+ }
+ .lt-sidebar.open { transform: translateX(0); }
+ .lt-layout { display: block; }
+ .lt-content { width: 100%; }
}
-@media (max-width: 768px) {
+
+/* ── SM — phones 480–767px ── */
+@media (max-width: 767px) {
:root { --header-height: 50px; }
+ .lt-main { padding-top: calc(50px + var(--space-md)); }
+
+ .lt-container { padding: var(--space-md); }
.lt-header { padding: 0 var(--space-md); }
- .lt-nav { display: none; } /* Replace with hamburger menu on mobile */
.lt-brand-subtitle { display: none; }
- .lt-main { padding: var(--space-md); }
- .lt-grid-2 { grid-template-columns: 1fr; }
+
+ .lt-grid-2, .lt-grid-3, .lt-grid-4 { grid-template-columns: 1fr; }
.lt-stats-grid { grid-template-columns: repeat(2, 1fr); }
- .lt-modal { width: 100%; max-width: none; margin: var(--space-md); }
- .lt-table { font-size: 0.8rem; }
- .lt-table th, .lt-table td { padding: 8px; }
+
+ .lt-toolbar { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
+ .lt-page-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
+ .lt-btn-group { flex-wrap: wrap; }
+
+ /* Full-width modals on phone */
+ .lt-modal {
+ width: 96vw;
+ max-height: 90vh;
+ overflow-y: auto;
+ }
+
+ /* Command palette full-width */
+ .lt-cmd-palette {
+ max-width: 96vw;
+ clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
+ }
+
+ /* Smaller clip corners feel better on mobile */
+ .lt-frame {
+ clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
+ }
+ .lt-card {
+ clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
+ }
+
+ /* Toast full-width on phone */
+ #lt-toast-container {
+ left: var(--space-sm);
+ right: var(--space-sm);
+ bottom: var(--space-md);
+ }
+ .lt-toast { width: 100%; }
+
+ /* Stepper goes vertical on small screens */
+ .lt-stepper { flex-direction: column; gap: var(--space-sm); }
+ .lt-step { flex-direction: row; align-items: center; gap: var(--space-md); text-align: left; }
+ .lt-step:not(:last-child)::after {
+ display: none;
+ }
+ .lt-step-num { margin-bottom: 0; flex-shrink: 0; }
+
+ /* KV grid stacks on mobile */
+ .lt-kv-grid { grid-template-columns: 1fr; }
+ .lt-kv-key { border-right: none; border-bottom: 1px solid var(--border-dim); padding: var(--space-xs) 0 2px; }
+ .lt-kv-val { padding: 2px 0 var(--space-sm); }
+
+ /* Pagination compact — show fewer buttons via CSS */
+ .lt-page-btn:not(.active):not(:first-child):not(:last-child):not([disabled]) {
+ display: none;
+ }
+ .lt-page-btn.active,
+ .lt-page-btn:first-child,
+ .lt-page-btn:last-child { display: inline-flex; }
+
+ /* Dropzone: smaller on mobile */
+ .lt-dropzone { padding: var(--space-lg) var(--space-md); }
+ .lt-dropzone-icon { font-size: 1.5rem; }
+
+ /* Section body: tighter on mobile */
+ .lt-section-body { padding: var(--space-sm); padding-right: var(--space-md); }
+
+ /* Data table card mode already at 640px; also reduce font */
+ .lt-data-table th,
+ .lt-data-table td { padding: 0.5rem 0.6rem; font-size: 0.75rem; }
+
+ /* Hero */
+ .lt-hero { padding: var(--space-lg) 0; }
+ .lt-hero-actions { flex-direction: column; align-items: stretch; }
+
+ /* Code block: tighter font on phone */
+ .lt-code-block pre { font-size: 0.72rem; }
+
+ /* Stats grid gap tighter */
+ .lt-stats-grid { gap: var(--space-sm); }
+ .lt-stat-card { padding: var(--space-sm); }
+ .lt-stat-value { font-size: 1.6rem; }
}
-@media (max-width: 480px) {
- .lt-main { padding: var(--space-sm); }
- .lt-stats-grid { grid-template-columns: 1fr 1fr; }
- .lt-btn { padding: 8px 14px; font-size: 0.8rem; }
- .lt-toast-container { left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); }
- .lt-toast { max-width: none; }
+
+/* ── XS — tiny phones ≤ 479px ── */
+@media (max-width: 479px) {
+ :root { --header-height: 46px; }
+ .lt-main { padding-top: calc(46px + var(--space-sm)); }
+
+ .lt-container { padding: var(--space-sm); }
+ .lt-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xs); }
+ .lt-stat-card { padding: var(--space-xs) var(--space-sm); }
+ .lt-stat-value { font-size: 1.4rem; }
+
+ .lt-frame { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
+ /* Ensure content clears the 6px clipped corner */
+ .lt-section-body { padding: var(--space-xs) var(--space-sm); padding-right: 14px; }
+
+ /* Full-width drawer on tiny phones */
+ .lt-nav-drawer { width: 100%; max-width: 100vw; }
+
+ /* Btn groups stack vertically only in primary action areas, not everywhere */
+ .lt-page-header .lt-btn-group { flex-direction: column; width: 100%; }
+ .lt-page-header .lt-btn-group .lt-btn { width: 100%; }
+
+ /* Full-screen bottom-sheet modal on XS */
+ .lt-modal-overlay { align-items: flex-end; padding: 0; }
+ .lt-modal {
+ width: 100%;
+ max-width: 100vw;
+ max-height: 92vh;
+ overflow-y: auto;
+ clip-path: none;
+ border: none;
+ border-top: 1px solid var(--border-color);
+ border-radius: 0;
+ /* Bottom sheet rounding illusion via top corners */
+ clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
+ }
+ .lt-modal-body { max-height: calc(92vh - 120px); overflow-y: auto; }
+
+ /* Full-screen bottom-sheet command palette on XS */
+ .lt-cmd-overlay { align-items: flex-end; padding-top: 0; }
+ .lt-cmd-palette {
+ max-width: 100%;
+ width: 100%;
+ clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
+ border-bottom: none;
+ }
+
+ .lt-data-table th,
+ .lt-data-table td { padding: 0.35rem 0.5rem; font-size: 0.7rem; }
+
+ .lt-tab { padding: var(--space-xs) var(--space-sm); font-size: 0.65rem; }
}
+
+/* ── 2XL — large desktops 1536–1919px ── */
+@media (min-width: 1536px) {
+ :root { --container-max: 1800px; }
+ .lt-header { padding: 0 var(--space-2xl); }
+ .lt-stats-grid { grid-template-columns: repeat(5, 1fr); }
+}
+
+
+/* ── 3XL — full HD 1920–2559px ── */
+@media (min-width: 1920px) {
+ :root { --container-max: 2000px; }
+ .lt-stats-grid { grid-template-columns: repeat(6, 1fr); }
+ .lt-grid-4 { grid-template-columns: repeat(4, 1fr); }
+ .lt-container { padding: var(--space-xl) var(--space-2xl); }
+}
+
+
+/* ── 4K / ULTRA-WIDE ≥ 2560px ── */
+@media (min-width: 2560px) {
+ html { font-size: 18px; } /* scales all rem-based values ~12% larger */
+ :root {
+ --container-max: 2400px;
+ --header-height: 4rem; /* 72px at 18px base — was 64px hardcoded */
+ --sidebar-width: 17.5rem; /* 315px at 18px base — was 280px hardcoded */
+ }
+ /* Clip-path corners scale proportionally */
+ .lt-frame {
+ clip-path: polygon(0 0, calc(100% - 1.25rem) 0, 100% 1.25rem, 100% 100%, 1.25rem 100%, 0 calc(100% - 1.25rem));
+ }
+ .lt-card {
+ clip-path: polygon(0 0, calc(100% - 0.75rem) 0, 100% 0.75rem, 100% 100%, 0 100%);
+ }
+ .lt-stats-grid { grid-template-columns: repeat(8, 1fr); }
+ /* Scale hardcoded-px elements explicitly at 4K */
+ .lt-dot { width: 0.6rem; height: 0.6rem; } /* was 8px */
+ .lt-menu-btn { width: 2.5rem; height: 2.5rem; } /* was 36px */
+ .lt-nav-drawer-close { width: 3rem; height: 3rem; } /* was 44px */
+ .lt-step-num { width: 2rem; height: 2rem; } /* was 28px */
+ .lt-spinner { width: 1.75rem; height: 1.75rem; } /* was 24px */
+ .lt-spinner--sm { width: 1rem; height: 1rem; } /* was 14px */
+ .lt-spinner--lg { width: 2.75rem; height: 2.75rem; } /* was 40px */
+ .lt-checkbox, .lt-radio { width: 1.1rem; height: 1.1rem; } /* was 14px */
+ /* More pronounced glows at 4K */
+ :root {
+ --glow-orange: 0 0 8px #FF6B00, 0 0 24px rgba(255,107,0,0.6);
+ --glow-cyan: 0 0 8px #00D4FF, 0 0 24px rgba(0,212,255,0.6);
+ --glow-green: 0 0 8px #00FF88, 0 0 22px rgba(0,255,136,0.55);
+ --glow-red: 0 0 8px #FF2D55, 0 0 22px rgba(255,45,85,0.55);
+ --glow-orange-intense: 0 0 10px #FF6B00, 0 0 28px #FF6B00, 0 0 50px rgba(255,107,0,0.5);
+ --glow-cyan-intense: 0 0 10px #00D4FF, 0 0 28px #00D4FF, 0 0 48px rgba(0,212,255,0.4);
+ --glow-green-intense: 0 0 10px #00FF88, 0 0 26px #00FF88, 0 0 44px rgba(0,255,136,0.4);
+ --glow-amber-intense: 0 0 10px #FFB300, 0 0 24px #FFB300, 0 0 42px rgba(255,179,0,0.5);
+ }
+}
+
+
+/* ── Breakpoint visibility utilities ── */
+/* Hide at specific breakpoints */
+@media (max-width: 479px) { .lt-hide-xs { display: none !important; } }
+@media (max-width: 767px) { .lt-hide-sm { display: none !important; } }
+@media (max-width: 1023px) { .lt-hide-md { display: none !important; } }
+@media (max-width: 1279px) { .lt-hide-lg { display: none !important; } }
+@media (min-width: 480px) { .lt-show-xs { display: none !important; } }
+@media (min-width: 768px) { .lt-show-sm { display: none !important; } }
+@media (min-width: 1024px) { .lt-show-md { display: none !important; } }
+@media (min-width: 1280px) { .lt-show-lg { display: none !important; } }
+/* Touch-only / desktop-only */
+@media (pointer: fine) { .lt-touch-only { display: none !important; } }
+@media (pointer: coarse) { .lt-mouse-only { display: none !important; } }
+
+
/* ----------------------------------------------------------------
24. UTILITY CLASSES
---------------------------------------------------------------- */
-.lt-text-green { color: var(--terminal-green) !important; text-shadow: var(--glow-green); }
-.lt-text-amber { color: var(--terminal-amber) !important; text-shadow: var(--glow-amber); }
-.lt-text-red { color: var(--terminal-red) !important; }
-.lt-text-cyan { color: var(--terminal-cyan) !important; }
-.lt-text-muted { color: var(--text-muted) !important; }
-.lt-text-mono { font-family: var(--font-mono) !important; }
-.lt-text-upper { text-transform: uppercase; letter-spacing: 0.06em; }
-.lt-text-sm { font-size: 0.8rem; }
-.lt-text-xs { font-size: 0.7rem; }
-.lt-no-wrap { white-space: nowrap; }
+.lt-text-orange { color: var(--accent-orange); text-shadow: var(--glow-orange); }
+.lt-text-amber { color: var(--accent-amber); text-shadow: var(--glow-amber); }
+.lt-text-cyan { color: var(--accent-cyan); text-shadow: var(--glow-cyan); }
+.lt-text-green { color: var(--accent-green); text-shadow: var(--glow-green); }
+.lt-text-red { color: var(--accent-red); text-shadow: var(--glow-red); }
+.lt-text-muted { color: var(--text-muted); }
+.lt-text-dim { color: var(--text-dim); }
-.lt-flex { display: flex; align-items: center; }
-.lt-flex-between { display: flex; align-items: center; justify-content: space-between; }
-.lt-flex-wrap { flex-wrap: wrap; }
-.lt-gap-xs { gap: var(--space-xs); }
-.lt-gap-sm { gap: var(--space-sm); }
-.lt-gap-md { gap: var(--space-md); }
-.lt-mt-sm { margin-top: var(--space-sm); }
-.lt-mt-md { margin-top: var(--space-md); }
-.lt-mb-md { margin-bottom: var(--space-md); }
-.lt-mb-lg { margin-bottom: var(--space-lg); }
-.lt-p-md { padding: var(--space-md); }
+.lt-text-xs { font-size: 0.63rem; }
+.lt-text-sm { font-size: 0.78rem; }
+.lt-text-lg { font-size: 1rem; }
+.lt-text-xl { font-size: 1.2rem; }
+.lt-text-upper { text-transform: uppercase; letter-spacing: 0.1em; }
-/* Screen reader only */
-.lt-sr-only {
- position: absolute; width: 1px; height: 1px;
- padding: 0; margin: -1px; overflow: hidden;
- clip: rect(0,0,0,0); white-space: nowrap; border: 0;
+.lt-hidden { display: none !important; }
+.lt-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
+
+/* Cursor blink */
+.lt-cursor::after {
+ content: '█';
+ color: var(--accent-cyan);
+ text-shadow: var(--glow-cyan);
+ animation: blink 1s step-start infinite;
+ font-size: 0.85em;
+ margin-left: 1px;
}
+/* Glitch text effect */
+.lt-glitch { position: relative; }
+.lt-glitch::before,
+.lt-glitch::after {
+ content: attr(data-text);
+ position: absolute;
+ top: 0; left: 0;
+ width: 100%;
+ overflow: hidden;
+}
+.lt-glitch::before {
+ color: var(--accent-cyan);
+ opacity: 0.65;
+ animation: glitch-1 4s infinite;
+}
+.lt-glitch::after {
+ color: var(--accent-orange);
+ opacity: 0.65;
+ animation: glitch-2 4s 0.12s infinite;
+}
+
+
/* ----------------------------------------------------------------
25. PRINT STYLES
---------------------------------------------------------------- */
@media print {
body::before, body::after { display: none; }
- .lt-header, .lt-sidebar, .lt-tabs,
- .lt-modal-overlay, .lt-toast-container { display: none !important; }
- .lt-main { padding: 0; }
- body { background: white; color: black; animation: none; }
- .lt-card, .lt-frame { border: 1px solid #333; box-shadow: none; }
- a { color: black; }
+ html { background-image: none; background-color: white; }
+ body { background: white; color: black; }
+ .lt-header, .lt-boot-overlay, #lt-toast-container { display: none; }
+ .lt-frame, .lt-card { border: 1px solid #ccc; clip-path: none; }
}
+
/* ----------------------------------------------------------------
26. ACCESSIBILITY
---------------------------------------------------------------- */
:focus-visible {
- outline: 2px solid var(--terminal-amber);
+ outline: 1px solid var(--accent-cyan);
outline-offset: 2px;
+ box-shadow: var(--box-glow-cyan);
}
@media (prefers-reduced-motion: reduce) {
@@ -1724,6 +2209,1060 @@ pre {
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
- body::before { animation: none; }
- body { animation: none; }
}
+
+
+/* ----------------------------------------------------------------
+ 27. PROGRESS BARS
+ ---------------------------------------------------------------- */
+.lt-progress {
+ width: 100%;
+ height: 6px;
+ background: var(--bg-tertiary);
+ border: 1px solid var(--border-dim);
+ overflow: hidden;
+ position: relative;
+}
+.lt-progress-bar {
+ height: 100%;
+ background: var(--accent-orange);
+ box-shadow: var(--glow-orange);
+ transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+ position: relative;
+}
+.lt-progress-bar::after {
+ content: '';
+ position: absolute;
+ top: 0; right: 0;
+ width: 20px;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4));
+}
+.lt-progress--cyan .lt-progress-bar { background: var(--accent-cyan); box-shadow: var(--glow-cyan); }
+.lt-progress--green .lt-progress-bar { background: var(--accent-green); box-shadow: var(--glow-green); }
+.lt-progress--red .lt-progress-bar { background: var(--accent-red); box-shadow: var(--glow-red); }
+.lt-progress--striped .lt-progress-bar {
+ background-image: repeating-linear-gradient(
+ 45deg, transparent, transparent 4px,
+ rgba(0,0,0,0.25) 4px, rgba(0,0,0,0.25) 8px
+ );
+}
+.lt-progress--lg { height: 12px; }
+.lt-progress--sm { height: 3px; }
+.lt-progress-label {
+ display: flex;
+ justify-content: space-between;
+ font-size: 0.7rem;
+ color: var(--text-dim);
+ margin-bottom: var(--space-xs);
+ font-family: var(--font-mono);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
+
+
+/* ----------------------------------------------------------------
+ 28. TOOLTIPS
+ ---------------------------------------------------------------- */
+[data-tooltip] {
+ position: relative;
+ cursor: help;
+}
+[data-tooltip]::before,
+[data-tooltip]::after {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.15s ease, transform 0.15s ease;
+ z-index: var(--z-tooltip);
+}
+[data-tooltip]::before {
+ content: attr(data-tooltip);
+ background: var(--bg-secondary);
+ border: 1px solid var(--accent-cyan);
+ box-shadow: var(--box-glow-cyan);
+ color: var(--text-primary);
+ font-family: var(--font-mono);
+ font-size: 0.7rem;
+ padding: 4px 8px;
+ white-space: nowrap;
+ bottom: calc(100% + 8px);
+ left: 50%;
+ transform: translateX(-50%) translateY(4px);
+ clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
+}
+[data-tooltip]::after {
+ content: '';
+ border: 5px solid transparent;
+ border-top-color: var(--accent-cyan);
+ bottom: calc(100% + 3px);
+ left: 50%;
+ transform: translateX(-50%) translateY(4px);
+}
+[data-tooltip]:hover::before,
+[data-tooltip]:hover::after {
+ opacity: 1;
+ transform: translateX(-50%) translateY(0);
+}
+[data-tooltip][data-tooltip-pos="bottom"]::before {
+ bottom: auto;
+ top: calc(100% + 8px);
+ transform: translateX(-50%) translateY(-4px);
+ clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
+}
+[data-tooltip][data-tooltip-pos="bottom"]::after {
+ bottom: auto;
+ top: calc(100% + 3px);
+ border-top-color: transparent;
+ border-bottom-color: var(--accent-cyan);
+ transform: translateX(-50%) translateY(-4px);
+}
+[data-tooltip][data-tooltip-pos="bottom"]:hover::before,
+[data-tooltip][data-tooltip-pos="bottom"]:hover::after {
+ transform: translateX(-50%) translateY(0);
+}
+
+
+/* ----------------------------------------------------------------
+ 29. BREADCRUMBS
+ ---------------------------------------------------------------- */
+.lt-breadcrumb {
+ display: flex;
+ align-items: center;
+ gap: var(--space-xs);
+ font-family: var(--font-mono);
+ font-size: 0.75rem;
+ color: var(--text-dim);
+ flex-wrap: wrap;
+}
+.lt-breadcrumb-item { display: flex; align-items: center; gap: var(--space-xs); }
+.lt-breadcrumb-item a {
+ color: var(--text-dim);
+ text-decoration: none;
+ transition: color 0.15s;
+}
+.lt-breadcrumb-item a:hover { color: var(--accent-cyan); }
+.lt-breadcrumb-item.active { color: var(--accent-orange); }
+.lt-breadcrumb-sep { color: var(--border-dim); }
+.lt-breadcrumb-sep::before { content: '/'; }
+
+
+/* ----------------------------------------------------------------
+ 30. PAGINATION
+ ---------------------------------------------------------------- */
+.lt-pagination {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ font-family: var(--font-mono);
+ font-size: 0.75rem;
+}
+.lt-page-btn {
+ padding: 4px 10px;
+ background: var(--bg-tertiary);
+ border: 1px solid var(--border-dim);
+ color: var(--text-secondary);
+ cursor: pointer;
+ transition: all 0.15s;
+ text-decoration: none;
+ clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%);
+}
+.lt-page-btn:hover {
+ border-color: var(--accent-cyan);
+ color: var(--accent-cyan);
+ box-shadow: var(--box-glow-cyan);
+}
+.lt-page-btn.active {
+ background: var(--accent-orange);
+ border-color: var(--accent-orange);
+ color: var(--bg-primary);
+ box-shadow: var(--glow-orange);
+ font-weight: 700;
+}
+.lt-page-btn:disabled,
+.lt-page-btn[aria-disabled="true"] {
+ opacity: 0.35;
+ cursor: not-allowed;
+ pointer-events: none;
+}
+
+
+/* ----------------------------------------------------------------
+ 31. ACCORDION
+ ---------------------------------------------------------------- */
+.lt-accordion { border: 1px solid var(--border-dim); }
+.lt-accordion + .lt-accordion { border-top: none; }
+.lt-accordion-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: var(--space-sm) var(--space-md);
+ background: var(--bg-secondary);
+ cursor: pointer;
+ font-family: var(--font-mono);
+ font-size: 0.8rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ color: var(--text-primary);
+ transition: background 0.15s, color 0.15s;
+ user-select: none;
+ border: none;
+ width: 100%;
+ text-align: left;
+}
+.lt-accordion-header:hover { background: var(--bg-tertiary); color: var(--accent-cyan); }
+.lt-accordion-header[aria-expanded="true"] { color: var(--accent-orange); }
+.lt-accordion-icon {
+ width: 14px;
+ height: 14px;
+ transition: transform 0.25s ease;
+ flex-shrink: 0;
+}
+.lt-accordion-header[aria-expanded="true"] .lt-accordion-icon { transform: rotate(180deg); }
+.lt-accordion-body {
+ overflow: hidden;
+ height: 0;
+ transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+ background: var(--bg-primary);
+}
+/* .is-open height is set dynamically by JS (scrollHeight) */
+.lt-accordion-body.is-open { height: auto; }
+.lt-accordion-content { padding: var(--space-md); }
+
+
+/* ----------------------------------------------------------------
+ 32. ALERT BANNERS
+ ---------------------------------------------------------------- */
+.lt-alert {
+ display: flex;
+ align-items: flex-start;
+ gap: var(--space-sm);
+ padding: var(--space-sm) var(--space-md);
+ border-left: 3px solid var(--accent-cyan);
+ background: rgba(0,212,255,0.06);
+ font-family: var(--font-mono);
+ font-size: 0.8rem;
+ position: relative;
+ overflow: hidden;
+ transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
+ clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
+}
+.lt-alert--warning { border-left-color: var(--accent-orange); background: rgba(255,107,0,0.06); }
+.lt-alert--error { border-left-color: var(--accent-red); background: rgba(255,45,85,0.06); }
+.lt-alert--success { border-left-color: var(--accent-green); background: rgba(0,255,136,0.06); }
+.lt-alert--purple { border-left-color: var(--accent-purple); background: rgba(191,95,255,0.06); }
+.lt-alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
+.lt-alert-body { flex: 1; }
+.lt-alert-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); margin-bottom: 2px; }
+.lt-alert-msg { color: var(--text-secondary); }
+.lt-alert-close {
+ background: none;
+ border: none;
+ color: var(--text-dim);
+ cursor: pointer;
+ font-size: 1rem;
+ padding: 0 0 0 var(--space-sm);
+ line-height: 1;
+ flex-shrink: 0;
+ transition: color 0.15s;
+}
+.lt-alert-close:hover { color: var(--accent-red); }
+.lt-alert.dismissed { max-height: 0 !important; opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
+
+
+/* ----------------------------------------------------------------
+ 33. TOGGLE SWITCH
+ ---------------------------------------------------------------- */
+.lt-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--space-sm);
+ cursor: pointer;
+ font-family: var(--font-mono);
+ font-size: 0.8rem;
+}
+.lt-toggle input { display: none; }
+.lt-toggle-track {
+ width: 36px;
+ height: 18px;
+ background: var(--bg-tertiary);
+ border: 1px solid var(--border-dim);
+ border-radius: 0;
+ position: relative;
+ transition: all 0.2s ease;
+ clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
+}
+.lt-toggle input:checked ~ .lt-toggle-track {
+ background: var(--accent-orange);
+ border-color: var(--accent-orange);
+ box-shadow: var(--glow-orange);
+}
+.lt-toggle-thumb {
+ position: absolute;
+ top: 2px; left: 2px;
+ width: 12px; height: 12px;
+ background: var(--text-dim);
+ transition: transform 0.2s ease, background 0.2s ease;
+}
+.lt-toggle input:checked ~ .lt-toggle-track .lt-toggle-thumb {
+ transform: translateX(18px);
+ background: var(--bg-primary);
+}
+.lt-toggle-label { color: var(--text-secondary); user-select: none; }
+.lt-toggle input:checked ~ .lt-toggle-label { color: var(--text-primary); }
+
+
+/* ----------------------------------------------------------------
+ 34. RANGE SLIDER
+ ---------------------------------------------------------------- */
+.lt-range-wrap { display: flex; flex-direction: column; gap: var(--space-xs); }
+.lt-range-header { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.75rem; }
+.lt-range-label { color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
+.lt-range-value { color: var(--accent-orange); font-weight: 700; }
+input[type="range"].lt-range {
+ -webkit-appearance: none;
+ width: 100%;
+ height: 4px;
+ background: var(--bg-tertiary);
+ border: 1px solid var(--border-dim);
+ outline: none;
+ cursor: pointer;
+}
+input[type="range"].lt-range::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 14px; height: 14px;
+ background: var(--accent-orange);
+ box-shadow: var(--glow-orange);
+ cursor: pointer;
+ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+ transition: transform 0.15s;
+}
+input[type="range"].lt-range::-webkit-slider-thumb:hover { transform: scale(1.3); }
+input[type="range"].lt-range::-moz-range-thumb {
+ width: 14px; height: 14px;
+ background: var(--accent-orange);
+ border: none;
+ cursor: pointer;
+}
+
+
+/* ----------------------------------------------------------------
+ 35. FILE UPLOAD / DROPZONE
+ ---------------------------------------------------------------- */
+.lt-dropzone {
+ border: 2px dashed var(--border-dim);
+ background: var(--bg-secondary);
+ padding: var(--space-xl);
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ font-family: var(--font-mono);
+ position: relative;
+ clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
+}
+.lt-dropzone:hover,
+.lt-dropzone.drag-over {
+ border-color: var(--accent-cyan);
+ background: rgba(0,212,255,0.05);
+ box-shadow: var(--box-glow-cyan);
+}
+.lt-dropzone-icon { font-size: 2rem; margin-bottom: var(--space-sm); opacity: 0.5; }
+.lt-dropzone-text { color: var(--text-secondary); font-size: 0.8rem; }
+.lt-dropzone-text strong { color: var(--accent-cyan); }
+.lt-dropzone-hint { font-size: 0.7rem; color: var(--text-dim); margin-top: var(--space-xs); }
+.lt-dropzone input[type="file"] {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ cursor: pointer;
+}
+.lt-file-list { margin-top: var(--space-sm); display: flex; flex-direction: column; gap: 4px; }
+.lt-file-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 4px var(--space-sm);
+ background: var(--bg-tertiary);
+ border: 1px solid var(--border-dim);
+ font-size: 0.75rem;
+ font-family: var(--font-mono);
+}
+.lt-file-item-name { color: var(--text-secondary); }
+.lt-file-item-size { color: var(--text-dim); }
+.lt-file-item-remove { background: none; border: none; color: var(--accent-red); cursor: pointer; padding: 0; font-size: 0.9rem; }
+
+
+/* ----------------------------------------------------------------
+ 36. COMMAND PALETTE
+ ---------------------------------------------------------------- */
+.lt-cmd-overlay {
+ position: fixed;
+ inset: 0;
+ background: rgba(3,5,8,0.85);
+ backdrop-filter: blur(4px);
+ z-index: var(--z-modal);
+ display: none;
+ align-items: flex-start;
+ justify-content: center;
+ padding-top: 12vh;
+}
+.lt-cmd-overlay.is-open { display: flex; }
+.lt-cmd-palette {
+ width: 100%;
+ max-width: 560px;
+ background: var(--bg-secondary);
+ border: 1px solid var(--accent-cyan);
+ box-shadow: var(--box-glow-cyan);
+ clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
+}
+.lt-cmd-input-wrap {
+ display: flex;
+ align-items: center;
+ padding: var(--space-sm) var(--space-md);
+ border-bottom: 1px solid var(--border-dim);
+ gap: var(--space-sm);
+}
+.lt-cmd-prompt { color: var(--accent-cyan); font-family: var(--font-mono); font-size: 1rem; }
+.lt-cmd-input {
+ flex: 1;
+ background: none;
+ border: none;
+ outline: none;
+ color: var(--text-primary);
+ font-family: var(--font-mono);
+ font-size: 0.9rem;
+ caret-color: var(--accent-orange);
+}
+.lt-cmd-results { max-height: 320px; overflow-y: auto; }
+.lt-cmd-group-label {
+ padding: var(--space-xs) var(--space-md);
+ font-family: var(--font-mono);
+ font-size: 0.65rem;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ color: var(--text-dim);
+ border-bottom: 1px solid var(--border-dim);
+}
+.lt-cmd-item {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ padding: var(--space-sm) var(--space-md);
+ cursor: pointer;
+ font-family: var(--font-mono);
+ font-size: 0.8rem;
+ transition: background 0.1s;
+}
+.lt-cmd-item:hover,
+.lt-cmd-item.is-selected {
+ background: rgba(0,212,255,0.08);
+ color: var(--accent-cyan);
+}
+.lt-cmd-item-icon { width: 16px; text-align: center; opacity: 0.6; flex-shrink: 0; }
+.lt-cmd-item-label { flex: 1; }
+.lt-cmd-item-kbd {
+ font-size: 0.65rem;
+ padding: 2px 5px;
+ background: var(--bg-tertiary);
+ border: 1px solid var(--border-dim);
+ color: var(--text-dim);
+}
+.lt-cmd-footer {
+ display: flex;
+ gap: var(--space-md);
+ padding: var(--space-xs) var(--space-md);
+ border-top: 1px solid var(--border-dim);
+ font-family: var(--font-mono);
+ font-size: 0.65rem;
+ color: var(--text-dim);
+}
+.lt-cmd-footer kbd { background: var(--bg-tertiary); border: 1px solid var(--border-dim); padding: 1px 4px; margin: 0 2px; }
+.lt-cmd-empty {
+ padding: var(--space-lg);
+ text-align: center;
+ font-family: var(--font-mono);
+ font-size: 0.8rem;
+ color: var(--text-dim);
+}
+
+
+/* ----------------------------------------------------------------
+ 37. CODE BLOCKS
+ ---------------------------------------------------------------- */
+.lt-code-block {
+ position: relative;
+ background: var(--bg-secondary);
+ border: 1px solid var(--border-dim);
+ overflow: hidden;
+}
+.lt-code-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 6px var(--space-md);
+ background: var(--bg-tertiary);
+ border-bottom: 1px solid var(--border-dim);
+}
+.lt-code-lang {
+ font-family: var(--font-mono);
+ font-size: 0.65rem;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ color: var(--accent-orange);
+}
+.lt-code-copy {
+ background: none;
+ border: 1px solid var(--border-dim);
+ color: var(--text-dim);
+ font-family: var(--font-mono);
+ font-size: 0.65rem;
+ padding: 2px 8px;
+ cursor: pointer;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ transition: all 0.15s;
+}
+.lt-code-copy:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
+.lt-code-copy.copied { border-color: var(--accent-green); color: var(--accent-green); }
+.lt-code-block pre {
+ margin: 0;
+ padding: var(--space-md);
+ overflow-x: auto;
+ overflow-y: auto;
+ font-family: var(--font-mono);
+ font-size: 0.8rem;
+ line-height: 1.6;
+ color: var(--text-secondary);
+ max-height: 400px;
+}
+.lt-code-block code { background: none; border: none; padding: 0; color: inherit; }
+/* Syntax highlight tokens */
+.tok-kw { color: var(--accent-cyan); }
+.tok-str { color: var(--accent-green); }
+.tok-num { color: var(--accent-orange); }
+.tok-cmt { color: #5c8c6a; font-style: italic; }
+.tok-fn { color: var(--accent-purple); }
+
+
+/* ----------------------------------------------------------------
+ 38. TAGS / CHIPS
+ ---------------------------------------------------------------- */
+.lt-tags { display: flex; flex-wrap: wrap; gap: 6px; }
+.lt-tag {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 2px 8px;
+ font-family: var(--font-mono);
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ background: var(--bg-tertiary);
+ border: 1px solid var(--border-dim);
+ color: var(--text-secondary);
+ clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
+ white-space: nowrap;
+}
+.lt-tag--orange { border-color: var(--accent-orange); color: var(--accent-orange); background: rgba(255,107,0,0.08); }
+.lt-tag--cyan { border-color: var(--accent-cyan); color: var(--accent-cyan); background: rgba(0,212,255,0.08); }
+.lt-tag--green { border-color: var(--accent-green); color: var(--accent-green); background: rgba(0,255,136,0.08); }
+.lt-tag--red { border-color: var(--accent-red); color: var(--accent-red); background: rgba(255,45,85,0.08); }
+.lt-tag--purple { border-color: var(--accent-purple); color: var(--accent-purple); background: rgba(191,95,255,0.08); }
+.lt-tag-remove {
+ background: none;
+ border: none;
+ color: inherit;
+ cursor: pointer;
+ padding: 0;
+ font-size: 0.8rem;
+ opacity: 0.6;
+ line-height: 1;
+}
+.lt-tag-remove:hover { opacity: 1; }
+
+
+/* ----------------------------------------------------------------
+ 39. NOTIFICATION BADGES
+ ---------------------------------------------------------------- */
+.lt-badge-wrap { position: relative; display: inline-flex; }
+/* Notification counter badge — only absolute when inside .lt-badge-wrap */
+.lt-badge-wrap .lt-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 18px;
+ height: 18px;
+ padding: 0 4px;
+ font-family: var(--font-mono);
+ font-size: 0.65rem;
+ font-weight: 700;
+ background: var(--accent-red);
+ color: var(--bg-primary);
+ position: absolute;
+ top: -6px; right: -8px;
+ box-shadow: 0 0 6px var(--accent-red);
+}
+.lt-badge-wrap .lt-badge--orange { background: var(--accent-orange); box-shadow: var(--glow-orange); }
+.lt-badge-wrap .lt-badge--cyan { background: var(--accent-cyan); box-shadow: var(--glow-cyan); color: var(--bg-primary); }
+.lt-badge-wrap .lt-badge--green { background: var(--accent-green); box-shadow: var(--glow-green); color: var(--bg-primary); }
+.lt-badge-inline {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 18px;
+ height: 18px;
+ padding: 0 5px;
+ font-family: var(--font-mono);
+ font-size: 0.65rem;
+ font-weight: 700;
+ background: var(--accent-orange);
+ color: var(--bg-primary);
+ vertical-align: middle;
+}
+
+
+/* ----------------------------------------------------------------
+ 40. STEPPER / WIZARD
+ ---------------------------------------------------------------- */
+.lt-stepper {
+ display: flex;
+ align-items: flex-start;
+ gap: 0;
+}
+.lt-step {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ position: relative;
+ font-family: var(--font-mono);
+ font-size: 0.7rem;
+ text-align: center;
+}
+.lt-step:not(:last-child)::after {
+ content: '';
+ position: absolute;
+ top: 14px;
+ left: calc(50% + 14px);
+ right: calc(-50% + 14px);
+ height: 1px;
+ background: var(--border-dim);
+}
+.lt-step.complete:not(:last-child)::after { background: var(--accent-orange); }
+.lt-step-num {
+ width: 28px; height: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid var(--border-dim);
+ background: var(--bg-secondary);
+ color: var(--text-dim);
+ font-weight: 700;
+ margin-bottom: 6px;
+ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+}
+.lt-step.active .lt-step-num {
+ border-color: var(--accent-orange);
+ background: var(--accent-orange);
+ color: var(--bg-primary);
+ box-shadow: var(--glow-orange);
+}
+.lt-step.complete .lt-step-num {
+ border-color: var(--accent-green);
+ background: var(--bg-secondary);
+ color: var(--accent-green);
+ box-shadow: var(--glow-green);
+}
+.lt-step-label { color: var(--text-dim); }
+.lt-step.active .lt-step-label { color: var(--text-primary); }
+.lt-step.complete .lt-step-label { color: var(--text-secondary); }
+
+
+/* ----------------------------------------------------------------
+ 41. LIST GROUPS
+ ---------------------------------------------------------------- */
+.lt-list-group { border: 1px solid var(--border-dim); }
+.lt-list-item {
+ display: flex;
+ align-items: center;
+ gap: var(--space-sm);
+ padding: var(--space-sm) var(--space-md);
+ border-bottom: 1px solid var(--border-dim);
+ font-family: var(--font-mono);
+ font-size: 0.8rem;
+ transition: background 0.12s;
+}
+.lt-list-item:last-child { border-bottom: none; }
+.lt-list-item:hover { background: var(--bg-tertiary); }
+.lt-list-item a {
+ color: var(--text-primary);
+ text-decoration: none;
+ flex: 1;
+}
+.lt-list-item a:hover { color: var(--accent-cyan); }
+.lt-list-item-meta { color: var(--text-dim); font-size: 0.7rem; margin-left: auto; }
+.lt-list-item--active { background: rgba(255,107,0,0.06); border-left: 2px solid var(--accent-orange); }
+
+
+/* ----------------------------------------------------------------
+ 42. KEY-VALUE PAIRS / DATA GRID
+ ---------------------------------------------------------------- */
+.lt-kv-grid {
+ display: grid;
+ grid-template-columns: max-content 1fr;
+ gap: 1px;
+ font-family: var(--font-mono);
+ font-size: 0.8rem;
+}
+.lt-kv-key {
+ padding: var(--space-xs) var(--space-md) var(--space-xs) 0;
+ color: var(--text-dim);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ font-size: 0.7rem;
+ white-space: nowrap;
+ border-right: 1px solid var(--border-dim);
+}
+.lt-kv-val {
+ padding: var(--space-xs) 0 var(--space-xs) var(--space-md);
+ color: var(--text-primary);
+}
+.lt-kv-val--orange { color: var(--accent-orange); }
+.lt-kv-val--cyan { color: var(--accent-cyan); }
+.lt-kv-val--green { color: var(--accent-green); }
+.lt-kv-val--red { color: var(--accent-red); }
+
+
+/* ----------------------------------------------------------------
+ 43. HERO / BANNER SECTION
+ ---------------------------------------------------------------- */
+.lt-hero {
+ position: relative;
+ padding: var(--space-xl) 0;
+ text-align: center;
+ overflow: hidden;
+}
+.lt-hero::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,107,0,0.08) 0%, transparent 70%);
+ pointer-events: none;
+}
+.lt-hero-eyebrow {
+ font-family: var(--font-mono);
+ font-size: 0.7rem;
+ text-transform: uppercase;
+ letter-spacing: 0.2em;
+ color: var(--accent-orange);
+ margin-bottom: var(--space-sm);
+}
+.lt-hero-title {
+ font-family: var(--font-mono);
+ font-size: clamp(1.8rem, 5vw, 3.5rem);
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ color: var(--text-primary);
+ text-shadow: var(--glow-orange);
+ line-height: 1.1;
+ margin-bottom: var(--space-md);
+}
+.lt-hero-sub {
+ font-family: var(--font-mono);
+ font-size: 0.9rem;
+ color: var(--text-secondary);
+ max-width: 560px;
+ margin: 0 auto var(--space-lg);
+ line-height: 1.6;
+}
+.lt-hero-actions { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }
+
+
+/* ----------------------------------------------------------------
+ 44. DIVIDER WITH LABEL
+ ---------------------------------------------------------------- */
+.lt-divider {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ margin: var(--space-lg) 0;
+}
+.lt-divider::before,
+.lt-divider::after {
+ content: '';
+ flex: 1;
+ height: 1px;
+ background: var(--border-dim);
+}
+.lt-divider-label {
+ font-family: var(--font-mono);
+ font-size: 0.65rem;
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ color: var(--text-dim);
+ white-space: nowrap;
+}
+.lt-divider--orange::before,
+.lt-divider--orange::after { background: var(--accent-orange); }
+.lt-divider--orange .lt-divider-label { color: var(--accent-orange); }
+
+
+/* ----------------------------------------------------------------
+ 45. CUSTOM SCROLLBAR
+ ---------------------------------------------------------------- */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: var(--bg-primary); }
+::-webkit-scrollbar-thumb { background: var(--bg-tertiary); }
+::-webkit-scrollbar-thumb:hover { background: var(--accent-orange); }
+
+
+/* ----------------------------------------------------------------
+ 46. RESPONSIVE TABLE → CARD MODE
+ ---------------------------------------------------------------- */
+@media (max-width: 640px) {
+ .lt-table-responsive thead { display: none; }
+ .lt-table-responsive tbody tr {
+ display: block;
+ border: 1px solid var(--border-dim);
+ margin-bottom: var(--space-sm);
+ background: var(--bg-secondary);
+ clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
+ }
+ .lt-table-responsive td {
+ display: flex;
+ justify-content: space-between;
+ padding: var(--space-xs) var(--space-sm);
+ border-bottom: 1px solid var(--border-dim);
+ font-size: 0.75rem;
+ }
+ .lt-table-responsive td:last-child { border-bottom: none; }
+ .lt-table-responsive td::before {
+ content: attr(data-label);
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ color: var(--text-dim);
+ font-size: 0.7rem;
+ flex-shrink: 0;
+ margin-right: var(--space-sm);
+ }
+}
+
+
+/* ----------------------------------------------------------------
+ 47. GAUGE / METER
+ ---------------------------------------------------------------- */
+.lt-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
+.lt-gauge {
+ position: relative;
+ width: 100px;
+ height: 55px;
+ overflow: visible;
+}
+.lt-gauge svg { overflow: visible; }
+.lt-gauge-track { fill: none; stroke: var(--bg-tertiary); stroke-width: 8; }
+.lt-gauge-fill { fill: none; stroke: var(--accent-orange); stroke-width: 8; stroke-linecap: butt;
+ transition: stroke-dashoffset 0.6s cubic-bezier(0.4,0,0.2,1); }
+.lt-gauge-label {
+ position: absolute;
+ bottom: 0; left: 50%;
+ transform: translateX(-50%);
+ font-family: var(--font-mono);
+ font-size: 1rem;
+ font-weight: 700;
+ color: var(--accent-orange);
+ text-shadow: var(--glow-orange);
+ white-space: nowrap;
+}
+.lt-gauge-caption { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); }
+
+
+/* ----------------------------------------------------------------
+ 48. SPINNERS / LOADERS
+ ---------------------------------------------------------------- */
+.lt-spinner {
+ display: inline-block;
+ width: 24px; height: 24px;
+ border: 2px solid var(--bg-tertiary);
+ border-top-color: var(--accent-orange);
+ border-radius: 50%;
+ animation: lt-spin 0.7s linear infinite;
+}
+.lt-spinner--cyan { border-top-color: var(--accent-cyan); }
+.lt-spinner--green { border-top-color: var(--accent-green); }
+.lt-spinner--sm { width: 14px; height: 14px; border-width: 1.5px; }
+.lt-spinner--lg { width: 40px; height: 40px; border-width: 3px; }
+@keyframes lt-spin { to { transform: rotate(360deg); } }
+
+.lt-pulse-dot {
+ display: inline-block;
+ width: 8px; height: 8px;
+ background: var(--accent-green);
+ border-radius: 50%;
+ animation: lt-pulse 1.4s ease-in-out infinite;
+ box-shadow: 0 0 6px var(--accent-green);
+}
+@keyframes lt-pulse {
+ 0%, 100% { opacity: 1; transform: scale(1); }
+ 50% { opacity: 0.4; transform: scale(0.7); }
+}
+
+.lt-bar-loader {
+ display: flex;
+ gap: 3px;
+ align-items: flex-end;
+ height: 20px;
+}
+.lt-bar-loader span {
+ width: 4px;
+ background: var(--accent-orange);
+ box-shadow: var(--glow-orange);
+ animation: lt-bars 1s ease-in-out infinite;
+}
+.lt-bar-loader span:nth-child(2) { animation-delay: 0.1s; }
+.lt-bar-loader span:nth-child(3) { animation-delay: 0.2s; }
+.lt-bar-loader span:nth-child(4) { animation-delay: 0.3s; }
+@keyframes lt-bars {
+ 0%, 100% { height: 4px; }
+ 50% { height: 20px; }
+}
+
+
+/* ----------------------------------------------------------------
+ 49. TAB BAR
+ ---------------------------------------------------------------- */
+.lt-tab-bar {
+ display: flex;
+ border-bottom: 1px solid var(--border-dim);
+ gap: 0;
+ overflow-x: auto;
+ scrollbar-width: none;
+}
+.lt-tab-bar::-webkit-scrollbar { display: none; }
+.lt-tab {
+ padding: var(--space-sm) var(--space-md);
+ font-family: var(--font-mono);
+ font-size: 0.75rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ color: var(--text-dim);
+ cursor: pointer;
+ border: none;
+ background: none;
+ border-bottom: 2px solid transparent;
+ transition: all 0.15s;
+ white-space: nowrap;
+ text-decoration: none;
+ display: inline-block;
+}
+.lt-tab:hover { color: var(--text-secondary); }
+.lt-tab.active,
+.lt-tab[aria-selected="true"] {
+ color: var(--accent-orange);
+ border-bottom-color: var(--accent-orange);
+ text-shadow: var(--glow-orange);
+}
+.lt-tab-panels .lt-tab-panel { display: none; }
+.lt-tab-panels .lt-tab-panel.active { display: block; }
+
+
+/* ----------------------------------------------------------------
+ 50. UTILITY CLASSES
+ ---------------------------------------------------------------- */
+/* Text colors */
+.lt-text-orange { color: var(--accent-orange); }
+.lt-text-cyan { color: var(--accent-cyan); }
+.lt-text-green { color: var(--accent-green); }
+.lt-text-red { color: var(--accent-red); }
+.lt-text-purple { color: var(--accent-purple); }
+.lt-text-dim { color: var(--text-dim); }
+.lt-text-muted { color: var(--text-secondary); }
+
+/* Glow text */
+.lt-glow-orange { text-shadow: var(--glow-orange); }
+.lt-glow-cyan { text-shadow: var(--glow-cyan); }
+.lt-glow-green { text-shadow: var(--glow-green); }
+.lt-glow-red { text-shadow: var(--glow-red); }
+
+/* Backgrounds */
+.lt-bg-secondary { background: var(--bg-secondary); }
+.lt-bg-tertiary { background: var(--bg-tertiary); }
+
+/* Border accents */
+.lt-border-orange { border-color: var(--accent-orange) !important; }
+.lt-border-cyan { border-color: var(--accent-cyan) !important; }
+.lt-border-green { border-color: var(--accent-green) !important; }
+.lt-border-red { border-color: var(--accent-red) !important; }
+
+/* Display */
+.lt-hidden { display: none !important; }
+.lt-visible { display: block !important; }
+.lt-flex { display: flex; }
+.lt-grid { display: grid; }
+.lt-inline { display: inline; }
+.lt-iflex { display: inline-flex; }
+
+/* Flex helpers */
+.lt-gap-xs { gap: var(--space-xs); }
+.lt-gap-sm { gap: var(--space-sm); }
+.lt-gap-md { gap: var(--space-md); }
+.lt-gap-lg { gap: var(--space-lg); }
+.lt-align-center { align-items: center; }
+.lt-align-start { align-items: flex-start; }
+.lt-justify-between { justify-content: space-between; }
+.lt-justify-center { justify-content: center; }
+.lt-justify-end { justify-content: flex-end; }
+.lt-wrap { flex-wrap: wrap; }
+
+/* Spacing */
+.lt-mt-xs { margin-top: var(--space-xs); }
+.lt-mt-sm { margin-top: var(--space-sm); }
+.lt-mt-md { margin-top: var(--space-md); }
+.lt-mt-lg { margin-top: var(--space-lg); }
+.lt-mb-xs { margin-bottom: var(--space-xs); }
+.lt-mb-sm { margin-bottom: var(--space-sm); }
+.lt-mb-md { margin-bottom: var(--space-md); }
+.lt-mb-lg { margin-bottom: var(--space-lg); }
+.lt-p-sm { padding: var(--space-sm); }
+.lt-p-md { padding: var(--space-md); }
+.lt-p-lg { padding: var(--space-lg); }
+
+/* Text helpers */
+.lt-mono { font-family: var(--font-mono); }
+.lt-uppercase { text-transform: uppercase; }
+.lt-bold { font-weight: 700; }
+.lt-small { font-size: 0.75rem; }
+.lt-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.lt-no-wrap { white-space: nowrap; }
+.lt-text-center { text-align: center; }
+.lt-text-right { text-align: right; }
+
+/* Opacity */
+.lt-opacity-50 { opacity: 0.5; }
+.lt-opacity-75 { opacity: 0.75; }
+
+/* Cursor */
+.lt-cursor-pointer { cursor: pointer; }
+.lt-cursor-help { cursor: help; }
+
+/* Width helpers */
+.lt-w-full { width: 100%; }
+.lt-w-auto { width: auto; }
+
+/* Status dot */
+.lt-dot {
+ display: inline-block;
+ width: 8px; height: 8px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+.lt-dot--green { background: var(--accent-green); box-shadow: 0 0 6px var(--accent-green); }
+.lt-dot--orange { background: var(--accent-orange); box-shadow: var(--glow-orange); }
+.lt-dot--red { background: var(--accent-red); box-shadow: 0 0 6px var(--accent-red); }
+.lt-dot--dim { background: var(--text-dim); }
+
+/* Monospace table-style number alignment */
+.lt-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
diff --git a/base.html b/base.html
index 1b72f12..3ecaa4d 100644
--- a/base.html
+++ b/base.html
@@ -1,6 +1,6 @@
-
+
+
+
+
+
+
+
+
+
+