/* ============================================================ EMSTRAD Forever — design system + components Dark terminal shell. Scoped under .emstrad so it never leaks into the rest of the VERTISE CRT site. Imports Inter + JetBrains Mono. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); .emstrad-mount { position: absolute; inset: 0; } .emstrad { --em-bg: #0d0d0f; --em-surface: #141416; --em-surface-2: #1a1a1e; --em-surface-3: #202026; --em-border: rgba(255,255,255,0.08); --em-border-strong: rgba(255,255,255,0.15); --em-text: #e8e8ea; --em-muted: #6b6b7a; --em-faint: #3d3d4a; --em-teal: #00d4c8; --em-teal-dim: #00a89e; --em-teal-glow: rgba(0,212,200,0.15); --em-green: #22c55e; --em-red: #ef4444; --em-amber: #f59e0b; --em-yellow: #eab308; --em-purple: #a855f7; --em-live: #10b981; --em-live-glow: rgba(16,185,129,0.2); position: absolute; inset: 0; overflow: hidden; background: var(--em-bg); color: var(--em-text); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.45; display: flex; flex-direction: column; cursor: auto; } .emstrad * { box-sizing: border-box; } /* The host site has no global .hidden rule (every .hidden in main.css is component-scoped), and EMSTRAD mounts on outside those scopes — so define our own. Without this the symbol dropdown and the keypad overlay never hide. */ .emstrad .hidden, .emstrad-keypad-wrap.hidden, #emstrad-fullscreen .hidden { display: none !important; } .emstrad .mono { font-family: 'JetBrains Mono', monospace; } .emstrad .pos { color: var(--em-teal); } .emstrad .neg { color: var(--em-red); } .emstrad .warn { color: var(--em-amber); } .emstrad-muted { color: var(--em-muted); } /* ---- buttons ---- */ .emstrad-btn { font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 6px; padding: 8px 14px; border: 1px solid transparent; cursor: pointer; transition: all .15s; white-space: nowrap; } .emstrad-btn:disabled { opacity: .5; cursor: not-allowed; } .emstrad-btn-primary { background: var(--em-teal); color: #04201e; } .emstrad-btn-primary:hover:not(:disabled) { background: var(--em-teal-dim); } .emstrad-btn-ghost { background: transparent; border-color: var(--em-teal); color: var(--em-teal); } .emstrad-btn-ghost:hover:not(:disabled) { background: var(--em-teal-glow); } .emstrad-btn-danger { background: transparent; border-color: var(--em-red); color: var(--em-red); } .emstrad-btn-sm { padding: 5px 10px; font-size: 12px; } .emstrad-card { background: var(--em-surface); border: 1px solid var(--em-border); border-radius: 8px; padding: 16px; } .emstrad-card-title { font-size: 13px; font-weight: 700; letter-spacing: .03em; color: var(--em-text); } .emstrad-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--em-muted); margin: 24px 0 10px; } .emstrad-subline { font-size: 12px; color: var(--em-muted); margin-top: 3px; } .emstrad-input { background: var(--em-surface-3); border: 1px solid var(--em-border); color: var(--em-text); border-radius: 6px; padding: 7px 9px; font-family: inherit; font-size: 13px; width: 100%; } .emstrad-input.mono { font-family: 'JetBrains Mono', monospace; } .emstrad-input:focus { outline: none; border-color: var(--em-teal); box-shadow: 0 0 0 2px var(--em-teal-glow); } .emstrad-input[readonly] { color: var(--em-muted); } /* ============================================================ TOP BAR */ .emstrad-topbar { display: flex; align-items: center; gap: 18px; padding: 10px 24px; background: var(--em-surface); border-bottom: 1px solid var(--em-border); flex: 0 0 auto; } .emstrad-brand { font-weight: 700; font-size: 16px; letter-spacing: .01em; } .emstrad-brand span { color: var(--em-teal); } .emstrad-selectors { display: flex; gap: 10px; align-items: center; } .emstrad-select { position: relative; } .emstrad-symbol-input { width: 120px; background: var(--em-surface-3); border: 1px solid var(--em-border); color: var(--em-text); border-radius: 6px; padding: 6px 10px; font-family: 'JetBrains Mono', monospace; font-size: 13px; } .emstrad-symbol-input:focus { outline: none; border-color: var(--em-teal); } .emstrad-dropdown { position: absolute; top: 110%; left: 0; right: 0; background: var(--em-surface-2); border: 1px solid var(--em-border-strong); border-radius: 6px; z-index: 50; max-height: 240px; overflow: auto; } .emstrad-dropdown div { padding: 7px 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px; cursor: pointer; } .emstrad-dropdown div:hover { background: var(--em-teal-glow); color: var(--em-teal); } .emstrad-tf { background: var(--em-surface-3); border: 1px solid var(--em-border); color: var(--em-text); border-radius: 6px; padding: 6px 8px; font-family: 'JetBrains Mono', monospace; font-size: 13px; } .emstrad-strat-select { max-width: 160px; font-weight: 600; } .emstrad-topright { margin-left: auto; display: flex; align-items: center; gap: 12px; } .emstrad-cog { background: transparent; border: 1px solid var(--em-border); color: var(--em-muted); width: 34px; height: 34px; border-radius: 6px; cursor: pointer; font-size: 16px; } .emstrad-cog:hover { color: var(--em-teal); border-color: var(--em-teal); } .emstrad-live-toggle { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--em-surface-3); border: 1px solid var(--em-border); color: var(--em-muted); font-weight: 700; font-size: 12px; letter-spacing: .05em; cursor: pointer; } .emstrad-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--em-muted); } .emstrad-live-toggle.on { background: rgba(16,185,129,0.15); border-color: var(--em-live); color: var(--em-live); box-shadow: 0 0 12px var(--em-live-glow); } .emstrad-live-toggle.on .emstrad-live-dot { background: var(--em-live); animation: emstrad-pulse 2s cubic-bezier(.4,0,.6,1) infinite; } @keyframes emstrad-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } .emstrad-app.emstrad-live-on { box-shadow: inset 0 0 0 1px var(--em-live); } /* ============================================================ TABS */ .emstrad-tabs { display: flex; gap: 4px; padding: 0 24px; background: var(--em-surface); border-bottom: 1px solid var(--em-border); flex: 0 0 auto; overflow-x: auto; } .emstrad-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--em-muted); padding: 12px 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; cursor: pointer; position: relative; white-space: nowrap; } .emstrad-tab:hover { color: var(--em-text); } .emstrad-tab.active { color: var(--em-teal); border-bottom-color: var(--em-teal); } .emstrad-badge { display: inline-block; margin-left: 6px; background: var(--em-live); color: #04201e; border-radius: 999px; font-size: 10px; padding: 1px 6px; font-weight: 700; } .emstrad-tabbody { flex: 1 1 auto; overflow: auto; padding: 24px; } /* ============================================================ KPI */ .emstrad-kpi-grid { display: grid; gap: 10px; margin-bottom: 14px; } .emstrad-kpi-grid.five { grid-template-columns: repeat(5, 1fr); } .emstrad-kpi-grid.four { grid-template-columns: repeat(4, 1fr); } .emstrad-kpi-grid.seven { grid-template-columns: repeat(7, 1fr); } .emstrad-kpi { background: var(--em-surface-2); border: 1px solid var(--em-border); border-radius: 8px; padding: 12px; } .emstrad-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--em-muted); } .emstrad-kpi-value { font-family: 'JetBrains Mono', monospace; font-size: 24px; font-weight: 700; margin: 4px 0 2px; } .emstrad-kpi-sub { font-size: 11px; color: var(--em-muted); font-family: 'JetBrains Mono', monospace; } /* ============================================================ BACKTEST */ .emstrad-backtest { display: grid; grid-template-columns: 65% 35%; gap: 16px; align-items: start; } .emstrad-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 12px; } .emstrad-head-actions { display: flex; gap: 8px; } .emstrad-equity { width: 100%; height: 280px; margin-top: 8px; } .emstrad-fetchbar { margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--em-teal); } .emstrad-fetchgauge { letter-spacing: -1px; } .emstrad-controls .emstrad-ctrl-group { margin-bottom: 16px; } .emstrad-ctrl-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--em-muted); margin-bottom: 7px; } .emstrad-radio { display: block; font-size: 13px; margin: 4px 0; cursor: pointer; } .emstrad-upload { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--em-teal); cursor: pointer; } .emstrad-upload.disabled { color: var(--em-faint); cursor: not-allowed; } .emstrad-upload input { display: none; } .emstrad-segmented { display: flex; gap: 4px; } .emstrad-segmented button { flex: 1; background: var(--em-surface-3); border: 1px solid var(--em-border); color: var(--em-muted); padding: 7px 0; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12px; cursor: pointer; } .emstrad-segmented button.active { background: var(--em-teal-glow); border-color: var(--em-teal); color: var(--em-teal); } .emstrad-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .emstrad-presets button { background: var(--em-surface-3); border: 1px solid var(--em-border); color: var(--em-text); padding: 8px; border-radius: 6px; font-size: 12px; cursor: pointer; } .emstrad-presets button:hover { border-color: var(--em-teal); color: var(--em-teal); } .emstrad-preset-badge { display: inline-block; background: var(--em-teal-glow); color: var(--em-teal); font-size: 10px; padding: 1px 7px; border-radius: 999px; margin-left: 6px; font-weight: 700; } .emstrad-empty, .emstrad-needrun { text-align: center; padding: 48px 20px; color: var(--em-muted); } .emstrad-empty-icon { font-size: 36px; color: var(--em-teal); } .emstrad-empty-title { font-size: 16px; font-weight: 700; color: var(--em-text); margin: 8px 0 6px; } .emstrad-empty-text { font-size: 13px; line-height: 1.6; } .emstrad-needrun .emstrad-btn { margin-top: 16px; } /* ============================================================ LIVE */ .emstrad-banner { border-radius: 10px; padding: 20px; margin-bottom: 18px; border: 1px solid var(--em-border); } .emstrad-banner-title { font-size: 18px; font-weight: 700; letter-spacing: .02em; } .emstrad-banner-sub { font-size: 13px; color: var(--em-muted); margin-top: 6px; } .emstrad-banner.neutral { background: var(--em-surface-2); } .emstrad-banner.window-long { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.4); box-shadow: 0 0 22px rgba(34,197,94,0.12); } .emstrad-banner.window-short { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.4); box-shadow: 0 0 22px rgba(245,158,11,0.12); } .emstrad-banner.active-long { background: rgba(34,197,94,0.14); border: 2px solid var(--em-green); animation: emstrad-borderpulse-g 1.5s infinite; } .emstrad-banner.active-short { background: rgba(239,68,68,0.14); border: 2px solid var(--em-red); animation: emstrad-borderpulse-r 1.5s infinite; } @keyframes emstrad-borderpulse-g { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 50% { box-shadow: 0 0 22px 2px rgba(34,197,94,0.4); } } @keyframes emstrad-borderpulse-r { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.5); } 50% { box-shadow: 0 0 22px 2px rgba(239,68,68,0.4); } } .emstrad-paused { background: var(--em-amber); color: #2a1c02; font-size: 11px; padding: 1px 7px; border-radius: 999px; margin-left: 8px; vertical-align: middle; } .emstrad-countbar { height: 6px; background: var(--em-surface-3); border-radius: 999px; margin-top: 12px; overflow: hidden; } .emstrad-countbar-fill { height: 100%; background: var(--em-teal); transition: width .4s; } .emstrad-signal-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; } .emstrad-signal-levels div { display: flex; flex-direction: column; } .emstrad-signal-levels span { font-size: 11px; color: var(--em-muted); text-transform: uppercase; } .emstrad-signal-levels b { font-size: 18px; } .emstrad-live-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .emstrad-infotable table { width: 100%; border-collapse: collapse; } .emstrad-infotable th, .emstrad-infotable td { padding: 8px 10px; font-size: 13px; text-align: left; } .emstrad-infotable thead th { background: #1a1a2e; color: #fff; font-weight: 700; } .emstrad-infotable tbody tr:nth-child(odd) { background: var(--em-surface-2); } .emstrad-infotable td:first-child { color: var(--em-muted); } .emstrad-it-val { text-align: right; font-family: 'JetBrains Mono', monospace; font-weight: 600; } .emstrad-autorefresh { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--em-muted); margin-bottom: 14px; } .emstrad-countdash { font-family: 'JetBrains Mono', monospace; color: var(--em-teal); letter-spacing: -1px; } .emstrad-sighist-row { display: grid; grid-template-columns: 90px 110px 1fr 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--em-border); font-size: 12px; } /* ============================================================ CHARTS */ .emstrad-chart-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .emstrad-chiptoggle, .emstrad-chip { background: var(--em-surface-3); border: 1px solid var(--em-border); color: var(--em-muted); padding: 6px 11px; border-radius: 6px; font-size: 12px; cursor: pointer; } .emstrad-chiptoggle.on { background: var(--em-teal-glow); border-color: var(--em-teal); color: var(--em-teal); } .emstrad-zoomlabel { margin-left: auto; font-size: 12px; color: var(--em-muted); } .emstrad-chart-main { height: 520px; padding: 0; margin-bottom: 14px; overflow: hidden; } .emstrad-chart-sub { height: 220px; padding: 0; margin-bottom: 14px; overflow: hidden; } .emstrad-chart-tip { position: absolute; background: rgba(20,20,22,0.92); border: 1px solid var(--em-border-strong); padding: 6px 9px; font-family: 'JetBrains Mono', monospace; font-size: 11px; border-radius: 5px; z-index: 5; pointer-events: none; display: none; } /* ============================================================ TABLE */ .emstrad-tablewrap { overflow: auto; border: 1px solid var(--em-border); border-radius: 8px; } .emstrad-table { width: 100%; border-collapse: collapse; font-size: 13px; } .emstrad-table th { position: sticky; top: 0; background: var(--em-surface-2); color: var(--em-muted); text-align: left; padding: 9px 11px; cursor: pointer; white-space: nowrap; user-select: none; font-weight: 600; } .emstrad-table th:hover { color: var(--em-teal); } .emstrad-table td { padding: 8px 11px; border-top: 1px solid var(--em-border); } .emstrad-table tbody tr { cursor: pointer; } .emstrad-table tbody tr.win { background: rgba(0,212,200,0.05); } .emstrad-table tbody tr.loss { background: rgba(239,68,68,0.05); } .emstrad-table tbody tr:hover { background: var(--em-surface-3); } .emstrad-tl-summary td { background: var(--em-surface-2); font-weight: 700; } .emstrad-tl-filters { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .emstrad-tl-filters label { font-size: 12px; color: var(--em-muted); display: flex; gap: 6px; align-items: center; } .emstrad-tl-filters select { background: var(--em-surface-3); border: 1px solid var(--em-border); color: var(--em-text); border-radius: 6px; padding: 5px 8px; } .emstrad-tl-count { color: var(--em-muted); font-size: 12px; } .emstrad-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 12px; font-size: 12px; color: var(--em-muted); } /* ============================================================ PERFORMANCE */ .emstrad-dist { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .emstrad-canvas { width: 100%; height: 220px; display: block; margin-top: 10px; } .emstrad-donut-wrap { display: flex; gap: 16px; align-items: center; } .emstrad-donut-wrap .emstrad-canvas { width: 220px; height: 220px; } .emstrad-donut-legend { font-size: 13px; display: flex; flex-direction: column; gap: 8px; } .emstrad-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; } .emstrad-heatmap { display: flex; flex-direction: column; gap: 6px; } .emstrad-heat-row { display: flex; gap: 6px; align-items: stretch; } .emstrad-heat-year { width: 48px; display: flex; align-items: center; font-family: 'JetBrains Mono', monospace; color: var(--em-muted); font-size: 12px; } .emstrad-heat-cell { flex: 1; border-radius: 4px; padding: 8px 4px; text-align: center; min-width: 0; } .emstrad-heat-cell span { display: block; font-size: 10px; color: rgba(255,255,255,0.6); } .emstrad-heat-cell b { font-size: 11px; font-family: 'JetBrains Mono', monospace; } /* ============================================================ BOT */ .emstrad-bot-banner { background: var(--em-surface-2); border: 1px solid var(--em-amber); color: var(--em-amber); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; } .emstrad-bot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } .emstrad-disabled { opacity: .5; } .emstrad-disabled input, .emstrad-disabled button { cursor: not-allowed; } .emstrad-field { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 13px; } .emstrad-field input { width: 140px; } .emstrad-acct { display: flex; gap: 16px; font-size: 13px; color: var(--em-muted); } .emstrad-bot-settings { display: flex; gap: 18px; margin: 12px 0; flex-wrap: wrap; } .emstrad-bot-settings label { font-size: 12px; color: var(--em-muted); display: flex; gap: 8px; align-items: center; } .emstrad-bot-settings input { width: 80px; } .emstrad-bot-actions { display: flex; gap: 10px; flex-wrap: wrap; } .emstrad-paperpos { border-radius: 8px; padding: 14px; border: 1px solid var(--em-border); background: var(--em-surface-2); } .emstrad-paperpos-long { border-left: 3px solid var(--em-green); } .emstrad-paperpos-short { border-left: 3px solid var(--em-red); } .emstrad-paperpos-head { font-size: 14px; margin-bottom: 10px; } .emstrad-paperpos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .emstrad-paperpos-grid div { display: flex; flex-direction: column; } .emstrad-paperpos-grid span { font-size: 11px; color: var(--em-muted); text-transform: uppercase; } .emstrad-paperpos-grid b { font-size: 15px; } .emstrad-bot-modes { display: inline-flex; gap: 4px; background: var(--em-surface-3); border: 1px solid var(--em-border); border-radius: 8px; padding: 4px; margin-bottom: 14px; } .emstrad-bot-modes button { background: transparent; border: none; color: var(--em-muted); padding: 7px 18px; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; } .emstrad-bot-modes button.active { background: var(--em-teal-glow); color: var(--em-teal); } .emstrad-warn-banner { border: 1px solid var(--em-amber) !important; color: var(--em-amber); background: rgba(245,158,11,0.08) !important; } /* ============================================================ TOASTS */ .emstrad-toasts { position: absolute; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 200; } .emstrad-toast { background: var(--em-surface-2); border: 1px solid var(--em-border-strong); border-left: 3px solid var(--em-teal); padding: 11px 15px; border-radius: 6px; font-size: 13px; max-width: 340px; box-shadow: 0 8px 24px rgba(0,0,0,.4); animation: emstrad-toastin .25s ease; } .emstrad-toast.out { opacity: 0; transform: translateX(20px); transition: all .3s; } .emstrad-toast-success { border-left-color: var(--em-green); } .emstrad-toast-error { border-left-color: var(--em-red); } .emstrad-toast-info { border-left-color: var(--em-teal); } @keyframes emstrad-toastin { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } } /* ============================================================ SIDEBAR */ .emstrad-sidebar { position: absolute; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw; background: var(--em-surface-2); border-left: 1px solid var(--em-border-strong); transform: translateX(100%); transition: transform .25s ease; z-index: 150; display: flex; flex-direction: column; } .emstrad-sidebar.open { transform: none; box-shadow: -16px 0 40px rgba(0,0,0,.5); } .emstrad-sidebar-inner { display: flex; flex-direction: column; height: 100%; } .emstrad-sidebar-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--em-border); font-weight: 700; letter-spacing: .04em; } .emstrad-sidebar-head .emstrad-cog { margin-left: auto; } .emstrad-sidebar-scroll { flex: 1; overflow: auto; padding: 8px 16px; } .emstrad-sidebar-foot { padding: 14px 16px; border-top: 1px solid var(--em-border); display: flex; gap: 8px; } .emstrad-sidebar-foot .emstrad-btn { flex: 1; } .emstrad-pgroup { border-bottom: 1px solid var(--em-border); } .emstrad-pgroup summary { padding: 12px 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--em-text); cursor: pointer; font-weight: 600; } .emstrad-pgroup-body { padding-bottom: 12px; } .emstrad-pfield { margin-bottom: 10px; } .emstrad-pfield label { display: block; font-size: 12px; color: var(--em-muted); margin-bottom: 4px; } .emstrad-pfield-ctl { display: flex; gap: 6px; align-items: center; } .emstrad-autopill { font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 999px; cursor: pointer; border: 1px solid var(--em-border); } .emstrad-autopill.auto { background: var(--em-teal-glow); color: var(--em-teal); border-color: var(--em-teal); } .emstrad-autopill.manual { background: var(--em-surface-3); color: var(--em-muted); } .emstrad-resetauto { display: inline-block; margin-top: 4px; font-size: 11px; color: var(--em-teal); cursor: pointer; } .emstrad-pcheck { display: block; font-size: 12px; margin: 6px 0; cursor: pointer; color: var(--em-text); } .emstrad-savedlist { display: flex; flex-direction: column; gap: 5px; } .emstrad-savedrow { display: flex; gap: 6px; } .emstrad-savedrow button:first-child { flex: 1; text-align: left; background: var(--em-surface-3); border: 1px solid var(--em-border); color: var(--em-text); padding: 6px 9px; border-radius: 6px; cursor: pointer; font-size: 12px; } .emstrad-delset { background: transparent; border: 1px solid var(--em-border); color: var(--em-red); border-radius: 6px; cursor: pointer; width: 30px; } /* ============================================================ LOCK */ .emstrad-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .emstrad-lock-bg { position: absolute; inset: 0; filter: blur(12px); transform: scale(1.04); pointer-events: none; } .emstrad-lock-overlay { position: absolute; inset: 0; background: rgba(8,8,10,0.6); } .emstrad-lock-card { position: relative; z-index: 2; text-align: center; max-width: 460px; padding: 36px; } .emstrad-lock-logo { font-size: 28px; font-weight: 700; } .emstrad-lock-logo span { color: var(--em-teal); } .emstrad-lock-tag { color: var(--em-muted); font-size: 14px; margin: 16px 0 24px; line-height: 1.6; } .emstrad-unlock { font-size: 15px; padding: 12px 26px; } .emstrad-lock-note { margin-top: 16px; font-size: 12px; color: var(--em-faint); } .emstrad-lock-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 20px 24px; } .emstrad-skel { height: 70px; background: var(--em-surface-2); } .emstrad-skel-tall { grid-column: 1 / -1; height: 220px; } .emstrad-kpis-mini { display: flex; gap: 14px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--em-muted); } .emstrad-lock .emstrad-tabs span { padding: 12px 14px; font-size: 13px; text-transform: uppercase; color: var(--em-muted); } .emstrad-lock .emstrad-tabs span.active { color: var(--em-teal); } /* keypad (Vault-13 styled) */ .emstrad-keypad-wrap { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(5,7,5,0.78); } .emstrad-keypad { background: #0a120a; border: 2px solid #2e7d32; border-radius: 10px; padding: 22px; width: 280px; box-shadow: 0 0 40px rgba(46,125,50,0.4); font-family: 'JetBrains Mono', monospace; } .emstrad-keypad.shake { animation: emstrad-shake .5s; } @keyframes emstrad-shake { 0%,100% { transform: none; } 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } } .emstrad-keypad-title { color: #7CFC00; text-align: center; font-size: 13px; letter-spacing: .1em; } .emstrad-keypad-sub { color: #4caf50; text-align: center; font-size: 10px; margin-bottom: 12px; } .emstrad-keypad-display { color: #7CFC00; text-align: center; font-size: 26px; letter-spacing: .3em; margin: 8px 0; } .emstrad-keypad-feedback { color: #ff5252; text-align: center; font-size: 11px; min-height: 28px; } .emstrad-keypad-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .emstrad-key { background: #11210f; border: 1px solid #2e7d32; color: #7CFC00; padding: 13px 0; border-radius: 6px; font-family: inherit; font-size: 16px; cursor: pointer; } .emstrad-key:hover { background: #1a3318; } .emstrad-key.ok { background: #1b5e20; } .emstrad-key.del { color: #ff8a65; } /* ============================================================ PREMIUM LAYER — full-screen slate, boot, polish, Lab components ============================================================ */ /* full-viewport takeover, above all VERTISE chrome */ #emstrad-fullscreen { position: fixed; inset: 0; z-index: 99990; } #emstrad-fullscreen .emstrad { position: absolute; inset: 0; background: radial-gradient(1200px 600px at 78% -10%, rgba(0,212,200,0.10), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(16,185,129,0.07), transparent 60%), var(--em-bg); } /* hide the retro site chrome while EMSTRAD owns the screen */ body.emstrad-active { overflow: hidden; cursor: auto; } body.emstrad-active #vertise-cursor, body.emstrad-active #vertise-cursor-dot, body.emstrad-active #vertise-cursor-trail, body.emstrad-active #vertise-vlines, body.emstrad-active #vertise-channel, body.emstrad-active #vertise-vhs, body.emstrad-active #vertise-back-btn, body.emstrad-active #vertise-bag-btn { display: none !important; } body.emstrad-active * { cursor: auto; } body.emstrad-active a, body.emstrad-active button, body.emstrad-active .emstrad-tab, body.emstrad-active [data-action], body.emstrad-active [role="button"] { cursor: pointer; } /* ---- boot sequence ---- */ .emstrad-boot { display: flex; align-items: center; justify-content: center; } .emstrad-boot-inner { width: min(520px, 86vw); text-align: center; animation: emstrad-fadeup .4s ease; } .emstrad-boot-logo { font-size: 30px; font-weight: 800; letter-spacing: .01em; margin-bottom: 22px; } .emstrad-boot-bar { height: 3px; background: var(--em-surface-3); border-radius: 999px; overflow: hidden; margin-bottom: 18px; } .emstrad-boot-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--em-teal), var(--em-live)); animation: emstrad-bootfill 1.45s ease forwards; box-shadow: 0 0 12px var(--em-teal); } @keyframes emstrad-bootfill { to { width: 100%; } } .emstrad-boot-lines { text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--em-muted); } .emstrad-boot-line { opacity: 0; animation: emstrad-bootline .3s ease forwards; } @keyframes emstrad-bootline { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } .emstrad-boot-line:last-child { color: var(--em-teal); } .emstrad-boot-skip { margin-top: 20px; font-size: 11px; color: var(--em-faint); } /* ---- brand mark + gradient ---- */ .em-grad { background: linear-gradient(90deg, var(--em-teal), var(--em-live)); -webkit-background-clip: text; background-clip: text; color: transparent; } .emstrad-bolt { display: inline-block; animation: emstrad-pulse 2.4s ease-in-out infinite; color: var(--em-teal); } .emstrad-boot-logo .em-grad { font-weight: 800; } /* ---- glassy top bar + exit ---- */ .emstrad-topbar { background: rgba(20,20,22,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--em-border), 0 8px 24px rgba(0,0,0,0.25); position: relative; z-index: 20; } .emstrad-exit { width: 32px; height: 32px; border-radius: 8px; background: var(--em-surface-3); border: 1px solid var(--em-border); color: var(--em-muted); font-size: 20px; line-height: 1; cursor: pointer; margin-right: 4px; transition: all .15s; } .emstrad-exit:hover { color: var(--em-teal); border-color: var(--em-teal); transform: translateX(-2px); } /* ---- refined cards + buttons ---- */ .emstrad-card { background: linear-gradient(180deg, var(--em-surface), #111113); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); transition: border-color .18s, box-shadow .18s, transform .18s; } .emstrad-card:hover { border-color: var(--em-border-strong); } .emstrad-btn-primary { background: linear-gradient(180deg, var(--em-teal), var(--em-teal-dim)); box-shadow: 0 2px 10px rgba(0,212,200,0.25); } .emstrad-btn-primary:hover:not(:disabled) { box-shadow: 0 4px 16px rgba(0,212,200,0.4); transform: translateY(-1px); } .emstrad-btn:active:not(:disabled) { transform: translateY(0) scale(.985); } /* ---- KPI polish + staggered entrance ---- */ .emstrad-kpi { background: linear-gradient(180deg, var(--em-surface-2), #161619); transition: transform .18s, box-shadow .18s; animation: emstrad-fadeup .45s ease backwards; } .emstrad-kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.35); } .emstrad-kpi-grid .emstrad-kpi:nth-child(1) { animation-delay: .02s; } .emstrad-kpi-grid .emstrad-kpi:nth-child(2) { animation-delay: .06s; } .emstrad-kpi-grid .emstrad-kpi:nth-child(3) { animation-delay: .10s; } .emstrad-kpi-grid .emstrad-kpi:nth-child(4) { animation-delay: .14s; } .emstrad-kpi-grid .emstrad-kpi:nth-child(5) { animation-delay: .18s; } .emstrad-kpi-grid .emstrad-kpi:nth-child(n+6) { animation-delay: .22s; } .emstrad-kpi-value { letter-spacing: -0.5px; } /* tab content transition */ .emstrad-tabbody > * { animation: emstrad-fadeup .3s ease; } @keyframes emstrad-fadeup { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* tab underline glow */ .emstrad-tab.active { text-shadow: 0 0 14px var(--em-teal-glow); } /* custom scrollbars */ .emstrad ::-webkit-scrollbar { width: 9px; height: 9px; } .emstrad ::-webkit-scrollbar-track { background: transparent; } .emstrad ::-webkit-scrollbar-thumb { background: var(--em-surface-3); border-radius: 999px; border: 2px solid var(--em-bg); } .emstrad ::-webkit-scrollbar-thumb:hover { background: var(--em-border-strong); } /* fetch gauge -> real animated bar */ .emstrad-fetchbar { display: flex; align-items: center; gap: 10px; } .emstrad-fetchgauge { color: var(--em-teal); } /* ---- lock screen cinematic ---- */ .emstrad-lock-bg { background: radial-gradient(900px 500px at 80% 0%, rgba(0,212,200,0.12), transparent 60%), var(--em-bg); } .emstrad-lock-card { animation: emstrad-fadeup .6s ease; } .emstrad-lock-logo { font-size: 34px; } .emstrad-unlock { box-shadow: 0 0 0 0 rgba(0,212,200,0.5); animation: emstrad-cta 2.4s ease-in-out infinite; } @keyframes emstrad-cta { 0%,100% { box-shadow: 0 4px 16px rgba(0,212,200,0.25); } 50% { box-shadow: 0 6px 28px rgba(0,212,200,0.5); } } /* ============================================================ AUTH */ .emstrad-authcard { width: min(420px, 90vw); } .emstrad-auth-tabs { display: flex; gap: 6px; margin: 18px 0 14px; background: var(--em-surface-3); border: 1px solid var(--em-border); border-radius: 8px; padding: 4px; } .emstrad-auth-tabs button { flex: 1; background: transparent; border: none; color: var(--em-muted); padding: 8px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; } .emstrad-auth-tabs button.active { background: var(--em-teal-glow); color: var(--em-teal); } .emstrad-auth-form { display: flex; flex-direction: column; gap: 10px; text-align: left; } .emstrad-auth-form .emstrad-input { padding: 11px 12px; } .emstrad-auth-err { color: var(--em-red); font-size: 12px; min-height: 16px; } .emstrad-authcard .emstrad-unlock { width: 100%; animation: none; } .emstrad-price { font-size: 42px; font-weight: 800; letter-spacing: -1px; margin: 18px 0 6px; } .emstrad-price span { display: block; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--em-muted); margin-top: 4px; } .emstrad-paygate .emstrad-unlock { width: 100%; } .emstrad-link { color: var(--em-teal); cursor: pointer; text-decoration: none; } .emstrad-link:hover { text-decoration: underline; } .emstrad-account { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; background: var(--em-surface-3); border: 1px solid var(--em-border); border-radius: 999px; } .emstrad-acct-email { font-size: 12px; color: var(--em-muted); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emstrad-acct-logout { background: transparent; border: 1px solid var(--em-border); color: var(--em-muted); border-radius: 999px; padding: 4px 10px; font-size: 11px; cursor: pointer; } .emstrad-acct-logout:hover { color: var(--em-red); border-color: var(--em-red); } /* ============================================================ LAB */ .emstrad-lab-intro { font-size: 13px; color: var(--em-muted); background: var(--em-surface-2); border: 1px solid var(--em-border); border-left: 3px solid var(--em-teal); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; } .emstrad-lab-intro b { color: var(--em-text); } .emstrad-lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .emstrad-lab-status { margin-top: 14px; font-size: 13px; color: var(--em-teal); font-family: 'JetBrains Mono', monospace; } .emstrad-verdict { border-radius: 10px; padding: 16px; margin-bottom: 18px; border: 1px solid var(--em-border); background: var(--em-surface-2); } .emstrad-verdict-strong { border-color: rgba(34,197,94,0.4); box-shadow: 0 0 22px rgba(34,197,94,0.08); } .emstrad-verdict-mixed { border-color: rgba(245,158,11,0.4); } .emstrad-verdict-weak { border-color: rgba(239,68,68,0.4); } .emstrad-verdict-head { font-weight: 700; font-size: 14px; letter-spacing: .02em; margin-bottom: 10px; } .emstrad-verdict-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; } .emstrad-verdict-item { font-size: 12.5px; } .emstrad-verdict-item.ok { color: var(--em-green); } .emstrad-verdict-item.no { color: var(--em-red); } .emstrad-verdict-item.pending { color: var(--em-muted); } .emstrad-mini-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 8px; } .emstrad-mini-table th { text-align: left; color: var(--em-muted); font-weight: 600; padding: 5px 8px; border-bottom: 1px solid var(--em-border); } .emstrad-mini-table td { padding: 5px 8px; border-bottom: 1px solid var(--em-border); } .emstrad-hist-table td, .emstrad-hist-table th { padding: 4px 8px; } .emstrad-wf-verdict { font-size: 12.5px; margin: 8px 0; padding: 8px 10px; border-radius: 6px; background: var(--em-surface-3); } .emstrad-wf-verdict.ok { color: var(--em-green); } .emstrad-wf-verdict.no { color: var(--em-amber); } .emstrad-mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-bottom: 8px; } .emstrad-mc-grid div { display: flex; justify-content: space-between; font-size: 12.5px; border-bottom: 1px solid var(--em-border); padding: 4px 0; } .emstrad-mc-grid span { color: var(--em-muted); } .emstrad-alerts .emstrad-pfield { margin-bottom: 8px; } .emstrad-ror { font-size: 12px; margin: 6px 0; display: flex; gap: 12px; flex-wrap: wrap; color: var(--em-muted); } .emstrad-ror span { font-family: 'JetBrains Mono', monospace; } /* scanner */ .emstrad-table tbody tr.armed { background: rgba(245,158,11,0.08); } .emstrad-scanner .emstrad-card-head { margin-bottom: 12px; } .emstrad-note-btn { background: var(--em-surface-3); border: 1px solid var(--em-border); color: var(--em-muted); border-radius: 5px; width: 26px; height: 22px; cursor: pointer; font-size: 11px; } .emstrad-note-btn.has { border-color: var(--em-teal); } .emstrad-note-btn:hover { color: var(--em-teal); border-color: var(--em-teal); } /* ============================================================ RESPONSIVE */ @media (max-width: 1100px) { .emstrad-lab-grid { grid-template-columns: 1fr; } .emstrad-verdict-list { grid-template-columns: 1fr; } } @media (max-width: 900px) { .emstrad-backtest, .emstrad-live-cols, .emstrad-bot-grid, .emstrad-dist { grid-template-columns: 1fr; } .emstrad-kpi-grid.five, .emstrad-kpi-grid.four, .emstrad-kpi-grid.seven { grid-template-columns: repeat(2, 1fr); } .emstrad-lock-grid { grid-template-columns: repeat(2, 1fr); } .emstrad-topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; } .emstrad-tabbody { padding: 14px; } .emstrad-signal-levels { grid-template-columns: repeat(2, 1fr); } .emstrad-heat-cell b { display: none; } }