/* RizSwap shared design tokens (Nov 2026). Loaded by includes/header.php and user/user_header.php AFTER style.css.
   ONE place for the brand colours, font and focus ring. New pages / future clean-ups should use these variables
   (var(--rs-navy), var(--rs-gold) ...) instead of typing hex codes again. Nothing here changes an existing page layout. */
:root{
  --rs-navy:#0F1B3D; --rs-navy-2:#1a2a5c; --rs-gold:#F0A500; --rs-gold-2:#dd8f00;
  --rs-ink:#1a1f36; --rs-muted:#718096; --rs-line:#e2e8f0; --rs-bg:#f5f7fb; --rs-white:#fff;
  --rs-ok:#276749; --rs-ok-bg:#f0fff4; --rs-warn:#c05621; --rs-warn-bg:#fffaf0; --rs-err:#c53030; --rs-err-bg:#fff5f5; --rs-info:#2b6cb0;
  --rs-radius:12px; --rs-radius-sm:8px; --rs-shadow:0 2px 8px rgba(0,0,0,.07); --rs-shadow-lg:0 12px 40px rgba(0,0,0,.28);
  --rs-font:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
/* form controls and buttons always use the page font (browsers default them to Arial/system) */
button,input,select,textarea{font-family:inherit}
/* keyboard users get one clear, consistent focus ring; mouse users see no change */
:focus-visible{outline:3px solid var(--rs-gold);outline-offset:2px}
/* people who set "reduce motion" in their phone do not get spinning / sliding effects */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
/* reusable in-page dialog (replaces browser alert/confirm): <div class="rs-modal-ov"><div class="rs-modal">...</div></div> */
.rs-modal-ov{position:fixed;inset:0;background:rgba(15,27,61,.55);display:flex;align-items:center;justify-content:center;padding:18px;z-index:2147483000}
.rs-modal{background:var(--rs-white);border-radius:16px;max-width:380px;width:100%;padding:22px;box-shadow:var(--rs-shadow-lg);font-family:var(--rs-font);color:var(--rs-ink)}
.rs-modal h4{margin:0 0 8px;font-size:1.05rem;color:var(--rs-navy)}
.rs-modal p{margin:0 0 16px;font-size:.92rem;line-height:1.55;color:#4a5568}
.rs-modal .rs-actions{display:flex;gap:8px;justify-content:flex-end}
.rs-modal .rs-btn{border:0;border-radius:10px;padding:10px 18px;font-weight:700;cursor:pointer;background:var(--rs-navy);color:#fff}
.rs-modal .rs-btn.rs-ghost{background:#edf2f7;color:#2d3748}