:root{ color-scheme: light; --bg0:#f4f7fb; --bg1:#ffffff; --text:#0b1b3a; --muted: rgba(15,23,42,.65); --primary:#0d6efd; /* bootstrap primary */ --primary2:#0a58ca; --border: rgba(13,110,253,.18); --shadow: 0 18px 45px rgba(2,8,23,.10); } /* Theme: dark mode (CSS variables) */ body[data-theme="dark"]{ color-scheme: dark; --bg0:#071024; --bg1:#0b1633; --text:#e7eefc; --muted: rgba(231,238,252,.70); --primary:#60a5fa; --primary2:#3b82f6; --border: rgba(96,165,250,.20); --shadow: 0 18px 45px rgba(0,0,0,.35); } body[data-theme="dark"]{ background: radial-gradient(1200px 800px at 10% -10%, rgba(96,165,250,.18), transparent 60%), radial-gradient(900px 700px at 95% 0%, rgba(34,211,238,.12), transparent 55%), linear-gradient(180deg, var(--bg0), #050a18 60%, #050a18); } body[data-theme="dark"] .glass{ background: rgba(11,22,51,.74); border: 1px solid var(--border); box-shadow: var(--shadow); } body[data-theme="dark"] th{ background: rgba(7,16,36,.92); color: rgba(231,238,252,.70); } body[data-theme="dark"] td{ color: rgba(231,238,252,.86); } body[data-theme="dark"] .lv-topbar{ background: linear-gradient(180deg,#050a18,#060f24); border-bottom:1px solid rgba(255,255,255,.10); box-shadow:0 10px 22px rgba(0,0,0,.35); } body{ margin:0; background: radial-gradient(1200px 800px at 10% -10%, rgba(13,110,253,.18), transparent 60%), radial-gradient(900px 700px at 95% 0%, rgba(13,202,240,.14), transparent 55%), linear-gradient(180deg, var(--bg0), #ffffff 60%, #ffffff); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; } /* Main surfaces */ .glass{ background: rgba(255,255,255,.92); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(10px); } .muted{ color: var(--muted); } /* Pills / badges */ .pill{ border: 1px solid rgba(13,110,253,.20); background: rgba(13,110,253,.08); color: rgba(11,27,58,.82); } /* Tables */ table { border-collapse: collapse; width: 100%; } th, td { padding: 10px 10px; border-bottom: 1px solid rgba(13,110,253,.10); white-space: nowrap; } th { position: sticky; top: 0; background: rgba(248,250,255,.95); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: rgba(15, 23, 42, .70); } td { font-size: 12px; color: rgba(15,23,42,.88); } /* Results table: tighten early columns */ .lv-results-table { table-layout: auto; } .lv-results-table th:nth-child(1), .lv-results-table td:nth-child(1) { width: 60px; text-align: center; } .lv-results-table th:nth-child(2), .lv-results-table td:nth-child(2), .lv-results-table th:nth-child(3), .lv-results-table td:nth-child(3), .lv-results-table th:nth-child(4), .lv-results-table td:nth-child(4) { width: 120px; } .lv-results-table th:nth-child(n+5), .lv-results-table td:nth-child(n+5) { width: 110px; } /* Plotly modebar a little quieter */ .plotCard .js-plotly-plot .plotly .modebar{ opacity:.12; } .plotCard:hover .js-plotly-plot .plotly .modebar{ opacity:.45; } /* Progress animation */ @keyframes progressSlide { 0% { transform: translateX(-60%); } 100% { transform: translateX(160%); } } /* Card variants */ .glass-blue{ border-color: rgba(13,110,253,.22); box-shadow: 0 18px 45px rgba(13,110,253,.10); } .glass-indigo{ border-color: rgba(79,70,229,.18); box-shadow: 0 18px 45px rgba(79,70,229,.10); } .glass-mint{ border-color: rgba(16,185,129,.20); box-shadow: 0 18px 45px rgba(16,185,129,.10); } .glass-sun{ border-color: rgba(245,158,11,.22); box-shadow: 0 18px 45px rgba(245,158,11,.10); } .cardHeader{ background: linear-gradient(90deg, rgba(13,110,253,.12), rgba(13,202,240,.10), rgba(255,255,255,.70)); border-bottom: 1px solid rgba(13,110,253,.14); } .cardHeader-indigo{ background: linear-gradient(90deg, rgba(79,70,229,.10), rgba(99,102,241,.08), rgba(255,255,255,.72)); border-bottom: 1px solid rgba(79,70,229,.14); } .cardHeader-mint{ background: linear-gradient(90deg, rgba(16,185,129,.10), rgba(34,197,94,.08), rgba(255,255,255,.72)); border-bottom: 1px solid rgba(16,185,129,.14); } /* Primary button polish */ .btnPrimary{ background: linear-gradient(180deg, #1d4ed8, #0b5ed7); border: 1px solid rgba(29,78,216,.25); color: white; box-shadow: 0 10px 22px rgba(13,110,253,.20); } .btnPrimary:hover{ filter: brightness(1.03); } .btnSecondary{ background: rgba(255,255,255,.95); border: 1px solid rgba(13,110,253,.18); color: rgba(11,27,58,.9); } .btnSecondary:hover{ background: rgba(248,250,255,.98); } .btnGhost{ background: rgba(13,110,253,.06); border: 1px solid rgba(13,110,253,.16); color: rgba(11,27,58,.86); } .btnGhost:hover{ background: rgba(13,110,253,.09); } /* Make inputs feel more premium */ input, select{ border-radius: 14px !important; border-color: rgba(13,110,253,.14) !important; background: rgba(255,255,255,.96) !important; } /* Summary stat cards */ .stat-blue{ background: linear-gradient(180deg, rgba(13,110,253,.14), rgba(255,255,255,.92)); border: 1px solid rgba(13,110,253,.25); box-shadow: 0 14px 30px rgba(13,110,253,.18); } .stat-green{ background: linear-gradient(180deg, rgba(16,185,129,.16), rgba(255,255,255,.92)); border: 1px solid rgba(16,185,129,.28); box-shadow: 0 14px 30px rgba(16,185,129,.18); } .stat-amber{ background: linear-gradient(180deg, rgba(245,158,11,.18), rgba(255,255,255,.92)); border: 1px solid rgba(245,158,11,.28); box-shadow: 0 14px 30px rgba(245,158,11,.18); } /* Summary stat cards (colorful) */ .stat-neutral{ background: rgba(255,255,255,.92); border-color: rgba(13,110,253,.14); box-shadow: 0 14px 30px rgba(2,8,23,.08); } .stat-blue{ background: linear-gradient(180deg, rgba(13,110,253,.18), rgba(255,255,255,.92)); border-color: rgba(13,110,253,.28); box-shadow: 0 14px 30px rgba(13,110,253,.18); } .stat-green{ background: linear-gradient(180deg, rgba(16,185,129,.20), rgba(255,255,255,.92)); border-color: rgba(16,185,129,.30); box-shadow: 0 14px 30px rgba(16,185,129,.18); } .stat-amber{ background: linear-gradient(180deg, rgba(245,158,11,.22), rgba(255,255,255,.92)); border-color: rgba(245,158,11,.32); box-shadow: 0 14px 30px rgba(245,158,11,.18); } /* Restore lift/highlight on hover for summary stat cards */ .stat-neutral, .stat-blue, .stat-green, .stat-amber{ transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; will-change: transform; } .stat-neutral:hover, .stat-blue:hover, .stat-green:hover, .stat-amber:hover{ transform: translateY(-2px); box-shadow: 0 18px 45px rgba(2,8,23,.12); border-color: rgba(13,110,253,.32); } /* Dark mode hover lift */ body[data-theme="dark"] .stat-neutral:hover, body[data-theme="dark"] .stat-blue:hover, body[data-theme="dark"] .stat-green:hover, body[data-theme="dark"] .stat-amber:hover{ box-shadow: 0 18px 45px rgba(0,0,0,.45); border-color: rgba(96,165,250,.35); } /* Top toolbar (scoped) */ .lv-topbar{position:sticky;top:0;z-index:9999;background:linear-gradient(180deg,#0B4A8B,#0A3F76);color:#fff;border-bottom:1px solid rgba(255,255,255,.18);box-shadow:0 10px 22px rgba(2,8,23,.18);} .lv-topbar__inner{max-width:1680px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;} .lv-brand{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:-0.02em;font-size:16px;white-space:nowrap;} .lv-brand__mark{width:28px;height:28px;border-radius:10px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 16px rgba(0,0,0,.16);font-size:15px;line-height:1;} .lv-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;} .lv-nav a{color:rgba(255,255,255,.95);text-decoration:none;font-weight:800;font-size:13px;padding:8px 12px;border-radius:999px;border:1px solid transparent;} .lv-nav a:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);} .lv-actions{display:flex;align-items:center;gap:10px;white-space:nowrap;} .lv-chip{padding:8px 12px;border-radius:999px;font-weight:950;font-size:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.10);color:#fff;} .lv-chip--ghost{padding:8px 12px;border-radius:999px;font-weight:950;font-size:12px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;} .lv-chip--ghost:hover{background:rgba(255,255,255,.10);} @media (max-width:900px){.lv-topbar__inner{flex-direction:column;align-items:flex-start;}.lv-nav{justify-content:flex-start;}} /* Dark mode: override common Tailwind utility colors used in the UI (CDN Tailwind has fixed colors) */ body[data-theme="dark"] .bg-white{ background: rgba(11,22,51,.86) !important; } body[data-theme="dark"] .bg-slate-50{ background: rgba(7,16,36,.88) !important; } body[data-theme="dark"] .bg-slate-100{ background: rgba(7,16,36,.72) !important; } body[data-theme="dark"] .text-slate-900{ color: rgba(231,238,252,.96) !important; } body[data-theme="dark"] .text-slate-800{ color: rgba(231,238,252,.92) !important; } body[data-theme="dark"] .text-slate-700{ color: rgba(231,238,252,.82) !important; } body[data-theme="dark"] .text-slate-600{ color: rgba(231,238,252,.72) !important; } body[data-theme="dark"] .text-slate-500{ color: rgba(231,238,252,.66) !important; } body[data-theme="dark"] .border-slate-200{ border-color: rgba(96,165,250,.18) !important; } body[data-theme="dark"] .border-slate-200\\/40{ border-color: rgba(96,165,250,.14) !important; } body[data-theme="dark"] .border-slate-200\\/50{ border-color: rgba(96,165,250,.16) !important; } /* Dark mode: inputs/selects and focus */ body[data-theme="dark"] input, body[data-theme="dark"] select{ background: rgba(11,22,51,.86) !important; color: rgba(231,238,252,.92) !important; border-color: rgba(96,165,250,.20) !important; } body[data-theme="dark"] input::placeholder{ color: rgba(231,238,252,.45) !important; } /* Dark mode: muted helper class and pills */ body[data-theme="dark"] .muted{ color: rgba(231,238,252,.70) !important; } body[data-theme="dark"] .pill{ border-color: rgba(96,165,250,.22) !important; background: rgba(96,165,250,.10) !important; color: rgba(231,238,252,.86) !important; } /* Dark mode: buttons inside modal/top controls */ body[data-theme="dark"] .btnSecondary, body[data-theme="dark"] .btnGhost{ background: rgba(11,22,51,.78) !important; color: rgba(231,238,252,.90) !important; border-color: rgba(96,165,250,.18) !important; } .tip{cursor:help; font-weight:800; color:#64748b;} /* Summary cards hover emphasis */ .statCard, .stat-card, .lv-stat-card { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .statCard:hover, .stat-card:hover, .lv-stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12); border-color: rgba(59, 130, 246, 0.45); } /* Summary stat cards: hover emphasis (scoped to Summary container) */ .glass-indigo .stat-neutral, .glass-indigo .stat-blue, .glass-indigo .stat-green, .glass-indigo .stat-amber{ transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .glass-indigo .stat-neutral:hover, .glass-indigo .stat-blue:hover, .glass-indigo .stat-green:hover, .glass-indigo .stat-amber:hover{ transform: translateY(-2px); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12); border-color: rgba(59, 130, 246, 0.45); } /* Hero metric card (Boldin-like, but analytical) */ .hero-card{ border-radius: 18px; border: 1px solid rgba(16,185,129,.22); box-shadow: 0 18px 45px rgba(2,8,23,.10); padding: 14px 16px; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(255,255,255,.92)); } .hero-card::before{ content:""; position:absolute; inset:-30% -20% auto -20%; height: 160%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); pointer-events:none; } .hero-top{ position: relative; } .hero-kicker{ font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(15,23,42,.65); font-weight: 700; margin-bottom: 8px; } .hero-body{ display:flex; align-items:center; justify-content: space-between; gap: 14px; } .hero-label{ font-size: 11px; color: rgba(15,23,42,.70); font-weight: 700; } .hero-value{ font-size: 40px; line-height: 1.0; font-weight: 800; letter-spacing: -0.02em; color: rgba(2,8,23,.92); } .hero-sub{ margin-top: 6px; font-size: 12px; color: rgba(15,23,42,.65); max-width: 46ch; } .hero-ring{ flex: 0 0 auto; display:flex; align-items:center; justify-content:center; } .hero-ring-inner{ position: relative; display:grid; place-items:center; } .hero-ring-svg{ color: rgba(16,185,129,.95); filter: drop-shadow(0 10px 18px rgba(16,185,129,.25)); } .hero-ring-text{ position:absolute; text-align:center; } .hero-ring-pct{ font-weight: 800; font-size: 16px; color: rgba(2,8,23,.85); } .hero-foot{ position: relative; margin-top: 10px; font-size: 11px; color: rgba(15,23,42,.60); } .hero-green{ border-color: rgba(16,185,129,.25); background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(255,255,255,.92)); } .hero-green .hero-ring-svg{ color: rgba(16,185,129,.95); } .hero-blue{ border-color: rgba(13,110,253,.25); background: linear-gradient(135deg, rgba(13,110,253,.20), rgba(255,255,255,.92)); } .hero-blue .hero-ring-svg{ color: rgba(13,110,253,.95); } .hero-amber{ border-color: rgba(245,158,11,.28); background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(255,255,255,.92)); } .hero-amber .hero-ring-svg{ color: rgba(245,158,11,.95); } body[data-theme="dark"] .hero-card{ border-color: rgba(148,163,184,.18); box-shadow: 0 18px 45px rgba(0,0,0,.35); background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(2,6,23,.65)); } body[data-theme="dark"] .hero-kicker, body[data-theme="dark"] .hero-label, body[data-theme="dark"] .hero-sub, body[data-theme="dark"] .hero-foot{ color: rgba(226,232,240,.70); } body[data-theme="dark"] .hero-value, body[data-theme="dark"] .hero-ring-pct{ color: rgba(241,245,249,.92); } /* Equal-size hero summary cards */ .hero-card{ display:flex; flex-direction:column; min-height: 136px; } .hero-label{ margin-top: 2px; } /* Info tooltip (ℹ️ icon) */ .lv-info{ position:absolute; top:10px; right:12px; font-size:13px; color: rgb(100 116 139); /* slate-500 */ cursor:pointer; user-select:none; } .lv-info:hover{ color: rgb(15 23 42); } /* slate-900 */ .lv-tooltip{ position:absolute; top:28px; right:0; width:260px; padding:10px 12px; border-radius:10px; font-size:12px; line-height:1.4; color: rgb(15 23 42); background: rgba(255,255,255,0.96); border: 1px solid rgba(148,163,184,0.4); box-shadow: 0 12px 28px rgba(15,23,42,0.18); opacity:0; transform: translateY(6px); pointer-events:none; transition: opacity .15s ease, transform .15s ease; z-index:50; } .lv-info:hover .lv-tooltip{ opacity:1; transform: translateY(0); pointer-events:auto; } .dark .lv-tooltip{ color: rgb(226 232 240); background: rgba(2,6,23,0.95); border-color: rgba(148,163,184,0.22); } /* Restore card lift + highlight on hover */ .hero-card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .hero-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18); border-color: rgba(99, 102, 241, 0.35); /* subtle indigo lift */ } /* Dark mode */ .dark .hero-card:hover { box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55); border-color: rgba(99, 102, 241, 0.45); } /* Inline info icon next to card title */ .hero-title-wrap{ display: inline-flex; align-items: center; gap: 6px; } /* Override legacy absolute positioning for inline usage */ .hero-title-wrap .lv-info{ position: relative !important; top: auto !important; right: auto !important; display: inline-flex; align-items: center; } /* Centered tooltip over card */ .hero-card{ position: relative; } .hero-card .lv-tooltip{ left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%) scale(0.98); width: 280px; text-align: center; } .hero-card .lv-info:hover .lv-tooltip{ transform: translate(-50%, -50%) scale(1); } /* Tooltip that follows the mouse (fixed positioning) */ .lv-tooltip-follow{ position: fixed !important; left: 0; top: 0; transform: none !important; opacity: 1 !important; pointer-events: none; z-index: 1000; max-width: 320px; } .lv-info-inline{ display: inline-flex; align-items: center; } .lv-tooltip-follow{ z-index: 99999; } /* Plain-language two-card layout (prototype styling) */ :root{ color-scheme: light; --bg0:#f4f7fb; --bg1:#ffffff; --text:#0b1b3a; --muted: rgba(15,23,42,.65); --primary:#0d6efd; /* bootstrap primary */ --primary2:#0a58ca; --border: rgba(13,110,253,.18); --shadow: 0 18px 45px rgba(2,8,23,.10); } /* Theme: dark mode (CSS variables) */ body[data-theme="dark"]{ color-scheme: dark; --bg0:#071024; --bg1:#0b1633; --text:#e7eefc; --muted: rgba(231,238,252,.70); --primary:#60a5fa; --primary2:#3b82f6; --border: rgba(96,165,250,.20); --shadow: 0 18px 45px rgba(0,0,0,.35); } body[data-theme="dark"]{ background: radial-gradient(1200px 800px at 10% -10%, rgba(96,165,250,.18), transparent 60%), radial-gradient(900px 700px at 95% 0%, rgba(34,211,238,.12), transparent 55%), linear-gradient(180deg, var(--bg0), #050a18 60%, #050a18); } body[data-theme="dark"] .glass{ background: rgba(11,22,51,.74); border: 1px solid var(--border); box-shadow: var(--shadow); } body[data-theme="dark"] th{ background: rgba(7,16,36,.92); color: rgba(231,238,252,.70); } body[data-theme="dark"] td{ color: rgba(231,238,252,.86); } body[data-theme="dark"] .lv-topbar{ background: linear-gradient(180deg,#050a18,#060f24); border-bottom:1px solid rgba(255,255,255,.10); box-shadow:0 10px 22px rgba(0,0,0,.35); } body{ margin:0; background: radial-gradient(1200px 800px at 10% -10%, rgba(13,110,253,.18), transparent 60%), radial-gradient(900px 700px at 95% 0%, rgba(13,202,240,.14), transparent 55%), linear-gradient(180deg, var(--bg0), #ffffff 60%, #ffffff); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; } /* Main surfaces */ .glass{ background: rgba(255,255,255,.92); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(10px); } .muted{ color: var(--muted); } /* Pills / badges */ .pill{ border: 1px solid rgba(13,110,253,.20); background: rgba(13,110,253,.08); color: rgba(11,27,58,.82); } /* Tables */ table { border-collapse: collapse; width: 100%; } th, td { padding: 10px 10px; border-bottom: 1px solid rgba(13,110,253,.10); white-space: nowrap; } th { position: sticky; top: 0; background: rgba(248,250,255,.95); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: rgba(15, 23, 42, .70); } td { font-size: 12px; color: rgba(15,23,42,.88); } /* Results table: tighten early columns */ .lv-results-table { table-layout: auto; } .lv-results-table th:nth-child(1), .lv-results-table td:nth-child(1) { width: 60px; text-align: center; } .lv-results-table th:nth-child(2), .lv-results-table td:nth-child(2), .lv-results-table th:nth-child(3), .lv-results-table td:nth-child(3), .lv-results-table th:nth-child(4), .lv-results-table td:nth-child(4) { width: 120px; } .lv-results-table th:nth-child(n+5), .lv-results-table td:nth-child(n+5) { width: 110px; } /* Plotly modebar a little quieter */ .plotCard .js-plotly-plot .plotly .modebar{ opacity:.12; } .plotCard:hover .js-plotly-plot .plotly .modebar{ opacity:.45; } /* Progress animation */ @keyframes progressSlide { 0% { transform: translateX(-60%); } 100% { transform: translateX(160%); } } /* Card variants */ .glass-blue{ border-color: rgba(13,110,253,.22); box-shadow: 0 18px 45px rgba(13,110,253,.10); } .glass-indigo{ border-color: rgba(79,70,229,.18); box-shadow: 0 18px 45px rgba(79,70,229,.10); } .glass-mint{ border-color: rgba(16,185,129,.20); box-shadow: 0 18px 45px rgba(16,185,129,.10); } .glass-sun{ border-color: rgba(245,158,11,.22); box-shadow: 0 18px 45px rgba(245,158,11,.10); } .cardHeader{ background: linear-gradient(90deg, rgba(13,110,253,.12), rgba(13,202,240,.10), rgba(255,255,255,.70)); border-bottom: 1px solid rgba(13,110,253,.14); } .cardHeader-indigo{ background: linear-gradient(90deg, rgba(79,70,229,.10), rgba(99,102,241,.08), rgba(255,255,255,.72)); border-bottom: 1px solid rgba(79,70,229,.14); } .cardHeader-mint{ background: linear-gradient(90deg, rgba(16,185,129,.10), rgba(34,197,94,.08), rgba(255,255,255,.72)); border-bottom: 1px solid rgba(16,185,129,.14); } /* Primary button polish */ .btnPrimary{ background: linear-gradient(180deg, #1d4ed8, #0b5ed7); border: 1px solid rgba(29,78,216,.25); color: white; box-shadow: 0 10px 22px rgba(13,110,253,.20); } .btnPrimary:hover{ filter: brightness(1.03); } .btnSecondary{ background: rgba(255,255,255,.95); border: 1px solid rgba(13,110,253,.18); color: rgba(11,27,58,.9); } .btnSecondary:hover{ background: rgba(248,250,255,.98); } .btnGhost{ background: rgba(13,110,253,.06); border: 1px solid rgba(13,110,253,.16); color: rgba(11,27,58,.86); } .btnGhost:hover{ background: rgba(13,110,253,.09); } /* Make inputs feel more premium */ input, select{ border-radius: 14px !important; border-color: rgba(13,110,253,.14) !important; background: rgba(255,255,255,.96) !important; } /* Summary stat cards */ .stat-blue{ background: linear-gradient(180deg, rgba(13,110,253,.14), rgba(255,255,255,.92)); border: 1px solid rgba(13,110,253,.25); box-shadow: 0 14px 30px rgba(13,110,253,.18); } .stat-green{ background: linear-gradient(180deg, rgba(16,185,129,.16), rgba(255,255,255,.92)); border: 1px solid rgba(16,185,129,.28); box-shadow: 0 14px 30px rgba(16,185,129,.18); } .stat-amber{ background: linear-gradient(180deg, rgba(245,158,11,.18), rgba(255,255,255,.92)); border: 1px solid rgba(245,158,11,.28); box-shadow: 0 14px 30px rgba(245,158,11,.18); } /* Summary stat cards (colorful) */ .stat-neutral{ background: rgba(255,255,255,.92); border-color: rgba(13,110,253,.14); box-shadow: 0 14px 30px rgba(2,8,23,.08); } .stat-blue{ background: linear-gradient(180deg, rgba(13,110,253,.18), rgba(255,255,255,.92)); border-color: rgba(13,110,253,.28); box-shadow: 0 14px 30px rgba(13,110,253,.18); } .stat-green{ background: linear-gradient(180deg, rgba(16,185,129,.20), rgba(255,255,255,.92)); border-color: rgba(16,185,129,.30); box-shadow: 0 14px 30px rgba(16,185,129,.18); } .stat-amber{ background: linear-gradient(180deg, rgba(245,158,11,.22), rgba(255,255,255,.92)); border-color: rgba(245,158,11,.32); box-shadow: 0 14px 30px rgba(245,158,11,.18); } /* Restore lift/highlight on hover for summary stat cards */ .stat-neutral, .stat-blue, .stat-green, .stat-amber{ transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; will-change: transform; } .stat-neutral:hover, .stat-blue:hover, .stat-green:hover, .stat-amber:hover{ transform: translateY(-2px); box-shadow: 0 18px 45px rgba(2,8,23,.12); border-color: rgba(13,110,253,.32); } /* Dark mode hover lift */ body[data-theme="dark"] .stat-neutral:hover, body[data-theme="dark"] .stat-blue:hover, body[data-theme="dark"] .stat-green:hover, body[data-theme="dark"] .stat-amber:hover{ box-shadow: 0 18px 45px rgba(0,0,0,.45); border-color: rgba(96,165,250,.35); } /* Top toolbar (scoped) */ .lv-topbar{position:sticky;top:0;z-index:9999;background:linear-gradient(180deg,#0B4A8B,#0A3F76);color:#fff;border-bottom:1px solid rgba(255,255,255,.18);box-shadow:0 10px 22px rgba(2,8,23,.18);} .lv-topbar__inner{max-width:1680px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:14px;} .lv-brand{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:-0.02em;font-size:16px;white-space:nowrap;} .lv-brand__mark{width:28px;height:28px;border-radius:10px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 16px rgba(0,0,0,.16);font-size:15px;line-height:1;} .lv-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;} .lv-nav a{color:rgba(255,255,255,.95);text-decoration:none;font-weight:800;font-size:13px;padding:8px 12px;border-radius:999px;border:1px solid transparent;} .lv-nav a:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);} .lv-actions{display:flex;align-items:center;gap:10px;white-space:nowrap;} .lv-chip{padding:8px 12px;border-radius:999px;font-weight:950;font-size:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.10);color:#fff;} .lv-chip--ghost{padding:8px 12px;border-radius:999px;font-weight:950;font-size:12px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;} .lv-chip--ghost:hover{background:rgba(255,255,255,.10);} @media (max-width:900px){.lv-topbar__inner{flex-direction:column;align-items:flex-start;}.lv-nav{justify-content:flex-start;}} /* Dark mode: override common Tailwind utility colors used in the UI (CDN Tailwind has fixed colors) */ body[data-theme="dark"] .bg-white{ background: rgba(11,22,51,.86) !important; } body[data-theme="dark"] .bg-slate-50{ background: rgba(7,16,36,.88) !important; } body[data-theme="dark"] .bg-slate-100{ background: rgba(7,16,36,.72) !important; } body[data-theme="dark"] .text-slate-900{ color: rgba(231,238,252,.96) !important; } body[data-theme="dark"] .text-slate-800{ color: rgba(231,238,252,.92) !important; } body[data-theme="dark"] .text-slate-700{ color: rgba(231,238,252,.82) !important; } body[data-theme="dark"] .text-slate-600{ color: rgba(231,238,252,.72) !important; } body[data-theme="dark"] .text-slate-500{ color: rgba(231,238,252,.66) !important; } body[data-theme="dark"] .border-slate-200{ border-color: rgba(96,165,250,.18) !important; } body[data-theme="dark"] .border-slate-200\\/40{ border-color: rgba(96,165,250,.14) !important; } body[data-theme="dark"] .border-slate-200\\/50{ border-color: rgba(96,165,250,.16) !important; } /* Dark mode: inputs/selects and focus */ body[data-theme="dark"] input, body[data-theme="dark"] select{ background: rgba(11,22,51,.86) !important; color: rgba(231,238,252,.92) !important; border-color: rgba(96,165,250,.20) !important; } body[data-theme="dark"] input::placeholder{ color: rgba(231,238,252,.45) !important; } /* Dark mode: muted helper class and pills */ body[data-theme="dark"] .muted{ color: rgba(231,238,252,.70) !important; } body[data-theme="dark"] .pill{ border-color: rgba(96,165,250,.22) !important; background: rgba(96,165,250,.10) !important; color: rgba(231,238,252,.86) !important; } /* Dark mode: buttons inside modal/top controls */ body[data-theme="dark"] .btnSecondary, body[data-theme="dark"] .btnGhost{ background: rgba(11,22,51,.78) !important; color: rgba(231,238,252,.90) !important; border-color: rgba(96,165,250,.18) !important; } .tip{cursor:help; font-weight:800; color:#64748b;} /* Summary cards hover emphasis */ .statCard, .stat-card, .lv-stat-card { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .statCard:hover, .stat-card:hover, .lv-stat-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12); border-color: rgba(59, 130, 246, 0.45); } /* Summary stat cards: hover emphasis (scoped to Summary container) */ .glass-indigo .stat-neutral, .glass-indigo .stat-blue, .glass-indigo .stat-green, .glass-indigo .stat-amber{ transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .glass-indigo .stat-neutral:hover, .glass-indigo .stat-blue:hover, .glass-indigo .stat-green:hover, .glass-indigo .stat-amber:hover{ transform: translateY(-2px); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12); border-color: rgba(59, 130, 246, 0.45); } /* Hero metric card (Boldin-like, but analytical) */ .hero-card{ border-radius: 18px; border: 1px solid rgba(16,185,129,.22); box-shadow: 0 18px 45px rgba(2,8,23,.10); padding: 14px 16px; position: relative; overflow: hidden; background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(255,255,255,.92)); } .hero-card::before{ content:""; position:absolute; inset:-30% -20% auto -20%; height: 160%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); pointer-events:none; } .hero-top{ position: relative; } .hero-kicker{ font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(15,23,42,.65); font-weight: 700; margin-bottom: 8px; } .hero-body{ display:flex; align-items:center; justify-content: space-between; gap: 14px; } .hero-label{ font-size: 11px; color: rgba(15,23,42,.70); font-weight: 700; } .hero-value{ font-size: 40px; line-height: 1.0; font-weight: 800; letter-spacing: -0.02em; color: rgba(2,8,23,.92); } .hero-sub{ margin-top: 6px; font-size: 12px; color: rgba(15,23,42,.65); max-width: 46ch; } .hero-ring{ flex: 0 0 auto; display:flex; align-items:center; justify-content:center; } .hero-ring-inner{ position: relative; display:grid; place-items:center; } .hero-ring-svg{ color: rgba(16,185,129,.95); filter: drop-shadow(0 10px 18px rgba(16,185,129,.25)); } .hero-ring-text{ position:absolute; text-align:center; } .hero-ring-pct{ font-weight: 800; font-size: 16px; color: rgba(2,8,23,.85); } .hero-foot{ position: relative; margin-top: 10px; font-size: 11px; color: rgba(15,23,42,.60); } .hero-green{ border-color: rgba(16,185,129,.25); background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(255,255,255,.92)); } .hero-green .hero-ring-svg{ color: rgba(16,185,129,.95); } .hero-blue{ border-color: rgba(13,110,253,.25); background: linear-gradient(135deg, rgba(13,110,253,.20), rgba(255,255,255,.92)); } .hero-blue .hero-ring-svg{ color: rgba(13,110,253,.95); } .hero-amber{ border-color: rgba(245,158,11,.28); background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(255,255,255,.92)); } .hero-amber .hero-ring-svg{ color: rgba(245,158,11,.95); } body[data-theme="dark"] .hero-card{ border-color: rgba(148,163,184,.18); box-shadow: 0 18px 45px rgba(0,0,0,.35); background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(2,6,23,.65)); } body[data-theme="dark"] .hero-kicker, body[data-theme="dark"] .hero-label, body[data-theme="dark"] .hero-sub, body[data-theme="dark"] .hero-foot{ color: rgba(226,232,240,.70); } body[data-theme="dark"] .hero-value, body[data-theme="dark"] .hero-ring-pct{ color: rgba(241,245,249,.92); } /* Equal-size hero summary cards */ .hero-card{ display:flex; flex-direction:column; min-height: 136px; } .hero-label{ margin-top: 2px; } /* Info tooltip (ℹ️ icon) */ .lv-info{ position:absolute; top:10px; right:12px; font-size:13px; color: rgb(100 116 139); /* slate-500 */ cursor:pointer; user-select:none; } .lv-info:hover{ color: rgb(15 23 42); } /* slate-900 */ .lv-tooltip{ position:absolute; top:28px; right:0; width:260px; padding:10px 12px; border-radius:10px; font-size:12px; line-height:1.4; color: rgb(15 23 42); background: rgba(255,255,255,0.96); border: 1px solid rgba(148,163,184,0.4); box-shadow: 0 12px 28px rgba(15,23,42,0.18); opacity:0; transform: translateY(6px); pointer-events:none; transition: opacity .15s ease, transform .15s ease; z-index:50; } .lv-info:hover .lv-tooltip{ opacity:1; transform: translateY(0); pointer-events:auto; } .dark .lv-tooltip{ color: rgb(226 232 240); background: rgba(2,6,23,0.95); border-color: rgba(148,163,184,0.22); } /* Restore card lift + highlight on hover */ .hero-card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .hero-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18); border-color: rgba(99, 102, 241, 0.35); /* subtle indigo lift */ } /* Dark mode */ .dark .hero-card:hover { box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55); border-color: rgba(99, 102, 241, 0.45); } /* Inline info icon next to card title */ .hero-title-wrap{ display: inline-flex; align-items: center; gap: 6px; } /* Override legacy absolute positioning for inline usage */ .hero-title-wrap .lv-info{ position: relative !important; top: auto !important; right: auto !important; display: inline-flex; align-items: center; } /* Centered tooltip over card */ .hero-card{ position: relative; } .hero-card .lv-tooltip{ left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%) scale(0.98); width: 280px; text-align: center; } .hero-card .lv-info:hover .lv-tooltip{ transform: translate(-50%, -50%) scale(1); } /* Tooltip that follows the mouse (fixed positioning) */ .lv-tooltip-follow{ position: fixed !important; left: 0; top: 0; transform: none !important; opacity: 1 !important; pointer-events: none; z-index: 1000; max-width: 320px; } .lv-info-inline{ display: inline-flex; align-items: center; } .lv-tooltip-follow{ z-index: 99999; } /* --- Plain-language two-card layout (prototype styling) --- */ .plTwoWrap{ width:100%; } .plTwoGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 880px){ .plTwoGrid{ grid-template-columns: 1fr; } } /* Shared card shell */ .plCard{ position: relative; border-radius: 22px; border: 1px solid rgba(15,23,42,.12); background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,250,252,.86)); box-shadow: 0 18px 40px rgba(2,8,23,.08); overflow: hidden; padding: 18px; } /* Summary card: teal rail */ .plCardSummary::before{ content:""; position:absolute; left:0; top:0; bottom:0; width: 10px; background: linear-gradient(180deg, rgba(68,210,190,.95), rgba(43,196,168,.85)); box-shadow: 0 0 0 1px rgba(43,196,168,.25) inset; } /* Titles */ .plTitle{ font-size: 22px; font-weight: 650; letter-spacing: -0.01em; color: rgba(15,23,42,.88); } /* Badge pill matches prototype */ .plPill{ display:inline-flex; align-items:center; gap: 10px; margin-top: 10px; padding: 10px 16px; border-radius: 999px; font-weight: 750; font-size: 18px; color: rgba(231,255,247,.98); background: linear-gradient(180deg, rgba(40,122,100,.98), rgba(25,98,78,.98)); box-shadow: 0 10px 20px rgba(2,8,23,.14); border: 1px solid rgba(6,95,70,.45); width: fit-content; } .plPillIcon{ display:grid; place-items:center; width: 22px; height: 22px; border-radius: 999px; background: rgba(236,253,245,.20); border: 1px solid rgba(236,253,245,.25); font-size: 14px; line-height: 1; } /* Inner panel */ .plInner{ margin-top: 14px; border-radius: 18px; background: rgba(255,255,255,.78); border: 1px solid rgba(148,163,184,.35); box-shadow: 0 10px 22px rgba(2,8,23,.06); padding: 18px 18px; } .plBody p{ margin: 0 0 14px 0; font-size: 18px; line-height: 1.55; color: rgba(15,23,42,.88); } .plBody p:last-child{ margin-bottom: 0; } /* Scorecard header */ .plCardHeadScore{ padding: 2px 0 10px 0; } .plTitleScore{ font-size: 22px; font-weight: 760; letter-spacing: -0.01em; color: rgba(15,23,42,.90); } .plSubScore{ margin-top: 6px; font-size: 16px; color: rgba(15,23,42,.62); } .plDivider{ height: 1px; background: rgba(148,163,184,.35); margin: 8px -18px 0 -18px; } /* Score rows */ .plScoreBody{ padding-top: 10px; } .plRow{ display:grid; grid-template-columns: 1.35fr 1.15fr 1fr; align-items:center; gap: 14px; padding: 14px 0; } .plRowLeft{ display:flex; align-items:center; gap: 12px; min-width: 0; } .plCheck{ width: 26px; height: 26px; border-radius: 999px; display:grid; place-items:center; color: white; background: linear-gradient(180deg, rgba(66,170,135,.98), rgba(40,140,110,.98)); border: 1px solid rgba(16,185,129,.45); box-shadow: 0 10px 18px rgba(16,185,129,.16); font-weight: 900; } .plRowLabel{ font-size: 18px; font-weight: 720; color: rgba(15,23,42,.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plRowRight{ font-size: 18px; color: rgba(15,23,42,.78); line-height: 1.35; } /* Meter segments (vivid like prototype) */ .plMeter{ display:flex; align-items:center; gap: 6px; } .plSeg{ width: 30px; height: 10px; border-radius: 999px; background: rgba(148,163,184,.40); box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); } .plSegOn{ background: rgba(96,165,250,.35); } .plSeg.t1.plSegOn{ background: rgba(22,101,82,.95); } .plSeg.t2.plSegOn{ background: rgba(34,122,96,.92); } .plSeg.t3.plSegOn{ background: rgba(66,170,135,.88); } .plSeg.t4.plSegOn{ background: rgba(245,158,11,.78); } .plSeg.t5.plSegOn{ background: rgba(203,213,225,.85); } .plHair{ height: 1px; background: rgba(148,163,184,.28); } /* Footer button like prototype */ .plFoot{ padding: 14px 0 0 0; } .plCalcBtn{ width: 100%; display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 14px 14px; border-radius: 16px; border: 1px solid rgba(148,163,184,.35); background: rgba(248,250,252,.70); box-shadow: 0 10px 22px rgba(2,8,23,.06); cursor: pointer; } .plCalcBtn:hover{ border-color: rgba(59,130,246,.35); box-shadow: 0 14px 26px rgba(2,8,23,.08); } .plQ{ width: 24px; height: 24px; border-radius: 999px; display:grid; place-items:center; border: 1px solid rgba(15,23,42,.20); color: rgba(15,23,42,.70); background: rgba(255,255,255,.85); flex: 0 0 auto; font-weight: 900; } .plChevron{ color: rgba(15,23,42,.45); font-size: 28px; line-height: 1; padding-left: 8px; } /* Dark mode adjustments */ body[data-theme="dark"] .plCard{ border-color: rgba(148,163,184,.18); background: linear-gradient(180deg, rgba(11,22,51,.62), rgba(2,6,23,.62)); box-shadow: 0 18px 45px rgba(0,0,0,.38); } body[data-theme="dark"] .plTitle, body[data-theme="dark"] .plTitleScore, body[data-theme="dark"] .plRowLabel{ color: rgba(241,245,249,.92); } body[data-theme="dark"] .plSubScore, body[data-theme="dark"] .plRowRight{ color: rgba(226,232,240,.70); } body[data-theme="dark"] .plDivider, body[data-theme="dark"] .plHair{ background: rgba(148,163,184,.20); } body[data-theme="dark"] .plInner{ background: rgba(2,6,23,.55); border-color: rgba(148,163,184,.20); } body[data-theme="dark"] .plBody p{ color: rgba(241,245,249,.88); } body[data-theme="dark"] .plCalcBtn{ background: rgba(2,6,23,.45); border-color: rgba(148,163,184,.20); } body[data-theme="dark"] .plQ{ background: rgba(2,6,23,.65); border-color: rgba(148,163,184,.25); color: rgba(226,232,240,.75); } /* --- Size tuning (keep prototype styling; reduce visual dominance) --- */ .plTwoGrid .plCard{ padding: 14px; /* was 18px */ border-radius: 20px; /* slightly tighter */ } .plTwoGrid .plTitle, .plTwoGrid .plTitleScore{ font-size: 20px; /* was 22px */ } .plTwoGrid .plSubScore{ font-size: 14px; /* was 16px */ margin-top: 4px; } .plTwoGrid .plPill{ font-size: 16px; /* was 18px */ padding: 8px 14px; /* was 10px 16px */ margin-top: 8px; /* was 10px */ } .plTwoGrid .plPillIcon{ width: 20px; height: 20px; font-size: 13px; } .plTwoGrid .plInner{ margin-top: 12px; padding: 14px 14px; /* was 18px */ border-radius: 16px; } .plTwoGrid .plBody p{ font-size: 16px; /* was 18px */ margin-bottom: 12px; } .plTwoGrid .plRow{ padding: 12px 0; /* was 14px */ gap: 12px; /* was 14px */ } .plTwoGrid .plRowLabel, .plTwoGrid .plRowRight{ font-size: 16px; /* was 18px */ } .plTwoGrid .plCheck{ width: 24px; height: 24px; font-size: 14px; } .plTwoGrid .plSeg{ width: 26px; /* was 30px */ height: 8px; /* was 10px */ } .plTwoGrid .plFoot{ padding-top: 12px; } .plTwoGrid .plCalcBtn{ padding: 12px 12px; /* was 14px */ border-radius: 14px; } .plTwoGrid .plChevron{ font-size: 26px; /* was 28px */ } /* --- Tip of the day card --- */ .lv-tipcard{ position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(99,102,241,.22); background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(14,165,233,.10), rgba(255,255,255,.85)); box-shadow: 0 18px 45px rgba(2,8,23,.10); overflow: hidden; } .lv-tipcard::before{ content:""; position:absolute; inset:-30% -30% auto -30%; height: 180%; background: radial-gradient(circle at 25% 25%, rgba(255,255,255,.55), rgba(255,255,255,0) 62%); pointer-events:none; } .lv-tipcard__icon{ position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 14px; display: grid; place-items: center; font-size: 18px; background: rgba(99,102,241,.14); border: 1px solid rgba(99,102,241,.22); box-shadow: 0 10px 25px rgba(2,8,23,.08); } .lv-tipcard__body{ position: relative; min-width: 0; } .lv-tipcard__kicker{ font-size: 11px; letter-spacing: .10em; text-transform: uppercase; font-weight: 800; color: rgba(30,41,59,.70); } .lv-tipcard__text{ margin-top: 4px; font-size: 14px; line-height: 1.45; font-weight: 650; color: rgba(15,23,42,.86); } .lv-tipcard__close{ position: relative; margin-left: auto; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(148,163,184,.45); background: rgba(255,255,255,.65); color: rgba(15,23,42,.55); font-weight: 900; line-height: 1; } .lv-tipcard__close:hover{ background: rgba(255,255,255,.85); color: rgba(15,23,42,.75); } /* Dark theme */ body[data-theme="dark"] .lv-tipcard{ border-color: rgba(96,165,250,.20); background: linear-gradient(135deg, rgba(56,189,248,.10), rgba(99,102,241,.12), rgba(11,22,51,.70)); box-shadow: 0 18px 45px rgba(0,0,0,.25); } body[data-theme="dark"] .lv-tipcard__kicker{ color: rgba(231,238,252,.62); } body[data-theme="dark"] .lv-tipcard__text{ color: rgba(231,238,252,.88); } body[data-theme="dark"] .lv-tipcard__close{ background: rgba(11,22,51,.72); border-color: rgba(96,165,250,.18); color: rgba(231,238,252,.70); } body[data-theme="dark"] .lv-tipcard__close:hover{ background: rgba(11,22,51,.90); color: rgba(231,238,252,.90); } /* --- Tip of the day: centered alert modal --- */ @keyframes lvTipPop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .lv-tip-overlay{ position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 22px; /* Slightly lighter dimmer so the card reads “airier” */ background: rgba(15,23,42,.26); backdrop-filter: blur(10px); z-index: 10050; } .lv-tip-modal{ width: min(680px, 100%); border-radius: 22px; overflow: hidden; /* Match the UI’s light-blue stat cards (mostly white with a soft blue wash) */ border: 1px solid rgba(13,110,253,.18); background: radial-gradient(900px 600px at 85% 15%, rgba(13,110,253,.14), transparent 58%), radial-gradient(700px 520px at 12% 0%, rgba(13,202,240,.10), transparent 62%), linear-gradient(180deg, rgba(248,250,255,.96), rgba(255,255,255,.985)); box-shadow: 0 26px 70px rgba(2,8,23,.22); animation: lvTipPop .18s ease-out; position: relative; } .lv-tip-modal::before{ content:""; position:absolute; inset:-30% -20% auto -20%; height: 180%; background: radial-gradient(circle at 25% 25%, rgba(255,255,255,.70), rgba(255,255,255,0) 64%); pointer-events:none; } .lv-tip-modal__head{ position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px 18px; border-bottom: 1px solid rgba(13,110,253,.16); background: linear-gradient(90deg, rgba(13,110,253,.045), rgba(13,202,240,.040), rgba(255,255,255,.90)); } .lv-tip-modal__badge{ width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; font-size: 20px; background: rgba(13,110,253,.08); border: 1px solid rgba(13,110,253,.16); box-shadow: 0 12px 26px rgba(2,8,23,.08), 0 0 0 7px rgba(13,110,253,.045); } .lv-tip-modal__titles{ min-width: 0; } .lv-tip-modal__kicker{ font-size: 11px; letter-spacing: .10em; text-transform: uppercase; font-weight: 900; color: rgba(13,110,253,.72); } .lv-tip-modal__title{ margin-top: 2px; font-size: 16px; line-height: 1.2; font-weight: 900; color: rgba(2,8,23,.90); letter-spacing: -0.01em; } .lv-tip-modal__x{ position: relative; margin-left: auto; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(148,163,184,.50); background: rgba(255,255,255,.70); color: rgba(15,23,42,.60); font-weight: 900; line-height: 1; } .lv-tip-modal__x:hover{ background: rgba(255,255,255,.92); color: rgba(15,23,42,.82); } .lv-tip-modal__body{ position: relative; padding: 18px 18px 14px 18px; } .lv-tip-modal__text{ font-size: 16px; line-height: 1.55; font-weight: 700; color: rgba(15,23,42,.88); } .lv-tip-modal__actions{ position: relative; display: flex; gap: 10px; justify-content: flex-end; padding: 0 18px 18px 18px; } .lv-tip-modal__btn{ border-radius: 999px; padding: 10px 14px; font-weight: 900; font-size: 13px; border: 1px solid transparent; } .lv-tip-modal__btn--primary{ background: linear-gradient(180deg, #1d4ed8, #0b5ed7); border-color: rgba(29,78,216,.25); color: #fff; box-shadow: 0 12px 26px rgba(13,110,253,.22); } .lv-tip-modal__btn--primary:hover{ filter: brightness(1.03); } .lv-tip-modal__btn--ghost{ background: rgba(255,255,255,.78); border-color: rgba(13,110,253,.18); color: rgba(15,23,42,.80); } .lv-tip-modal__btn--ghost:hover{ background: rgba(255,255,255,.92); } /* Dark mode */ body[data-theme="dark"] .lv-tip-overlay{ background: rgba(0,0,0,.56); } body[data-theme="dark"] .lv-tip-modal{ border-color: rgba(96,165,250,.22); background: linear-gradient(135deg, rgba(96,165,250,.20), rgba(34,211,238,.12), rgba(11,22,51,.80) ); box-shadow: 0 26px 70px rgba(0,0,0,.55); } body[data-theme="dark"] .lv-tip-modal__head{ background: rgba(7,16,36,.58); border-bottom-color: rgba(96,165,250,.18); } body[data-theme="dark"] .lv-tip-modal__kicker{ color: rgba(231,238,252,.65); } body[data-theme="dark"] .lv-tip-modal__title{ color: rgba(241,245,249,.92); } body[data-theme="dark"] .lv-tip-modal__text{ color: rgba(231,238,252,.90); } body[data-theme="dark"] .lv-tip-modal__x{ background: rgba(11,22,51,.70); border-color: rgba(96,165,250,.18); color: rgba(231,238,252,.72); } body[data-theme="dark"] .lv-tip-modal__x:hover{ background: rgba(11,22,51,.92); color: rgba(231,238,252,.92); } body[data-theme="dark"] .lv-tip-modal__btn--ghost{ background: rgba(11,22,51,.72); border-color: rgba(96,165,250,.18); color: rgba(231,238,252,.88); } body[data-theme="dark"] .lv-tip-modal__btn--ghost:hover{ background: rgba(11,22,51,.92); }