/* Login screens (client app + manager CRM): Bybit-like greeting over a live market backdrop. Loaded last. */
:root { --ls-bg:#0b0e13; --ls-surface:rgba(18,23,31,.78); --ls-solid:#141922; --ls-line:#232b37; --ls-text:#eaecef; --ls-muted:#848e9c; --ls-accent:#27d9a2; --ls-ink:#04130d; --ls-input:#0e131a; --ls-up:#2bd58a; --ls-dn:#ff6b70; --ls-edge:#303a48; }
:root[data-theme="purple-light"] { --ls-bg:#f3f5f8; --ls-surface:rgba(255,255,255,.86); --ls-solid:#ffffff; --ls-line:#e3e7ec; --ls-text:#0b0e13; --ls-muted:#667085; --ls-accent:#0c9f74; --ls-ink:#ffffff; --ls-input:#f0f3f7; --ls-up:#0d8f58; --ls-dn:#d12f3b; --ls-edge:#d3d9e1; }

.ls-stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--ls-bg); overflow: hidden; }
.ls-stage.off { display: none; }
.ls-canvas { position: absolute; left: 0; right: 0; top: 36px; bottom: 0; width: 100%; height: calc(100% - 36px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 90%, transparent 100%); }
.ls-ticker { position: absolute; top: 0; left: 0; right: 0; height: 36px; overflow: hidden; display: flex; align-items: center; border-bottom: 1px solid var(--ls-line); background: var(--ls-solid); }
.ls-stage.no-ticker .ls-ticker { display: none; }
.ls-track { display: flex; flex: none; gap: 30px; padding-left: 30px; white-space: nowrap; animation: ls-marquee 70s linear infinite; will-change: transform; }
@keyframes ls-marquee { to { transform: translateX(-50%); } }
.ls-tk { display: inline-flex; align-items: baseline; gap: 8px; font: 600 12.5px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ls-text); }
.ls-tk b { font-weight: 700; color: var(--ls-muted); letter-spacing: .02em; }
.ls-tk em { font-style: normal; }
.ls-tk i { font-style: normal; font-size: 11.5px; }
.ls-tk.up i { color: var(--ls-up); } .ls-tk.dn i { color: var(--ls-dn); }
@media (prefers-reduced-motion: reduce) { .ls-track { animation: none; } }

/* page chrome while the stage is on */
html.ls-on body { background: var(--ls-bg) !important; background-image: none !important; }
html.ls-on body.mobile-product .mobile-shell { position: relative; z-index: 1; background: transparent !important; padding-top: 44px; }
html.ls-on .mobile-topbar { display: none !important; }

/* ---------------- client login ---------------- */
:root[data-theme] body.mobile-product .auth-panel { position: relative; z-index: 1; width: min(460px, 100%); margin: 0 auto; padding: 18px 16px 34px; gap: 14px; background: transparent !important; border: 0 !important; box-shadow: none !important; }
:root[data-theme] body.mobile-product .auth-panel.hidden { display: none !important; }
:root[data-theme] body.mobile-product .auth-hero { padding: 8px 2px 4px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; gap: 10px; }
.ls-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--ls-text); font-weight: 800; font-size: 17px; letter-spacing: -.01em; }
.ls-brand img { width: 34px; height: 34px; display: block; }
:root[data-theme] body.mobile-product .auth-hero h1 { margin: 0; color: var(--ls-text) !important; font-size: clamp(34px, 9vw, 44px); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; }
:root[data-theme] body.mobile-product .auth-hero h1 span { color: var(--ls-accent); }
:root[data-theme] body.mobile-product .auth-hero p { margin: 6px 0 0; color: var(--ls-muted) !important; font-size: 15px; line-height: 1.5; max-width: 34ch; }
:root[data-theme] body.mobile-product .auth-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--ls-line) !important; border-radius: 14px; background: var(--ls-surface) !important; backdrop-filter: blur(14px); box-shadow: none !important; }
:root[data-theme] body.mobile-product .auth-mode-tabs button { min-height: 44px; border: 0 !important; border-radius: 11px; background: transparent !important; color: var(--ls-muted) !important; font-size: 15px; font-weight: 800; box-shadow: none !important; }
:root[data-theme] body.mobile-product .auth-mode-tabs button.active { background: var(--ls-accent) !important; color: var(--ls-ink) !important; }
:root[data-theme] body.mobile-product .auth-form { padding: 18px 16px 18px !important; gap: 14px; border: 1px solid var(--ls-line) !important; border-radius: 22px !important; background: var(--ls-surface) !important; backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0, 0, 0, .22) !important; }
:root[data-theme] body.mobile-product .auth-form label { color: var(--ls-muted) !important; font-size: 13px; font-weight: 600; }
:root[data-theme] body.mobile-product .auth-form input { min-height: 50px; padding: 0 14px; border: 1px solid var(--ls-edge) !important; border-radius: 14px !important; background: var(--ls-input) !important; color: var(--ls-text) !important; font-size: 16px; box-shadow: none !important; }
:root[data-theme] body.mobile-product .auth-form input::placeholder { color: var(--ls-muted) !important; opacity: .7; }
:root[data-theme] body.mobile-product .auth-form input:focus { outline: none; border-color: var(--ls-accent) !important; box-shadow: 0 0 0 3px rgba(39, 217, 162, .16) !important; }
:root[data-theme] body.mobile-product .auth-actions button, html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-panel .auth-actions button { width: 100%; min-height: 52px; border: 0 !important; border-radius: 14px !important; background: var(--ls-accent) !important; background-image: none !important; color: var(--ls-ink) !important; font-size: 16px; font-weight: 800; box-shadow: none !important; }
:root[data-theme] body.mobile-product .forgot-toggle { color: var(--ls-accent) !important; background: transparent !important; border: 0 !important; font-weight: 700; }
:root[data-theme] body.mobile-product .task-screen { background: var(--ls-solid) !important; color: var(--ls-text) !important; border: 1px solid var(--ls-line) !important; border-radius: 22px; }
:root[data-theme] body.mobile-product .task-screen h2, :root[data-theme] body.mobile-product .task-screen p { color: var(--ls-text) !important; }
:root[data-theme] body.mobile-product .task-back { background: var(--ls-input) !important; color: var(--ls-text) !important; border: 0 !important; }

/* ---------------- manager CRM login ---------------- */
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-panel { background: transparent !important; background-image: none !important; z-index: 100; padding-top: 36px; overflow-y: auto; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-panel.hidden { display: none !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-shell { width: min(1040px, 100%); gap: 36px; padding: 24px; background: transparent !important; border: 0 !important; box-shadow: none !important; align-items: center; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-hero { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; display: block; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-hero .brand-mark { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; background: transparent !important; box-shadow: none !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-hero .brand-mark img { width: 44px; height: 44px; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-hero .eyebrow { margin: 0 0 10px; color: var(--ls-accent) !important; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-hero h1 { margin: 0; color: var(--ls-text) !important; font-size: clamp(36px, 7vw, 56px); line-height: 1.03; font-weight: 800; letter-spacing: -.035em; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-hero p:not(.eyebrow) { margin: 14px 0 0; max-width: 40ch; color: var(--ls-muted) !important; font-size: 16px; line-height: 1.55; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-manager-form { padding: 22px !important; gap: 14px; border: 1px solid var(--ls-line) !important; border-radius: 22px !important; background: var(--ls-surface) !important; backdrop-filter: blur(16px); box-shadow: 0 18px 50px rgba(0, 0, 0, .22) !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-manager-form label { color: var(--ls-muted) !important; font-size: 13px; font-weight: 600; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-manager-form input { min-height: 50px; padding: 0 14px; border: 1px solid var(--ls-edge) !important; border-radius: 14px !important; background: var(--ls-input) !important; color: var(--ls-text) !important; font-size: 16px; box-shadow: none !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-manager-form input:focus { outline: none; border-color: var(--ls-accent) !important; box-shadow: 0 0 0 3px rgba(39, 217, 162, .16) !important; }
@media (max-width: 800px) { html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-shell { grid-template-columns: 1fr; gap: 22px; padding: 18px 16px 30px; } html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-panel { align-items: start; } }
body.crm-shell-body .ls-stage { z-index: 99; }
@media (max-width: 899px) { .ls-canvas { display: none; } }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-shell { width: min(1040px, 100%) !important; max-width: 1040px !important; margin-inline: auto !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body #crmLoginForm input { border: 1.5px solid var(--c-line2) !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body #crmLoginForm input:focus { border-color: var(--c-accent) !important; outline: 0; }

/* CRM sign-in: a compact workspace card centred over the ticker and the rising chart, not the app's greeting layout */
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-panel { align-items: center !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-shell { width: min(420px, 100%) !important; max-width: 420px !important; display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; padding: 20px !important; margin-inline: auto !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-hero { display: grid !important; justify-items: start; gap: 4px; padding: 26px 26px 0 !important; border: 1px solid var(--ls-line) !important; border-bottom: 0 !important; border-radius: 22px 22px 0 0 !important; background: var(--ls-surface) !important; backdrop-filter: blur(16px); }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-hero .brand-mark { width: 36px !important; height: 36px !important; margin: 0 0 12px !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-hero .brand-mark img { width: 36px !important; height: 36px !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-hero .eyebrow { margin: 0 !important; font-size: 11px !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-hero h1 { font-size: 26px !important; line-height: 1.15 !important; letter-spacing: -.02em !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-hero p:not(.eyebrow) { margin: 6px 0 0 !important; font-size: 14px !important; max-width: none !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-manager-form { border-top: 0 !important; border-radius: 0 0 22px 22px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, .25) !important; padding: 18px 26px 26px !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-manager-form input { min-height: 46px !important; font-size: 15px !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-shell { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center; min-height: 0 !important; height: auto !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-login-hero, html[data-theme][data-theme] body.crm-shell-body.crm-shell-body .crm-manager-form { width: 100% !important; height: auto !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; align-self: stretch !important; box-sizing: border-box; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body #crmLoginForm.crm-manager-form { position: static !important; transform: none !important; inset: auto !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; }
html[data-theme][data-theme] body.crm-shell-body.crm-shell-body #crmLoginForm button[type="submit"]:not(#z):not(#z) { background: var(--ls-accent) !important; color: var(--c-accent-ink, #04251b) !important; border: 0 !important; min-height: 46px; font-weight: 800; border-radius: 14px !important; }