/* GSMUNLOCKERFIX V4 — Unified light/dark surfaces across public/client/admin.
 * Presentation only. No dependency on forms, authentication, wallets or API.
 * Deliberately scoped to documented layout areas and known card surfaces.
 */
html[data-area]:not(.ur-light){
  --gsm-v4-surface:#192b44;
  --gsm-v4-surface-raised:#213a5a;
  --gsm-v4-surface-soft:#14253e;
  --gsm-v4-border:#355472;
  --gsm-v4-title:#f2f7ff;
  --gsm-v4-copy:#e2edfc;
  --gsm-v4-muted:#adbfda;
  --gsm-v4-input:#263e60;
  --gsm-v4-link:#91c4ff;
  --gsm-v4-table:#203854;
  --gsm-v4-shadow:0 12px 32px rgba(1,9,24,.19);
}
html.ur-light[data-area]{
  --gsm-v4-surface:#fff;
  --gsm-v4-surface-raised:#f2f7ff;
  --gsm-v4-surface-soft:#f8faff;
  --gsm-v4-border:#cfdded;
  --gsm-v4-title:#142c4c;
  --gsm-v4-copy:#26405e;
  --gsm-v4-muted:#566f8b;
  --gsm-v4-input:#f8fbff;
  --gsm-v4-link:#185cb8;
  --gsm-v4-table:#eaf2fb;
  --gsm-v4-shadow:0 10px 28px rgba(37,72,118,.09);
}
/* Home tiles: old page CSS set background:#fff!important after layout styles. */
html[data-area="public"] .feature-grid > .card,
html[data-area="public"] .home-service-section,
html[data-area="public"] .home-currency-bar,
html[data-area="public"] .home-showcase > a {
  background:var(--gsm-v4-surface)!important;
  color:var(--gsm-v4-copy)!important;
  border:1px solid var(--gsm-v4-border)!important;
  border-radius:16px!important;
  box-shadow:var(--gsm-v4-shadow)!important;
}
html[data-area="public"] .home-showcase > a{overflow:hidden!important}
html[data-area="public"] .home-service-section{border-radius:18px!important}
html[data-area="public"] .feature-grid > .card h1,
html[data-area="public"] .feature-grid > .card h2,
html[data-area="public"] .feature-grid > .card h3,
html[data-area="public"] .home-service-section h2,
html[data-area="public"] .home-service-section h3,
html[data-area="public"] .home-currency-copy strong{
  color:var(--gsm-v4-title)!important;
}
html[data-area="public"] .feature-grid > .card p,
html[data-area="public"] .feature-grid > .card small,
html[data-area="public"] .home-service-section .home-service-copy p,
html[data-area="public"] .home-currency-copy small{
  color:var(--gsm-v4-muted)!important;
}
html[data-area="public"] .home-currency-copy strong{color:var(--gsm-v4-link)!important}
html[data-area="public"] .home-currency-option{
  color:var(--gsm-v4-copy)!important;background:var(--gsm-v4-surface-raised)!important;
  border-color:var(--gsm-v4-border)!important;
}
html[data-area="public"] .home-currency-option.is-active{
  color:#fff!important;background:#176eaf!important;border-color:#3793e0!important;
}
html.ur-light[data-area="public"] .home-currency-option.is-active{background:#1b64be!important}
html[data-area="public"] .home-service-item > img{
  background:var(--gsm-v4-surface-raised)!important;border-color:var(--gsm-v4-border)!important;
}
/* Homepage service badges remain recognizable, but not dazzling on dark cards. */
html[data-area="public"] .home-service-copy > div strong{
  background:var(--gsm-v4-surface-raised)!important;color:var(--gsm-v4-link)!important;
}
html[data-area="public"] .home-service-copy > div small{
  background:rgba(255,187,73,.14)!important;color:#ffd58d!important;
}
html.ur-light[data-area="public"] .home-service-copy > div small{
  background:#fff0d5!important;color:#9b5400!important;
}
/* Consistent reusable structural surfaces, independent of where a page is rendered. */
html[data-area] .stat-card:not(.accent),
html[data-area] .service-card,
html[data-area] .catalog-row,
html[data-area] .catalog-image,
html[data-area] .payment-methods > div,
html[data-area] .price-box,
html[data-area] .ref-stat,
html[data-area] .ref-credential,
html[data-area] .ref-top,
html[data-area] .ref-link-box input,
html[data-area] .wallet-history-card,
html[data-area] .wallet-history-tab,
html[data-area] .wallet-history-balance,
html[data-area] .br-switch,
html[data-area] .br-preview,
html[data-area] .br-credential,
html[data-area] .br-stat,
html[data-area] .br-view-count,
html[data-area] .br-view-rank,
html[data-area] .br-help,
html[data-area] .ilp-card,
html[data-area] .ilp-method,
html[data-area] .ilp-detail{
  background:var(--gsm-v4-surface)!important;
  color:var(--gsm-v4-copy)!important;
  border-color:var(--gsm-v4-border)!important;
  box-shadow:var(--gsm-v4-shadow)!important;
}
html[data-area] .br-preview{background:linear-gradient(145deg,var(--gsm-v4-surface),var(--gsm-v4-surface-raised))!important}
html[data-area] .br-preview-icon,
html[data-area] .br-icon-preview{
  background:var(--gsm-v4-surface-raised)!important;border-color:var(--gsm-v4-border)!important;
}
html[data-area] .br-help,
html[data-area] .ref-top{
  background:var(--gsm-v4-surface-raised)!important;color:var(--gsm-v4-copy)!important;
}
html[data-area] .br-view-first{
  background:rgba(255,194,84,.18)!important;color:#ffd88b!important;
}
html.ur-light[data-area] .br-view-first{background:#fff1cc!important;color:#835600!important}
/* Titles and explanatory labels cannot inherit the old light-card palette. */
html[data-area] .feature-grid .card h2,
html[data-area] .catalog-name,
html[data-area] .catalog-row h2,
html[data-area] .ref-stat strong,
html[data-area] .br-stat strong,
html[data-area] .br-preview h3,
html[data-area] .wallet-history-card strong,
html[data-area] .stat-card:not(.accent) strong{
  color:var(--gsm-v4-title)!important;
}
html[data-area] .catalog-group,
html[data-area] .ref-stat span,
html[data-area] .br-stat span,
html[data-area] .br-switch small,
html[data-area] .br-credential small,
html[data-area] .br-view-count,
html[data-area] .wallet-history-balance,
html[data-area] .wallet-history-card small,
html[data-area] .catalog-row small{
  color:var(--gsm-v4-muted)!important;
}
html[data-area] .catalog-row:hover,
html[data-area] .wallet-history-tab:hover{
  background:var(--gsm-v4-surface-raised)!important;border-color:var(--gsm-v4-link)!important;
}
html[data-area] .catalog-price{
  color:var(--gsm-v4-link)!important;background:var(--gsm-v4-surface-raised)!important;
}
html[data-area] .catalog-time{
  color:#ffce83!important;background:rgba(222,145,43,.18)!important;
}
html.ur-light[data-area] .catalog-time{color:#925400!important;background:#fff0d5!important}
html[data-area] .catalog-balance,
html[data-area] .catalog-tab:not(.active){
  color:var(--gsm-v4-copy)!important;background:var(--gsm-v4-surface-raised)!important;
  border-color:var(--gsm-v4-border)!important;
}
/* Tables and account statistics throughout client and administration. */
html[data-area] table thead th,
html[data-area] .wallet-history-table th{
  background:var(--gsm-v4-table)!important;
  color:var(--gsm-v4-muted)!important;
  border-color:var(--gsm-v4-border)!important;
}
html[data-area] table tbody td{
  border-color:var(--gsm-v4-border)!important;
  color:var(--gsm-v4-copy)!important;
}
html[data-area] .card:not(.stat-card) table tbody tr:hover td{
  background:var(--gsm-v4-surface-raised)!important;
}
html[data-area] .price-preview,
html[data-area] .payment-methods > div{
  background:var(--gsm-v4-surface-raised)!important;
  color:var(--gsm-v4-copy)!important;
  border-color:var(--gsm-v4-border)!important;
}
/* Bonus dialog from Dashboard: legacy inline CSS made it pure white in dark mode. */
html[data-area] .daily-bonus-modal{
  background:var(--gsm-v4-surface)!important;
  color:var(--gsm-v4-copy)!important;
  border:1px solid var(--gsm-v4-border)!important;
}
html[data-area] .daily-bonus-tool,
html[data-area] .daily-bonus-footer,
html[data-area] .daily-bonus-copyrow input{
  background:var(--gsm-v4-surface-raised)!important;
  color:var(--gsm-v4-copy)!important;
  border-color:var(--gsm-v4-border)!important;
}
html[data-area] .daily-bonus-message,
html[data-area] .daily-bonus-tool strong{
  color:var(--gsm-v4-copy)!important;
}
html[data-area] .daily-bonus-tool small,
html[data-area] .daily-bonus-field label,
html[data-area] .daily-bonus-views{
  color:var(--gsm-v4-muted)!important;
}
/* Admin cards, controls and sidebar tables; keep action/button colors intact. */
html[data-area="admin"] .card,
html[data-area="admin"] .stat-card:not(.accent){
  color:var(--gsm-v4-copy)!important;
  background:var(--gsm-v4-surface)!important;
  border-color:var(--gsm-v4-border)!important;
}
html[data-area="admin"] .card h1,
html[data-area="admin"] .card h2,
html[data-area="admin"] .card h3{
  color:var(--gsm-v4-title)!important;
}
html[data-area="admin"] .card small,
html[data-area="admin"] .page-head p{
  color:var(--gsm-v4-muted)!important;
}
html[data-area="admin"] .br-credential strong,
html[data-area="admin"] .br-view-count strong{color:var(--gsm-v4-title)!important}
html[data-area="admin"] :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]){
  color:var(--gsm-v4-copy)!important;
  border-color:var(--gsm-v4-border)!important;
  background:var(--gsm-v4-input)!important;
}
/* Contrast in light theme as well; avoid white-on-white and unreadable notes. */
html.ur-light[data-area] .feature-grid .card p,
html.ur-light[data-area] .home-service-section .home-service-copy p,
html.ur-light[data-area] .home-currency-copy small,
html.ur-light[data-area] .daily-bonus-message,
html.ur-light[data-area] .br-preview,
html.ur-light[data-area] .br-help{
  color:var(--gsm-v4-copy)!important;
}
/* Preserve the white image/QR reading surface, not a white *card*.
   Avoid blanket overrides of alerts, badge statuses, buttons, OTP, QR and payment instructions. */
@media(max-width:720px){
  html[data-area] .feature-grid{grid-template-columns:1fr!important}
  html[data-area] .feature-grid > .card{min-width:0!important;padding:18px!important}
  html[data-area] .br-grid,.br-form-grid{min-width:0}
  html[data-area] .catalog-row{min-width:0}
}
@media(prefers-reduced-motion:reduce){
  html[data-area] .catalog-row,html[data-area] .feature-grid .card{transition:none!important}
}

/* Referrals: the banner is separate from ordinary cards. */
html[data-area="client"] .ref-hero{
  background:linear-gradient(145deg,var(--gsm-v4-surface),var(--gsm-v4-surface-raised))!important;
  border-color:var(--gsm-v4-border)!important;
  color:var(--gsm-v4-copy)!important;
}
html[data-area="client"] .ref-hero h1{color:var(--gsm-v4-title)!important}
html[data-area="client"] .ref-hero p{color:var(--gsm-v4-muted)!important}
html[data-area="client"] .ref-rate{
  color:var(--gsm-v4-link)!important;
  background:var(--gsm-v4-surface-raised)!important;
  border-color:var(--gsm-v4-border)!important;
}
/* Wallet — only coloration; preserve forms, reference and 6-digit generator. */
html[data-area="client"][data-template] .wallet-box,
html[data-area="client"][data-template] .wallet-box-right,
html[data-area="client"][data-template] .wallet-method-option,
html[data-area="client"][data-template] .wallet-balance-highlight,
html[data-area="client"][data-template] .wallet-linked-order,
html[data-area="client"][data-template] .wallet-mga-pay,
html[data-area="client"][data-template] .wallet-reference-modal-dialog,
html[data-area="client"][data-template] .wallet-reference-method{
  background:var(--gsm-v4-surface)!important;
  border-color:var(--gsm-v4-border)!important;
  color:var(--gsm-v4-copy)!important;
}
html[data-area="client"][data-template] .wallet-box-right{border-left:1px solid var(--gsm-v4-border)!important}
html[data-area="client"][data-template] .wallet-method-option.is-selected{
  background:var(--gsm-v4-surface-raised)!important;
  border-color:#4a98f5!important;
}
html[data-area="client"][data-template] .wallet-box-title,
html[data-area="client"][data-template] .wallet-summary-table td:last-child,
html[data-area="client"][data-template] .wallet-summary-table .total-row td,
html[data-area="client"][data-template] .wallet-summary-value,
html[data-area="client"][data-template] .wallet-summary-row.wallet-summary-total .wallet-summary-label,
html[data-area="client"][data-template] .wallet-summary-row.wallet-summary-total .wallet-summary-value,
html[data-area="client"][data-template] .wallet-mga-pay strong,
html[data-area="client"][data-template] .wallet-balance-highlight strong,
html[data-area="client"][data-template] .wallet-method-option .method-copy strong{
  color:var(--gsm-v4-title)!important;
}
html[data-area="client"][data-template] .wallet-summary-table td:first-child,
html[data-area="client"][data-template] .wallet-summary-label,
html[data-area="client"][data-template] .wallet-method-option .method-copy small,
html[data-area="client"][data-template] .wallet-pay-security,
html[data-area="client"][data-template] .wallet-minimum-note,
html[data-area="client"][data-template] .wallet-balance-highlight span,
html[data-area="client"][data-template] .wallet-balance-highlight small{
  color:var(--gsm-v4-muted)!important;
}
html[data-area="client"][data-template] .wallet-summary-table td,
html[data-area="client"][data-template] .wallet-summary-row{
  border-color:var(--gsm-v4-border)!important;
}
html[data-area="client"][data-template] .wallet-reference-modal-dialog{
  box-shadow:0 30px 80px rgba(1,8,24,.38)!important;
}
/* Preserve separate white image background when a QR/payment icon needs contrast. */
html[data-area="client"] .wallet-method-option img,
html[data-area="client"] .wallet-reference-method img,
html[data-area="client"] .ilp-qr{
  background:#fff!important;
}
/* Automatic MVola UI: cards/data labels only; no modifications to timer/status/action. */
html[data-area="client"] .mva-card,
html[data-area="client"] .mva-detail{
  background:var(--gsm-v4-surface)!important;
  color:var(--gsm-v4-copy)!important;
  border-color:var(--gsm-v4-border)!important;
}
html[data-area="client"] .mva-detail{
  background:var(--gsm-v4-surface-raised)!important;
}
html[data-area="client"] .mva-card h2,
html[data-area="client"] .mva-detail strong{
  color:var(--gsm-v4-title)!important;
}
html[data-area="client"] .mva-detail span,
html[data-area="client"] .mva-steps,
html[data-area="client"] .mva-phone,
html[data-area="client"] .mva-code-label{
  color:var(--gsm-v4-muted)!important;
}
/* ILAINA-PAY card text and instructions, not payment outcome states. */
html[data-area="client"] .ilp-amount,
html[data-area="client"] .ilp-detail strong{
  color:var(--gsm-v4-title)!important;
}
html[data-area="client"] .ilp-summary span,
html[data-area="client"] .ilp-amount small,
html[data-area="client"] .ilp-detail span,
html[data-area="client"] .ilp-steps p,
html[data-area="client"] .ilp-qr small{
  color:var(--gsm-v4-muted)!important;
}
html[data-area="client"] .ilp-method small{color:var(--gsm-v4-link)!important}
/* Keep success / error / warning semantics intact even when they have light accents. */

/* The homepage retains gsm-rapide-visual.css loaded by index.php after the
   common head. index.php therefore re-loads this V4 stylesheet at the end of
   its inline styles, so its dark/light palette is the final declaration. */
html[data-area]:not(.ur-light){
  --bg:#0c182b!important;--surface:#192b44!important;
  --text:#e9f3ff!important;--muted:#adbfda!important;--line:#355472!important;
  color-scheme:dark!important;
}
html.ur-light[data-area]{
  --bg:#edf3fc!important;--surface:#fff!important;
  --text:#162d4b!important;--muted:#566f8b!important;--line:#cfdded!important;
  color-scheme:light!important;
}
html[data-area]:not(.ur-light) body,
html[data-area]:not(.ur-light) .page{
  background:#0c182b!important;color:#e9f3ff!important;
}
html.ur-light[data-area] body,
html.ur-light[data-area] .page{
  background:#edf3fc!important;color:#162d4b!important;
}
html[data-area="public"] .home-service-item{
  background:var(--gsm-v4-surface-raised)!important;
  border:1px solid var(--gsm-v4-border)!important;
  border-radius:12px!important;
  color:var(--gsm-v4-copy)!important;
}
html[data-area="public"] .home-service-item:hover{
  border-color:var(--gsm-v4-link)!important;
}
html[data-area="public"] .home-service-copy h3,
html[data-area="public"] .home-section-title h2{
  color:var(--gsm-v4-title)!important;
}
html[data-area="public"] .home-section-title > a{
  color:var(--gsm-v4-link)!important;
}
/* Card-only contrast in the compact home. No edits to action targets. */