/* ========================================================= LiftRight — Global Theme + Components (THEME-READY) Theme switch: ========================================================= */ /* ========================================================= 1) THEME TOKENS ========================================================= */ /* DEFAULT = LiftRight brand (navy + blue) */ /* DEFAULT = LiftRight brand (navy + blue) */ :root{ /* Surfaces */ --lr-bg: #0b1437; --lr-surface: rgba(16,27,72,0.88); --lr-surface-alt: rgba(24,37,93,0.92); --lr-surface-soft: rgba(15,23,66,0.58); --lr-border: rgba(255,255,255,0.16); --lr-border-strong: rgba(255,255,255,0.24); /* Text */ --lr-text: #ffffff; --lr-text-muted: rgba(208,212,224,0.90); --lr-text-soft: rgba(208,212,224,0.72); --lr-text-faint: rgba(208,212,224,0.56); /* Brand */ --lr-accent: #4f9dfc; --lr-accent-2: #60a5fa; --lr-accent-soft: rgba(79,157,252,0.20); --lr-accent-glow: rgba(79,157,252,0.26); /* Status */ --lr-good: #3be678; --lr-warning: #f7d23e; --lr-danger: #ff7a7a; /* Buttons */ --lr-btn-primary-bg: var(--lr-accent); --lr-btn-primary-fg: #06142a; --lr-btn-primary-hover: #3c8ff7; --lr-btn-primary-shadow: 0 10px 26px rgba(79,157,252,0.30); --lr-btn-ghost-bg: rgba(255,255,255,0.08); --lr-btn-ghost-border: rgba(255,255,255,0.18); --lr-btn-ghost-hover: rgba(255,255,255,0.12); /* Forms */ --lr-input-bg: rgba(255,255,255,0.07); --lr-input-fg: var(--lr-text); --lr-input-border: rgba(255,255,255,0.18); --lr-input-placeholder: rgba(255,255,255,0.55); --lr-focus-ring: rgba(79,157,252,0.28); /* Menus */ --lr-menu-bg: rgba(2,6,23,0.78); --lr-menu-item-hover: rgba(79,157,252,0.14); /* Page background */ --lr-page-grad-1: #4169e1; --lr-page-grad-2: #162456; --lr-page-grad-3: #0b1437; --lr-page-grad-4: #09102b; /* Navbar */ --lr-nav-bg: rgba(10,18,45,0.76); /* Radii / shadows */ --lr-radius-lg: 1.25rem; --lr-radius-md: 1rem; --lr-radius-sm: .85rem; --lr-shadow-card: 0 20px 48px rgba(8,12,30,0.42); --lr-shadow-card-soft: 0 10px 28px rgba(8,12,30,0.22); --lr-shadow-drop: 0 18px 60px rgba(0,0,0,0.55); --lr-shadow-nav: 0 10px 30px rgba(2,6,23,0.28); /* Scrollbar */ --lr-scroll-track: #020617; --lr-scroll-thumb: #1f2937; } /* LIGHT */ html[data-theme="light"]{ --lr-bg: #f8fafc; --lr-surface: #ffffff; --lr-surface-alt: #f1f5f9; --lr-border: rgba(2,6,23,0.12); --lr-text: #0f172a; --lr-text-muted: rgba(15,23,42,0.78); --lr-text-soft: rgba(15,23,42,0.62); --lr-accent: #2563eb; --lr-accent-2: #1d4ed8; --lr-accent-soft: rgba(37,99,235,0.14); --lr-good: #16a34a; --lr-warning: #d97706; --lr-danger: #dc2626; --lr-btn-primary-bg: var(--lr-accent); --lr-btn-primary-fg: #ffffff; --lr-btn-primary-hover: #1f59d6; --lr-btn-ghost-bg: rgba(2,6,23,0.04); --lr-btn-ghost-border: rgba(2,6,23,0.10); --lr-btn-ghost-hover: rgba(2,6,23,0.07); --lr-input-bg: #ffffff; --lr-input-fg: var(--lr-text); --lr-input-border: rgba(2,6,23,0.14); --lr-input-placeholder: rgba(2,6,23,0.44); --lr-focus-ring: rgba(37,99,235,0.20); --lr-menu-bg: rgba(255,255,255,0.96); --lr-menu-item-hover: rgba(37,99,235,0.10); --lr-shadow-card: 0 14px 34px rgba(2,6,23,0.10); --lr-shadow-drop: 0 16px 44px rgba(2,6,23,0.16); --lr-page-grad-1: #ffffff; --lr-page-grad-2: #f8fafc; --lr-page-grad-3: #eef2ff; --lr-nav-bg: rgba(255,255,255,0.92); --lr-scroll-track: #e2e8f0; --lr-scroll-thumb: #94a3b8; --lr-page-grad-4: #e2e8f0; } /* DARK (charcoal + cyan) */ html[data-theme="dark"]{ --lr-bg: #0b0f14; --lr-surface: #111821; --lr-surface-alt: #182231; --lr-border: rgba(226,232,240,0.14); --lr-text: rgba(241,245,249,0.96); --lr-text-muted: rgba(148,163,184,0.92); --lr-text-soft: rgba(148,163,184,0.74); --lr-accent: #22d3ee; --lr-accent-2: #67e8f9; --lr-accent-soft: rgba(34,211,238,0.18); --lr-good: #34d399; --lr-warning: #fbbf24; --lr-danger: #fb7185; --lr-btn-primary-bg: var(--lr-accent); --lr-btn-primary-fg: #061216; --lr-btn-primary-hover: #15c2dd; --lr-btn-ghost-bg: rgba(241,245,249,0.08); --lr-btn-ghost-border: rgba(241,245,249,0.16); --lr-btn-ghost-hover: rgba(241,245,249,0.12); --lr-input-bg: rgba(241,245,249,0.06); --lr-input-fg: var(--lr-text); --lr-input-border: rgba(241,245,249,0.14); --lr-input-placeholder: rgba(241,245,249,0.52); --lr-focus-ring: rgba(34,211,238,0.22); --lr-menu-bg: rgba(2,6,23,0.86); --lr-menu-item-hover: rgba(34,211,238,0.14); --lr-page-grad-1: #0ea5e9; --lr-page-grad-2: #0b0f14; --lr-page-grad-3: #0b0f14; --lr-nav-bg: rgba(2,6,23,0.88); --lr-scroll-track: #020617; --lr-scroll-thumb: #1f2a44; --lr-page-grad-4: #070b12; } /* HIGH CONTRAST */ html[data-theme="contrast"]{ --lr-bg: #000000; --lr-surface: #000000; --lr-surface-alt: #0b0b0b; --lr-border: rgba(255,255,255,0.72); --lr-text: #ffffff; --lr-text-muted: rgba(255,255,255,0.90); --lr-text-soft: rgba(255,255,255,0.80); --lr-accent: #00a3ff; --lr-accent-2: #7dd3fc; --lr-accent-soft: rgba(0,163,255,0.22); --lr-good: #00ff00; --lr-warning: #ffff00; --lr-danger: #ff0000; --lr-btn-primary-bg: var(--lr-accent); --lr-btn-primary-fg: #001018; --lr-btn-primary-hover: #008fe0; --lr-btn-ghost-bg: rgba(255,255,255,0.10); --lr-btn-ghost-border: rgba(255,255,255,0.72); --lr-btn-ghost-hover: rgba(255,255,255,0.14); --lr-input-bg: #000000; --lr-input-fg: #ffffff; --lr-input-border: rgba(255,255,255,0.80); --lr-input-placeholder: rgba(255,255,255,0.78); --lr-focus-ring: rgba(0,163,255,0.32); --lr-menu-bg: rgba(0,0,0,0.98); --lr-menu-item-hover: rgba(0,163,255,0.18); --lr-shadow-card: none; --lr-shadow-drop: none; --lr-page-grad-1: #000000; --lr-page-grad-2: #000000; --lr-page-grad-3: #000000; --lr-nav-bg: rgba(0,0,0,0.98); --lr-scroll-track: #000000; --lr-scroll-thumb: rgba(255,255,255,0.60); --lr-page-grad-4: #000000; } /* ========================================================= 2) BASE + GLOBAL FIXES ========================================================= */ html, body { height: 100%; } body { overflow-x: hidden; } body{ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--lr-text); background: radial-gradient(1000px 600px at 8% -8%, rgba(79,157,252,0.20), transparent 62%), radial-gradient(760px 460px at 108% 10%, rgba(96,165,250,0.12), transparent 62%), radial-gradient(860px 540px at 50% 118%, rgba(79,157,252,0.10), transparent 72%), linear-gradient(180deg, var(--lr-page-grad-2) 0%, var(--lr-page-grad-3) 58%, var(--lr-page-grad-4) 100%); background-attachment: fixed; position: relative; } body::before{ content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 22% 18%, rgba(255,255,255,0.035), transparent 34%), radial-gradient(circle at 78% 78%, rgba(255,255,255,0.025), transparent 36%), linear-gradient(180deg, rgba(255,255,255,0.02), transparent 26%); } .lr-page-wrapper, .liftright-navbar, .lr-modal, .lr-modal-backdrop, .lr-snap-modal, .lr-snap-modal-backdrop{ position: relative; z-index: 1; } a { color: var(--lr-accent); } a:hover { color: var(--lr-accent-2); } /* Bootstrap helpers that break themes */ .text-muted, .text-secondary { color: var(--lr-text-muted) !important; } .text-white, .text-light, .text-dark, .text-black, .text-body { color: var(--lr-text) !important; } .bg-white, .bg-light, .bg-dark, .bg-black { background: var(--lr-surface) !important; } .border-secondary{ border-color: color-mix(in srgb, var(--lr-border) 85%, transparent) !important; } .text-bg-success{ background: color-mix(in srgb, var(--lr-good) 85%, #000 15%) !important; color: #061216 !important; } /* HR / borders */ hr, .dropdown-divider{ border-color: color-mix(in srgb, var(--lr-border) 80%, transparent) !important; } .border, .border-top, .border-bottom, .border-start, .border-end{ border-color: color-mix(in srgb, var(--lr-border) 80%, transparent) !important; } /* Scrollbar */ ::-webkit-scrollbar{ width: 8px; } ::-webkit-scrollbar-track{ background: var(--lr-scroll-track); } ::-webkit-scrollbar-thumb{ background: var(--lr-scroll-thumb); border-radius: 999px; } /* ========================================================= 3) NAVBAR + DROPDOWNS ========================================================= */ .liftright-navbar{ background: var(--lr-nav-bg); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid color-mix(in srgb, var(--lr-border) 82%, transparent); box-shadow: var(--lr-shadow-nav); /* keep above page sticky bars */ z-index: 2000 !important; } .liftright-navbar .nav-link{ color: color-mix(in srgb, var(--lr-text) 88%, transparent) !important; border-radius: .85rem; transition: background-color .14s ease, color .14s ease, transform .14s ease; } .liftright-navbar .nav-link:hover, .liftright-navbar .nav-link:focus{ color: var(--lr-text) !important; background: rgba(255,255,255,0.05); transform: translateY(-1px); } .liftright-navbar .nav-link.active{ color: var(--lr-text) !important; background: color-mix(in srgb, var(--lr-accent) 14%, transparent); border-radius: .8rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lr-accent) 30%, transparent); } .liftright-navbar .nav-link.active .lr-dot-pill{ transform: scale(1.02); } .navbar-toggler{ border-color: color-mix(in srgb, var(--lr-border) 80%, transparent) !important; } .brand-accent{ color: var(--lr-accent); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.9rem; } .brand-subtitle{ font-size: 0.8rem; color: var(--lr-text-muted); } .avatar-circle{ width: 32px; height: 32px; border-radius: 999px; background: var(--lr-accent-soft); display:flex; align-items:center; justify-content:center; color: var(--lr-accent); font-weight: 700; font-size: 0.9rem; } /* Dropdown menus (one definition only) */ .dropdown-menu{ background: var(--lr-menu-bg) !important; color: var(--lr-text) !important; border: 1px solid color-mix(in srgb, var(--lr-border) 85%, transparent) !important; box-shadow: var(--lr-shadow-drop); z-index: 2100 !important; /* above navbar + sticky bars */ } .dropdown-item{ color: color-mix(in srgb, var(--lr-text) 92%, transparent) !important; } .dropdown-item:hover, .dropdown-item:focus{ background: var(--lr-menu-item-hover) !important; color: var(--lr-text) !important; } /* Theme selector in dropdown */ #lrThemeSelect{ background: var(--lr-input-bg) !important; color: var(--lr-input-fg) !important; border-color: var(--lr-input-border) !important; } #lrThemeSelect:focus{ border-color: var(--lr-accent) !important; box-shadow: 0 0 0 0.2rem var(--lr-focus-ring) !important; } #lrThemeSelect option{ background: var(--lr-surface); color: var(--lr-text); } /* ========================================================= 4) BUTTONS + FORMS ========================================================= */ .btn{ border-radius: 0.95rem; font-weight: 700; padding: 0.68rem 1rem; transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease; } .btn:hover{ transform: translateY(-1px); } .btn:focus{ box-shadow: 0 0 0 0.2rem var(--lr-focus-ring) !important; } .btn-sm{ padding: 0.42rem 0.78rem; border-radius: 0.8rem; font-weight: 700; } .btn-lg{ padding: 0.82rem 1.18rem; border-radius: 1rem; } .btn-primary{ background: linear-gradient(180deg, color-mix(in srgb, var(--lr-btn-primary-bg) 88%, white 12%), var(--lr-btn-primary-bg)) !important; border-color: color-mix(in srgb, var(--lr-btn-primary-bg) 82%, #000 18%) !important; color: var(--lr-btn-primary-fg) !important; box-shadow: var(--lr-btn-primary-shadow); } .btn-primary:hover{ background: linear-gradient(180deg, color-mix(in srgb, var(--lr-btn-primary-hover) 88%, white 12%), var(--lr-btn-primary-hover)) !important; border-color: var(--lr-btn-primary-hover) !important; box-shadow: 0 12px 28px rgba(79,157,252,0.36); } .btn-outline-light, .btn-outline-secondary{ background: var(--lr-btn-ghost-bg) !important; border-color: var(--lr-btn-ghost-border) !important; color: color-mix(in srgb, var(--lr-text) 92%, transparent) !important; } .btn-outline-light:hover, .btn-outline-secondary:hover{ background: var(--lr-btn-ghost-hover) !important; border-color: color-mix(in srgb, var(--lr-btn-ghost-border) 120%, transparent) !important; color: var(--lr-text) !important; } .btn-success{ background: color-mix(in srgb, var(--lr-good) 85%, #000 15%) !important; border-color: color-mix(in srgb, var(--lr-good) 75%, #000 25%) !important; } .btn-warning{ background: color-mix(in srgb, var(--lr-warning) 88%, #000 12%) !important; border-color: color-mix(in srgb, var(--lr-warning) 78%, #000 22%) !important; color: #0b1020 !important; } .btn-danger{ background: color-mix(in srgb, var(--lr-danger) 85%, #000 15%) !important; border-color: color-mix(in srgb, var(--lr-danger) 75%, #000 25%) !important; } .form-control, .form-select, .form-check-input{ background: var(--lr-input-bg) !important; color: var(--lr-input-fg) !important; border-color: var(--lr-input-border) !important; min-height: 46px; border-radius: .9rem !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .form-control::placeholder{ color: var(--lr-input-placeholder) !important; } .form-label{ margin-bottom: .42rem; } .form-control:focus, .form-select:focus, .form-check-input:focus{ border-color: color-mix(in srgb, var(--lr-accent) 70%, transparent) !important; box-shadow: 0 0 0 0.2rem var(--lr-focus-ring), 0 8px 22px rgba(79,157,252,0.10) !important; } .form-check-input{ min-height: 1rem; } .form-check-input:checked{ background-color: var(--lr-accent) !important; border-color: var(--lr-accent) !important; } /* ========================================================= 5) LAYOUT + CARDS + TYPOGRAPHY ========================================================= */ .lr-page-wrapper{ min-height: 100vh; } .lr-main-container{ max-width: 1280px; } .lr-card{ background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)), linear-gradient( 135deg, var(--lr-surface), var(--lr-surface-alt) 42%, color-mix(in srgb, var(--lr-surface-alt) 84%, var(--lr-accent) 16%) 100% ); border-radius: var(--lr-radius-lg); border: 1px solid var(--lr-border); box-shadow: var(--lr-shadow-card); backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); overflow: hidden; } .lr-card:hover{ border-color: color-mix(in srgb, var(--lr-border-strong) 88%, transparent); box-shadow: 0 24px 56px rgba(8,12,30,0.48); } .lr-card-header{ border-bottom: 1px solid color-mix(in srgb, var(--lr-border) 60%, transparent 40%); padding: 0.95rem 1.25rem; background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent); } .lr-card-body{ padding: 1.25rem; } .lr-section-title{ font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--lr-text-faint); font-weight: 700; } .lr-section-heading{ font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; } .lr-stat-label{ font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--lr-text-faint); font-weight: 700; } .lr-stat-value{ font-size: clamp(1.75rem, 2vw, 2rem); font-weight: 800; letter-spacing: -0.02em; } .lr-stat-subtext{ font-size: 0.88rem; color: var(--lr-text-muted); line-height: 1.5; } /* ========================================================= GLOBAL CONTENT POLISH ========================================================= */ p:last-child, ul:last-child, ol:last-child{ margin-bottom: 0; } .container, .container-fluid{ position: relative; } .lr-page-wrapper .row{ --bs-gutter-y: 1rem; } .lr-main-container{ max-width: 1280px; } @media (min-width: 1400px){ .lr-main-container{ max-width: 1320px; } } /* ========================================================= 6) BADGES + PILLS ========================================================= */ .lr-badge{ display:inline-flex; align-items:center; border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.75rem; border: 1px solid transparent; } .lr-badge-good{ background-color: color-mix(in srgb, var(--lr-good) 18%, transparent); color: var(--lr-good); border-color: color-mix(in srgb, var(--lr-good) 40%, transparent); } .lr-badge-warning{ background-color: color-mix(in srgb, var(--lr-warning) 18%, transparent); color: var(--lr-warning); border-color: color-mix(in srgb, var(--lr-warning) 40%, transparent); } .lr-badge-danger{ background-color: color-mix(in srgb, var(--lr-danger) 18%, transparent); color: var(--lr-danger); border-color: color-mix(in srgb, var(--lr-danger) 40%, transparent); } .lr-badge-neutral{ background: color-mix(in srgb, var(--lr-text) 10%, transparent); color: color-mix(in srgb, var(--lr-text) 88%, transparent); border: 1px solid color-mix(in srgb, var(--lr-border) 70%, transparent); } .lr-dot-badge{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; font-size:10px; font-weight:700; border-radius:999px; display:flex; align-items:center; justify-content:center; background: var(--lr-danger); color: var(--lr-btn-primary-fg); border:1px solid var(--lr-border); } .lr-dot-pill{ display:inline-flex; align-items:center; justify-content:center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; color: var(--lr-bg); background: var(--lr-warning); border: 1px solid color-mix(in srgb, var(--lr-border) 70%, transparent); } .lr-mini-pill{ display:inline-flex; align-items:center; gap: 8px; border: 1px solid var(--lr-border); border-radius: 999px; padding: .25rem .6rem; font-size: .8rem; color: var(--lr-text); background: color-mix(in srgb, var(--lr-bg) 25%, transparent); } /* ========================================================= 7) TABLES + ALERTS + PAGINATION ========================================================= */ .table{ color: var(--lr-text) !important; margin-bottom: 0; } .table th, .table td{ color: var(--lr-text) !important; vertical-align: middle; } .table thead th{ color: var(--lr-text) !important; border-color: var(--lr-border) !important; font-size: .84rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap; } .table tbody td{ border-color: color-mix(in srgb, var(--lr-border) 72%, transparent) !important; } .table tbody tr{ transition: background-color .14s ease, transform .14s ease; } .table tbody tr:hover{ background-color: color-mix(in srgb, var(--lr-accent) 10%, transparent) !important; } .table-dark{ --bs-table-bg: transparent !important; --bs-table-color: var(--lr-text) !important; } .table-lr-dark{ --bs-table-bg: transparent; --bs-table-border-color: var(--lr-border); --bs-table-striped-bg: color-mix(in srgb, var(--lr-accent) 10%, transparent); color: var(--lr-text); } .table-lr-dark td, .table-lr-dark th{ color: var(--lr-text) !important; } .alert{ background: color-mix(in srgb, var(--lr-surface) 75%, transparent) !important; border-color: color-mix(in srgb, var(--lr-border) 85%, transparent) !important; color: var(--lr-text) !important; } .alert-success{ border-color: color-mix(in srgb, var(--lr-good) 40%, transparent) !important; } .alert-warning{ border-color: color-mix(in srgb, var(--lr-warning) 45%, transparent) !important; } .alert-danger{ border-color: color-mix(in srgb, var(--lr-danger) 45%, transparent) !important; } .page-link{ background: var(--lr-btn-ghost-bg) !important; color: var(--lr-text) !important; border-color: var(--lr-btn-ghost-border) !important; } .page-item.active .page-link{ background: var(--lr-accent) !important; border-color: var(--lr-accent) !important; color: var(--lr-btn-primary-fg) !important; } /* ========================================================= 8) LIST GROUP FIXES ========================================================= */ .list-group-item{ background: transparent !important; color: var(--lr-text) !important; border-color: color-mix(in srgb, var(--lr-border) 85%, transparent) !important; } .lr-list-item{ background: color-mix(in srgb, var(--lr-surface) 45%, transparent) !important; color: var(--lr-text) !important; border-color: color-mix(in srgb, var(--lr-border) 85%, transparent) !important; } .lr-list-item + .lr-list-item{ border-top: 1px solid color-mix(in srgb, var(--lr-border) 70%, transparent) !important; } .lr-hr{ border-top: 1px solid color-mix(in srgb, var(--lr-border) 85%, transparent) !important; opacity: 1 !important; } /* ========================================================= 9) ICON BUTTONS + DROPDOWN PANELS (bell/mail) ========================================================= */ .lr-icon-btn{ position: relative; display: inline-flex; align-items:center; justify-content:center; width: 36px; height: 36px; border-radius: 10px; color: color-mix(in srgb, var(--lr-text) 92%, transparent); text-decoration: none; border: 1px solid color-mix(in srgb, var(--lr-border) 70%, transparent); background: color-mix(in srgb, var(--lr-surface) 65%, transparent); padding: 0; } .lr-icon-btn:hover{ color: var(--lr-text); background: color-mix(in srgb, var(--lr-surface-alt) 70%, transparent); border-color: color-mix(in srgb, var(--lr-border) 90%, transparent); } .lr-icon-btn:focus{ outline: none; box-shadow: 0 0 0 0.2rem var(--lr-focus-ring); } .lr-icon-btn.dropdown-toggle::after{ display:none !important; } .lr-drop-panel{ width: 360px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--lr-border) 85%, transparent); background: color-mix(in srgb, var(--lr-bg) 92%, transparent); color: color-mix(in srgb, var(--lr-text) 92%, transparent); box-shadow: var(--lr-shadow-drop); overflow: hidden; } .lr-drop-panel .dropdown-item{ color: color-mix(in srgb, var(--lr-text) 92%, transparent); background: transparent; } .lr-drop-panel .dropdown-item:hover, .lr-drop-panel .dropdown-item:focus{ background: var(--lr-menu-item-hover); color: var(--lr-text); } .lr-drop-panel .border-bottom, .lr-drop-panel .border-top{ border-color: color-mix(in srgb, var(--lr-border) 60%, transparent) !important; } .lr-drop-scroll{ max-height: 360px; overflow: auto; } .lr-drop-item{ border-bottom: 1px solid color-mix(in srgb, var(--lr-border) 55%, transparent); } .lr-drop-panel .text-secondary{ color: color-mix(in srgb, var(--lr-text-muted) 100%, transparent) !important; } /* ========================================================= 10) AUTH ========================================================= */ .lr-auth-wrapper{ min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 32px 16px; } .lr-auth-shell{ width: min(980px, 100%); border-radius: 18px; overflow: hidden; border: 1px solid var(--lr-border); background: color-mix(in srgb, var(--lr-surface) 90%, transparent); box-shadow: var(--lr-shadow-card); display: grid; grid-template-columns: 1.1fr 1fr; } .lr-auth-left{ padding: 32px; background: radial-gradient(1100px 500px at 20% 0%, color-mix(in srgb, var(--lr-accent) 22%, transparent), transparent 60%), linear-gradient(145deg, color-mix(in srgb, var(--lr-surface-alt) 78%, transparent), color-mix(in srgb, var(--lr-surface) 95%, transparent)); } .lr-auth-right{ padding: 28px; background: color-mix(in srgb, var(--lr-bg) 55%, transparent); backdrop-filter: blur(6px); } .lr-auth-logo{ font-weight: 800; letter-spacing: .5px; font-size: 22px; color: var(--lr-text); } .lr-auth-tagline{ margin-top: 10px; color: var(--lr-text-muted); line-height: 1.5; max-width: 360px; } .lr-auth-bullets{ margin-top: 18px; padding-left: 0; list-style: none; color: var(--lr-text-muted); } .lr-auth-bullets li{ display:flex; gap:10px; margin: 10px 0; } .lr-dot{ width:10px; height:10px; border-radius:50%; background: color-mix(in srgb, var(--lr-accent) 90%, transparent); margin-top: 6px; flex: 0 0 10px; } @media (max-width: 920px){ .lr-auth-shell{ grid-template-columns: 1fr; } .lr-auth-left{ display:none; } } .lr-pass-row{ position: relative; } .lr-eye-btn{ position:absolute; right: 10px; top: 36px; height: 34px; width: 38px; border: 1px solid color-mix(in srgb, var(--lr-border) 80%, transparent); background: var(--lr-btn-ghost-bg); color: var(--lr-text); border-radius: 10px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .lr-eye-btn:hover{ background: var(--lr-btn-ghost-hover); } .lr-meter{ height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--lr-text) 10%, transparent); overflow:hidden; border: 1px solid color-mix(in srgb, var(--lr-border) 60%, transparent); } .lr-meter > div{ height:100%; width: 0%; background: color-mix(in srgb, var(--lr-accent) 85%, transparent); transition: width .2s ease; } .lr-req{ margin: 10px 0 0; padding-left: 16px; color: var(--lr-text-muted); font-size: .95rem; } .lr-req li.ok{ color: color-mix(in srgb, var(--lr-good) 95%, transparent); } .lr-req li.bad{ color: color-mix(in srgb, var(--lr-danger) 95%, transparent); } /* Footer */ .liftright-footer{ font-size: 0.75rem; color: var(--lr-text-muted); } /* ========================================================= 11) START SESSION (LIVE) PAGE ========================================================= */ .lr-main-wide { max-width: 1760px !important; } .lr-live-shell{ min-height: calc(100vh - var(--lr-nav-h, 64px)); display: flex; flex-direction: column; } /* IMPORTANT: keep below dropdowns */ .lr-live-topbar{ position: sticky; top: 0; z-index: 900 !important; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--lr-bg) 65%, transparent); border: 1px solid color-mix(in srgb, var(--lr-border) 80%, transparent); border-radius: 1.25rem; padding: 14px 14px; margin-bottom: 12px; } .lr-live-topbar h1{ margin: 0; } html[data-theme="light"] .lr-live-topbar{ background: color-mix(in srgb, var(--lr-surface) 92%, transparent); box-shadow: 0 10px 28px rgba(2,6,23,0.10); } .lr-live-row{ flex: 1 1 auto; min-height: 0; } .lr-live-grid{ align-items: stretch; } .lr-left-stack{ max-height: calc(100vh - var(--lr-nav-h, 64px) - 120px); overflow: auto; padding-right: 4px; } .lr-left-stack::-webkit-scrollbar{ width: 8px; } .lr-left-stack::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--lr-text-muted) 45%, transparent); border-radius: 999px; } .lr-camera-center{ display:flex; align-items:center; justify-content:center; } .lr-camera-stage{ width: 100%; height: clamp(300px, 54vh, 640px); } @media (max-height: 740px){ .lr-camera-stage{ height: clamp(280px, 50vh, 560px); } } @media (min-width: 1200px){ .lr-camera-stage{ height: clamp(340px, 58vh, 700px); } } @media (max-width: 991.98px){ .lr-live-topbar{ border-radius: 1rem; padding: 12px; } .lr-left-stack{ max-height: none; overflow: visible; padding-right: 0; } .lr-camera-stage{ height: clamp(300px, 48vh, 560px); } } html[data-theme="light"] .lr-camera-stage{ border: 1px solid var(--lr-border); border-radius: 1rem; box-shadow: 0 12px 30px rgba(2,6,23,0.12); } #video{ width: 100% !important; height: 100% !important; object-fit: cover; border-radius: .75rem; background: var(--lr-bg); } #overlayCanvas{ border-radius: .75rem; } .lr-rail{ max-height: calc(100vh - var(--lr-nav-h, 64px) - 120px); overflow: auto; padding-right: 4px; } .lr-rail::-webkit-scrollbar{ width: 8px; } .lr-rail::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--lr-text-muted) 45%, transparent); border-radius: 999px; } @media (max-width: 991.98px){ .lr-rail{ max-height: none; overflow: visible; padding-right: 0; } } /* Idle overlay */ .lr-idle-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding: 18px; z-index: 8; pointer-events: none; } .lr-idle-card{ width: min(560px, 100%); border: 1px solid var(--lr-border); border-radius: 1.25rem; background: color-mix(in srgb, var(--lr-bg) 55%, transparent); backdrop-filter: blur(6px); padding: 14px 16px; text-align:left; } .lr-btn-group .btn{ white-space: nowrap; } /* Guide modal */ .lr-modal-backdrop{ position: fixed; inset: 0; z-index: 2000; background: rgba(2,6,23,0.72); display: none; } html[data-theme="light"] .lr-modal-backdrop{ background: rgba(2,6,23,0.45); } .lr-modal{ position: fixed; inset: 0; z-index: 2010; display: none; align-items:center; justify-content:center; padding: 18px; } .lr-modal-card{ width: min(980px, 100%); border: 1px solid var(--lr-border); border-radius: 1.25rem; background: linear-gradient( 135deg, color-mix(in srgb, var(--lr-surface) 95%, transparent), color-mix(in srgb, var(--lr-surface-alt) 95%, transparent) 40%, color-mix(in srgb, var(--lr-surface-alt) 80%, var(--lr-accent) 20%) 100% ); box-shadow: var(--lr-shadow-drop); overflow:hidden; } .lr-modal-head{ padding: 14px 18px; border-bottom: 1px solid color-mix(in srgb, var(--lr-border) 70%, transparent); display:flex; align-items:center; justify-content:space-between; gap: 12px; } .lr-modal-body{ padding: 16px 18px 18px; } .lr-steps{ display:grid; grid-template-columns: 1.25fr 0.9fr; gap: 14px; } @media (max-width: 992px){ .lr-steps{ grid-template-columns: 1fr; } } .lr-step-card{ border: 1px solid var(--lr-border); border-radius: 1rem; background: color-mix(in srgb, var(--lr-bg) 40%, transparent); padding: 14px; } .lr-step-kicker{ font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--lr-text-muted); font-weight: 600; margin-bottom: 8px; } .lr-step-title{ font-size: 1.15rem; font-weight: 800; margin: 0 0 8px; } .lr-step-text{ color: var(--lr-text-muted); margin: 0; line-height: 1.45; } .lr-countdown-wrap{ display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; padding-top: 10px; } .lr-countdown{ font-weight: 900; font-size: 1.25rem; letter-spacing: .08em; } /* Contrast extra clarity */ html[data-theme="contrast"] .lr-card, html[data-theme="contrast"] .lr-drop-panel, html[data-theme="contrast"] .lr-modal-card{ outline: 2px solid rgba(255,255,255,0.75); } html[data-theme="contrast"] .lr-badge{ font-weight: 900; } /* Force select text color properly */ select, .form-select { color: var(--lr-input-fg) !important; background-color: var(--lr-input-bg) !important; } /* Critical: reset option colors for Windows browsers */ select option { color: #000; /* force readable */ background: #fff; /* system dropdown is usually white */ } .lr-auth-panel { display: none; } .lr-auth-panel.active { display: block; } .lr-auth-tab { background: transparent; border: none; padding: 8px 16px; font-weight: 600; cursor: pointer; color: var(--lr-text-muted); } .lr-auth-tab.active { color: #fff; border-bottom: 2px solid #4f8cff; } .lr-live-topbar-actions{ display:flex; gap:.75rem; justify-content:flex-end; flex-wrap:wrap; } .lr-btn-strong{ min-width: 190px; font-weight: 800; } .lr-live-main-instruction{ font-size: 1.25rem; line-height: 1.2; } .lr-live-feedback-main{ font-size: 1.2rem; line-height: 1.2; } .lr-live-feedback-sub{ font-size: 1rem; opacity: .95; } .lr-live-debug{ font-size: .72rem; color: var(--lr-text-soft); opacity: .72; } .lr-live-idle-title{ font-size: 1.15rem; line-height: 1.2; } .lr-live-quick-list{ margin: 0; padding-left: 1.1rem; color: var(--lr-text-muted); } .lr-live-quick-list li + li{ margin-top: .45rem; } @media (max-width: 991.98px){ .lr-live-topbar-actions{ justify-content:stretch; } .lr-live-topbar-actions .btn{ flex: 1 1 0; } .lr-btn-strong{ min-width: 0; } } /* ========================================================= SNAPSHOT LIGHTBOX ========================================================= */ .lr-snap-btn{ padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 0; } .lr-snap-btn img{ transition: transform .18s ease, box-shadow .18s ease; } .lr-snap-btn:hover img{ transform: scale(1.04); box-shadow: 0 10px 24px rgba(0,0,0,0.28); } .lr-snap-modal-backdrop{ position: fixed; inset: 0; background: rgba(2,6,23,0.72); z-index: 3000; } .lr-snap-modal{ position: fixed; inset: 0; z-index: 3010; display: flex; align-items: center; justify-content: center; padding: 24px; } .lr-snap-dialog{ position: relative; width: min(980px, 100%); max-height: calc(100vh - 48px); overflow: auto; border-radius: 18px; border: 1px solid var(--lr-border); background: linear-gradient( 135deg, color-mix(in srgb, var(--lr-surface) 95%, transparent), color-mix(in srgb, var(--lr-surface-alt) 95%, transparent) 40%, color-mix(in srgb, var(--lr-surface-alt) 80%, var(--lr-accent) 20%) 100% ); box-shadow: var(--lr-shadow-drop); padding: 18px 18px 16px; } .lr-snap-title{ font-size: 0.95rem; font-weight: 700; letter-spacing: .04em; margin-bottom: 12px; color: var(--lr-text); } .lr-snap-image{ display: block; width: 100%; height: auto; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 14px; border: 1px solid var(--lr-border); background: rgba(255,255,255,0.04); } .lr-snap-close{ position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--lr-border); background: color-mix(in srgb, var(--lr-bg) 55%, transparent); color: var(--lr-text); font-size: 1.5rem; line-height: 1; cursor: pointer; } .lr-snap-close:hover{ background: color-mix(in srgb, var(--lr-accent) 18%, transparent); } body.lr-modal-open{ overflow: hidden; }