/* ============================================================================
   custom.css - restyle pages directly ON THE SERVER, no build, no Node.
   Edit this file in the file manager, save, then hard-refresh the page (Ctrl+Shift+R).
   It loads AFTER the app's own styles, so these rules win.

   ONE PAGE ONLY: start every rule with  body[data-page="NAME"]  so it cannot touch other pages.
   NAME is one of:   landing   login   otp   scratch   referral

   PUTTING A DESIGNER'S style.css HERE (the global rules would restyle every page, so change them):
     body { ... }          ->  body[data-page="login"] { ... }
     html { ... } :root {} ->  body[data-page="login"] { ... }
     * { ... }             ->  body[data-page="login"] * { ... }
     .box { ... }          ->  body[data-page="login"] .box { ... }
     h1, h2 { ... }        ->  body[data-page="login"] h1, body[data-page="login"] h2 { ... }
     @media (...) { .x {} }->  keep @media, prefix the rules inside it the same way
     @keyframes ...        ->  copy as it is
   If a rule does not win against the app's own style, add  !important  to the value.

   IMAGES: upload them to the folder  custom/  (next to this file) and use
     background: url('custom/bg-login.jpg');       - the path is relative to this file.

   WHAT THIS CAN AND CANNOT DO: it restyles what is already on the page (colours, fonts, sizes, spacing,
   backgrounds, hiding things). New or moved elements (a different layout in LoginPage.jsx) need the
   source file changed and a build.

   LOGIN and OTP are POP-UPS on the landing page now (body[data-page="landing"]). Target them with
     .snw-auth-panel  (the white card)   .snw-auth-panel h2   .snw-auth-panel .form-control   .snw-auth-panel .snw-btn-primary
     [data-auth-step="login"] / [data-auth-step="otp"] tells which step is showing.

   Page and element names you can target:
     landing : .hero  .hero-title  .campaign-page  .step-card  .step-title  .step-text  .how-title  .play-btn
     login   : .snw-card  h2  .form-label  .input-group  #mobile  .snw-btn-primary  .api-message
     otp     : .snw-card  h2  .snw-otp-input  .snw-btn-primary  .api-message
   (NOTE: never write a star followed by a slash inside this comment - it would end the comment.)

   Examples - copy BELOW this comment block:

   body[data-page="login"] { background: #fdf1da !important; }
   body[data-page="login"] .snw-card { max-width: 520px !important; border-radius: 12px !important; }
   body[data-page="login"] .snw-btn-primary { background: #e60000 !important; color: #fff !important; }
   body[data-page="landing"] .play-btn { background: #0a58ca !important; }
   ============================================================================ */