/* ============================================================================
   OI PAY — premium white Material theme for STANDALONE pages
   (maintenance, 404 / error, public invoice) that don't use the main layouts.
   Pair with material-tokens.css. Scoped so it only restyles, never rewires.
   ========================================================================== */

:root{
  --oip-primary:#5a4bff; --oip-primary-hover:#4a3ce6; --on-primary:#fff;
  --oip-secondary:#00b8a6;
  --oip-ink:#171821; --oip-ink-soft:#494c5a; --oip-ink-mute:#7a7d8f;
  --oip-bg:#f7f8fc; --oip-surface:#fff; --oip-surface-2:#f8f9fd;
  --oip-line:#e7e9f2;
  --oip-r-sm:12px; --oip-r-md:16px; --oip-r-lg:24px; --oip-r-pill:999px;
  --oip-e1:0 1px 2px rgba(23,24,60,.04),0 2px 8px rgba(23,24,60,.04);
  --oip-e2:0 2px 6px rgba(23,24,60,.05),0 8px 24px rgba(23,24,60,.06);
  --oip-e3:0 8px 20px rgba(23,24,60,.07),0 16px 44px rgba(23,24,60,.08);
  --oip-ease:cubic-bezier(.2,0,0,1);
}

html,body{
  margin:0 !important;padding:0 !important;min-height:100%;
  background:
    radial-gradient(900px 480px at 50% -10%, color-mix(in srgb,var(--oip-primary) 12%,transparent), transparent 60%),
    var(--oip-bg) !important;
  color:var(--oip-ink) !important;
  font-family:"Inter","Hind Siliguri",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
  -webkit-font-smoothing:antialiased;
  display:flex !important;align-items:center;justify-content:center;
}

article,.error-container,.notfound,.maintenance-wrap{
  background:var(--oip-surface) !important;
  border:1px solid var(--oip-line) !important;
  border-radius:var(--oip-r-lg) !important;
  box-shadow:var(--oip-e3) !important;
  max-width:520px !important;width:calc(100% - 40px) !important;
  padding:44px 40px !important;margin:24px auto !important;
  text-align:center;
}

h1,h2{
  font-family:"Inter","Hind Siliguri",sans-serif !important;
  font-weight:800 !important;letter-spacing:-.02em !important;
  color:var(--oip-ink) !important;
  font-size:26px !important;margin:14px 0 8px !important;
}
p,div,li,span{color:var(--oip-ink-soft) !important}

svg{width:64px !important;height:auto !important;margin:0 auto 6px !important}
svg path,svg .cls-1{fill:var(--oip-primary) !important}
svg [stroke]{stroke:var(--oip-primary) !important}

a{
  color:var(--oip-primary) !important;font-weight:700 !important;text-decoration:none !important;
}
a.btn,.btn,button{
  display:inline-block;margin-top:20px;
  background:var(--oip-primary) !important;color:#fff !important;
  border:0 !important;border-radius:var(--oip-r-pill) !important;
  padding:12px 26px !important;font-weight:700 !important;cursor:pointer;
  box-shadow:var(--oip-e2) !important;
  transition:background var(--oip-ease) .18s,transform var(--oip-ease) .18s,box-shadow var(--oip-ease) .18s;
}
a.btn:hover,.btn:hover,button:hover{background:var(--oip-primary-hover) !important;transform:translateY(-1px);box-shadow:var(--oip-e3) !important}

@media (prefers-color-scheme:dark){
  :root{
    --oip-ink:#ececf4; --oip-ink-soft:#b8bacb; --oip-bg:#0d0d15;
    --oip-surface:#16161f; --oip-line:#2c2c3a;
    --oip-primary:#b7aeff; --oip-primary-hover:#c7c0ff;
  }
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important}}