:root { --obsidian: #050508; --ice-cyan: #00f3ff; --ice-dim: #004d4f; --ice-glow: rgba(0, 243, 255, 0.2); --glass-bg: rgba(5, 10, 15, 0.85); --text-main: #e0faff; --text-dim: #709090; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; /* --shatter-bg is set in App.razor so the URL carries a content hash. shatter.js overrides it at runtime when the animated background is on. */ } * { box-sizing: border-box; } html { background-color: var(--obsidian) !important; color-scheme: dark !important; } body { height: 100%; margin: 0; background-color: transparent !important; color: var(--text-main); font-family: var(--font-mono); overflow: hidden; } /* LIGHTWEIGHT MODE backdrop-filter makes the compositor rasterise a blurred copy of everything beneath the element on every paint. On integrated GPUs that is the dominant frame cost - larger than the animated background we already drop here. So lightweight mode removes the blur outright and compensates with a near-opaque panel background, which keeps the panels legible over the static circuit art. The .lightweight class is set on by the capability policy in App.razor before first paint. These rules are global on purpose: they must out-specify the component-scoped declarations, which carry no extra specificity beyond their [b-*] scope attribute. */ html.lightweight { --glass-bg: rgba(5, 10, 15, 0.96); } html.lightweight .automata-shard, html.lightweight .nav-shard, html.lightweight .error-shard, html.lightweight .terminal-shard, html.lightweight .hub-shelf, html.lightweight .hub-card { backdrop-filter: none; } html.lightweight .hub-card { background: rgba(0, 0, 0, 0.8); } /* Unified Cyber Background */ .bg-viewport { position: fixed; inset: 0; z-index: -1; background-image: var(--shatter-bg); background-size: cover; background-position: center; overflow: hidden; } .bg-veins { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* Global Cyber Scrollbar */ ::-webkit-scrollbar { width: 12px !important; height: 12px !important; display: block !important; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.5) !important; border-top: 10vh solid transparent !important; border-bottom: 10vh solid transparent !important; background-clip: padding-box !important; } ::-webkit-scrollbar-thumb { background-color: var(--ice-dim) !important; border: 1px solid var(--ice-cyan) !important; box-shadow: inset 0 0 5px var(--ice-glow), 0 0 10px var(--ice-glow) !important; border-radius: 0 !important; } ::-webkit-scrollbar-thumb:hover { background-color: var(--ice-cyan) !important; box-shadow: 0 0 20px var(--ice-cyan) !important; } /* Firefox Scrollbar Support 🦊 */ * { scrollbar-width: thin; scrollbar-color: var(--ice-cyan) rgba(0, 0, 0, 0.5); } /* Icons live in css/icons.css - self-hosted masks, no webfont to coax. */ /* QUICKGRID GLOBAL DOMINANCE: WHITELIST EDITION 💎 */ .automata-grid { width: 100% !important; border-collapse: collapse !important; background: transparent !important; } .automata-grid thead th { background: rgba(0, 0, 0, 0.4) !important; color: var(--text-dim) !important; font-size: 0.7rem !important; font-weight: 900 !important; letter-spacing: 3px !important; padding: 1rem !important; border-bottom: 1px solid var(--ice-dim) !important; text-transform: uppercase; text-align: left; } /* THE ARIA_ROWINDEX PURGE: Only show rows that the grid has indexed with data! 🧠💎 */ .automata-grid tbody tr { display: none !important; background: rgba(0, 0, 0, 0.2) !important; transition: all 0.3s; border: none !important; } .automata-grid tbody tr[aria-rowindex] { display: table-row !important; } .automata-grid tbody tr:hover { background: rgba(0, 243, 255, 0.05) !important; box-shadow: inset 0 0 15px rgba(0, 243, 255, 0.1) !important; } .automata-grid td { padding: 0.3rem 1rem !important; /* COMPACT MODE 📐 */ font-size: 0.85rem !important; color: var(--text-main) !important; border-bottom: 1px solid rgba(0, 243, 255, 0.05) !important; /* Borders ONLY on data cells */ } /* Custom Paginator Styles */ .custom-paginator { display: flex !important; justify-content: center !important; align-items: center !important; gap: 1.5rem !important; font-family: var(--font-mono) !important; margin-top: 2rem !important; } .btn-page { background: rgba(0, 243, 255, 0.05) !important; border: 1px solid var(--ice-dim) !important; color: var(--ice-cyan) !important; width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.3s !important; border-radius: 0 !important; } .btn-page:hover:not(:disabled) { border-color: var(--ice-cyan) !important; background: rgba(0, 243, 255, 0.15) !important; box-shadow: 0 0 15px var(--ice-glow) !important; transform: translateY(-2px) !important; } .btn-page:disabled { opacity: 0.2 !important; cursor: not-allowed !important; } .page-indicator { font-size: 0.75rem !important; font-weight: 900 !important; letter-spacing: 2px !important; color: var(--text-dim) !important; } /* Global Automata Aesthetics */ .automata-shard { background: var(--glass-bg); backdrop-filter: blur(25px); border: 1px solid var(--ice-dim); padding: 3rem; margin-top: 5rem; box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), inset 0 0 30px var(--ice-glow); clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px)); position: relative; } .glitch-text { font-size: 1.8rem; font-weight: 900; letter-spacing: 6px; color: var(--ice-cyan); text-shadow: 0 0 10px var(--ice-cyan); } .input-scanner { margin-bottom: 2rem; } .input-scanner label { display: block; font-size: 0.75rem; color: var(--text-dim); margin-bottom: 0.5rem; letter-spacing: 3px; text-transform: uppercase; } .input-scanner input { width: 100%; display: block; box-sizing: border-box; background: rgba(0, 0, 0, 0.5); border: none; border-bottom: 1px solid var(--ice-dim); color: var(--text-main); padding: 1rem; font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: 1px; transition: all 0.3s ease; } .input-scanner input:focus { outline: none; border-bottom-color: var(--ice-cyan); background: rgba(0, 243, 255, 0.05); padding-left: 1.5rem; } .password-input { position: relative; } .password-input input { padding-right: 4rem; } .password-reveal { align-items: center; background: transparent; border: 0; bottom: 0; color: var(--text-dim); cursor: pointer; display: flex; font-size: 1.1rem; height: 100%; justify-content: center; padding: 0; position: absolute; right: 0; transition: color 0.2s ease, text-shadow 0.2s ease; width: 3.5rem; } .password-reveal:hover, .password-reveal:focus-visible { color: var(--ice-cyan); outline: none; text-shadow: 0 0 8px var(--ice-cyan); } .btn-initialize { background: transparent; border: 1px solid var(--ice-cyan); color: var(--ice-cyan); padding: 1.2rem; font-family: var(--font-mono); font-weight: bold; letter-spacing: 4px; cursor: pointer; transition: all 0.4s; position: relative; overflow: hidden; text-transform: uppercase; } .btn-initialize:hover:not(:disabled) { background: var(--ice-cyan); color: var(--obsidian); box-shadow: 0 0 30px var(--ice-cyan); } .btn-initialize:disabled { opacity: 0.5; border-color: var(--ice-dim); color: var(--text-dim); } @keyframes shard-entrance { from { opacity: 0; transform: scale(0.9) translate(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Error UI overrides */ #blazor-error-ui { background: var(--glass-bg); color: #ff4444; bottom: 0; box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.5); position: fixed; width: 100%; z-index: 1000; border-top: 1px solid #ff4444; }