/* Privasys Harness shell — auth gate + attestation drawer. Scoped to #privasys-shell so it never bleeds into the dsh UI underneath. */ #privasys-shell { --pv-bg: #0b0e14; --pv-surface: #131722; --pv-surface-2: #1b2130; --pv-border: #2a3242; --pv-text: #e6e9ef; --pv-muted: #99a2b3; --pv-primary: #4c8dff; --pv-accent: #35d0a5; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--pv-text); } .pv-hidden { display: none !important; } /* --- full-viewport gate (SDK ceremony overlays it) --- z-index MUST stay BELOW 999998: in sealed mode the auth SDK mounts its ceremony iframe on at z-index 999998, positioned over this gate (body-parenting preserves the iframe's in-memory ECDH keys). A higher gate hid the entire branded ceremony behind our background — the root cause of every "login view is not the SDK UI" report. At 999000 the gate covers the app, and the SDK's surface covers the gate. */ .pv-gate { position: fixed; inset: 0; z-index: 999000; background: var(--pv-bg); display: flex; align-items: center; justify-content: center; overflow: auto; } /* --- persistent chrome: shield button top-right --- */ .pv-chrome { position: fixed; top: 0; right: 0; z-index: 2147482000; pointer-events: none; display: flex; align-items: center; gap: 2px; } .pv-chrome > * { pointer-events: auto; } .pv-shield { display: inline-flex; align-items: center; gap: 6px; margin: 10px; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pv-accent) 45%, transparent); background: color-mix(in srgb, var(--pv-accent) 12%, var(--pv-surface)); color: var(--pv-accent); font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); transition: border-color 0.15s, background 0.15s; } .pv-shield:hover { border-color: var(--pv-accent); background: color-mix(in srgb, var(--pv-accent) 20%, var(--pv-surface)); } .pv-shield-label { letter-spacing: 0.02em; } /* Connecting toast shown until connect() settles — silent restore and the one-tap push re-approval paint NOTHING (no SDK status events exist), so this is the only feedback. Top-centred + click-through so an interactive ceremony iframe underneath stays fully usable. */ .pv-connecting { position: absolute; top: 8vh; left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; z-index: 2; } /* --- drawer --- */ .pv-backdrop { position: fixed; inset: 0; z-index: 2147482500; background: rgba(0, 0, 0, 0.45); } .pv-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2147482600; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--pv-surface); border-left: 1px solid var(--pv-border); box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5); } .pv-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--pv-border); } .pv-drawer-head h2 { margin: 0; font-size: 15px; font-weight: 600; } .pv-drawer-close { border: none; background: transparent; color: var(--pv-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; } .pv-drawer-close:hover { color: var(--pv-text); } .pv-drawer-body { flex: 1; overflow-y: auto; padding: 18px; } /* --- content blocks --- */ .pv-lead { margin: 0 0 18px; font-size: 13px; line-height: 1.5; color: var(--pv-text); } .pv-muted { color: var(--pv-muted); font-size: 12px; line-height: 1.5; margin: 0 0 10px; } .pv-section { margin-bottom: 22px; } .pv-section h3 { margin: 0 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pv-muted); } .pv-kv-list { display: flex; flex-direction: column; gap: 6px; } .pv-kv { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--pv-surface-2); border: 1px solid var(--pv-border); border-radius: 8px; } .pv-kv-k { font-size: 11px; color: var(--pv-muted); } .pv-kv-v { font-size: 13px; } .pv-dep { margin-bottom: 12px; padding: 12px; background: var(--pv-surface-2); border: 1px solid var(--pv-border); border-radius: 10px; } .pv-dep-name { font-weight: 600; font-size: 13px; margin-bottom: 8px; } .pv-mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 11px; word-break: break-all; color: var(--pv-text); } /* --- cards (loading / error / prompt) --- */ .pv-card { max-width: 420px; padding: 28px; text-align: center; } .pv-center { display: flex; flex-direction: column; align-items: center; gap: 12px; } .pv-card-title { font-size: 16px; font-weight: 600; } .pv-card-sub { font-size: 13px; line-height: 1.5; color: var(--pv-muted); } .pv-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--pv-border); border-top-color: var(--pv-primary); animation: pv-spin 0.8s linear infinite; } @keyframes pv-spin { to { transform: rotate(360deg); } } .pv-btn { margin-top: 6px; padding: 9px 18px; border-radius: 8px; border: 1px solid var(--pv-border); background: var(--pv-surface-2); color: var(--pv-text); font-size: 13px; font-weight: 600; cursor: pointer; } .pv-btn:hover { border-color: var(--pv-primary); } .pv-btn-primary { background: var(--pv-primary); border-color: var(--pv-primary); color: #fff; } @media (prefers-color-scheme: light) { #privasys-shell { --pv-bg: #f5f7fb; --pv-surface: #ffffff; --pv-surface-2: #f0f3f8; --pv-border: #d9dfea; --pv-text: #131722; --pv-muted: #5a6474; } }