/** * Auth login/register — scoped overrides loaded AFTER landing.css. * Fixes demo panel + landing tokens when hosting blocks :has(), font @import stalls, or order wins differently. */ /* Landing tokens — mirror html:has(...) from landing.css on so auth pages always resolve var(--landing-*) */ body.auth-page.page-landing { --landing-bg-deep: #0a0a0d; --landing-bg-mid: #131316; --landing-bg-top: #17171c; --landing-mesh-1: rgba(59, 130, 246, 0.13); --landing-mesh-2: rgba(139, 92, 246, 0.07); --landing-mesh-3: rgba(34, 211, 238, 0.05); --landing-border: rgba(255, 255, 255, 0.07); --landing-text: rgba(255, 255, 255, 0.92); --landing-text-muted: rgba(255, 255, 255, 0.55); --landing-grid-dot: rgba(255, 255, 255, 0.055); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing { --landing-bg-deep: #f1f5f9; --landing-bg-mid: #f8fafc; --landing-bg-top: #ffffff; --landing-mesh-1: rgba(59, 130, 246, 0.065); --landing-mesh-2: rgba(99, 102, 241, 0.04); --landing-mesh-3: rgba(14, 165, 233, 0.035); --landing-border: rgba(15, 23, 42, 0.09); --landing-text: #0f172a; --landing-text-muted: #64748b; --landing-grid-dot: rgba(15, 23, 42, 0.055); } /* ----- Instant demo (

) — high specificity, explicit colors ----- */ body.auth-page.page-landing details.auth-demo-hint { box-sizing: border-box; width: 100%; margin: 0 0 1rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(30, 30, 34, 0.88); overflow: hidden; } body.auth-page.page-landing details.auth-demo-hint:hover { border-color: rgba(255, 255, 255, 0.14); background: rgba(34, 34, 40, 0.92); } body.auth-page.page-landing details.auth-demo-hint[open] { border-color: rgba(59, 130, 246, 0.42); background: rgba(26, 30, 38, 0.95); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.14), 0 8px 28px rgba(0, 0, 0, 0.28); } body.auth-page.page-landing details.auth-demo-hint > summary, body.auth-page.page-landing details.auth-demo-hint summary.auth-demo-hint-summary { list-style: none; cursor: pointer; padding: 0.65rem 0.85rem; display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; flex-wrap: wrap; font-size: 0.8125rem; color: #94a3b8; user-select: none; } body.auth-page.page-landing details.auth-demo-hint summary::-webkit-details-marker { display: none; } body.auth-page.page-landing .auth-demo-hint-summary-start { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex: 1; } body.auth-page.page-landing .auth-demo-hint-icon { display: flex; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem; flex-shrink: 0; border-radius: 10px; color: #93c5fd; background: rgba(59, 130, 246, 0.18); border: 1px solid rgba(96, 165, 250, 0.28); } body.auth-page.page-landing .auth-demo-hint-label { font-weight: 600; color: #e2e8f0; font-size: 0.8125rem; } body.auth-page.page-landing .auth-demo-hint-tagline { font-size: 0.6875rem; font-weight: 500; color: #64748b; } body.auth-page.page-landing .auth-demo-hint-peek-kbd { display: inline-block; padding: 0.22rem 0.48rem; font-size: 0.7rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-weight: 600; color: #bfdbfe; background: rgba(15, 23, 42, 0.65); border: 1px solid rgba(96, 165, 250, 0.35); border-radius: 6px; } body.auth-page.page-landing .auth-demo-hint-body { padding: 0 0.85rem 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } body.auth-page.page-landing .auth-demo-hint-points { margin: 0; padding: 0.7rem 0 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } body.auth-page.page-landing .auth-demo-hint-points li { position: relative; padding-left: 1.05rem; font-size: 0.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.8); } body.auth-page.page-landing .auth-demo-hint-points li::before { content: ""; position: absolute; left: 0; top: 0.45rem; width: 5px; height: 5px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28); } body.auth-page.page-landing .auth-demo-hint-points strong { color: #e2e8f0; } body.auth-page.page-landing .auth-demo-hint-fill-tip { margin: 0.65rem 0 0; font-size: 0.74rem; color: #64748b; } body.auth-page.page-landing .auth-demo-hint-credentials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.65rem; padding-top: 0.7rem; border-top: 1px dashed rgba(255, 255, 255, 0.12); } body.auth-page.page-landing .auth-demo-hint-credential { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0.5rem 0.55rem; border-radius: 10px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.08); } body.auth-page.page-landing .auth-demo-hint-credential-label { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; } body.auth-page.page-landing .auth-demo-hint kbd, body.auth-page.page-landing .auth-demo-hint .auth-demo-hint-credential kbd { display: inline-block; padding: 0.18rem 0.48rem; font-size: 0.8125rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-weight: 600; color: #dbeafe; background: rgba(30, 64, 175, 0.35); border: 1px solid rgba(96, 165, 250, 0.3); border-radius: 6px; } body.auth-page.page-landing details.auth-demo-hint summary::after { content: ""; width: 0.45rem; height: 0.45rem; flex-shrink: 0; border-right: 2px solid #64748b; border-bottom: 2px solid #64748b; transform: rotate(45deg); transition: transform 0.2s ease; margin-bottom: 0.12rem; } body.auth-page.page-landing details.auth-demo-hint[open] summary::after { transform: rotate(-135deg); margin-bottom: -0.06rem; } /* Light theme demo */ html[data-mantine-color-scheme="light"] body.auth-page.page-landing details.auth-demo-hint { border-color: rgba(15, 23, 42, 0.12); background: rgba(255, 255, 255, 0.92); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing details.auth-demo-hint[open] { border-color: rgba(59, 130, 246, 0.35); background: rgba(248, 250, 252, 0.98); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-hint-label { color: #0f172a; } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-hint-points li { color: rgba(15, 23, 42, 0.82); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-hint-points strong { color: #0f172a; } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-hint-icon { color: #2563eb; background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.22); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-hint-peek-kbd { color: #1e40af; background: rgba(239, 246, 255, 0.95); border-color: rgba(59, 130, 246, 0.28); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-hint-credential { background: rgba(241, 245, 249, 0.95); border-color: rgba(15, 23, 42, 0.08); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-hint kbd, html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-hint .auth-demo-hint-credential kbd { color: #1d4ed8; background: rgba(219, 234, 254, 0.95); border-color: rgba(59, 130, 246, 0.28); } @media (max-width: 22rem) { body.auth-page.page-landing .auth-demo-hint-credentials { grid-template-columns: 1fr; } } /* ----- Demo info page (/demo) — full-width panel ----- */ body.auth-page.page-landing.auth-page--demo .auth-wrapper { justify-content: stretch; align-items: stretch; } body.auth-page.page-landing.auth-page--demo .auth-form--demo-page, body.auth-page.page-landing .auth-form--demo-page.auth-form--demo-wide { width: 100%; max-width: none; flex: 1 1 auto; margin: 0; border-right: none; box-shadow: none; } body.auth-page.page-landing .auth-form--demo-page { padding-left: clamp(1.25rem, 4vw, 3rem); padding-right: clamp(1.25rem, 4vw, 3rem); } body.auth-page.page-landing .auth-form--demo-page .auth-demo-page-inner { width: 100%; max-width: 56rem; margin: 0 auto; } body.auth-page.page-landing .auth-demo-page-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; align-items: stretch; } @media (max-width: 900px) { body.auth-page.page-landing .auth-demo-page-sections { grid-template-columns: 1fr; } } body.auth-page.page-landing .auth-demo-back-link { display: inline-block; margin-bottom: 1.25rem; font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color 0.15s ease; } body.auth-page.page-landing .auth-demo-back-link:hover { color: #93c5fd; } body.auth-page.page-landing .auth-demo-hero-badge { display: inline-block; margin: 0 0 0.65rem; padding: 0.28rem 0.65rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #93c5fd; background: rgba(59, 130, 246, 0.14); border: 1px solid rgba(96, 165, 250, 0.32); border-radius: 999px; } body.auth-page.page-landing .auth-form--demo-page .auth-brand { margin-bottom: 1.35rem; } body.auth-page.page-landing .auth-form--demo-page .auth-title, body.auth-page.page-landing .auth-form--demo-page .auth-subtitle { text-align: left; } body.auth-page.page-landing .auth-form--demo-page .auth-title { margin-bottom: 0.35rem; } body.auth-page.page-landing .auth-form--demo-page .auth-subtitle { margin-bottom: 0.85rem; } body.auth-page.page-landing .auth-demo-page-lead { margin: 0 0 1.25rem; color: rgba(255, 255, 255, 0.62); line-height: 1.6; font-size: 0.94rem; } body.auth-page.page-landing .auth-form--demo-page .auth-demo-page-credentials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1.25rem; padding: 0; border-top: none; gap: 0.65rem; } body.auth-page.page-landing .auth-form--demo-page .auth-demo-hint-credential { padding: 0.75rem 0.85rem; border-radius: 10px; gap: 0.4rem; } body.auth-page.page-landing .auth-form--demo-page .auth-demo-hint-credential-label { line-height: 1.2; } body.auth-page.page-landing .auth-form--demo-page .auth-demo-hint-credential kbd { display: inline-block; padding: 0.18rem 0.48rem; font-size: 0.8125rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-weight: 600; color: #dbeafe; background: rgba(30, 64, 175, 0.35); border: 1px solid rgba(96, 165, 250, 0.3); border-radius: 6px; } body.auth-page.page-landing .auth-demo-page-section { display: flex; flex-direction: column; margin: 0; padding: 1.15rem 1.2rem 1.2rem; border-radius: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); min-height: 100%; } body.auth-page.page-landing .auth-demo-page-section--can { border-color: rgba(64, 192, 87, 0.28); background: linear-gradient(180deg, rgba(64, 192, 87, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); } body.auth-page.page-landing .auth-demo-page-section--blocked { border-color: rgba(250, 82, 82, 0.28); background: linear-gradient(180deg, rgba(250, 82, 82, 0.07) 0%, rgba(0, 0, 0, 0.12) 100%); } body.auth-page.page-landing .auth-demo-page-section--info { border-color: rgba(59, 130, 246, 0.28); background: linear-gradient(180deg, rgba(59, 130, 246, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); } body.auth-page.page-landing .auth-demo-page-section-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.75rem; } body.auth-page.page-landing .auth-demo-page-section-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 8px; } body.auth-page.page-landing .auth-demo-page-section-icon--can { color: #69db7c; background: rgba(64, 192, 87, 0.15); border: 1px solid rgba(64, 192, 87, 0.3); } body.auth-page.page-landing .auth-demo-page-section-icon--blocked { color: #ffa8a8; background: rgba(250, 82, 82, 0.12); border: 1px solid rgba(250, 82, 82, 0.28); } body.auth-page.page-landing .auth-demo-page-section-icon--info { color: #74c0fc; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.28); } body.auth-page.page-landing .auth-demo-page-section h2 { margin: 0; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.01em; text-transform: none; color: rgba(255, 255, 255, 0.92); line-height: 1.25; } body.auth-page.page-landing .auth-demo-page-section--can h2 { color: #b2f2bb; } body.auth-page.page-landing .auth-demo-page-section--blocked h2 { color: #ffc9c9; } body.auth-page.page-landing .auth-demo-page-section--info h2 { color: #a5d8ff; } body.auth-page.page-landing .auth-demo-page-section ul { margin: 0; padding-left: 1.15rem; color: rgba(255, 255, 255, 0.78); font-size: 0.88rem; line-height: 1.55; } body.auth-page.page-landing .auth-demo-page-section li + li { margin-top: 0.4rem; } body.auth-page.page-landing .auth-demo-page-section a { color: #93c5fd; text-decoration: underline; text-decoration-color: rgba(147, 197, 253, 0.45); text-underline-offset: 0.12em; } body.auth-page.page-landing .auth-demo-page-section a:hover { color: #bfdbfe; text-decoration-color: rgba(191, 219, 254, 0.65); } body.auth-page.page-landing .auth-demo-page-note { margin: 0; font-size: 0.84rem; line-height: 1.55; color: rgba(255, 255, 255, 0.58); } body.auth-page.page-landing .auth-demo-page-note kbd { display: inline-block; padding: 0.12rem 0.38rem; font-size: 0.78rem; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-weight: 600; color: #dbeafe; background: rgba(30, 64, 175, 0.28); border: 1px solid rgba(96, 165, 250, 0.25); border-radius: 5px; } body.auth-page.page-landing .auth-demo-page-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; } body.auth-page.page-landing .auth-demo-page-actions .auth-btn, body.auth-page.page-landing .auth-demo-page-actions .auth-btn--demo-cta { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: 3rem; margin-top: 0; padding: 0.75rem 1.5rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; color: #fff; border: none; border-radius: 12px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%); background-size: 200% 100%; box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease, background-position 0.4s ease; } body.auth-page.page-landing .auth-demo-page-actions .auth-btn--demo-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5); background-position: 100% 0; color: #fff; } body.auth-page.page-landing .auth-demo-page-actions .auth-btn--demo-cta:focus-visible { outline: 2px solid rgba(96, 165, 250, 0.85); outline-offset: 3px; } body.auth-page.page-landing .auth-demo-page-actions .auth-switch { margin: 0; text-align: center; } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-form--demo-page { box-shadow: none; } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-actions .auth-btn--demo-cta { color: #fff; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.28); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-actions .auth-btn--demo-cta:hover { color: #fff; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.38); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-back-link { color: #64748b; } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-back-link:hover { color: #2563eb; } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-hero-badge { color: #1d4ed8; background: rgba(219, 234, 254, 0.9); border-color: rgba(59, 130, 246, 0.28); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-lead { color: #64748b; } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-section--can { background: linear-gradient(180deg, rgba(64, 192, 87, 0.08) 0%, #fff 100%); border-color: rgba(64, 192, 87, 0.35); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-section--blocked { background: linear-gradient(180deg, rgba(250, 82, 82, 0.06) 0%, #f8fafc 100%); border-color: rgba(250, 82, 82, 0.3); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-section--info { background: linear-gradient(180deg, rgba(59, 130, 246, 0.06) 0%, #fff 100%); border-color: rgba(59, 130, 246, 0.28); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-section-icon--can { color: #2f9e44; background: rgba(64, 192, 87, 0.12); border-color: rgba(64, 192, 87, 0.35); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-section-icon--blocked { color: #e03131; background: rgba(250, 82, 82, 0.1); border-color: rgba(250, 82, 82, 0.3); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-section-icon--info { color: #1c7ed6; background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.28); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-section--can h2 { color: #2b8a3e; } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-section--blocked h2 { color: #c92a2a; } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-section--info h2 { color: #1864ab; } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-form--demo-page .auth-demo-hint-credential kbd, html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-note kbd { color: #1d4ed8; background: rgba(219, 234, 254, 0.95); border-color: rgba(59, 130, 246, 0.28); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-section { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.1); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-section h2 { color: #1e293b; } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-section ul { color: #334155; } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-section a { color: #2563eb; text-decoration-color: rgba(37, 99, 235, 0.35); } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-section a:hover { color: #1d4ed8; } html[data-mantine-color-scheme="light"] body.auth-page.page-landing .auth-demo-page-note { color: #64748b; } @media (max-width: 22rem) { body.auth-page.page-landing .auth-form--demo-page .auth-demo-page-credentials { grid-template-columns: 1fr; } }