/* ═══════════════════════════════════════════════════
   AnyQR — Main Stylesheet
   Font: Outfit (headings) + Inter (body)
   Both loaded from Google Fonts in HTML files
═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600&display=swap');


/* ─────────────────────────────────────────────────
   RESET
───────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing:                  border-box;
  margin:                      0;
  padding:                     0;
  -webkit-tap-highlight-color: transparent;
}


/* ─────────────────────────────────────────────────
   CSS VARIABLES
   Change colors here — updates everywhere instantly
───────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:  #F2F2F7;
  --s:   #FFFFFF;
  --s2:  #F7F7FB;
  --s3:  #EBEBF0;

  /* Borders */
  --b:   #E5E5EA;
  --b2:  #D1D1D6;

  /* Accent — primary brand color */
  --a:   #5B4FE9;
  --a2:  #7C6FF7;
  --al:  #EEF0FF;
  --ad:  #4338CA;

  /* Gold — used for offer badges, premium */
  --go:  #F59E0B;
  --go2: #FFF8E7;
  --god: #D97706;

  /* Green — used for success, WhatsApp, trust */
  --gn:  #00C896;
  --gn2: #E6FBF5;
  --gnd: #059669;

  /* WhatsApp */
  --wa:  #25D366;
  --wad: #128C7E;

  /* Red — errors, destructive actions */
  --re:  #FF3B30;
  --re2: #FFF0EF;

  /* Text */
  --t:   #1C1C1E;
  --t2:  #3A3A3C;
  --mu:  #6D6D72;
  --mu2: #AEAEB2;

  /* Shadows */
  --sh:  0 2px 8px  rgba(0, 0, 0, .07);
  --shm: 0 4px 20px rgba(0, 0, 0, .10);
  --shl: 0 12px 40px rgba(0, 0, 0, .14);

  /* Fonts */
  --fh: 'Outfit', system-ui, sans-serif;
  --fb: 'Inter',  system-ui, sans-serif;
}

html,
body {
  height:                  100%;
  background:              var(--bg);
  color:                   var(--t);
  font-family:             var(--fb);
  -webkit-font-smoothing:  antialiased;
  overflow:                hidden;
  font-size:               16px;
}


/* ─────────────────────────────────────────────────
   AUTH LOADING SCREEN
   Shown while Firebase checks login state
───────────────────────────────────────────────── */
#auth-loading {
  position:        fixed;
  inset:           0;
  background:      var(--s);
  z-index:         9999;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             16px;
}

.ld-logo {
  width:           64px;
  height:          64px;
  background:      linear-gradient(135deg, var(--a), var(--a2));
  border-radius:   18px;
  display:         grid;
  place-items:     center;
  font-family:     var(--fh);
  font-size:       30px;
  font-weight:     900;
  color:           #fff;
  box-shadow:      0 6px 20px rgba(91, 79, 233, .3);
}

.ld-spinner {
  width:        28px;
  height:       28px;
  border:       3px solid var(--b2);
  border-top-color: var(--a);
  border-radius: 50%;
  animation:    spin .7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ─────────────────────────────────────────────────
   MAIN APP WRAPPER
───────────────────────────────────────────────── */
#main-app {
  position:        fixed;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  background:      var(--bg);
}


/* ─────────────────────────────────────────────────
   SUB-SCREENS
   These slide in from the right when navigating
   to Account, Subscription, Contact, etc.
───────────────────────────────────────────────── */
.screen {
  position:    fixed;
  inset:       0;
  background:  var(--bg);
  z-index:     60;
  transform:   translateX(103%);
  transition:  transform .35s cubic-bezier(.32, .72, 0, 1);
  overflow-y:  auto;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.screen.vis {
  transform: translateX(0);
}


/* ─────────────────────────────────────────────────
   OVERLAY
   Dark background shown behind the drawer
───────────────────────────────────────────────── */
#overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(0, 0, 0, .48);
  z-index:        220;
  opacity:        0;
  pointer-events: none;
  transition:     opacity .25s;
  backdrop-filter:         blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

#overlay.on {
  opacity:        1;
  pointer-events: all;
}


/* ─────────────────────────────────────────────────
   SIDE DRAWER
   Slides in from left when hamburger is tapped
───────────────────────────────────────────────── */
#drawer {
  position:        fixed;
  top:             0;
  left:            0;
  bottom:          0;
  width:           290px;
  background:      var(--s);
  z-index:         260;
  transform:       translateX(-101%);
  transition:      transform .32s cubic-bezier(.32, .72, 0, 1);
  overflow-y:      auto;
  display:         flex;
  flex-direction:  column;
  box-shadow:      var(--shl);
}

#drawer.open {
  transform: translateX(0);
}

/* Drawer header — gradient background */
.d-head {
  padding:    max(52px, env(safe-area-inset-top)) 20px 20px;
  background: linear-gradient(135deg, var(--a), var(--a2));
  color:      #fff;
}

/* User avatar circle in drawer */
.d-av {
  width:         56px;
  height:        56px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, .2);
  border:        2px solid rgba(255, 255, 255, .35);
  display:       grid;
  place-items:   center;
  font-family:   var(--fh);
  font-size:     22px;
  font-weight:   800;
  margin-bottom: 12px;
}

.d-nm {
  font-family:   var(--fh);
  font-size:     18px;
  font-weight:   700;
  margin-bottom: 2px;
}

.d-em {
  font-size:     13px;
  opacity:       .75;
  margin-bottom: 10px;
  font-family:   var(--fb);
}

.d-badge {
  display:      inline-flex;
  align-items:  center;
  gap:          4px;
  padding:      4px 11px;
  border-radius: 30px;
  font-family:  var(--fh);
  font-size:    11px;
  font-weight:  800;
  background:   rgba(255, 255, 255, .18);
  border:       1px solid rgba(255, 255, 255, .28);
  color:        #fff;
}

/* Upgrade button inside drawer */
.d-upg {
  margin:      14px;
  background:  linear-gradient(135deg, var(--go), #F97316);
  border-radius: 14px;
  padding:     14px 16px;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  box-shadow:  0 4px 16px rgba(245, 158, 11, .3);
}

.d-upg h4 {
  font-family: var(--fh);
  font-size:   14px;
  font-weight: 800;
  color:       #fff;
}

.d-upg p {
  font-size:   11px;
  color:       rgba(255, 255, 255, .8);
  margin-top:  1px;
  font-family: var(--fb);
}

.d-upg-arrow {
  font-size: 22px;
}

/* Drawer nav items */
.d-nav {
  flex:    1;
  padding: 6px 0;
}

.d-it {
  display:     flex;
  align-items: center;
  gap:         13px;
  padding:     14px 20px;
  cursor:      pointer;
  font-size:   15px;
  font-weight: 500;
  color:       var(--t2);
  font-family: var(--fb);
  transition:  background .15s;
}

.d-it:hover,
.d-it:active {
  background: var(--s2);
}

.d-it .ico {
  font-size:   20px;
  width:       28px;
  text-align:  center;
}

.d-it.danger {
  color: var(--re);
}

.d-sep {
  height:     1px;
  background: var(--b);
  margin:     6px 20px;
}

.d-ft {
  padding:     16px 20px;
  font-size:   12px;
  color:       var(--mu2);
  font-family: var(--fb);
}


/* ─────────────────────────────────────────────────
   APP HEADER
   Top bar with hamburger, brand logo, scan + avatar
───────────────────────────────────────────────── */
.app-hdr {
  background:    var(--s);
  border-bottom: 1px solid var(--b);
  padding:       12px 14px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  flex-shrink:   0;
  box-shadow:    var(--sh);
  padding-top:   max(12px, env(safe-area-inset-top));
}

/* Sub-page header (back button + title) */
.sub-hdr {
  background:    var(--s);
  border-bottom: 1px solid var(--b);
  padding:       14px 16px;
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding-top:   max(14px, env(safe-area-inset-top));
  flex-shrink:   0;
}

.back-btn {
  width:         38px;
  height:        38px;
  border-radius: 50%;
  background:    var(--s2);
  border:        1px solid var(--b);
  display:       grid;
  place-items:   center;
  cursor:        pointer;
  font-size:     18px;
  flex-shrink:   0;
  color:         var(--t);
}

.sub-hdr-title {
  font-family: var(--fh);
  font-size:   18px;
  font-weight: 800;
}

/* Right side of header */
.hdr-right {
  display:     flex;
  align-items: center;
  gap:         8px;
}

/* Scan QR button in header */
.scan-hdr-btn {
  width:         38px;
  height:        38px;
  background:    var(--al);
  border:        1.5px solid rgba(91, 79, 233, .2);
  border-radius: 12px;
  display:       grid;
  place-items:   center;
  cursor:        pointer;
  font-size:     18px;
}

/* Avatar circle in header (shows initials) */
.hdr-av {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  background:    var(--al);
  border:        2px solid var(--a);
  display:       grid;
  place-items:   center;
  cursor:        pointer;
  font-family:   var(--fh);
  font-size:     13px;
  font-weight:   800;
  color:         var(--a);
}


/* ─────────────────────────────────────────────────
   BRAND COMPONENT
   Logo image + app name side by side
   Used in app header and login page
───────────────────────────────────────────────── */
.brand {
  display:     flex;
  align-items: center;
  gap:         9px;
  cursor:      pointer;
  user-select: none;
}

/* The logo image */
.brand .logo {
  width:         36px;
  height:        36px;
  border-radius: 10px;
  object-fit:    cover;
  box-shadow:    0 4px 12px rgba(91, 79, 233, .3);
  display:       block;
  flex-shrink:   0;
}

/* Fallback shown when logo.png is missing */
.brand .logo-fallback {
  width:         36px;
  height:        36px;
  background:    linear-gradient(135deg, var(--a), var(--a2));
  border-radius: 10px;
  display:       grid;
  place-items:   center;
  font-family:   var(--fh);
  font-size:     20px;
  font-weight:   900;
  color:         #fff;
  box-shadow:    0 4px 12px rgba(91, 79, 233, .3);
  flex-shrink:   0;
}

/* App name text next to logo */
.brand .brand-name {
  font-family:     var(--fh);
  font-size:       20px;
  font-weight:     800;
  letter-spacing:  -.5px;
  color:           var(--t);
}

/* The colored part of the name e.g. "QR" in AnyQR */
.brand .brand-name em {
  color:       var(--a);
  font-style:  normal;
}


/* ─────────────────────────────────────────────────
   GLOBAL OFFER BANNER
   Thin bar at top of app showing offer is active
───────────────────────────────────────────────── */
#offer-banner {
  background:  linear-gradient(135deg, var(--a), var(--a2));
  color:       #fff;
  padding:     10px 16px;
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
}

.ob-fire {
  font-size:   18px;
  flex-shrink: 0;
}

.ob-text {
  flex:        1;
  font-family: var(--fh);
  font-size:   12px;
  font-weight: 700;
}

.ob-text span {
  font-weight: 400;
  opacity:     .85;
  margin-left: 4px;
}

/* Details button inside offer banner */
.ob-btn {
  background:    rgba(255, 255, 255, .2);
  border:        1px solid rgba(255, 255, 255, .3);
  color:         #fff;
  font-family:   var(--fh);
  font-size:     11px;
  font-weight:   700;
  padding:       5px 12px;
  border-radius: 20px;
  cursor:        pointer;
  white-space:   nowrap;
}


/* ─────────────────────────────────────────────────
   INLINE OFFER STRIP
   Shown inside each tab when offer is active
   Replaces the usage bar for free users
───────────────────────────────────────────────── */
.offer-strip {
  background:    linear-gradient(
                   135deg,
                   rgba(91, 79, 233, .08),
                   rgba(124, 111, 247, .06)
                 );
  border:        1px solid rgba(91, 79, 233, .15);
  border-radius: 14px;
  padding:       12px 14px;
  margin-bottom: 14px;
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           10px;
}

.offer-strip span {
  font-family: var(--fh);
  font-size:   12px;
  font-weight: 700;
  color:       var(--a);
}

.offer-strip-btn {
  background:    var(--a);
  color:         #fff;
  border:        none;
  font-family:   var(--fh);
  font-size:     11px;
  font-weight:   700;
  padding:       5px 12px;
  border-radius: 20px;
  cursor:        pointer;
  white-space:   nowrap;
}


/* ─────────────────────────────────────────────────
   MAIN SCROLLABLE BODY
───────────────────────────────────────────────── */
.main-body {
  flex:        1;
  overflow-y:  auto;
  overflow-x:  hidden;
  padding-bottom: max(
    80px,
    calc(env(safe-area-inset-bottom) + 70px)
  );
}


/* ─────────────────────────────────────────────────
   TABS
   Each tab is a full-page section
   Only .on tab is visible
───────────────────────────────────────────────── */
.tab {
  display:   none;
  padding:   20px;
  animation: tabIn .2s ease both;
}

.tab.on {
  display: block;
}

@keyframes tabIn {
  from {
    opacity:   0;
    transform: translateY(10px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}


/* ─────────────────────────────────────────────────
   BOTTOM NAVIGATION BAR
───────────────────────────────────────────────── */
.bnav {
  background:              rgba(255, 255, 255, .96);
  backdrop-filter:         blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top:              1px solid var(--b);
  display:                 flex;
  padding:                 6px 0 max(6px, env(safe-area-inset-bottom));
  flex-shrink:             0;
  box-shadow:              0 -2px 14px rgba(0, 0, 0, .06);
}

/* Each nav button */
.nt {
  flex:        1;
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         2px;
  padding:     5px 2px;
  border:      none;
  background:  none;
  cursor:      pointer;
  color:       var(--mu2);
  font-family: var(--fb);
  transition:  color .15s;
  position:    relative;
}

.nt.on {
  color: var(--a);
}

.nt-ic {
  font-size: 22px;
}

.nt-lb {
  font-size:       10px;
  font-weight:     600;
  letter-spacing:  .3px;
  text-transform:  uppercase;
}

/* Active indicator dot below active tab */
.nt-dot {
  position:      absolute;
  bottom:        2px;
  left:          50%;
  transform:     translateX(-50%);
  width:         16px;
  height:        3px;
  border-radius: 2px;
  background:    var(--a);
  opacity:       0;
  transition:    opacity .15s;
}

.nt.on .nt-dot {
  opacity: 1;
}


/* ─────────────────────────────────────────────────
   SECTION HEADINGS (inside tabs)
───────────────────────────────────────────────── */
.sec-ti {
  font-family:     var(--fh);
  font-size:       23px;
  font-weight:     800;
  letter-spacing:  -.6px;
  margin-bottom:   4px;
}

.sec-su {
  font-size:   13px;
  color:       var(--mu);
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────
   USAGE BAR
   Shows "2/3 free Hidden QR used" progress bar
───────────────────────────────────────────────── */
.ubar {
  background:    var(--s);
  border-radius: 16px;
  border:        1px solid var(--b);
  padding:       13px 15px;
  margin-bottom: 14px;
  box-shadow:    var(--sh);
}

.ubar-top {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   7px;
}

.ubar-lb {
  font-family:     var(--fh);
  font-size:       11px;
  font-weight:     700;
  color:           var(--mu);
  text-transform:  uppercase;
  letter-spacing:  .5px;
}

.ubar-ct {
  font-family: var(--fh);
  font-size:   13px;
  font-weight: 800;
}

.ubar-track {
  height:        7px;
  background:    var(--b);
  border-radius: 4px;
  overflow:      hidden;
  margin-bottom: 5px;
}

.ubar-fill {
  height:        100%;
  border-radius: 4px;
  background:    var(--a);
  transition:    width .5s ease;
}

.ubar-fill.warn { background: var(--go); }
.ubar-fill.over { background: var(--re); }

.ubar-cta {
  font-family: var(--fh);
  font-size:   11px;
  font-weight: 700;
  color:       var(--a);
  cursor:      pointer;
}


/* ─────────────────────────────────────────────────
   AD STRIP
   Shown to free users where ads would appear
───────────────────────────────────────────────── */
.ad-strip {
  background:    var(--s);
  border:        1px dashed var(--b2);
  border-radius: 12px;
  padding:       11px 14px;
  margin-bottom: 14px;
  text-align:    center;
}

.ad-strip p {
  font-family:    var(--fh);
  font-size:      10px;
  font-weight:    700;
  color:          var(--mu2);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ad-strip small {
  font-size: 10px;
  color:     var(--mu2);
}


/* ─────────────────────────────────────────────────
   FORM ELEMENTS
───────────────────────────────────────────────── */
.fg {
  margin-bottom: 15px;
}

label {
  display:        block;
  font-family:    var(--fh);
  font-size:      11px;
  font-weight:    800;
  color:          var(--mu);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom:  7px;
}

input[type=text],
input[type=number],
input[type=email],
input[type=password],
input[type=tel],
input[type=url],
select,
textarea {
  width:       100%;
  background:  var(--s);
  border:      1.5px solid var(--b2);
  border-radius: 14px;
  color:       var(--t);
  font-family: var(--fb);
  font-size:   15px;
  padding:     13px 16px;
  outline:     none;
  transition:  border-color .2s, box-shadow .2s;
  appearance:         none;
  -webkit-appearance: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--a);
  box-shadow:   0 0 0 4px rgba(91, 79, 233, .1);
}

input::placeholder,
textarea::placeholder {
  color: var(--mu2);
}

textarea {
  resize:     none;
  height:     88px;
  font-size:  15px;
}

select {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23AEAEB2' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 14px center;
  padding-right:       42px;
}

/* Input with prefix (₹, +91) */
.iw {
  position: relative;
}

.iw-pre {
  position:  absolute;
  left:      14px;
  top:       50%;
  transform: translateY(-50%);
  color:     var(--mu);
  font-family: var(--fh);
  font-weight: 700;
  pointer-events: none;
}

.iw-pre.sm {
  font-size: 13px;
}

/* Input that has a prefix — adds left padding */
.ip    { padding-left: 30px !important; }
.ip-sm { padding-left: 50px !important; }


/* ─────────────────────────────────────────────────
   TRUST BADGES
   Small pill badges: "🔒 NPCI Secured" etc.
───────────────────────────────────────────────── */
.trust-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         7px;
  margin:      10px 0;
}

.tb {
  display:       flex;
  align-items:   center;
  gap:           4px;
  padding:       5px 11px;
  border-radius: 30px;
  font-family:   var(--fh);
  font-size:     11px;
  font-weight:   700;
}

.tb-gn {
  background: var(--gn2);
  color:      var(--gnd);
  border:     1px solid rgba(0, 200, 150, .2);
}

.tb-bl {
  background: #EEF4FF;
  color:      #1E40AF;
  border:     1px solid rgba(30, 64, 175, .15);
}

.tb-go {
  background: var(--go2);
  color:      var(--god);
  border:     1px solid rgba(245, 158, 11, .2);
}

/* App name chips: PhonePe, GPay etc */
.app-chips {
  display:       flex;
  gap:           7px;
  flex-wrap:     wrap;
  margin-bottom: 12px;
}

.ac {
  padding:       5px 11px;
  background:    var(--s2);
  border:        1px solid var(--b2);
  border-radius: 20px;
  font-size:     12px;
  font-weight:   600;
  color:         var(--t2);
}


/* ─────────────────────────────────────────────────
   CARDS
───────────────────────────────────────────────── */
.card {
  background:    var(--s);
  border-radius: 20px;
  border:        1px solid var(--b);
  padding:       18px;
  margin-bottom: 14px;
  box-shadow:    var(--sh);
}

.card-go {
  border-color: rgba(245, 158, 11, .2);
  background:   var(--go2);
}

.card-a {
  border-color: rgba(91, 79, 233, .15);
  background:   var(--al);
}

.card-gn {
  border-color: rgba(0, 200, 150, .2);
  background:   var(--gn2);
}

.card-h {
  font-family:   var(--fh);
  font-size:     13px;
  font-weight:   800;
  margin-bottom: 8px;
}


/* ─────────────────────────────────────────────────
   INFO BOX
   Blue left-border info callout
───────────────────────────────────────────────── */
.ibox {
  display:       flex;
  gap:           10px;
  background:    var(--s2);
  border-left:   3px solid var(--a);
  border-radius: 0 12px 12px 0;
  padding:       12px 14px;
  margin-bottom: 15px;
}

.ibox p {
  font-size:   13px;
  line-height: 1.65;
  color:       var(--t2);
}


/* ─────────────────────────────────────────────────
   DIVIDER
───────────────────────────────────────────────── */
.hr {
  height:     1px;
  background: var(--b);
  margin:     18px 0;
}


/* ─────────────────────────────────────────────────
   PILLS (type selector)
───────────────────────────────────────────────── */
.pills {
  display:      flex;
  gap:          7px;
  margin-bottom: 18px;
  overflow-x:   auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.pills::-webkit-scrollbar {
  display: none;
}

.pill {
  padding:       8px 16px;
  border-radius: 30px;
  border:        1.5px solid var(--b2);
  font-family:   var(--fh);
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  white-space:   nowrap;
  background:    var(--s);
  color:         var(--mu);
  transition:    all .15s;
  flex-shrink:   0;
}

.pill.on {
  background: var(--a);
  color:      #fff;
  border-color: var(--a);
  box-shadow: 0 4px 12px rgba(91, 79, 233, .22);
}

.pill:active {
  transform: scale(.94);
}


/* ─────────────────────────────────────────────────
   UPLOAD ZONE (for Hidden QR image upload)
───────────────────────────────────────────────── */
.upzone {
  border:        2px dashed var(--b2);
  border-radius: 16px;
  padding:       26px 20px;
  text-align:    center;
  cursor:        pointer;
  background:    var(--s);
  position:      relative;
  transition:    all .18s;
  margin-bottom: 14px;
}

.upzone.drag {
  border-color: var(--a);
  background:   var(--al);
}

.upzone input[type=file] {
  position: absolute;
  inset:    0;
  opacity:  0;
  cursor:   pointer;
  width:    100%;
  height:   100%;
}

.up-ic {
  font-size:     30px;
  margin-bottom: 7px;
}

.up-tx {
  font-family:   var(--fh);
  font-size:     14px;
  font-weight:   700;
  margin-bottom: 3px;
}

.up-sx {
  font-size: 12px;
  color:     var(--mu);
}

#up-prev {
  width:         100%;
  max-height:    130px;
  object-fit:    contain;
  border-radius: 12px;
  margin-bottom: 10px;
  display:       none;
}


/* ─────────────────────────────────────────────────
   HISTORY LIST
───────────────────────────────────────────────── */
.h-empty {
  text-align: center;
  padding:    56px 20px;
  color:      var(--mu);
}

.h-list {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.h-item {
  background:    var(--s);
  border:        1px solid var(--b);
  border-radius: 16px;
  padding:       13px;
  display:       flex;
  align-items:   center;
  gap:           12px;
  cursor:        pointer;
  box-shadow:    var(--sh);
  transition:    all .15s;
}

.h-item:active {
  transform: scale(.98);
}

.h-th {
  width:         50px;
  height:        50px;
  background:    var(--s2);
  border-radius: 10px;
  display:       grid;
  place-items:   center;
  overflow:      hidden;
  flex-shrink:   0;
  border:        1px solid var(--b);
}

.h-th canvas {
  width:  46px;
  height: 46px;
}

.h-info {
  flex:      1;
  min-width: 0;
}

.h-type {
  font-family:    var(--fh);
  font-size:      10px;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom:  3px;
}

.h-cont {
  font-family:   var(--fh);
  font-size:     14px;
  font-weight:   700;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.h-time {
  font-size:  11px;
  color:      var(--mu2);
  margin-top: 2px;
}

.h-dl {
  background:    var(--s2);
  border:        1px solid var(--b);
  color:         var(--mu);
  border-radius: 9px;
  padding:       7px 11px;
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  font-family:   var(--fh);
  white-space:   nowrap;
}
/* ─────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────── */
.btn {
  width:           100%;
  padding:         15px;
  border:          none;
  border-radius:   16px;
  font-family:     var(--fh);
  font-size:       16px;
  font-weight:     800;
  cursor:          pointer;
  transition:      all .18s;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
}

.btn:active {
  transform: scale(.97);
}

.btn:disabled {
  opacity:        .5;
  pointer-events: none;
}

/* Accent — main purple button */
.btn-a {
  background: linear-gradient(135deg, var(--a), var(--a2));
  color:      #fff;
  box-shadow: 0 6px 20px rgba(91, 79, 233, .25);
}

.btn-a:hover {
  box-shadow: 0 8px 28px rgba(91, 79, 233, .35);
}

/* Gold — UPI / payment button */
.btn-go {
  background: linear-gradient(135deg, var(--go), #F97316);
  color:      #fff;
  box-shadow: 0 6px 20px rgba(245, 158, 11, .25);
}

/* WhatsApp green button */
.btn-wa {
  background: linear-gradient(135deg, var(--wa), var(--wad));
  color:      #fff;
  box-shadow: 0 5px 18px rgba(37, 211, 102, .22);
}

/* Ghost — white with border */
.btn-gh {
  background: var(--s);
  color:      var(--t);
  border:     1.5px solid var(--b2);
}

/* Red — danger / destructive */
.btn-red {
  background: var(--re);
  color:      #fff;
}

/* Small variant */
.btn-sm {
  padding:       10px 18px;
  font-size:     14px;
  width:         auto;
  border-radius: 12px;
}

/* Row of two buttons side by side */
.btn-row {
  display: flex;
  gap:     10px;
}

.btn-row .btn {
  flex: 1;
}


/* ─────────────────────────────────────────────────
   MODALS (bottom sheets)
   All modals slide up from the bottom
───────────────────────────────────────────────── */
.modal {
  position:       fixed;
  inset:          0;
  z-index:        400;
  display:        flex;
  align-items:    flex-end;
  pointer-events: none;
}

.modal.open {
  pointer-events: all;
}

/* Dark backdrop behind modal */
.m-bk {
  position:                absolute;
  inset:                   0;
  background:              rgba(0, 0, 0, .52);
  opacity:                 0;
  transition:              opacity .25s;
  backdrop-filter:         blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal.open .m-bk {
  opacity: 1;
}

/* The white sheet that slides up */
.m-sh {
  position:      relative;
  background:    var(--s);
  border-radius: 28px 28px 0 0;
  border-top:    1px solid var(--b);
  width:         100%;
  max-height:    94vh;
  overflow-y:    auto;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  transform:     translateY(105%);
  transition:    transform .35s cubic-bezier(.32, .72, 0, 1);
}

.modal.open .m-sh {
  transform: translateY(0);
}

/* Handle bar at top of modal */
.m-handle {
  width:         44px;
  height:        4px;
  background:    var(--b2);
  border-radius: 2px;
  margin:        13px auto 17px;
}

/* Modal header section */
.m-hd {
  padding:       0 22px 15px;
  border-bottom: 1px solid var(--b);
}

.m-ti {
  font-family:   var(--fh);
  font-size:     19px;
  font-weight:   800;
  margin-bottom: 3px;
}

.m-su {
  font-size: 13px;
  color:     var(--mu);
}

/* Modal body padding */
.m-body {
  padding: 18px 22px;
}


/* ─────────────────────────────────────────────────
   QR RESULT MODAL
   Shown after generating any QR code
───────────────────────────────────────────────── */

/* Wrapper around the canvas QR card */
.qr-card-wrap {
  background:    var(--s2);
  border-radius: 20px;
  padding:       14px;
  margin-bottom: 14px;
  display:       flex;
  justify-content: center;
  border:        1px solid var(--b);
}

/* The canvas element that draws the card */
#card-cv {
  width:         100%;
  max-width:     420px;
  border-radius: 16px;
  display:       block;
  box-shadow:    var(--shm);
}

/* 2x2 grid of action buttons below the QR */
.qa-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
}

/* Each action button */
.qa {
  background:    var(--s2);
  border:        1.5px solid var(--b2);
  border-radius: 16px;
  padding:       13px;
  text-align:    center;
  cursor:        pointer;
  transition:    all .18s;
  color:         var(--t);
  font-family:   var(--fh);
  font-size:     13px;
  font-weight:   700;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           5px;
}

.qa:active {
  transform: scale(.96);
}

.qa-i {
  font-size: 22px;
}

/* Download button — accent purple */
.qa.pri {
  background:  linear-gradient(135deg, var(--a), var(--a2));
  color:       #fff;
  border-color: transparent;
}

/* Share button — WhatsApp green */
.qa.wab {
  background:  linear-gradient(135deg, var(--wa), var(--wad));
  color:       #fff;
  border-color: transparent;
}


/* ─────────────────────────────────────────────────
   QR SCANNER MODAL
───────────────────────────────────────────────── */

/* Camera viewfinder box */
.scan-wrap {
  position:      relative;
  border-radius: 16px;
  overflow:      hidden;
  background:    #000;
  margin-bottom: 14px;
  aspect-ratio:  1;
}

#scan-video {
  width:        100%;
  height:       100%;
  object-fit:   cover;
  display:      block;
}

/* Overlay with scanning frame */
.scan-overlay {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  pointer-events:  none;
}

/* The square frame in center of camera */
.scan-frame {
  width:        65%;
  aspect-ratio: 1;
  border-radius: 16px;
  box-shadow:   0 0 0 9999px rgba(0, 0, 0, .55);
  border:       3px solid rgba(255, 255, 255, .9);
  position:     relative;
}

/* Corner accents on scan frame */
.scan-corner {
  position: absolute;
  width:    24px;
  height:   24px;
}

.sc-tl {
  top:           -3px;
  left:          -3px;
  border-top:    4px solid var(--a);
  border-left:   4px solid var(--a);
  border-radius: 6px 0 0 0;
}

.sc-tr {
  top:           -3px;
  right:         -3px;
  border-top:    4px solid var(--a);
  border-right:  4px solid var(--a);
  border-radius: 0 6px 0 0;
}

.sc-bl {
  bottom:        -3px;
  left:          -3px;
  border-bottom: 4px solid var(--a);
  border-left:   4px solid var(--a);
  border-radius: 0 0 0 6px;
}

.sc-br {
  bottom:        -3px;
  right:         -3px;
  border-bottom: 4px solid var(--a);
  border-right:  4px solid var(--a);
  border-radius: 0 0 6px 0;
}

/* Animated scan line */
.scan-line {
  position:   absolute;
  left:       0;
  right:      0;
  height:     2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--a),
    transparent
  );
  animation: scanLine 2s linear infinite;
}

@keyframes scanLine {
  0%   { top: 8%; }
  50%  { top: 88%; }
  100% { top: 8%; }
}

/* Result box shown when QR is detected */
.scan-result-box {
  background:    var(--al);
  border:        1.5px solid rgba(91, 79, 233, .2);
  border-radius: 14px;
  padding:       14px;
  margin-bottom: 14px;
  display:       none;
}

.scan-result-box.show {
  display: block;
}

#scan-result-text {
  font-size:     14px;
  word-break:    break-all;
  color:         var(--t);
  margin-bottom: 8px;
}

#scan-result-link {
  font-family: var(--fh);
  font-size:   13px;
  font-weight: 700;
  color:       var(--a);
  cursor:      pointer;
  display:     none;
}


/* ─────────────────────────────────────────────────
   UPGRADE MODAL
   Shown when user hits a Pro-only feature
───────────────────────────────────────────────── */
.upg-inner {
  padding:    0 22px 22px;
  text-align: center;
}

.upg-em {
  font-size:     50px;
  margin-bottom: 8px;
}

.upg-ti {
  font-family:   var(--fh);
  font-size:     22px;
  font-weight:   900;
  margin-bottom: 6px;
}

.upg-su {
  font-size:     14px;
  color:         var(--mu);
  margin-bottom: 18px;
  line-height:   1.5;
}


/* ─────────────────────────────────────────────────
   OFFER ACTIVE (inside upgrade modal)
   Shown when launch offer is ON
───────────────────────────────────────────────── */
.offer-active-wrap {
  padding:    8px 0;
  text-align: center;
}

.oaw-icon {
  font-size:     48px;
  margin-bottom: 8px;
}

.oaw-title {
  font-family:   var(--fh);
  font-size:     22px;
  font-weight:   900;
  color:         var(--a);
  margin-bottom: 8px;
}

.oaw-sub {
  font-size:     14px;
  color:         var(--mu);
  line-height:   1.6;
  margin-bottom: 16px;
}

/* Countdown box inside offer modal */
.offer-countdown-box {
  background:    linear-gradient(135deg, var(--a), var(--a2));
  border-radius: 14px;
  padding:       16px;
  margin-bottom: 18px;
  color:         #fff;
}

.ocb-label {
  font-family:   var(--fh);
  font-size:     12px;
  font-weight:   700;
  opacity:       .8;
  margin-bottom: 4px;
}

.ocb-time {
  font-family:     var(--fh);
  font-size:       24px;
  font-weight:     900;
  letter-spacing:  -1px;
}

/* Feature list inside offer modal */
.oaw-features {
  background:    var(--s2);
  border-radius: 14px;
  padding:       14px;
  text-align:    left;
  margin-bottom: 14px;
}

.oaw-feat {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     5px 0;
  font-size:   14px;
  color:       var(--t2);
  font-family: var(--fb);
}

.oaw-check {
  font-size: 16px;
}

.oaw-note {
  font-size:   12px;
  color:       var(--mu);
  line-height: 1.6;
  margin-top:  4px;
}


/* ─────────────────────────────────────────────────
   PAYMENT SECTION (inside upgrade modal)
   Shown when offer is OFF
───────────────────────────────────────────────── */
.payment-wrap {
  padding:    8px 0;
  text-align: left;
}

.pay-plan-label {
  font-family:    var(--fh);
  font-size:      12px;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color:          var(--mu);
  margin-bottom:  8px;
}

/* Price row with strikethrough original price */
.pay-price-row {
  display:     flex;
  align-items: baseline;
  gap:         8px;
  margin-bottom: 6px;
}

.pay-orig {
  font-family:     var(--fh);
  font-size:       18px;
  font-weight:     700;
  color:           var(--mu2);
  text-decoration: line-through;
}

.pay-curr {
  font-family:    var(--fh);
  font-size:      36px;
  font-weight:    900;
  color:          var(--t);
  letter-spacing: -1px;
}

.pay-mo {
  font-size: 14px;
  color:     var(--mu);
}

/* Launch tag below price */
.pay-launch-tag {
  display:       inline-block;
  background:    var(--go2);
  color:         var(--god);
  font-family:   var(--fh);
  font-size:     12px;
  font-weight:   700;
  padding:       4px 12px;
  border-radius: 20px;
  margin-bottom: 18px;
  border:        1px solid rgba(245, 158, 11, .2);
}

/* UPI QR section */
.pay-qr-section {
  background:    var(--s2);
  border-radius: 16px;
  padding:       16px;
  margin-bottom: 14px;
  text-align:    center;
  border:        1px solid var(--b);
}

.pay-qr-label {
  font-family:    var(--fh);
  font-size:      12px;
  font-weight:    700;
  color:          var(--mu);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom:  12px;
}

/* Box that holds the generated QR */
.pay-qr-box {
  display:       inline-block;
  background:    #fff;
  border-radius: 12px;
  padding:       8px;
  margin-bottom: 12px;
}

/* Row with UPI ID and Copy button */
.pay-upi-row {
  display:       flex;
  align-items:   center;
  gap:           8px;
  background:    var(--s);
  border-radius: 10px;
  padding:       10px 12px;
  border:        1px solid var(--b);
}

.pay-upi-id {
  flex:        1;
  font-family: var(--fh);
  font-size:   14px;
  font-weight: 700;
  word-break:  break-all;
}

/* Copy button used for UPI ID and UID */
.pay-copy-btn {
  background:    var(--a);
  color:         #fff;
  border:        none;
  border-radius: 8px;
  padding:       6px 12px;
  font-family:   var(--fh);
  font-size:     12px;
  font-weight:   700;
  cursor:        pointer;
  flex-shrink:   0;
  transition:    all .15s;
}

.pay-copy-btn:active {
  transform: scale(.95);
}

/* User ID section */
.pay-uid-section {
  background:    var(--s2);
  border:        1px solid var(--b);
  border-radius: 14px;
  padding:       14px;
  margin-bottom: 14px;
}

.pay-uid-label {
  font-family:    var(--fh);
  font-size:      11px;
  font-weight:    700;
  color:          var(--mu);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom:  8px;
  display:        block;
}

.pay-uid-label small {
  font-size:      10px;
  font-weight:    400;
  text-transform: none;
  letter-spacing: 0;
}

.pay-uid-val {
  font-size:     11px;
  word-break:    break-all;
  color:         var(--t2);
  margin-bottom: 10px;
  font-family:   var(--fb);
  line-height:   1.5;
}

/* Instructions box */
.pay-instructions {
  font-size:     13px;
  color:         var(--t2);
  line-height:   1.65;
  background:    var(--go2);
  border-radius: 12px;
  padding:       12px 14px;
  margin-bottom: 2px;
  border:        1px solid rgba(245, 158, 11, .2);
}

/* Small note at bottom of payment section */
.pay-note {
  font-size:  11px;
  color:      var(--mu2);
  text-align: center;
  margin-top: 12px;
  word-break: break-all;
}


/* ─────────────────────────────────────────────────
   SUBSCRIPTION PLANS PAGE
───────────────────────────────────────────────── */
.sub-hero {
  padding:    24px 20px 20px;
  background: linear-gradient(135deg, var(--a), var(--a2));
  color:      #fff;
  text-align: center;
}

.sub-hero h2 {
  font-family:   var(--fh);
  font-size:     24px;
  font-weight:   900;
  margin-bottom: 5px;
}

.sub-hero p {
  font-size: 13px;
  opacity:   .8;
}

/* Plan cards wrapper */
.plans-wrap {
  padding: 18px;
}

/* Individual plan card */
.pc {
  background:    var(--s);
  border:        2px solid var(--b);
  border-radius: 22px;
  margin-bottom: 13px;
  overflow:      hidden;
  box-shadow:    var(--sh);
  position:      relative;
}

/* Highlighted popular plan card */
.pc.pop {
  border-color: var(--a);
  box-shadow:   0 8px 30px rgba(91, 79, 233, .2);
}

/* "Most Popular" chip above a plan card */
.pop-chip {
  position:      absolute;
  top:           -1px;
  right:         18px;
  background:    var(--a);
  color:         #fff;
  font-family:   var(--fh);
  font-size:     11px;
  font-weight:   800;
  padding:       5px 14px;
  border-radius: 0 0 12px 12px;
}

/* Top of plan card with name, price, icon */
.pc-head {
  padding:         18px 18px 14px;
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
}

.pc-nm {
  font-family:    var(--fh);
  font-size:      12px;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color:          var(--mu);
  margin-bottom:  4px;
}

.pc-pr {
  font-family:    var(--fh);
  font-size:      32px;
  font-weight:    900;
  letter-spacing: -1px;
  color:          var(--t);
}

.pc-pr sup {
  font-size:      16px;
  font-weight:    700;
  vertical-align: super;
  letter-spacing: 0;
}

.pc-ps {
  font-size: 12px;
  color:     var(--mu);
}

.pc-ic {
  font-size: 30px;
}

/* Features list inside plan card */
.pc-body {
  padding: 0 18px 18px;
}

.pf {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     5px 0;
  font-size:   13px;
  color:       var(--t2);
}

.pf .ok { color: var(--gnd); font-size: 15px; }
.pf .no { color: var(--mu2); font-size: 15px; }

/* CTA button on each plan card */
.pc-cta {
  margin:        14px 18px 18px;
  width:         calc(100% - 36px);
  padding:       14px;
  border:        none;
  border-radius: 14px;
  font-family:   var(--fh);
  font-size:     15px;
  font-weight:   800;
  cursor:        pointer;
  transition:    all .18s;
  display:       block;
}

.pc-cta:active {
  transform: scale(.97);
}

.cta-free {
  background: var(--s2);
  color:      var(--mu);
  border:     1.5px solid var(--b2);
}

.cta-ba {
  background: var(--al);
  color:      var(--a);
}

.cta-mo {
  background: linear-gradient(135deg, var(--a), var(--a2));
  color:      #fff;
  box-shadow: 0 5px 18px rgba(91, 79, 233, .28);
}

.cta-pr {
  background: linear-gradient(135deg, var(--go), #F97316);
  color:      #fff;
  box-shadow: 0 5px 18px rgba(245, 158, 11, .28);
}


/* ─────────────────────────────────────────────────
   FEATURE COMPARISON TABLE
───────────────────────────────────────────────── */
.ft {
  background:    var(--s);
  border-radius: 18px;
  border:        1px solid var(--b);
  overflow:      hidden;
  margin-bottom: 18px;
  box-shadow:    var(--sh);
}

.ft-h {
  display:               grid;
  grid-template-columns: 1fr repeat(3, 60px);
  gap:                   2px;
  padding:               11px 13px;
  background:            var(--s2);
  border-bottom:         1px solid var(--b);
}

.ft-hc {
  font-family:    var(--fh);
  font-size:      10px;
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-align:     center;
  color:          var(--mu);
}

.ft-hc.hi {
  color: var(--a);
}

.ft-r {
  display:               grid;
  grid-template-columns: 1fr repeat(3, 60px);
  gap:                   2px;
  padding:               9px 13px;
  border-bottom:         1px solid var(--b);
  align-items:           center;
}

.ft-r:last-child {
  border-bottom: none;
}

.ft-r:nth-child(even) {
  background: var(--s2);
}

.ft-fn {
  font-size: 12px;
  color:     var(--t2);
}

.ft-v {
  text-align:  center;
  font-family: var(--fh);
  font-size:   12px;
  font-weight: 700;
}

.ft-y  { color: var(--gnd); }
.ft-n  { color: var(--mu2); }
.ft-ac { color: var(--a);   }


/* ─────────────────────────────────────────────────
   FAQ ACCORDION
───────────────────────────────────────────────── */
.faq-it {
  background:    var(--s);
  border:        1px solid var(--b);
  border-radius: 14px;
  margin-bottom: 9px;
  overflow:      hidden;
  box-shadow:    var(--sh);
}

.faq-q {
  padding:         15px;
  font-family:     var(--fh);
  font-size:       14px;
  font-weight:     700;
  cursor:          pointer;
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  color:           var(--t);
}

.faq-q .arr {
  color:      var(--mu2);
  font-size:  18px;
  transition: transform .22s;
  font-style: normal;
}

.faq-it.open .faq-q .arr {
  transform: rotate(90deg);
}

.faq-bd {
  max-height: 0;
  overflow:   hidden;
  transition: max-height .3s ease;
}

.faq-it.open .faq-bd {
  max-height: 180px;
}

.faq-tx {
  padding:     0 15px 15px;
  font-size:   13px;
  color:       var(--mu);
  line-height: 1.7;
}


/* ─────────────────────────────────────────────────
   ACCOUNT SCREEN
───────────────────────────────────────────────── */
.acct-hero {
  background: linear-gradient(135deg, var(--a), var(--a2));
  padding:    26px 20px;
  display:    flex;
  align-items: center;
  gap:        16px;
  color:      #fff;
}

.acct-av {
  width:         64px;
  height:        64px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, .2);
  border:        2px solid rgba(255, 255, 255, .38);
  display:       grid;
  place-items:   center;
  font-family:   var(--fh);
  font-size:     26px;
  font-weight:   900;
  flex-shrink:   0;
}

.acct-nm {
  font-family:   var(--fh);
  font-size:     20px;
  font-weight:   800;
  margin-bottom: 2px;
}

.acct-em {
  font-size:     13px;
  opacity:       .8;
  margin-bottom: 8px;
}

.acct-pb {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       4px 11px;
  border-radius: 20px;
  font-family:   var(--fh);
  font-size:     11px;
  font-weight:   800;
  background:    rgba(255, 255, 255, .2);
  border:        1px solid rgba(255, 255, 255, .3);
  color:         #fff;
}

/* Stats grid (QR count, history count etc) */
.stat-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  padding:               14px 20px;
}

.stat-c {
  background:    var(--s);
  border:        1px solid var(--b);
  border-radius: 14px;
  padding:       14px;
  box-shadow:    var(--sh);
}

.stat-l {
  font-family:    var(--fh);
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color:          var(--mu);
  margin-bottom:  4px;
}

.stat-v {
  font-family:    var(--fh);
  font-size:      26px;
  font-weight:    900;
  letter-spacing: -.5px;
}

/* Row items in account page */
.acct-rows {
  padding: 0 20px;
}

.a-row {
  display:       flex;
  align-items:   center;
  gap:           13px;
  padding:       14px 0;
  border-bottom: 1px solid var(--b);
  cursor:        pointer;
}

.a-row:last-child {
  border-bottom: none;
}

.a-ico {
  width:         40px;
  height:        40px;
  border-radius: 12px;
  display:       grid;
  place-items:   center;
  font-size:     18px;
  flex-shrink:   0;
}

.a-info h4 {
  font-family: var(--fh);
  font-size:   15px;
  font-weight: 700;
}

.a-info p {
  font-size:  12px;
  color:      var(--mu);
  margin-top: 2px;
}

.a-arr {
  color:       var(--mu2);
  font-size:   18px;
  margin-left: auto;
}

/* Sign out button */
.logout-btn {
  margin:          14px 20px;
  width:           calc(100% - 40px);
  padding:         14px;
  border:          1.5px solid rgba(255, 59, 48, .25);
  border-radius:   14px;
  background:      var(--re2);
  color:           var(--re);
  font-family:     var(--fh);
  font-size:       15px;
  font-weight:     800;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
}


/* ─────────────────────────────────────────────────
   CONTACT / ABOUT / PRIVACY SCREENS
───────────────────────────────────────────────── */
.c-hero {
  background: linear-gradient(135deg, var(--a), var(--a2));
  padding:    38px 20px 26px;
  text-align: center;
  color:      #fff;
}

.c-hero h2 {
  font-family:   var(--fh);
  font-size:     24px;
  font-weight:   900;
  margin-bottom: 5px;
}

.c-hero p {
  font-size: 14px;
  opacity:   .8;
}

.c-cards {
  padding: 18px;
  display: grid;
  gap:     11px;
}

.c-card {
  background:    var(--s);
  border:        1px solid var(--b);
  border-radius: 18px;
  padding:       16px;
  display:       flex;
  align-items:   center;
  gap:           13px;
  box-shadow:    var(--sh);
  cursor:        pointer;
  text-decoration: none;
  color:         inherit;
  transition:    all .15s;
}

.c-card:active {
  transform: scale(.98);
}

.c-card-ic {
  width:         48px;
  height:        48px;
  border-radius: 14px;
  display:       grid;
  place-items:   center;
  font-size:     22px;
  flex-shrink:   0;
}

.c-card h3 {
  font-family:   var(--fh);
  font-size:     15px;
  font-weight:   800;
  margin-bottom: 2px;
}

.c-card p {
  font-size: 13px;
  color:     var(--mu);
}

.cf {
  padding: 0 20px 20px;
}

.cf h3 {
  font-family:   var(--fh);
  font-size:     16px;
  font-weight:   800;
  margin-bottom: 14px;
}

/* About page */
.a-hero {
  background: linear-gradient(135deg, var(--a), var(--a2));
  padding:    46px 20px 34px;
  text-align: center;
  color:      #fff;
}

.ab-logo {
  width:         72px;
  height:        72px;
  background:    rgba(255, 255, 255, .18);
  border-radius: 22px;
  display:       grid;
  place-items:   center;
  font-family:   var(--fh);
  font-size:     36px;
  font-weight:   900;
  margin:        0 auto 14px;
  border:        2px solid rgba(255, 255, 255, .3);
}

.a-hero h1 {
  font-family:   var(--fh);
  font-size:     26px;
  font-weight:   900;
  margin-bottom: 7px;
}

.a-hero p {
  font-size:  14px;
  opacity:    .8;
  line-height: 1.55;
  max-width:  270px;
  margin:     0 auto;
}

.ab-body {
  padding: 22px 20px;
}

.ab-sec {
  margin-bottom: 24px;
}

.ab-sec h3 {
  font-family:   var(--fh);
  font-size:     15px;
  font-weight:   800;
  color:         var(--a);
  margin-bottom: 9px;
}

.ab-sec p {
  font-size:   14px;
  color:       var(--t2);
  line-height: 1.7;
}

.f2col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
  margin-top:            11px;
}

.fc {
  background:    var(--s);
  border:        1px solid var(--b);
  border-radius: 14px;
  padding:       14px;
  box-shadow:    var(--sh);
  text-align:    center;
}

.fc .fi {
  font-size:     24px;
  margin-bottom: 6px;
}

.fc h4 {
  font-family:   var(--fh);
  font-size:     13px;
  font-weight:   800;
  margin-bottom: 2px;
}

.fc p {
  font-size: 11px;
  color:     var(--mu);
}

.soc-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
  margin-top:            12px;
}

.soc-btn {
  background:     var(--s);
  border:         1.5px solid var(--b);
  border-radius:  14px;
  padding:        12px;
  text-align:     center;
  font-family:    var(--fh);
  font-size:      13px;
  font-weight:    700;
  cursor:         pointer;
  color:          var(--t);
  text-decoration: none;
  display:        block;
}

/* Privacy page */
.priv-body {
  padding: 20px;
}

.priv-sec {
  margin-bottom: 20px;
}

.priv-sec h3 {
  font-family:   var(--fh);
  font-size:     15px;
  font-weight:   800;
  color:         var(--a);
  margin-bottom: 8px;
}

.priv-sec p,
.priv-sec li {
  font-size:   14px;
  color:       var(--t2);
  line-height: 1.8;
}

.priv-sec ul {
  padding-left: 18px;
}

.priv-sec li {
  margin-bottom: 4px;
}


/* ─────────────────────────────────────────────────
   POWERED BY FOOTER
───────────────────────────────────────────────── */
.pwby {
  text-align:  center;
  padding:     12px;
  font-family: var(--fh);
  font-size:   11px;
  font-weight: 600;
  color:       var(--mu2);
}

.pwby span {
  color: var(--a);
}


/* ─────────────────────────────────────────────────
   TOAST NOTIFICATION
   Small pill that pops up at bottom of screen
───────────────────────────────────────────────── */
#toast {
  position:       fixed;
  bottom:         92px;
  left:           50%;
  transform:      translateX(-50%) translateY(14px);
  background:     var(--t);
  color:          #fff;
  border-radius:  30px;
  padding:        11px 22px;
  font-family:    var(--fh);
  font-size:      14px;
  font-weight:    700;
  opacity:        0;
  pointer-events: none;
  transition:     all .28s cubic-bezier(.32, .72, 0, 1);
  z-index:        700;
  white-space:    nowrap;
  box-shadow:     var(--shl);
}

#toast.show {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}


/* ─────────────────────────────────────────────────
   LOGIN PAGE SPECIFIC STYLES
   Only used in login.html
───────────────────────────────────────────────── */
.login-page {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
  overflow-y:     auto;
}

/* Login hero section with gradient background */
.login-hero {
  background: linear-gradient(
    135deg,
    var(--a)   0%,
    var(--a2)  60%,
    #9F8FF7    100%
  );
  padding:    max(56px, env(safe-area-inset-top)) 28px 40px;
  text-align: center;
  color:      #fff;
  position:   relative;
  overflow:   hidden;
  flex-shrink: 0;
}

/* Decorative background circles */
.lh-deco {
  position:      absolute;
  border-radius: 50%;
  background:    rgba(255, 255, 255, .07);
}

.lh-deco1 {
  width:  200px;
  height: 200px;
  top:    -60px;
  right:  -60px;
}

.lh-deco2 {
  width:  150px;
  height: 150px;
  bottom: -40px;
  left:   -40px;
}

/* Brand section inside login hero */
.login-brand {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  margin-bottom:  18px;
  position:       relative;
  z-index:        1;
}

/* Logo image wrapper on login page */
.lb-logo-wrap {
  width:         72px;
  height:        72px;
  margin-bottom: 14px;
}

.lb-logo-wrap img {
  width:         72px;
  height:        72px;
  border-radius: 22px;
  object-fit:    cover;
  border:        2px solid rgba(255, 255, 255, .3);
}

/* Fallback when logo is missing on login page */
.lb-logo-wrap .logo-fallback {
  width:         72px;
  height:        72px;
  border-radius: 22px;
  background:    rgba(255, 255, 255, .2);
  display:       grid;
  place-items:   center;
  font-family:   var(--fh);
  font-size:     38px;
  font-weight:   900;
  color:         #fff;
  border:        2px solid rgba(255, 255, 255, .3);
}

.lb-name {
  font-family:    var(--fh);
  font-size:      30px;
  font-weight:    900;
  letter-spacing: -.5px;
}

.lb-name em {
  font-style: normal;
  color:      #C4B5FD;
}

.lb-tag {
  font-size:  14px;
  opacity:    .8;
  margin-top: 4px;
}

/* Offer chip in login hero */
.offer-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    rgba(245, 158, 11, .25);
  border:        1px solid rgba(245, 158, 11, .4);
  color:         #FDE68A;
  border-radius: 30px;
  padding:       6px 14px;
  font-family:   var(--fh);
  font-size:     12px;
  font-weight:   700;
  margin-top:    12px;
  position:      relative;
  z-index:       1;
}

/* Login form body */
.login-body {
  flex:       1;
  padding:    28px 24px max(28px, env(safe-area-inset-bottom));
  background: var(--bg);
}

/* Sign In / Register tab switcher */
.login-tabs {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  background:            var(--s3);
  border-radius:         14px;
  padding:               4px;
  margin-bottom:         22px;
}

.ltab {
  padding:       10px;
  border-radius: 11px;
  border:        none;
  font-family:   var(--fh);
  font-size:     14px;
  font-weight:   700;
  cursor:        pointer;
  color:         var(--mu);
  background:    none;
  transition:    all .2s;
}

.ltab.on {
  background: var(--s);
  color:      var(--t);
  box-shadow: var(--sh);
}

/* Social login buttons grid */
.social-grid {
  display:       grid;
  gap:           10px;
  margin-bottom: 16px;
}

.soc-login-btn {
  width:           100%;
  padding:         14px;
  border:          1.5px solid var(--b2);
  border-radius:   14px;
  font-family:     var(--fh);
  font-size:       15px;
  font-weight:     700;
  cursor:          pointer;
  background:      var(--s);
  color:           var(--t);
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  transition:      all .15s;
  box-shadow:      var(--sh);
}

.soc-login-btn:active {
  transform: scale(.97);
}

/* Disabled state for "Coming Soon" buttons */
.soc-login-btn.disabled {
  opacity: .5;
  cursor:  default;
}

/* "Coming Soon" tag inside social button */
.coming-soon-tag {
  background:     var(--s3);
  color:          var(--mu);
  font-family:    var(--fh);
  font-size:      10px;
  font-weight:    700;
  padding:        2px 8px;
  border-radius:  20px;
  margin-left:    4px;
}

/* Or divider */
.div-or {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin:      14px 0;
  color:       var(--mu);
  font-size:   13px;
  font-family: var(--fh);
}

.div-or::before,
.div-or::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--b);
}

/* Forgot password link */
.forgot-link {
  text-align:  center;
  font-family: var(--fh);
  font-size:   13px;
  font-weight: 700;
  color:       var(--a);
  margin-top:  12px;
  cursor:      pointer;
}

/* Terms note at bottom of login */
.terms-note {
  font-size:   11px;
  color:       var(--mu2);
  text-align:  center;
  margin-top:  14px;
  line-height: 1.6;
  font-family: var(--fb);
}

.terms-note a {
  color:           var(--a);
  font-weight:     600;
  text-decoration: none;
}

/* Error message box */
.err-msg {
  background:    var(--re2);
  border:        1px solid rgba(255, 59, 48, .2);
  border-radius: 12px;
  padding:       12px 14px;
  font-size:     13px;
  color:         var(--re);
  margin-bottom: 14px;
  display:       none;
}

.err-msg.show {
  display: block;
}

/* Success message box */
.suc-msg {
  background:    var(--gn2);
  border:        1px solid rgba(0, 200, 150, .2);
  border-radius: 12px;
  padding:       12px 14px;
  font-size:     13px;
  color:         var(--gnd);
  margin-bottom: 14px;
  display:       none;
}

.suc-msg.show {
  display: block;
}

/* Style cards for artistic QR */
.sgrid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  margin-bottom:         16px;
}

.scard {
  background:    var(--s);
  border:        2px solid var(--b);
  border-radius: 16px;
  padding:       18px 12px;
  text-align:    center;
  cursor:        pointer;
  transition:    all .18s;
  position:      relative;
}

.scard.on {
  border-color: var(--a);
  background:   var(--al);
}

.scard:active {
  transform: scale(.96);
}

.scard-ic {
  font-size:     28px;
  margin-bottom: 8px;
}

.scard-nm {
  font-family:   var(--fh);
  font-size:     13px;
  font-weight:   800;
  margin-bottom: 2px;
}

.scard-ds {
  font-size: 11px;
  color:     var(--mu);
}

/* PRO badge on locked style cards */
.pro-tag {
  position:      absolute;
  top:           -9px;
  right:         -9px;
  background:    linear-gradient(135deg, var(--go), #F97316);
  color:         #fff;
  font-family:   var(--fh);
  font-size:     9px;
  font-weight:   800;
  padding:       3px 8px;
  border-radius: 20px;
  letter-spacing: .4px;
}