:root { --pp-primary: #2A8C8A; --pp-primary-dark: #1F6E6C; --pp-text: #13171F; --pp-text-secondary: #6B7280; --pp-text-tertiary: #8E97A3; --pp-border: #E2E4E8; --pp-bg-subtle: #F7F7F8; --pp-error: #B3392C; --pp-warning: #9A7414; --pp-bg: #FFFFFF; } /* Warm/sepia palette for certificate & legal-document pages (pingproof-cert.php, proofping-defend.php) — same roles as above, different hues. Deliberately does NOT override --pp-primary: the brand/logo header uses the app teal on every page regardless of theme, so this class must only be applied to theme-specific content containers (e.g. .cert), never to or any ancestor of the .brand header. */ .pp-doc-theme { --pp-text-secondary: #6B6354; --pp-text-tertiary: #8A8273; --pp-border: #E2DACB; --pp-bg-subtle: #F3EEE3; --pp-bg: #FAF9F6; } .pp-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; } .pp-toast { font-family: system-ui, sans-serif; font-size: 14px; color: #FFFFFF; background: var(--pp-text); padding: 12px 16px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); max-width: 360px; opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; } .pp-toast.pp-toast-visible { opacity: 1; transform: translateY(0); } .pp-toast.pp-toast-error { background: var(--pp-error); } .pp-toast.pp-toast-success { background: var(--pp-primary-dark); } /* On/off switch — visually unambiguous (track color + knob position + an explicit ON/OFF text label alongside it), not just a bare checkbox. */ .pp-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .pp-switch input { opacity: 0; width: 0; height: 0; } .pp-switch-track { position: absolute; inset: 0; background: var(--pp-border); border-radius: 22px; cursor: pointer; transition: background-color 0.15s ease; } .pp-switch-track::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #FFFFFF; border-radius: 50%; transition: transform 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25); } .pp-switch input:checked + .pp-switch-track { background: var(--pp-primary); } .pp-switch input:checked + .pp-switch-track::before { transform: translateX(18px); } .pp-switch input:disabled + .pp-switch-track { opacity: 0.6; cursor: not-allowed; }