@import "tailwindcss"; :root { --font-display: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "Menlo", "SFMono-Regular", "Consolas", "Liberation Mono", monospace; --bg-0: #071018; --bg-1: #0a1720; --bg-2: #0e2028; --panel: rgba(8, 20, 28, 0.72); --panel-soft: rgba(9, 22, 30, 0.46); --panel-bright: rgba(12, 30, 38, 0.84); --line-weak: rgba(126, 217, 255, 0.18); --line-strong: rgba(123, 255, 217, 0.75); --accent: #68ffd5; --accent-strong: #8cffeb; --danger: #ff7070; --danger-soft: rgba(122, 33, 33, 0.44); --terminal-bright: #e8fff8; --terminal-muted: #94b9c5; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } [data-sonner-toaster] { --normal-bg: rgba(7, 22, 31, 0.96); --normal-text: #e8fff8; --normal-border: rgba(123, 255, 217, 0.45); --success-bg: rgba(8, 58, 42, 0.96); --success-text: #d0ffe9; --success-border: rgba(104, 255, 213, 0.7); --error-bg: rgba(67, 22, 22, 0.96); --error-text: #ffd6d6; --error-border: rgba(255, 112, 112, 0.8); } [data-sonner-toast] { backdrop-filter: blur(8px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); } body { min-height: 100vh; overflow-x: hidden; font-family: var(--font-display), sans-serif; color: var(--terminal-bright); background: radial-gradient(circle at 14% -12%, rgba(126, 217, 255, 0.16), transparent 34%), radial-gradient(circle at 88% 0%, rgba(104, 255, 213, 0.11), transparent 28%), linear-gradient(160deg, var(--bg-0), var(--bg-1) 48%, var(--bg-2)); } .app-surface, .auth-page { position: relative; min-height: 100vh; overflow: hidden; } .ambient-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(126, 217, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(126, 217, 255, 0.035) 1px, transparent 1px); background-size: 38px 38px; mask-image: radial-gradient(ellipse at center, black 28%, transparent 78%); pointer-events: none; } .noise-layer { position: absolute; inset: 0; pointer-events: none; opacity: 0.14; background-image: radial-gradient(rgba(160, 255, 227, 0.15) 0.7px, transparent 0.7px); background-size: 4px 4px; } .terminal-caption { font-family: var(--font-mono), monospace; } .panel-heading { font-family: var(--font-mono), monospace; letter-spacing: 0.08em; } a, button, input, select, textarea { touch-action: manipulation; } .data-table { width: 100%; border-collapse: collapse; } .data-surface { border: 1px solid var(--line-weak); border-radius: 1rem; background: linear-gradient(180deg, rgba(10, 25, 33, 0.9), rgba(8, 19, 26, 0.72)); } .data-table-wrap { overflow-x: auto; border: 1px solid var(--line-weak); border-radius: 1rem; background: linear-gradient(180deg, rgba(9, 23, 30, 0.9), rgba(7, 18, 24, 0.74)); } .data-table th, .data-table td { border-bottom: 1px solid var(--line-weak); padding: 0.8rem 0.8rem; text-align: left; font-size: 0.875rem; vertical-align: top; } .data-table th { font-family: var(--font-mono), monospace; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terminal-muted); } .data-table tbody tr:hover { background-color: rgba(17, 47, 61, 0.28); } @media (prefers-reduced-motion: no-preference) { .ambient-grid { animation: subtle-grid-shift 18s linear infinite; } @keyframes subtle-grid-shift { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } } } @media (max-width: 1024px) { .ambient-grid { background-size: 26px 26px; } } @media (max-width: 640px) { body { background: radial-gradient(circle at 24% -4%, rgba(126, 217, 255, 0.14), transparent 36%), radial-gradient(circle at 82% 2%, rgba(104, 255, 213, 0.11), transparent 30%), linear-gradient(155deg, var(--bg-0), var(--bg-1) 54%, var(--bg-2)); } .data-table th, .data-table td { padding: 0.65rem 0.55rem; font-size: 0.8125rem; } }