/* ============================================================ THEME 2: PRECISION GLASS Activate: add data-theme="2" to Deactivate: remove or set data-theme="1" All rules scoped under [data-style="2"] — zero bleed to Theme 1 ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ============================================================ CSS VARIABLE OVERRIDES ============================================================ */ [data-style="2"] { /* Backgrounds */ --bg-base: #060609; --bg-elevated: #0D0F14; --bg-card: rgba(18,21,28,0.85); --bg-overlay: rgba(255,255,255,0.03); --bg-input: rgba(255,255,255,0.05); /* Borders */ --border-subtle: rgba(255,255,255,0.04); --border-default: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); /* Accent — Electric Indigo */ --blue: #6366F1; --blue-bright:#818CF8; --blue-dim: rgba(99,102,241,0.12); --blue-glow: rgba(99,102,241,0.22); /* Semantic colours */ --green: #10B981; --green-dim: rgba(16,185,129,0.12); --orange: #F59E0B; --orange-dim: rgba(245,158,11,0.12); --red: #F43F5E; --red-dim: rgba(244,63,94,0.12); --purple: #A78BFA; --purple-dim: rgba(167,139,250,0.12); --teal: #2DD4BF; --teal-dim: rgba(45,212,191,0.12); /* Text */ --text-primary: rgba(255,255,255,0.93); --text-secondary: rgba(255,255,255,0.52); --text-tertiary: rgba(255,255,255,0.28); /* Typography */ --font-ui: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'DM Mono', monospace; /* Shape */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; /* Motion */ --dur-fast: 120ms; --dur-mid: 200ms; --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================ BASE ============================================================ */ [data-style="2"] body { font-family: var(--font-ui); background: var(--bg-base); color: var(--text-primary); -webkit-font-smoothing: antialiased; } /* ============================================================ ROOT LAYOUT Strategy: keep #mainApp as flex-column (JS forces display:flex). The nav becomes a position:fixed left sidebar. TopBar + pagesWrap get margin-left: 64px to clear the rail. ============================================================ */ /* Sidebar nav floats as a fixed rail — no layout fights */ [data-style="2"] #mainApp { /* Keep JS-enforced flex-column — don't override display */ background: var(--bg-base); } /* Indent everything past the sidebar */ [data-style="2"] #topBar, [data-style="2"] #pagesWrap { margin-left: 64px; transition: margin-left 220ms var(--ease-spring); } /* Expand indent when sidebar is hovered (JS toggles data-nav-open on ) */ [data-style="2"][data-nav-open="1"] #topBar, [data-style="2"][data-nav-open="1"] #pagesWrap { margin-left: 200px; } /* ============================================================ TOP BAR — Glass morphism strip ============================================================ */ [data-style="2"] #topBar { height: 48px; min-height: 48px; width: auto; /* override style.css width:100% so margin-left:64px doesn't overflow */ background: rgba(6,6,9,0.80); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 0 20px; z-index: 100; position: relative; flex-shrink: 0; } [data-style="2"] .topbar-inner { height: 48px; max-width: none; padding: 0; } [data-style="2"] .topbar-logo-left { height: 22px; opacity: 0.8; filter: brightness(1.1); } /* In glass mode, hide the brand text — topbar nav takes its place */ [data-style="2"] .topbar-brand { display: none; } /* ── Topbar navigation strip (glass mode only) ── */ [data-style="2"] #topbarNav { display: flex !important; position: absolute; left: 50%; transform: translateX(-50%); align-items: center; gap: 2px; pointer-events: auto; } [data-style="2"] .topbar-nav-btn { display: flex; align-items: center; gap: 5px; padding: 5px 11px; height: 28px; border-radius: 14px; border: 1px solid transparent; background: transparent; color: rgba(255,255,255,0.45); font-size: 11px; font-weight: 500; font-family: var(--font-ui); letter-spacing: 0.03em; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; white-space: nowrap; outline: none; } [data-style="2"] .topbar-nav-btn:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.8); } [data-style="2"] .topbar-nav-btn.active { background: rgba(59,130,246,0.12); border-color: rgba(99,102,241,0.35); color: var(--blue-bright, #60a5fa); } [data-style="2"] .topbar-nav-btn svg { flex-shrink: 0; opacity: 0.8; } [data-style="2"] .topbar-nav-btn.active svg { opacity: 1; } /* Hide the home back-button in glass mode — topbar nav replaces it */ [data-style="2"] #topbarHomeBtn { display: none !important; } [data-style="2"] .topbar-title { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: rgba(255,255,255,0.85); text-transform: uppercase; } [data-style="2"] .topbar-title span { color: var(--blue-bright); } [data-style="2"] .topbar-actions { gap: 8px; } [data-style="2"] .session-chip { font-family: var(--font-ui); font-size: 11px; font-weight: 600; background: var(--blue-dim); color: var(--blue-bright); border: 1px solid rgba(99,102,241,0.25); border-radius: 99px; padding: 3px 10px 3px 8px; letter-spacing: 0.04em; } [data-style="2"] .session-chip::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--blue-bright); border-radius: 50%; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 6px var(--blue); animation: t2-pulse 2s ease-in-out infinite; } @keyframes t2-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } [data-style="2"] .logout-chip { font-family: var(--font-ui); font-size: 11px; font-weight: 500; background: rgba(255,255,255,0.04); color: var(--text-secondary); border: 1px solid var(--border-default); border-radius: 8px; padding: 5px 12px; cursor: pointer; transition: all var(--dur-fast); } [data-style="2"] .logout-chip:hover { background: var(--red-dim); color: var(--red); border-color: rgba(244,63,94,0.3); } [data-style="2"] .icon-btn { font-size: 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--border-default); border-radius: 8px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); transition: all var(--dur-fast); } [data-style="2"] .icon-btn:hover { background: var(--blue-dim); color: var(--blue-bright); border-color: rgba(99,102,241,0.3); } /* ============================================================ SIDEBAR NAVIGATION Fixed left rail — 64px collapsed, 200px on hover. Works regardless of mainApp flex/grid state. ============================================================ */ [data-style="2"] #bottomNav { position: fixed; left: 0; top: 0; width: 64px; height: 100vh; /* fallback */ height: 100dvh; /* dynamic: excludes mobile browser chrome (address bar, home bar) */ background: rgba(8,9,13,0.97); border-right: 1px solid rgba(255,255,255,0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); display: flex !important; flex-direction: column; padding: 0; overflow: hidden; z-index: 500; transition: width 220ms var(--ease-spring); border-top: none; } [data-style="2"] #bottomNav:hover { width: 200px; box-shadow: 4px 0 40px rgba(0,0,0,0.5); } [data-style="2"] .bottom-nav-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; /* CRITICAL: override style.css justify-content:space-around */ gap: 2px; padding: 12px 8px; height: 100vh; /* fallback */ height: 100dvh; /* match parent — excludes browser chrome */ width: 200px; /* fixed inner width so labels don't reflow */ overflow-x: hidden; /* clip labels when collapsed */ overflow-y: auto; /* scrollable if items overflow on small screens */ scrollbar-width: none; /* hide scrollbar (Firefox) */ -ms-overflow-style: none; /* hide scrollbar (IE/Edge) */ } [data-style="2"] .bottom-nav-inner::-webkit-scrollbar { display: none; /* hide scrollbar (Chrome/Safari) */ } [data-style="2"] .nav-item { width: 100%; height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 10px; border-radius: var(--radius-md); border: none; background: transparent; color: var(--text-tertiary); font-family: var(--font-ui); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; transition: all var(--dur-mid) var(--ease-spring); white-space: nowrap; text-align: left; border-left: 2px solid transparent; flex: none; /* override flex:1 from style.css — prevents items stretching to fill sidebar height */ position: relative; } [data-style="2"] .nav-item:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); border-left-color: rgba(255,255,255,0.15); } [data-style="2"] .nav-item.active { background: var(--blue-dim); color: var(--blue-bright); border-left-color: var(--blue); } [data-style="2"] .nav-item.active .nav-item-icon svg { stroke: var(--blue-bright); } [data-style="2"] .nav-item-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } [data-style="2"] .nav-item-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; transition: stroke var(--dur-fast); } [data-style="2"] .nav-item-label { font-size: 13px; font-weight: 500; opacity: 1; transition: opacity var(--dur-fast); overflow: hidden; text-overflow: ellipsis; } /* Settings item — pinned to bottom of sidebar */ [data-style="2"] #navSettings { margin-top: auto; /* pushes Settings to the very bottom */ border-top: 1px solid rgba(255,255,255,0.06); padding-top: 8px; } /* ============================================================ PAGES WRAPPER ============================================================ */ [data-style="2"] #pagesWrap { background: var(--bg-base); /* Override overflow:hidden from style.css — on older iOS a non-scroll parent with overflow:hidden blocks touch events in a child overflow-y:auto element. Panels are position:absolute; inset:0 so they never overflow pagesWrap anyway. */ overflow: visible; } /* Panels: keep original absolute positioning, just tweak padding */ [data-style="2"] .panel { padding: 16px 16px 40px; /* less bottom padding — no bottom nav */ background: var(--bg-base); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* ROOT FIX: override display:flex on active panels. The panel is flex-direction:column (style.css) and cards inside have overflow:hidden (theme2.css). When total content > panel height, CSS flex shrinks children — but overflow:hidden on cards clips their bodies to zero, leaving only card headers visible (blank decoder, blank CPU section, etc.). Switching to display:block lets children stack at natural height and the panel scrolls normally. Inactive panels remain display:none. */ [data-style="2"] .panel.active { display: block; } /* NOTE: CSS animation removed from .panel.active — it caused two critical bugs: 1. In iOS/Safari, when display flips from none→flex and an animation fires simultaneously, the panel can stay stuck at opacity:0 (blank screen). 2. The animation's GPU compositing layer persists in 'forwards' fill mode, blocking -webkit-overflow-scrolling:touch on iOS. Panels appear instantly — clean, reliable, no stacking-context side-effects. */ /* ============================================================ CARDS / CONTAINERS ============================================================ */ [data-style="2"] .card { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.12); /* boosted from border-default (0.08) */ border-radius: var(--radius-xl); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; transition: border-color var(--dur-mid); } [data-style="2"] .card-header { background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border-subtle); padding: 12px 16px; } [data-style="2"] .card-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); } [data-style="2"] .dash-card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-style="2"] .dash-card-header { background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border-subtle); padding: 10px 16px; font-size: 11px; font-weight: 700; color: var(--text-tertiary); letter-spacing: 0.1em; text-transform: uppercase; } /* ============================================================ METER TYPE SELECTOR — "Hardware Cards" ============================================================ */ [data-style="2"] .meter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 0; } [data-style="2"] .meter-card { background: rgba(255,255,255,0.07); /* raised from 0.025 — actually visible */ border: 1.5px solid rgba(255,255,255,0.14); /* raised from 0.07 — clearly defined edge */ border-radius: var(--radius-lg); padding: 20px 16px 16px; cursor: pointer; transition: all 220ms var(--ease-spring); position: relative; overflow: hidden; text-align: center; min-height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } [data-style="2"] .meter-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0), transparent 70%); opacity: 0; transition: opacity 300ms; } [data-style="2"] .meter-card:hover { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); transform: translateY(-2px); } [data-style="2"] .meter-card:hover::before { opacity: 0.4; } [data-style="2"] .meter-card.active { background: linear-gradient(160deg, rgba(99,102,241,0.1) 0%, rgba(99,102,241,0.04) 100%); border-color: rgba(99,102,241,0.45); box-shadow: 0 0 0 1px rgba(99,102,241,0.12), 0 8px 32px rgba(99,102,241,0.12); } [data-style="2"] .meter-card.active::before { background: radial-gradient(ellipse at 50% -10%, rgba(99,102,241,0.2), transparent 70%); opacity: 1; } [data-style="2"] .meter-card.active .meter-name { color: var(--blue-bright); } [data-style="2"] .meter-img { width: 80px; height: 60px; object-fit: contain; margin-bottom: 10px; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); transition: transform 300ms var(--ease-spring); } /* t2-float removed — a continuous transform:translateY animation on a child inside -webkit-overflow-scrolling:touch creates a GPU sublayer that blocks iOS touch scrolling for the entire decoder panel. The meter image is visually identical without the subtle float. */ [data-style="2"] .meter-name { font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.01em; transition: color var(--dur-mid); } [data-style="2"] .meter-sub { font-size: 10px; color: var(--text-tertiary); font-family: var(--font-mono); letter-spacing: 0.04em; margin-top: 3px; } [data-style="2"] .meter-active-dot { display: none; } /* ============================================================ INPUT FIELDS ============================================================ */ [data-style="2"] input[type="text"], [data-style="2"] input[type="number"], [data-style="2"] input[type="password"], [data-style="2"] select { background: var(--bg-input); border: 1.5px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-primary); font-family: var(--font-mono); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } [data-style="2"] input:focus, [data-style="2"] select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); outline: none; } [data-style="2"] input::placeholder { color: var(--text-tertiary); } /* ============================================================ RESULT TILES — "Data Tiles" hero treatment ============================================================ */ /* Glass mode uses a fixed 64px sidebar which narrows the content area. On mobile (375px phone → 311px content → ~251px inside card → ~120px per 2-col tile) a 38px monospace number is ~140px wide — wider than the tile, completely clipped. Single-column gives each tile the full ~251px width so numbers always fit. */ [data-style="2"] .results-grid { display: grid; grid-template-columns: 1fr; gap: 8px; } [data-style="2"] .result-tile { border-radius: var(--radius-lg); padding: 12px 16px 10px; /* tighter padding — 8 tiles in a single column */ cursor: pointer; position: relative; overflow: hidden; transition: transform 120ms var(--ease-spring), box-shadow 120ms; border-width: 1px; border-style: solid; } /* Ambient corner glow */ [data-style="2"] .result-tile::before { content: ''; position: absolute; top: -50px; right: -50px; width: 130px; height: 130px; border-radius: 50%; opacity: 0.5; pointer-events: none; } [data-style="2"] .result-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0,0,0,0.4); } [data-style="2"] .result-tile:active { transform: scale(0.98); } /* Green tile */ [data-style="2"] .result-tile.green { background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(16,185,129,0.04) 100%); border-color: rgba(16,185,129,0.22); } [data-style="2"] .result-tile.green::before { background: radial-gradient(circle, rgba(16,185,129,0.18), transparent); } /* Purple tile */ [data-style="2"] .result-tile.purple { background: linear-gradient(135deg, rgba(167,139,250,0.1) 0%, rgba(167,139,250,0.04) 100%); border-color: rgba(167,139,250,0.22); } [data-style="2"] .result-tile.purple::before { background: radial-gradient(circle, rgba(167,139,250,0.18), transparent); } /* Orange tile */ [data-style="2"] .result-tile.orange { background: linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(245,158,11,0.04) 100%); border-color: rgba(245,158,11,0.22); } [data-style="2"] .result-tile.orange::before { background: radial-gradient(circle, rgba(245,158,11,0.18), transparent); } /* Blue / indigo tile */ [data-style="2"] .result-tile.blue { background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(99,102,241,0.04) 100%); border-color: rgba(99,102,241,0.22); } [data-style="2"] .result-tile.blue::before { background: radial-gradient(circle, rgba(99,102,241,0.18), transparent); } /* Teal tile */ [data-style="2"] .result-tile.teal { background: linear-gradient(135deg, rgba(45,212,191,0.1) 0%, rgba(45,212,191,0.04) 100%); border-color: rgba(45,212,191,0.22); } [data-style="2"] .result-tile.teal::before { background: radial-gradient(circle, rgba(45,212,191,0.18), transparent); } [data-style="2"] .tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } [data-style="2"] .tile-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); font-family: var(--font-ui); } [data-style="2"] .tile-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.3; } [data-style="2"] .tile-value { font-size: 28px; /* 38px → 28px: fits a 6-digit number in the single-column tile */ font-family: var(--font-mono); font-weight: 500; line-height: 1.15; margin-bottom: 6px; letter-spacing: -0.02em; word-break: break-word; /* allow multi-value results like "Pass: 386666 VPIN: 92481" to wrap */ transition: all 300ms var(--ease-spring); } [data-style="2"] .result-tile.green .tile-value { color: #10B981; } [data-style="2"] .result-tile.purple .tile-value { color: #A78BFA; } [data-style="2"] .result-tile.orange .tile-value { color: #F59E0B; } [data-style="2"] .result-tile.blue .tile-value { color: var(--blue-bright); } [data-style="2"] .result-tile.teal .tile-value { color: #2DD4BF; } [data-style="2"] .tile-sub { font-size: 9.5px; font-family: var(--font-mono); color: var(--text-tertiary); line-height: 1.4; letter-spacing: 0.01em; } [data-style="2"] .copy-hint { position: absolute; bottom: 10px; right: 12px; font-size: 8px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); opacity: 0; transition: opacity var(--dur-fast); font-family: var(--font-ui); } [data-style="2"] .result-tile:hover .copy-hint { opacity: 0.7; } [data-style="2"] .tile-verified { position: absolute; top: 10px; right: 30px; font-size: 8px; font-weight: 800; color: var(--green); opacity: 0.6; font-family: var(--font-mono); } /* ============================================================ CARD FOOTER ============================================================ */ [data-style="2"] .card-footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--border-subtle); background: rgba(255,255,255,0.015); } [data-style="2"] .cpu-tag { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); letter-spacing: 0.08em; } [data-style="2"] .cpu-tag span { color: var(--blue-bright); font-weight: 700; } [data-style="2"] .export-btn { font-family: var(--font-ui); font-size: 11px; font-weight: 600; background: var(--blue-dim); color: var(--blue-bright); border: 1px solid rgba(99,102,241,0.25); border-radius: var(--radius-sm); padding: 6px 14px; cursor: pointer; transition: all var(--dur-fast); letter-spacing: 0.04em; } [data-style="2"] .export-btn:hover { background: rgba(99,102,241,0.22); border-color: rgba(99,102,241,0.45); } /* ============================================================ ERROR + AI DETECT ACTION ROW ============================================================ */ [data-style="2"] .error-section { position: relative; } [data-style="2"] .error-ai-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); padding: 6px; } [data-style="2"] .error-toggle { background: transparent; border: 1px solid transparent; border-radius: var(--radius-lg); padding: 10px 14px; cursor: pointer; transition: all var(--dur-fast); min-height: 52px; } [data-style="2"] .error-toggle:hover { background: rgba(244,63,94,0.06); border-color: rgba(244,63,94,0.2); } [data-style="2"] .error-toggle.open { background: rgba(244,63,94,0.08); border-color: rgba(244,63,94,0.35); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } [data-style="2"] .error-toggle-text strong { font-size: 12px; font-weight: 700; font-family: var(--font-ui); letter-spacing: -0.01em; } [data-style="2"] .error-toggle-text span { font-size: 10px; font-family: var(--font-mono); color: var(--text-secondary); letter-spacing: 0.02em; } [data-style="2"] .ai-detect-shortcut { background: transparent; border: 1px solid transparent; border-radius: var(--radius-lg); padding: 10px 14px; cursor: pointer; transition: all var(--dur-fast); min-height: 52px; } [data-style="2"] .ai-detect-shortcut:hover { background: var(--blue-dim); border-color: rgba(99,102,241,0.25); } [data-style="2"] .ai-shortcut-text strong { font-family: var(--font-ui); font-size: 12px; font-weight: 700; } [data-style="2"] .ai-shortcut-text span { font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); } /* AI detect desc strip */ [data-style="2"] .ai-detect-desc { background: rgba(99,102,241,0.05); border: 1px solid rgba(99,102,241,0.1); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); font-size: 10px; color: var(--text-secondary); font-family: var(--font-mono); padding: 8px 14px; letter-spacing: 0.01em; } /* Luigi callout — glass mode */ [data-style="2"] .luigi-bubble { background: rgba(99,102,241,0.09); border-color: rgba(99,102,241,0.28); backdrop-filter: blur(8px); } [data-style="2"] .luigi-bubble::after { border-color: transparent rgba(15,18,40,0.85) transparent transparent; } [data-style="2"] .luigi-name, [data-style="2"] .luigi-tag, [data-style="2"] .luigi-hint strong { color: #818cf8; } [data-style="2"] .luigi-tag { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.3); } /* Error panel */ [data-style="2"] .error-panel { background: var(--bg-card); border: 1.5px solid rgba(244,63,94,0.3); border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(244,63,94,0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } [data-style="2"] .err-tab.active { color: var(--red); border-bottom-color: var(--red); background: var(--red-dim); } [data-style="2"] .err-search-wrap input:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(244,63,94,0.12); } /* ============================================================ HISTORY SECTION ============================================================ */ [data-style="2"] .history-item { background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); transition: all var(--dur-fast); } [data-style="2"] .history-item:hover { border-color: rgba(99,102,241,0.3); background: var(--blue-dim); transform: translateX(2px); } /* ============================================================ BUTTONS ============================================================ */ [data-style="2"] .btn-primary { background: linear-gradient(135deg, #6366F1, #4F46E5); border: none; border-radius: var(--radius-md); color: #fff; font-family: var(--font-ui); font-weight: 600; font-size: 15px; padding: 14px 0; width: 100%; cursor: pointer; transition: all 150ms var(--ease-spring); box-shadow: 0 4px 20px rgba(99,102,241,0.3); letter-spacing: 0.02em; } [data-style="2"] .btn-primary:hover { transform: scale(1.01); box-shadow: 0 6px 28px rgba(99,102,241,0.45); filter: brightness(1.08); } [data-style="2"] .btn-primary:active { transform: scale(0.98); } [data-style="2"] .btn-ghost-sm { background: rgba(255,255,255,0.04); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-secondary); font-family: var(--font-ui); font-size: 11px; font-weight: 600; padding: 5px 12px; cursor: pointer; transition: all var(--dur-fast); } [data-style="2"] .btn-ghost-sm:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); border-color: var(--border-strong); } [data-style="2"] .btn-ghost-sm.danger { color: var(--red); } [data-style="2"] .btn-ghost-sm.danger:hover { background: var(--red-dim); border-color: rgba(244,63,94,0.3); } /* ============================================================ REPORT / DASHBOARD ============================================================ */ [data-style="2"] .dash-kpi { background: rgba(255,255,255,0.025); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 14px 12px; text-align: center; transition: all var(--dur-fast); position: relative; overflow: hidden; } [data-style="2"] .dash-kpi:hover { background: rgba(255,255,255,0.04); border-color: var(--border-default); transform: translateY(-1px); } [data-style="2"] .dash-kpi-val { font-size: 28px; font-weight: 800; font-family: var(--font-mono); color: var(--blue-bright); line-height: 1.1; letter-spacing: -0.02em; } [data-style="2"] .dash-kpi-lbl { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); margin-top: 4px; font-family: var(--font-ui); } /* ============================================================ USERS TABLE ============================================================ */ [data-style="2"] .users-table-head { background: rgba(255,255,255,0.02); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-tertiary); } [data-style="2"] .users-table-row { font-family: var(--font-ui); font-size: 12px; transition: background 100ms; } [data-style="2"] .users-table-row:hover { background: rgba(255,255,255,0.025); } [data-style="2"] .users-table-row.selected { background: rgba(99,102,241,0.06); } /* Role chips */ [data-style="2"] .role-chip { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.08em; border-radius: 6px; } [data-style="2"] .role-admin { background: rgba(167,139,250,0.12); color: #A78BFA; border-color: rgba(167,139,250,0.2); } [data-style="2"] .role-europump { background: var(--blue-dim); color: var(--blue-bright); border-color: rgba(99,102,241,0.2); } [data-style="2"] .role-technician, [data-style="2"] .role-service { background: rgba(16,185,129,0.1); color: #10B981; border-color: rgba(16,185,129,0.2); } /* ============================================================ SETTINGS PAGE ============================================================ */ [data-style="2"] .stg-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); font-family: var(--font-ui); margin-bottom: 10px; } [data-style="2"] .stg-card { border-radius: var(--radius-lg); } [data-style="2"] .settings-row { border-bottom: 1px solid var(--border-subtle); padding: 14px 16px; } [data-style="2"] .settings-row-label b { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text-primary); } [data-style="2"] .settings-row-label span { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-ui); } [data-style="2"] .settings-toggle-btn { background: rgba(255,255,255,0.04); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-secondary); font-family: var(--font-ui); font-size: 12px; font-weight: 600; padding: 7px 14px; cursor: pointer; transition: all var(--dur-fast); white-space: nowrap; } [data-style="2"] .settings-toggle-btn:hover { background: var(--blue-dim); color: var(--blue-bright); border-color: rgba(99,102,241,0.3); } /* ============================================================ LOGIN SCREEN — "Secure Gateway" ============================================================ */ [data-style="2"] #loginScreen { background: radial-gradient(ellipse at 50% 60%, rgba(99,102,241,0.06), transparent 70%), #060609; } [data-style="2"] .login-card { background: rgba(255,255,255,0.025); backdrop-filter: blur(40px) saturate(160%); -webkit-backdrop-filter: blur(40px) saturate(160%); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 32px 72px rgba(0,0,0,0.65), 0 0 80px rgba(99,102,241,0.08); padding: 36px 32px; max-width: 380px; width: 100%; animation: t2-loginEnter 400ms var(--ease-spring) both; } @keyframes t2-loginEnter { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } [data-style="2"] .login-logo { height: 36px; margin-bottom: 20px; filter: brightness(1.1); } [data-style="2"] .login-headline { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); margin-bottom: 6px; font-family: var(--font-ui); line-height: 1.1; } [data-style="2"] .login-headline span { color: var(--blue-bright); } [data-style="2"] .login-sub { font-size: 12px; color: var(--text-tertiary); font-family: var(--font-ui); font-weight: 400; letter-spacing: 0.01em; margin-bottom: 28px; } [data-style="2"] .field label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); font-family: var(--font-ui); margin-bottom: 7px; display: block; } [data-style="2"] .field input { background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.08); border-radius: 10px; color: var(--text-primary); font-size: 14px; font-family: var(--font-ui); padding: 12px 14px; width: 100%; box-sizing: border-box; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } [data-style="2"] .field input:focus { border-color: rgba(99,102,241,0.6); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); outline: none; background: rgba(99,102,241,0.04); } [data-style="2"] .login-err { font-family: var(--font-ui); font-size: 12px; color: var(--red); background: var(--red-dim); border: 1px solid rgba(244,63,94,0.2); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 12px; } [data-style="2"] .login-footer { font-size: 11px; color: var(--text-tertiary); font-family: var(--font-ui); text-align: center; margin-top: 20px; letter-spacing: 0.03em; } /* ============================================================ SECTION / PAGE HEADERS ============================================================ */ [data-style="2"] .page-header-bar { margin-bottom: 16px; padding-top: 4px; /* Glass mode panel padding is 16px — override the inline margin:-12px -14px set for classic mode so the sticky header bleeds edge-to-edge correctly */ margin-left: -16px !important; margin-right: -16px !important; padding-left: 16px !important; padding-right: 16px !important; } [data-style="2"] .page-header-title { font-family: var(--font-ui); font-size: 20px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); gap: 10px; } [data-style="2"] .page-header-icon { opacity: 0.5; } [data-style="2"] .section-title { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); } /* ============================================================ TOASTS / NOTIFICATIONS ============================================================ */ [data-style="2"] .toast { background: rgba(18,21,28,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: 13px; font-weight: 500; box-shadow: 0 16px 48px rgba(0,0,0,0.5); padding: 12px 18px; color: var(--text-primary); } /* ============================================================ SCROLLBARS ============================================================ */ [data-style="2"] ::-webkit-scrollbar { width: 4px; height: 4px; } [data-style="2"] ::-webkit-scrollbar-track { background: transparent; } [data-style="2"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; } [data-style="2"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); } /* ============================================================ THEME SWITCH BUTTON — adds Theme 2 toggle in settings ============================================================ */ [data-style="2"] #t2ThemeToggleRow .settings-toggle-btn { background: var(--blue-dim); color: var(--blue-bright); border-color: rgba(99,102,241,0.3); } /* ============================================================ FUNCTIONS PAGE ============================================================ */ [data-style="2"] .lab-section-header { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); } [data-style="2"] .lab-log-row, [data-style="2"] .lab-log-hdr { font-family: var(--font-mono); } /* ============================================================ LIGHT MODE COMPAT — keep light mode functional ============================================================ */ [data-style="2"][data-theme="light"] { --bg-base: #F0F2F7; --bg-elevated: #E8EBF2; --bg-card: rgba(255,255,255,0.85); --bg-overlay: rgba(0,0,0,0.03); --bg-input: rgba(0,0,0,0.04); --border-subtle: rgba(0,0,0,0.06); --border-default: rgba(0,0,0,0.1); --text-primary: rgba(0,0,0,0.90); --text-secondary: rgba(0,0,0,0.50); --text-tertiary: rgba(0,0,0,0.30); } [data-style="2"][data-theme="light"] #loginScreen { background: radial-gradient(ellipse at 50% 60%, rgba(99,102,241,0.07), transparent 60%), #EEF0F7; } [data-style="2"][data-theme="light"] .login-card { background: rgba(255,255,255,0.75); box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 24px 64px rgba(0,0,0,0.12), 0 0 60px rgba(99,102,241,0.06); } [data-style="2"][data-theme="light"] #topBar { background: rgba(240,242,247,0.85); border-bottom-color: rgba(0,0,0,0.07); } /* Logo is transparent PNG — blends naturally on glass light background */ [data-style="2"][data-theme="light"] .topbar-logo-left { filter: none; border-radius: 4px; } [data-style="2"][data-theme="light"] #bottomNav { background: rgba(232,235,242,0.95); border-right-color: rgba(0,0,0,0.06); }