:root{
  --bg:#0a0e17;
  --bg-2:#0d1220;
  --panel:#11172a;
  --panel-2:#161d33;
  --border:#232c47;
  --border-soft:#1a2138;
  --text:#eef1f8;
  --muted:#8891ac;
  --copper:#3b6df0;        /* primary accent (kept var name for compatibility) */
  --copper-bright:#5b8cff; /* primary accent, brighter */
  --amber:#f0a93b;
  --green:#22c17a;
  --red:#ef5b5b;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-sm:0 4px 14px -6px rgba(0,0,0,.4);
}
*{box-sizing:border-box;}
::selection{background:var(--copper);color:#fff;}
body{
  margin:0;
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(59,109,240,.16) 0%, transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(34,193,122,.08) 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand{font-family:'Space Grotesk',sans-serif;}
h2{font-size:21px;letter-spacing:-.2px;}
p{line-height:1.55;}
a{color:var(--copper-bright);text-decoration:none;}
a:hover{color:var(--text);}
.wrap{max-width:480px;margin:0 auto;padding:28px 18px 60px;}
.wrap-wide{max-width:920px;margin:0 auto;padding:28px 18px 60px;}

/* ---------------------------------------------------------------
   Top navigation
   --------------------------------------------------------------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 22px;border-bottom:1px solid var(--border-soft);
  background:rgba(13,18,32,.78);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:10;
}
.topbar .brand{
  font-weight:700;font-size:18px;letter-spacing:.2px;
  display:flex;align-items:center;gap:9px;
}
.topbar .brand .logo-mark{
  width:30px;height:30px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--copper),var(--green));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px -4px rgba(59,109,240,.6);
}
.topbar .brand .logo-mark svg{width:16px;height:16px;color:#fff;}
.topbar .brand-text{
  background:linear-gradient(90deg,var(--text),var(--copper-bright));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.topbar nav{display:flex;align-items:center;}
.topbar nav a{
  color:var(--muted);margin-left:4px;font-size:13.5px;font-weight:500;
  padding:8px 12px;border-radius:9px;display:inline-flex;align-items:center;gap:6px;
  transition:background .15s, color .15s;
}
.topbar nav a svg{width:15px;height:15px;opacity:.85;flex:0 0 auto;}
.topbar nav a:hover{color:var(--text);background:rgba(255,255,255,.05);}
.topbar nav a.active{color:#fff;background:linear-gradient(90deg,var(--copper),var(--copper-bright));box-shadow:var(--shadow-sm);}
.topbar nav a.nav-logout{color:var(--red);}
.topbar nav a.nav-logout:hover{background:rgba(239,91,91,.12);}

/* ---------------------------------------------------------------
   Cards / surfaces
   --------------------------------------------------------------- */
.card{
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
  position:relative;
}
.card h2{margin:0 0 4px;font-size:19px;}
.card + .card{margin-top:0;}
.muted{color:var(--muted);font-size:13px;}

.page-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap;}
.page-header h2{margin:0;}
.page-header .muted{margin-top:2px;}
.page-eyebrow{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;color:var(--copper-bright);
  background:rgba(59,109,240,.12);border:1px solid rgba(59,109,240,.25);
  padding:4px 10px;border-radius:20px;margin-bottom:8px;
}

.amount-display{
  font-family:'Space Grotesk',sans-serif;
  font-size:38px;font-weight:700;letter-spacing:-.5px;
  background:linear-gradient(90deg,var(--copper-bright),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:6px 0 2px;
}

.method-box{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px 16px;margin:14px 0;
}
.method-box .num{font-size:18px;font-weight:600;letter-spacing:.4px;font-family:'Space Grotesk',sans-serif;}

.badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  border:1px solid transparent;
}
.badge-bkash{background:#e2136e1c;color:#ff5aa0;border-color:#e2136e33;}
.badge-nagad{background:#f7941e1c;color:#ffb15c;border-color:#f7941e33;}
.badge-rocket{background:#5c2d911c;color:#b98aff;border-color:#5c2d9133;}
.badge-upay{background:#00a99d1c;color:#3ddcce;border-color:#00a99d33;}
.badge-mcash{background:#1e88e51c;color:#6cb3f7;border-color:#1e88e533;}
.badge-any{background:#ffffff12;color:var(--muted);border-color:var(--border);}
.badge-paid{background:#22c17a1c;color:var(--green);border-color:#22c17a3a;}
.badge-pending{background:#f0a93b1c;color:var(--amber);border-color:#f0a93b3a;}
.badge-expired,.badge-cancelled{background:#ef5b5b1c;color:var(--red);border-color:#ef5b5b3a;}

/* ---------------------------------------------------------------
   Forms
   --------------------------------------------------------------- */
label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px;font-weight:600;letter-spacing:.1px;}
input[type=text],input[type=number],input[type=password],input[type=url],input[type=email],select,textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg-2);color:var(--text);
  font-size:15px;font-family:inherit;
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:#5b6483;}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--copper);
  box-shadow:0 0 0 3px rgba(59,109,240,.18);
}

button,.btn{
  display:inline-block;border:none;cursor:pointer;
  background:linear-gradient(90deg,var(--copper),var(--copper-bright));
  color:#fff;font-weight:700;font-size:15px;
  padding:13px 20px;border-radius:var(--radius-sm);width:100%;text-align:center;
  box-shadow:0 8px 20px -8px rgba(59,109,240,.55);
  transition:transform .1s ease, opacity .2s, box-shadow .2s;
}
button:hover,.btn:hover{opacity:.94;box-shadow:0 10px 24px -8px rgba(59,109,240,.65);}
button:active{transform:scale(.98);}
.btn-secondary{background:var(--panel-2);color:var(--text);border:1px solid var(--border);box-shadow:none;}
.btn-secondary:hover{background:var(--bg-2);}
.btn-danger{background:linear-gradient(90deg,#b6453f,var(--red));box-shadow:0 8px 20px -8px rgba(239,91,91,.5);}
.btn-block{width:100%;margin-top:8px;}
.btn-sm{width:auto;padding:8px 14px;font-size:13px;border-radius:8px;}

/* ---------------------------------------------------------------
   Tables
   --------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{padding:11px 12px;border-bottom:1px solid var(--border-soft);text-align:left;}
th{color:var(--muted);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;}
tbody tr{transition:background .12s;}
tr:hover td{background:rgba(255,255,255,.025);}

.alert{padding:13px 15px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:16px;border:1px solid transparent;display:flex;align-items:flex-start;gap:8px;}
.alert-error{background:#ef5b5b14;color:#ff9490;border-color:#ef5b5b3d;}
.alert-success{background:#22c17a14;color:#7fe0a8;border-color:#22c17a3d;}
.alert-info{background:#3b6df014;color:#9db8ff;border-color:#3b6df03d;}

.center{text-align:center;}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px;}
.stat-box{
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--border);border-radius:var(--radius);padding:17px;
  box-shadow:var(--shadow-sm);
}
.stat-box .num{font-size:23px;font-weight:700;font-family:'Space Grotesk',sans-serif;letter-spacing:-.3px;}
.stat-box .lbl{font-size:12px;color:var(--muted);margin-top:3px;font-weight:500;}

.copy-row{display:flex;gap:8px;}
.copy-row input{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;}
.copy-row button{width:auto;padding:12px 16px;}

.spinner{width:16px;height:16px;border:2px solid #ffffff44;border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:middle;margin-right:6px;}
@keyframes spin{to{transform:rotate(360deg);}}

.footer-note{text-align:center;color:var(--muted);font-size:12px;margin-top:24px;}

/* ---------------------------------------------------------------
   Login screen
   --------------------------------------------------------------- */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.login-card{
  width:100%;max-width:380px;
  background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--border);border-radius:18px;
  padding:34px 30px 30px;box-shadow:var(--shadow);
  text-align:center;
}
.login-logo{
  width:54px;height:54px;border-radius:15px;margin:0 auto 16px;
  background:linear-gradient(135deg,var(--copper),var(--green));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -8px rgba(59,109,240,.65);
}
.login-logo svg{width:28px;height:28px;color:#fff;}
.login-card h2{margin:0 0 4px;font-size:21px;}
.login-card .muted{margin-bottom:22px;}
.login-card form{text-align:left;}
.login-card label{margin-top:16px;}
.login-foot{text-align:center;color:var(--muted);font-size:12px;margin-top:22px;}

/* ---------------------------------------------------------------
   Responsive: admin panel usable on phones AND makes good use of
   space on PC/desktop screens.
   --------------------------------------------------------------- */
@media (max-width:700px){
  .topbar{ flex-wrap:wrap; row-gap:10px; padding:12px 14px; }
  .topbar .brand{ font-size:16px; }
  .topbar nav{
    display:flex; width:100%; gap:2px; overflow-x:auto;
    -webkit-overflow-scrolling:touch; padding-bottom:2px;
  }
  .topbar nav a{ margin-left:0; flex:0 0 auto; font-size:12.5px; padding:7px 10px; }

  table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }

  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .card{ padding:18px; }
  .page-header{ align-items:flex-start; }
}

/* Wider PC/desktop screens: let the dashboard stat cards and content
   use the extra horizontal space instead of staying cramped/narrow. */
@media (min-width:900px){
  .wrap-wide{ max-width:1100px; }
  .stat-grid{ grid-template-columns:repeat(4,1fr); }
}

/* ---------------------------------------------------------------
   Public marketing / landing pages
   --------------------------------------------------------------- */
.public-page{min-height:100vh;overflow:hidden;background:
  radial-gradient(900px 480px at 10% 0%, rgba(59,109,240,.18), transparent 60%),
  radial-gradient(800px 440px at 100% 12%, rgba(34,193,122,.09), transparent 58%),
  var(--bg);}
.public-nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px max(22px,calc((100vw - 1160px)/2));border-bottom:1px solid rgba(255,255,255,.07);background:rgba(10,14,23,.78);backdrop-filter:blur(16px)}
.public-brand{display:flex;align-items:center;gap:10px;color:var(--text);font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.2px}.public-brand:hover{color:#fff}
.public-brand-mark{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--copper),var(--green));box-shadow:0 8px 22px -9px rgba(59,109,240,.75)}.public-brand-mark svg{width:17px;height:17px;color:#fff}
.public-nav-links{display:flex;align-items:center;gap:4px}.public-nav-links a{padding:9px 12px;border-radius:9px;color:var(--muted);font-size:13px;font-weight:600}.public-nav-links a:hover{color:#fff;background:rgba(255,255,255,.05)}.public-nav-links a.active{color:#fff}.public-nav-cta{background:linear-gradient(90deg,var(--copper),var(--copper-bright))!important;color:#fff!important;box-shadow:var(--shadow-sm)}.public-nav-login{color:#dce2f0!important}
.public-page main{max-width:1200px;margin:0 auto;padding:0 22px}.hero-section{min-height:680px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:56px;padding:72px 0 58px}.hero-copy{max-width:610px}.public-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--copper-bright);font-weight:700;font-size:11px;letter-spacing:.8px;text-transform:uppercase;padding:7px 11px;border-radius:999px;border:1px solid rgba(91,140,255,.22);background:rgba(59,109,240,.08)}.public-eyebrow span{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(34,193,122,.1)}
.hero-copy h1,.about-hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(44px,6vw,72px);line-height:1.02;letter-spacing:-2.5px;margin:22px 0 20px;color:#f6f8fe}.hero-copy h1 em{font-style:normal;background:linear-gradient(90deg,var(--copper-bright),#89aaff 52%,#63dca9);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-lead{font-size:18px;line-height:1.7;color:#adb6cb;max-width:560px;margin:0}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 18px}.public-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:11px;font-size:14px;font-weight:700}.public-btn-primary{background:linear-gradient(90deg,var(--copper),var(--copper-bright));color:#fff;box-shadow:0 12px 28px -12px rgba(59,109,240,.75)}.public-btn-primary:hover{color:#fff;transform:translateY(-1px)}.public-btn-secondary{border:1px solid var(--border);background:rgba(255,255,255,.035);color:var(--text)}.public-btn-secondary:hover{color:#fff;background:rgba(255,255,255,.07)}.hero-proof{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.proof-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;box-shadow:0 0 0 5px rgba(34,193,122,.09)}
.hero-visual{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center}.visual-glow{position:absolute;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(59,109,240,.26) 0%,rgba(59,109,240,.07) 38%,transparent 72%);filter:blur(4px)}.payment-card{position:absolute;width:min(410px,82%);border-radius:22px;border:1px solid rgba(255,255,255,.11);box-shadow:0 35px 90px -35px rgba(0,0,0,.8);backdrop-filter:blur(16px)}.mock-card-back{height:280px;transform:translate(46px,-48px) rotate(7deg);background:linear-gradient(160deg,rgba(34,193,122,.2),rgba(16,25,41,.85));opacity:.65}.mock-card-main{min-height:335px;padding:25px;background:linear-gradient(155deg,rgba(25,36,60,.97),rgba(12,19,34,.98))}.mock-top{display:flex;justify-content:space-between;align-items:center;color:#d8deeb;font-size:12px}.mock-status{color:#72d9ab;font-weight:700}.mock-amount{font:700 52px/1 'Space Grotesk',sans-serif;letter-spacing:-2px;margin-top:48px;background:linear-gradient(90deg,#f4f7fe,var(--copper-bright));-webkit-background-clip:text;background-clip:text;color:transparent}.mock-label{font-size:12px;color:var(--muted);margin-top:7px}.mock-link-row{display:flex;justify-content:space-between;align-items:center;margin-top:32px;padding:12px 13px;border-radius:11px;background:#0b1220;border:1px solid var(--border);font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace;color:#dbe2f0}.mock-copy{color:#8facff;font-family:'Inter',sans-serif;font-size:11px}.mock-methods{display:flex;gap:7px;margin-top:18px}.mock-methods span{padding:7px 9px;border:1px solid var(--border);border-radius:8px;font-size:10px;color:#aab4c8;background:rgba(255,255,255,.02)}.mock-progress{height:5px;background:#0a1020;border-radius:999px;margin-top:22px;overflow:hidden}.mock-progress span{display:block;width:78%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--copper),var(--green))}.floating-stat{position:absolute;right:7%;bottom:26px;min-width:126px;padding:13px 15px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(17,23,42,.82);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.floating-stat strong{display:block;font:700 20px 'Space Grotesk',sans-serif;color:#f4f7ff}.floating-stat small{display:block;margin-top:2px;color:var(--muted);font-size:10px}
.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:22px 0;margin-bottom:96px}.trust-strip div{padding:4px 28px;border-right:1px solid var(--border-soft)}.trust-strip div:last-child{border-right:0}.trust-strip strong{display:block;color:#eef2fa;font-size:14px}.trust-strip span{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.public-section,.steps-section,.cta-section{padding:10px 0 95px}.section-heading{max-width:720px;margin-bottom:30px}.section-heading h2,.cta-section h2,.about-card h2{font:700 clamp(30px,4vw,42px)/1.08 'Space Grotesk',sans-serif;letter-spacing:-1.1px;margin:15px 0 10px;color:#f1f4fb}.section-heading p,.cta-section p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.feature-card,.about-card{padding:25px;border:1px solid var(--border);border-radius:17px;background:linear-gradient(160deg,rgba(23,31,54,.9),rgba(14,20,35,.92));box-shadow:var(--shadow-sm)}.feature-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(59,109,240,.11);border:1px solid rgba(59,109,240,.24);color:#9db8ff}.feature-icon svg{width:20px;height:20px}.feature-card h3,.step h3,.about-card h3{font:700 17px 'Space Grotesk',sans-serif;margin:18px 0 7px}.feature-card p,.step p,.about-card p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}.steps-section{padding-top:4px}.center-heading{margin:0 auto 34px;text-align:center}.center-heading .public-eyebrow{margin:auto}.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.step{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid var(--border);border-radius:15px;background:rgba(255,255,255,.025)}.step>span{font:700 12px 'Space Grotesk',sans-serif;color:var(--copper-bright);min-width:28px;padding-top:3px}.step h3{margin:0 0 6px}.cta-section{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px;margin-bottom:85px;border:1px solid rgba(91,140,255,.18);border-radius:21px;background:radial-gradient(450px 220px at 0% 50%,rgba(59,109,240,.14),transparent 70%),linear-gradient(160deg,rgba(21,29,49,.95),rgba(14,19,33,.96))}.cta-section h2{font-size:31px;margin:10px 0 8px}.public-footer{max-width:1200px;margin:0 auto;padding:28px 22px 34px;border-top:1px solid var(--border-soft);display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:20px;align-items:center;color:var(--muted);font-size:11px}.public-footer strong{display:block;color:#e9edf6;font:700 15px 'Space Grotesk',sans-serif}.public-footer span{display:block;margin-top:4px}.public-footer-links{display:flex;gap:16px;justify-content:center}.public-footer-links a{color:var(--muted)}.public-footer-links a:hover{color:#fff}.public-footer-copy{text-align:right}
.about-hero{padding:88px 0 62px;max-width:760px}.about-hero h1{font-size:58px}.about-hero p{font-size:17px;line-height:1.75;color:#abb5ca;max-width:700px}.about-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;padding-bottom:85px}.about-card-large{grid-row:span 2}.about-kicker{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--copper-bright);font-weight:700}.about-values{padding:5px 0 90px}.values-list{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}.values-list>div{padding:20px;border-right:1px solid var(--border-soft)}.values-list>div:last-child{border-right:0}.values-list strong{display:block;font-size:14px;color:#eef2fa}.values-list span{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.6}
.auth-public-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:18px 24px;font-size:12px;color:var(--muted);z-index:20}.auth-public-bar a{color:#b8c2d8}.auth-public-bar a:hover{color:#fff}.auth-bar-sep{opacity:.35;margin:0 7px}.login-shell{padding-top:66px}
@media(max-width:900px){.hero-section{grid-template-columns:1fr;gap:20px;min-height:0;padding-top:60px}.hero-copy{max-width:none}.hero-visual{min-height:440px}.feature-grid,.steps-grid{grid-template-columns:1fr}.about-grid{grid-template-columns:1fr 1fr}.about-card-large{grid-row:auto;grid-column:1/-1}.values-list{grid-template-columns:1fr}.values-list>div{border-right:0;border-bottom:1px solid var(--border-soft)}.values-list>div:last-child{border-bottom:0}.public-footer{grid-template-columns:1fr;text-align:center}.public-footer-links{justify-content:center}.public-footer-copy{text-align:center}}
@media(max-width:640px){.public-nav{padding:12px 14px;align-items:flex-start}.public-brand{font-size:16px}.public-nav-links{gap:0;flex-wrap:wrap;justify-content:flex-end}.public-nav-links a{padding:7px 8px;font-size:11px}.public-nav-links a:nth-child(2){display:none}.public-page main{padding:0 16px}.hero-copy h1,.about-hero h1{font-size:42px;letter-spacing:-1.5px}.hero-lead{font-size:15px}.trust-strip{grid-template-columns:1fr;gap:0;margin-bottom:72px}.trust-strip div{border-right:0;border-bottom:1px solid var(--border-soft);padding:15px 0}.trust-strip div:last-child{border-bottom:0}.hero-visual{min-height:370px}.payment-card{width:92%}.mock-card-main{min-height:295px;padding:19px}.mock-amount{font-size:42px;margin-top:35px}.mock-link-row{margin-top:22px}.floating-stat{right:0;bottom:5px}.about-grid{grid-template-columns:1fr}.about-card-large{grid-column:auto}.cta-section{flex-direction:column;align-items:flex-start;padding:24px;margin-bottom:60px}.cta-section h2{font-size:27px}.public-footer{padding-left:16px;padding-right:16px}.auth-public-bar{padding:15px 17px}}


/* ---------------------------------------------------------------
   Full landing-page motion system
   Every major home layout reveals, floats and reacts as it enters view.
   --------------------------------------------------------------- */
.landing-page{overflow:hidden}
.landing-page .hero-section{position:relative}
.landing-page .hero-copy h1 em{display:inline-block;animation:softFloat 5s ease-in-out 2.2s infinite}
.landing-page .public-eyebrow span{animation:pulseDot 2s ease-in-out infinite}
.landing-page .payment-card{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}
.landing-page .mock-card-main{transform:translate3d(var(--mx,0),var(--my,0),0) rotate(-4deg)}
.landing-page .mock-card-back{transform:translate3d(calc(var(--mx,0) * -.55),calc(var(--my,0) * -.55),0) rotate(7deg)}
.landing-page .floating-stat{transform:translate3d(calc(var(--mx,0) * -.8),calc(var(--my,0) * -.8),0)}
.landing-page .feature-card,.landing-page .step{transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .45s ease}
.landing-page .feature-card:hover,.landing-page .step:hover{transform:translateY(-8px)}
.landing-page .feature-card:hover .feature-icon{transform:rotate(-6deg) scale(1.08)}
.landing-page .feature-icon{transition:transform .4s cubic-bezier(.22,1,.36,1)}
.reveal-section,.reveal-card{opacity:0;transform:translateY(46px) scale(.985);filter:blur(4px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),filter .9s ease}
.reveal-section.is-visible,.reveal-card.is-visible{opacity:1;transform:none;filter:none}
.reveal-card{transition-delay:var(--reveal-delay,0ms)}
.trust-strip.reveal-section.is-visible > div{animation:trustItem .7s cubic-bezier(.22,1,.36,1) both}
.trust-strip.reveal-section.is-visible > div:nth-child(2){animation-delay:.1s}.trust-strip.reveal-section.is-visible > div:nth-child(3){animation-delay:.2s}
.cta-section.reveal-section.is-visible{animation:ctaGlow 1.2s ease both}
.public-footer{opacity:0;transform:translateY(22px);animation:footerReveal .9s 2.2s cubic-bezier(.22,1,.36,1) forwards}
@keyframes softFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pulseDot{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(111,151,255,.18)}50%{transform:scale(1.22);box-shadow:0 0 0 7px rgba(111,151,255,0)}}
@keyframes trustItem{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ctaGlow{0%{box-shadow:0 0 0 rgba(59,109,240,0)}45%{box-shadow:0 0 55px rgba(59,109,240,.09)}100%{box-shadow:var(--shadow)}}
@keyframes footerReveal{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.landing-page .hero-copy h1 em,.landing-page .public-eyebrow span,.landing-page .mock-card-main,.landing-page .mock-card-back,.landing-page .floating-stat{animation:none!important;transform:none!important}.reveal-section,.reveal-card,.public-footer{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important}}


/* ===============================================================
   Premium public-page polish + page-to-page transitions
   No opening PAYMENTS splash; motion lives in the actual layouts.
   =============================================================== */
.public-motion-page{background:
  radial-gradient(900px 520px at 80% -10%,rgba(59,109,240,.10),transparent 65%),
  radial-gradient(700px 420px at 0% 25%,rgba(34,193,122,.045),transparent 70%),var(--bg);}
.public-motion-page .public-nav{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(7,10,16,.72);border-bottom:1px solid rgba(255,255,255,.045)}
.public-motion-page .public-nav-links a{transition:color .25s ease,background .25s ease,transform .25s ease}
.public-motion-page .public-nav-links a:hover{transform:translateY(-1px)}
.public-motion-page .public-nav-links .public-nav-cta{box-shadow:0 8px 28px rgba(59,109,240,.16)}
.hero-section{perspective:1200px}
.hero-copy{position:relative;z-index:2}
.hero-copy h1{max-width:820px;text-wrap:balance}
.hero-copy h1 em{font-style:normal;background:linear-gradient(90deg,#fff,#a9c0ff 48%,#6f97ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-visual{transform-style:preserve-3d}
.hero-visual:after{content:"";position:absolute;inset:15% 8% 8%;border:1px solid rgba(111,151,255,.08);border-radius:38px;transform:translateZ(-30px) rotate(-4deg);pointer-events:none}
.public-section,.steps-section,.trust-strip,.cta-section,.about-grid,.about-values{will-change:transform,opacity}
.about-hero{position:relative;max-width:900px}
.about-hero:after{content:"";position:absolute;right:-80px;top:25px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(59,109,240,.18),transparent 68%);filter:blur(8px);pointer-events:none;animation:aboutOrb 7s ease-in-out infinite}
.about-card{position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .5s ease}
.about-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 35%);opacity:0;transition:opacity .45s ease;pointer-events:none}
.about-card:hover{transform:translateY(-7px);border-color:rgba(111,151,255,.22);box-shadow:0 22px 55px rgba(0,0,0,.18)}
.about-card:hover:before{opacity:1}
.values-list>div{transition:background .35s ease,transform .35s ease}
.values-list>div:hover{background:rgba(255,255,255,.018);transform:translateY(-2px)}
.cta-section{position:relative;overflow:hidden}
.cta-section:after{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-100px;border-radius:50%;background:radial-gradient(circle,rgba(59,109,240,.18),transparent 68%);animation:ctaOrb 6s ease-in-out infinite;pointer-events:none}

/* Smooth navigation transition used by Home/About/Login/Signup links. */
.page-transition{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#070a10;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .38s ease,visibility .38s ease;overflow:hidden}
.page-transition.is-active{opacity:1;visibility:visible}
.transition-glow{position:absolute;width:42vw;height:42vw;min-width:280px;min-height:280px;border-radius:50%;background:radial-gradient(circle,rgba(70,118,255,.22),transparent 68%);filter:blur(4px);transform:scale(.55);transition:transform .8s cubic-bezier(.22,1,.36,1)}
.page-transition.is-active .transition-glow{transform:scale(1.25)}
.transition-line{position:absolute;bottom:17%;width:min(330px,55vw);height:2px;background:rgba(255,255,255,.08);overflow:hidden}
.transition-line span{display:block;width:0;height:100%;background:linear-gradient(90deg,#3b6df0,#8eb0ff,#22c17a)}
.page-transition.is-active .transition-line span{width:100%;transition:width .7s cubic-bezier(.22,1,.36,1)}
.transition-label{position:relative;display:flex;align-items:center;gap:9px;color:#aebbd3;font:600 11px 'Inter',sans-serif;letter-spacing:3px;text-transform:uppercase;opacity:0;transform:translateY(12px);transition:opacity .45s .08s ease,transform .45s .08s ease}
.page-transition.is-active .transition-label{opacity:1;transform:none}
.transition-dot{width:6px;height:6px;border-radius:50%;background:#7ea4ff;box-shadow:0 0 18px #6f97ff;animation:pulseDot 1.3s ease-in-out infinite}

/* Auth screens: elegant entrance instead of a hard page swap. */
.auth-enter-page{animation:authPageIn .72s cubic-bezier(.22,1,.36,1) both}
.auth-card-animated{animation:authCardIn .8s .08s cubic-bezier(.22,1,.36,1) both}
.auth-public-bar{animation:authBarIn .65s .04s cubic-bezier(.22,1,.36,1) both}
.auth-submit{margin-top:22px}
.login-card input{transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease,background .25s ease}
.login-card input:focus{transform:translateY(-1px);box-shadow:0 0 0 3px rgba(59,109,240,.09),0 12px 30px rgba(0,0,0,.14)}
.login-card button{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,filter .3s ease}
.login-card button:hover{transform:translateY(-2px);filter:brightness(1.04)}
.login-foot a{transition:color .25s ease}

@keyframes authPageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes authCardIn{from{opacity:0;transform:translateY(32px) scale(.975);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes authBarIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes aboutOrb{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-18px,20px,0) scale(1.08)}}
@keyframes ctaOrb{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}

@media(max-width:640px){
  .about-hero:after{right:-120px;top:10px;width:190px;height:190px}
  .transition-line{bottom:12%;width:52vw}
}
@media(prefers-reduced-motion:reduce){
  .page-transition,.auth-enter-page,.auth-card-animated,.auth-public-bar,.about-hero:after,.cta-section:after{animation:none!important;transition:none!important}
  .page-transition{display:none!important}
}

/* ===============================================================
   Auth + profile premium UI
   =============================================================== */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;gap:clamp(28px,6vw,90px);padding:88px 6vw 44px;position:relative;overflow:hidden}
.auth-page:before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(59,109,240,.13),transparent 68%);left:-260px;bottom:-320px;pointer-events:none}
.auth-showcase{width:min(520px,42vw);position:relative;z-index:1;animation:authShowcaseIn .9s .05s cubic-bezier(.22,1,.36,1) both}
.auth-kicker{display:inline-flex;align-items:center;gap:9px;font:700 10px 'Inter',sans-serif;letter-spacing:2.4px;text-transform:uppercase;color:#91a8d7}
.auth-kicker i,.profile-status-pill i{width:7px;height:7px;border-radius:50%;background:#22c17a;box-shadow:0 0 16px rgba(34,193,122,.7)}
.auth-showcase h1{font:700 clamp(42px,5vw,72px)/.98 'Space Grotesk',sans-serif;letter-spacing:-3px;margin:22px 0 22px;color:#f4f7ff}
.auth-showcase h1 span{background:linear-gradient(90deg,#fff,#8faeff);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-showcase>p{max-width:470px;color:#8996ad;line-height:1.75;font-size:15px}
.auth-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:42px}
.auth-mini-grid div{border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);border-radius:16px;padding:15px;display:flex;flex-direction:column;gap:9px;transition:.35s ease}
.auth-mini-grid div:hover{transform:translateY(-5px);border-color:rgba(111,151,255,.25);background:rgba(111,151,255,.045)}
.auth-mini-grid b{font:700 10px 'Inter';color:#6689d8}.auth-mini-grid span{font-size:11px;color:#b5c0d4}
.auth-card-pro{width:min(450px,100%);padding:32px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(19,25,38,.96),rgba(10,14,22,.94));box-shadow:0 30px 90px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.035);border-radius:26px;position:relative;z-index:2}
.auth-card-top{display:flex;align-items:center;justify-content:space-between}.auth-step{font:700 9px 'Inter';letter-spacing:2px;color:#65738d}
.auth-card-pro h2{font-size:29px;letter-spacing:-1px;margin:22px 0 6px}.auth-card-pro .muted{font-size:13px;line-height:1.6;color:#7f8ba1;margin-bottom:24px}
.auth-field{margin-top:15px}.auth-field label{display:flex;justify-content:space-between;align-items:center;margin:0 0 8px;font-size:11px;font-weight:600;color:#aeb9cb}.auth-field label small,.auth-hint{font-size:9px;color:#64728a;font-weight:500}.auth-label-row{display:flex;justify-content:space-between;align-items:center}
.auth-input-wrap{display:flex;align-items:center;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.025);overflow:hidden;transition:.28s ease}.auth-input-wrap>span{min-width:44px;text-align:center;color:#6179ad;font-size:12px}.auth-input-wrap input{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;margin:0!important;min-height:48px}.auth-input-wrap:focus-within{border-color:rgba(100,139,235,.7);box-shadow:0 0 0 3px rgba(59,109,240,.08),0 12px 30px rgba(0,0,0,.15)}
.auth-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.auth-submit-pro{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 17px;border-radius:13px}.auth-submit-pro span{font-size:18px;transition:transform .3s ease}.auth-submit-pro:hover span{transform:translateX(4px)}
.auth-trust,.auth-security-row{display:flex;align-items:center;justify-content:center;gap:7px;color:#68758c;font-size:10px;margin-top:16px}.auth-trust span{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(34,193,122,.1);color:#4fd796}.auth-security-row{justify-content:space-between;border-top:1px solid rgba(255,255,255,.06);padding-top:14px}.auth-security-row i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#22c17a;margin-right:5px;box-shadow:0 0 10px rgba(34,193,122,.6)}.auth-side-note{width:min(350px,26vw);animation:authSideIn 1s .22s cubic-bezier(.22,1,.36,1) both}.auth-side-note h3{font:600 28px/1.15 'Space Grotesk';letter-spacing:-1px;margin:18px 0 12px}.auth-side-note h3 em{font-style:normal;color:#7f9fff}.auth-side-note p{font-size:13px;color:#6f7d94}
.profile-pro-page{animation:authPageIn .65s cubic-bezier(.22,1,.36,1) both}.profile-page-header{align-items:flex-end}.profile-subtitle{color:#738198;font-size:12px;margin:7px 0 0}.profile-status-pill{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(34,193,122,.14);background:rgba(34,193,122,.05);border-radius:999px;color:#91ad9f;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px}.profile-hero-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:26px;margin:0 0 20px;border-radius:22px;border:1px solid var(--border-soft);background:linear-gradient(120deg,rgba(59,109,240,.08),rgba(255,255,255,.018));box-shadow:var(--shadow);overflow:hidden;position:relative}.profile-hero-card:after{content:"";position:absolute;width:260px;height:260px;right:-100px;top:-140px;border-radius:50%;background:radial-gradient(circle,rgba(59,109,240,.16),transparent 68%);pointer-events:none}.profile-avatar-large{width:92px;height:92px;border-radius:24px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#345fc9,#1a2743);border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 35px rgba(0,0,0,.22)}.profile-avatar-large img{width:100%;height:100%;object-fit:cover}.profile-avatar-large span{font:700 32px 'Space Grotesk';color:#fff}.profile-overline{font:700 9px 'Inter';letter-spacing:2px;color:#637390}.profile-hero-copy h1{font:700 28px 'Space Grotesk';margin:6px 0 2px;letter-spacing:-.7px}.profile-hero-copy p{font-size:12px;color:#77849a;margin:0}.profile-phone{display:inline-block;margin-top:8px;color:#8da3c9;font-size:11px}.profile-hero-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;padding-right:5px}.profile-hero-meta span{font-size:10px;color:#68758b}.profile-hero-meta strong{font-size:13px;color:#d4dced}.profile-card-heading{display:flex;justify-content:space-between;align-items:center}.profile-card-heading h2{margin:5px 0 0}.profile-shield{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(34,193,122,.1);color:#48d48d}.profile-action-row{display:flex;gap:10px;margin-top:16px}.profile-action-row .btn{flex:1;text-align:center;text-decoration:none}
@keyframes authShowcaseIn{from{opacity:0;transform:translateX(-24px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}@keyframes authSideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@media(max-width:900px){.auth-page{gap:24px;padding-left:20px;padding-right:20px}.auth-showcase{display:none}.auth-side-note{display:none}.auth-card-pro{width:min(470px,100%)}}
@media(max-width:640px){.auth-page{padding:76px 14px 28px;align-items:flex-start}.auth-card-pro{padding:24px 18px;border-radius:22px}.auth-card-pro h2{font-size:25px}.auth-two-col{grid-template-columns:1fr}.auth-mini-grid{grid-template-columns:1fr}.profile-hero-card{grid-template-columns:auto 1fr}.profile-hero-meta{grid-column:1/-1;align-items:flex-start;padding-top:5px}.profile-avatar-large{width:72px;height:72px;border-radius:19px}.profile-avatar-large span{font-size:25px}.profile-hero-copy h1{font-size:23px}.profile-action-row{flex-direction:column}.profile-page-header{align-items:flex-start;gap:14px}.profile-status-pill{font-size:9px}}
@media(prefers-reduced-motion:reduce){.auth-showcase,.auth-side-note,.profile-pro-page{animation:none!important}.auth-mini-grid div,.auth-input-wrap{transition:none!important}}
/* Google Sign-In */
.google-login-wrap{margin:18px 0 14px;text-align:center}.google-divider,.auth-or-divider{display:flex;align-items:center;gap:12px;color:#6f7d94;font-size:10px;text-transform:uppercase;letter-spacing:1.2px;margin:14px 0}.google-divider:before,.google-divider:after,.auth-or-divider:before,.auth-or-divider:after{content:"";height:1px;background:rgba(255,255,255,.08);flex:1}.google-login-wrap #googleSignInButton{display:flex;justify-content:center;min-height:44px}.auth-google-note{font-size:10px;color:#68758c;margin-top:8px}.auth-or-divider{margin:20px 0 4px}.auth-or-divider span{white-space:nowrap}
@media(max-width:640px){.google-login-wrap #googleSignInButton>div{max-width:100%!important}.google-login-wrap iframe{max-width:100%!important}}

/* ===============================================================
   Affra PAY — premium auth polish v10
   =============================================================== */
.auth-page{isolation:isolate}
.auth-page:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(115deg,transparent 0%,rgba(71,108,255,.025) 48%,rgba(34,193,122,.025) 100%)}
.auth-brand-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.auth-brand-name{font:700 17px/1 'Space Grotesk',sans-serif;letter-spacing:-.5px;color:#eef3ff}
.auth-brand-name b{color:#6e98ff}
.auth-live-dot{display:flex;align-items:center;gap:6px;color:#71809a;font:600 9px 'Inter',sans-serif;letter-spacing:1.4px;text-transform:uppercase}
.auth-live-dot i{width:6px;height:6px;border-radius:50%;background:#22c17a;box-shadow:0 0 12px rgba(34,193,122,.75);animation:pulseDot 1.8s ease-in-out infinite}
.auth-card-pro:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(116,151,255,.28),transparent 32%,rgba(34,193,122,.10));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.auth-card-pro h2{font-weight:700;color:#f4f7ff}
.auth-card-pro .muted{max-width:370px}
.auth-submit-pro{background:linear-gradient(100deg,#3d70ef,#638fff)!important;box-shadow:0 14px 34px rgba(59,109,240,.24)!important;font-weight:700;letter-spacing:-.1px}
.auth-submit-pro:hover{box-shadow:0 18px 42px rgba(59,109,240,.34)!important}
.auth-input-wrap{position:relative}
.auth-input-wrap:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:linear-gradient(90deg,rgba(80,126,255,.06),transparent 55%)}
.auth-input-wrap:focus-within:after{opacity:1}
.auth-field{animation:authFieldIn .55s cubic-bezier(.22,1,.36,1) both}
.auth-field:nth-of-type(1){animation-delay:.16s}.auth-field:nth-of-type(2){animation-delay:.21s}.auth-field:nth-of-type(3){animation-delay:.26s}.auth-field:nth-of-type(4){animation-delay:.31s}
@keyframes authFieldIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.auth-side-showcase{position:relative;padding:28px 4px 0 0}
.auth-side-showcase h3{font-size:36px;line-height:1.02;letter-spacing:-1.6px;margin-top:18px}
.auth-side-showcase h3 em{background:linear-gradient(90deg,#8faeff,#50d6aa);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-side-showcase p{max-width:310px;line-height:1.75}
.auth-side-orbit{width:118px;height:118px;border:1px solid rgba(118,151,255,.16);border-radius:50%;display:grid;place-items:center;margin-bottom:28px;position:relative;background:radial-gradient(circle,rgba(74,119,255,.13),transparent 68%);box-shadow:0 0 80px rgba(59,109,240,.11)}
.auth-side-orbit:before,.auth-side-orbit:after{content:"";position:absolute;border:1px solid rgba(118,151,255,.12);border-radius:50%}
.auth-side-orbit:before{inset:14px}.auth-side-orbit:after{inset:-12px;animation:orbitPulse 3.5s ease-in-out infinite}
.auth-side-orbit b{font:700 26px 'Space Grotesk';letter-spacing:-1px;color:#f2f5ff}
.auth-side-orbit span{position:absolute;width:7px;height:7px;border-radius:50%;background:#6f98ff;box-shadow:0 0 18px #6f98ff;top:7px;right:22px;animation:orbitDot 4s linear infinite}
@keyframes orbitPulse{0%,100%{transform:scale(.96);opacity:.45}50%{transform:scale(1.05);opacity:1}}
@keyframes orbitDot{from{transform:rotate(0deg) translateX(47px) rotate(0deg)}to{transform:rotate(360deg) translateX(47px) rotate(-360deg)}}
.auth-side-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:30px;max-width:330px}
.auth-side-metrics div{padding:12px;border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(255,255,255,.025)}
.auth-side-metrics strong{display:block;font:700 13px 'Space Grotesk';color:#dce5fb}.auth-side-metrics span{display:block;margin-top:4px;font-size:9px;color:#66758e;text-transform:uppercase;letter-spacing:1px}
.auth-google-note{line-height:1.5}
@media(max-width:900px){.auth-side-showcase{display:none}}
@media(max-width:640px){.auth-brand-row{margin-bottom:14px}.auth-card-pro{box-shadow:0 24px 70px rgba(0,0,0,.38)}.auth-submit-pro{min-height:52px}.auth-page{padding-top:72px}}
@media(prefers-reduced-motion:reduce){.auth-field,.auth-live-dot i,.auth-side-orbit:after,.auth-side-orbit span{animation:none!important}}

/* ===============================================================
   AFFRA PAY — refined visual system / light mode / mobile polish
   =============================================================== */
html[data-theme="light"]{
  --bg:#f5f7fb;
  --bg-2:#ffffff;
  --panel:#ffffff;
  --panel-2:#f9fbff;
  --border:#dfe5ef;
  --border-soft:#e8edf4;
  --text:#142033;
  --muted:#68758a;
  --copper:#3569e8;
  --copper-bright:#5a87ff;
  --green:#16a66a;
  --red:#d94a4a;
  --shadow:0 18px 45px -24px rgba(31,48,79,.25);
  --shadow-sm:0 8px 22px -15px rgba(31,48,79,.22);
}
html[data-theme="light"] body{
  background:
    radial-gradient(850px 480px at 5% -12%,rgba(72,117,240,.13),transparent 62%),
    radial-gradient(700px 420px at 100% 0%,rgba(22,166,106,.07),transparent 58%),
    var(--bg);
  color:var(--text);
}
html[data-theme="light"] .public-motion-page .public-nav{background:rgba(255,255,255,.82);border-bottom-color:#e2e8f0}
html[data-theme="light"] .public-brand,
html[data-theme="light"] .public-nav-links a{color:#253149}
html[data-theme="light"] .public-nav-links a:hover{color:#10203a;background:rgba(53,105,232,.07)}
html[data-theme="light"] .hero-copy h1,html[data-theme="light"] .about-hero h1{color:#111d30}
html[data-theme="light"] .section-heading h2,html[data-theme="light"] .cta-section h2,html[data-theme="light"] .about-card h2{color:#152239}
html[data-theme="light"] .hero-lead,html[data-theme="light"] .section-heading p,html[data-theme="light"] .cta-section p{color:#66738a}
html[data-theme="light"] .feature-card,html[data-theme="light"] .about-card{background:linear-gradient(160deg,#fff,#f8faff);border-color:#e0e6ef}
html[data-theme="light"] .step{background:rgba(255,255,255,.76);border-color:#e0e6ef}
html[data-theme="light"] .cta-section{background:radial-gradient(450px 220px at 0% 50%,rgba(53,105,232,.09),transparent 70%),linear-gradient(160deg,#fff,#f6f9ff);border-color:#dce5f4}
html[data-theme="light"] .public-footer strong{color:#152239}
html[data-theme="light"] .public-footer{border-top-color:#dfe5ef}
html[data-theme="light"] .auth-page:before{background:radial-gradient(circle,rgba(53,105,232,.12),transparent 68%)}
html[data-theme="light"] .login-card{background:linear-gradient(165deg,#fff,#f8faff);border-color:#dfe5ef;box-shadow:0 24px 60px -30px rgba(31,48,79,.28)}
html[data-theme="light"] .auth-showcase h1{color:#152239}
html[data-theme="light"] .auth-showcase>p{color:#68758a}
html[data-theme="light"] .auth-side-note{color:#152239}
html[data-theme="light"] .auth-side-note p{color:#68758a}
html[data-theme="light"] .auth-public-bar a{color:#52617a}
html[data-theme="light"] .auth-input-wrap{background:#f7f9fd;border-color:#dce3ee}
html[data-theme="light"] .auth-input-wrap input{color:#17233a}
html[data-theme="light"] .auth-input-wrap:focus-within{background:#fff}
html[data-theme="light"] .auth-card-top .auth-step,.auth-step{color:#73819a}
html[data-theme="light"] .profile-hero-card{background:linear-gradient(120deg,rgba(53,105,232,.06),rgba(255,255,255,.92));border-color:#dce3ef}
html[data-theme="light"] .profile-hero-copy h1{color:#152239}
html[data-theme="light"] .profile-hero-copy p,html[data-theme="light"] .profile-subtitle{color:#718097}
html[data-theme="light"] .profile-hero-meta strong{color:#30405a}
html[data-theme="light"] .profile-overline{color:#687a98}
html[data-theme="light"] .card{background:linear-gradient(165deg,#fff,#f9fbff);border-color:#dfe5ef}
html[data-theme="light"] .stat-box{background:linear-gradient(165deg,#fff,#f8faff);border-color:#dfe5ef}
html[data-theme="light"] table th,html[data-theme="light"] label{color:#64728a}
html[data-theme="light"] th,html[data-theme="light"] td{border-bottom-color:#e7ecf3}

.public-theme-toggle,.auth-theme-toggle{
  width:38px;height:38px;flex:0 0 38px;border-radius:12px;padding:0!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:0;
  background:rgba(255,255,255,.055)!important;border:1px solid var(--border)!important;
  color:var(--text)!important;box-shadow:none!important;font-size:15px!important;
  cursor:pointer;transition:transform .22s ease,background .22s ease,border-color .22s ease;
}
.public-theme-toggle:hover,.auth-theme-toggle:hover{transform:translateY(-2px);background:rgba(91,140,255,.1)!important}
.public-theme-toggle .theme-moon,.auth-theme-toggle .theme-moon{display:inline}
.public-theme-toggle .theme-sun,.auth-theme-toggle .theme-sun{display:none}
html[data-theme="light"] .public-theme-toggle .theme-moon,html[data-theme="light"] .auth-theme-toggle .theme-moon{display:none}
html[data-theme="light"] .public-theme-toggle .theme-sun,html[data-theme="light"] .auth-theme-toggle .theme-sun{display:inline}
.public-nav-links{align-items:center}
.auth-public-bar{display:flex;gap:10px;align-items:center}
.auth-public-bar>div{display:flex;align-items:center;gap:6px}
.auth-theme-toggle{margin-right:3px}

/* Cleaner auth composition */
.auth-page{isolation:isolate}
.auth-page:after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;right:-180px;top:8%;background:radial-gradient(circle,rgba(91,140,255,.09),transparent 70%);pointer-events:none;z-index:-1}
.login-card.auth-card-pro{border-radius:24px;padding:30px;box-shadow:0 30px 80px -35px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.035)}
.auth-brand-row{margin-bottom:20px}
.auth-card-top{margin-bottom:12px}
.auth-card-top .login-logo{margin:0 0 12px}
.auth-card-pro h2{font-size:clamp(27px,3vw,34px);letter-spacing:-1px;margin-top:8px}
.auth-card-pro>.muted{font-size:13px;line-height:1.65}
.google-login-wrap{margin:20px 0 4px}
.google-login-wrap #googleSignInButton{min-height:44px;display:flex;justify-content:center;overflow:hidden;border-radius:10px}
.google-login-wrap iframe{max-width:100%!important}
.auth-or-divider{margin:22px 0 14px}
.auth-field{margin-bottom:14px}
.auth-field label{margin:0 0 7px}
.auth-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-submit-pro{min-height:50px;border-radius:13px;font-size:15px}
.auth-security-row,.auth-trust{margin-top:16px}
.auth-side-showcase{max-width:390px}
.auth-side-orbit{width:150px;height:150px;margin-bottom:28px}
.auth-side-metrics{margin-top:28px}
.auth-mini-grid{margin-top:30px}

/* Profile: simpler, lighter visual hierarchy on phones */
.profile-pro-page{max-width:920px}
.profile-hero-card{grid-template-columns:auto minmax(0,1fr) auto}
.profile-avatar-large{width:86px;height:86px;border-radius:22px}
.profile-action-row .btn{min-height:44px}

@media(max-width:860px){
  .auth-page{padding:78px 18px 34px;gap:18px}
  .auth-showcase,.auth-side-showcase{display:none}
  .login-card.auth-card-pro{max-width:520px}
}
@media(max-width:640px){
  .public-nav{gap:8px}
  .public-nav-links{max-width:70%;gap:2px}
  .public-theme-toggle{width:34px;height:34px;flex-basis:34px;border-radius:10px}
  .public-nav-links a{font-size:10.5px;padding:7px 7px}
  .auth-public-bar{padding:12px 14px;font-size:11px}
  .auth-public-bar>div{gap:3px}
  .auth-theme-toggle{width:32px;height:32px;flex-basis:32px}
  .auth-page{padding:72px 12px 28px;align-items:flex-start}
  .login-card.auth-card-pro{padding:24px 18px 22px;border-radius:20px;max-width:100%}
  .auth-card-pro h2{font-size:28px}
  .auth-card-pro>.muted{font-size:12.5px}
  .auth-two-col{grid-template-columns:1fr}
  .google-login-wrap #googleSignInButton{width:100%;}
  .profile-hero-card{grid-template-columns:1fr;gap:15px;padding:20px}
  .profile-hero-meta{align-items:flex-start;padding:0}
  .profile-avatar-large{width:74px;height:74px;border-radius:19px}
  .profile-hero-copy h1{font-size:24px}
  .profile-action-row{flex-direction:column}
  .profile-action-row .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .public-theme-toggle,.auth-theme-toggle{transition:none}
}

/* AFFRA PAY V12 — Clean & professional authentication */
.auth-page.auth-login-page,.auth-page.auth-register-page{min-height:calc(100vh - 58px);padding:78px 16px 42px;display:flex;align-items:flex-start;justify-content:center;gap:0;overflow:hidden}
.auth-page.auth-login-page .auth-showcase,.auth-page.auth-login-page .auth-side-note,.auth-page.auth-register-page .auth-showcase,.auth-page.auth-register-page .auth-side-note{display:none!important}
.auth-page.auth-login-page .auth-card-pro,.auth-page.auth-register-page .auth-card-pro{width:min(640px,100%);max-width:640px;padding:42px 46px 38px;border-radius:24px;background:var(--panel,#fff);border:1px solid var(--border,#dfe5ef);box-shadow:0 20px 55px -28px rgba(31,48,79,.28);color:var(--text,#142033);animation:authCleanIn .55s cubic-bezier(.22,1,.36,1) both}
.auth-page.auth-login-page .auth-card-pro:before,.auth-page.auth-register-page .auth-card-pro:before{display:none}
.auth-page.auth-login-page .auth-brand-row,.auth-page.auth-register-page .auth-brand-row{margin:0 0 26px!important;display:flex;align-items:center;justify-content:space-between}
.auth-page.auth-login-page .auth-brand-name,.auth-page.auth-register-page .auth-brand-name{font:700 20px/1 'Space Grotesk',sans-serif;color:var(--text,#142033)!important;letter-spacing:-.5px}
.auth-page.auth-login-page .auth-brand-name b,.auth-page.auth-register-page .auth-brand-name b{color:var(--copper,#3569e8)}
.auth-page.auth-login-page .auth-card-top,.auth-page.auth-register-page .auth-card-top{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px!important}
.auth-page.auth-login-page .auth-card-top .login-logo,.auth-page.auth-register-page .auth-card-top .login-logo{width:54px!important;height:54px!important;border-radius:16px!important;margin:0!important;background:linear-gradient(145deg,#3569e8,#27b58a)!important;box-shadow:0 12px 28px rgba(53,105,232,.18)!important;color:#fff!important}
.auth-page.auth-login-page .auth-card-top .login-logo svg,.auth-page.auth-register-page .auth-card-top .login-logo svg{width:26px!important;height:26px!important}
.auth-page.auth-login-page .auth-card-pro h2,.auth-page.auth-register-page .auth-card-pro h2{font:700 clamp(34px,5vw,46px)/1.08 'Space Grotesk',sans-serif;letter-spacing:-1.7px;color:var(--text,#142033);margin:20px 0 8px}
.auth-page.auth-login-page .auth-card-pro>.muted,.auth-page.auth-register-page .auth-card-pro>.muted{max-width:500px;font:400 14px/1.7 'Inter',sans-serif;color:var(--muted,#68758a);margin-bottom:27px}
.auth-page.auth-login-page .google-login-wrap,.auth-page.auth-register-page .google-login-wrap{margin:0 0 18px;text-align:center}
.auth-page.auth-login-page .google-divider,.auth-page.auth-register-page .google-divider,.auth-page.auth-login-page .auth-or-divider,.auth-page.auth-register-page .auth-or-divider{margin:16px 0;color:#7d8899;font:600 10px/1 'Inter',sans-serif;letter-spacing:1.6px;text-transform:uppercase}
.auth-page.auth-login-page .google-divider:before,.auth-page.auth-login-page .google-divider:after,.auth-page.auth-login-page .auth-or-divider:before,.auth-page.auth-login-page .auth-or-divider:after,.auth-page.auth-register-page .google-divider:before,.auth-page.auth-register-page .google-divider:after,.auth-page.auth-register-page .auth-or-divider:before,.auth-page.auth-register-page .auth-or-divider:after{background:var(--border,#dfe5ef)}
.auth-page.auth-login-page #googleSignInButton,.auth-page.auth-register-page #googleSignInButton{min-height:50px;display:flex;justify-content:center;align-items:center}
.auth-page.auth-login-page .auth-field,.auth-page.auth-register-page .auth-field{margin:0 0 17px}
.auth-page.auth-login-page .auth-field label,.auth-page.auth-register-page .auth-field label{margin:0 0 8px;color:var(--text,#142033);font:600 13px/1.3 'Inter',sans-serif}
.auth-page.auth-login-page .auth-field label small,.auth-page.auth-register-page .auth-field label small,.auth-page.auth-login-page .auth-hint,.auth-page.auth-register-page .auth-hint{color:#8994a7;font-size:10px}
.auth-page.auth-login-page .auth-input-wrap,.auth-page.auth-register-page .auth-input-wrap{min-height:56px;border:1px solid #d7e0ec;border-radius:12px;background:var(--panel-2,#f8faff);box-shadow:none;transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,transform .22s ease}
.auth-page.auth-login-page .auth-input-wrap>span,.auth-page.auth-register-page .auth-input-wrap>span{min-width:46px;color:#6d86b9;font-size:13px}
.auth-page.auth-login-page .auth-input-wrap input,.auth-page.auth-register-page .auth-input-wrap input{min-height:54px!important;padding:0 13px 0 0!important;color:var(--text,#142033)!important;font:400 15px/1 'Inter',sans-serif!important}
.auth-page.auth-login-page .auth-input-wrap input::placeholder,.auth-page.auth-register-page .auth-input-wrap input::placeholder{color:#9aa5b5}
.auth-page.auth-login-page .auth-input-wrap:focus-within,.auth-page.auth-register-page .auth-input-wrap:focus-within{border-color:#78a0ef;background:var(--panel,#fff);box-shadow:0 0 0 3px rgba(53,105,232,.09);transform:translateY(-1px)}
.auth-page.auth-login-page .auth-submit-pro,.auth-page.auth-register-page .auth-submit-pro{min-height:56px;margin-top:5px;border:0;border-radius:12px;padding:0 20px;background:linear-gradient(100deg,#3569e8,#5a87ff);color:#fff;font:700 15px 'Inter',sans-serif;box-shadow:0 12px 24px rgba(53,105,232,.22)}
.auth-page.auth-login-page .auth-submit-pro:hover,.auth-page.auth-register-page .auth-submit-pro:hover{transform:translateY(-1px);box-shadow:0 15px 28px rgba(53,105,232,.27)}
.auth-page.auth-login-page .auth-security-row,.auth-page.auth-register-page .auth-trust{margin-top:18px;padding-top:16px;border-top:1px solid var(--border-soft,#e8edf4);color:#8792a5;font:500 10px/1.5 'Inter',sans-serif}
.auth-page.auth-register-page .auth-trust{justify-content:flex-start}
.auth-page.auth-register-page .auth-google-note{font-size:10px;line-height:1.5;color:#8792a5;margin:8px auto 0;max-width:390px}
.auth-page.auth-login-page .login-foot,.auth-page.auth-register-page .login-foot{margin-top:22px;text-align:center;color:#7c8799;font:400 12px/1.5 'Inter',sans-serif}
.auth-page.auth-login-page .login-foot a,.auth-page.auth-register-page .login-foot a{color:#3569e8;font-weight:600;text-decoration:none}
.auth-page.auth-register-page .auth-two-col{grid-template-columns:1fr 1fr;gap:14px}
html[data-theme="light"] .auth-page.auth-login-page .auth-card-pro,html[data-theme="light"] .auth-page.auth-register-page .auth-card-pro{background:#fff;border-color:#cddbf0;box-shadow:0 20px 55px -28px rgba(53,105,232,.25)}
html[data-theme="light"] .auth-page.auth-login-page .auth-input-wrap,html[data-theme="light"] .auth-page.auth-register-page .auth-input-wrap{background:#fbfcff;border-color:#cfdbea}
html:not([data-theme="light"]) .auth-page.auth-login-page .auth-card-pro,html:not([data-theme="light"]) .auth-page.auth-register-page .auth-card-pro{background:#101722;border-color:#263143;box-shadow:0 24px 65px -30px rgba(0,0,0,.65)}
html:not([data-theme="light"]) .auth-page.auth-login-page .auth-input-wrap,html:not([data-theme="light"]) .auth-page.auth-register-page .auth-input-wrap{background:#131b27;border-color:#293548}
html:not([data-theme="light"]) .auth-page.auth-login-page .auth-field label,html:not([data-theme="light"]) .auth-page.auth-register-page .auth-field label{color:#dce4f2}
@keyframes authCleanIn{from{opacity:0;transform:translateY(18px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@media(max-width:640px){.auth-page.auth-login-page,.auth-page.auth-register-page{min-height:calc(100vh - 48px);padding:56px 12px 28px}.auth-page.auth-login-page .auth-card-pro,.auth-page.auth-register-page .auth-card-pro{padding:28px 18px 24px;border-radius:18px}.auth-page.auth-login-page .auth-brand-name,.auth-page.auth-register-page .auth-brand-name{font-size:18px}.auth-page.auth-login-page .auth-card-pro h2,.auth-page.auth-register-page .auth-card-pro h2{font-size:30px;letter-spacing:-1.2px}.auth-page.auth-login-page .auth-card-pro>.muted,.auth-page.auth-register-page .auth-card-pro>.muted{font-size:12.5px;margin-bottom:23px}.auth-page.auth-register-page .auth-two-col{grid-template-columns:1fr;gap:0}.auth-page.auth-login-page .auth-input-wrap,.auth-page.auth-register-page .auth-input-wrap{min-height:54px}.auth-page.auth-login-page .auth-input-wrap input,.auth-page.auth-register-page .auth-input-wrap input{min-height:52px!important;font-size:14px!important}.auth-page.auth-login-page .auth-submit-pro,.auth-page.auth-register-page .auth-submit-pro{min-height:54px}.auth-page.auth-login-page #googleSignInButton,.auth-page.auth-register-page #googleSignInButton{width:100%;overflow:hidden}}
@media(prefers-reduced-motion:reduce){.auth-page.auth-login-page .auth-card-pro,.auth-page.auth-register-page .auth-card-pro{animation:none}.auth-input-wrap,.auth-submit-pro{transition:none!important}}


/* ===============================================================
   Affra PAY V13 — clean authentication screens
   Reference: minimal centered card, no side artwork or extra copy.
   =============================================================== */
.auth-theme-fab-wrap{
  position:fixed;top:18px;right:20px;z-index:100;
}
.auth-theme-fab{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  display:grid;place-items:center;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
}
.auth-theme-fab:hover{transform:translateY(-1px)}
.auth-page.auth-login-page,
.auth-page.auth-register-page{
  width:100%;max-width:none;
  min-height:100vh;
  padding:52px 18px 42px;
  display:flex;align-items:center;justify-content:center;
  gap:0;
  overflow:hidden;
}
.auth-page.auth-login-page:before,
.auth-page.auth-register-page:before,
.auth-page.auth-login-page:after,
.auth-page.auth-register-page:after{display:none!important}
.auth-page .auth-side-note,
.auth-page .auth-showcase{display:none!important}
.auth-card-pro{
  width:min(680px,100%);
  padding:48px 46px 38px;
  border-radius:20px;
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:0 18px 50px -28px rgba(20,32,51,.30);
}
.auth-card-pro:before{display:none}
.auth-card-pro h2{
  margin:0 0 28px;
  font:700 46px/1.05 'Space Grotesk',sans-serif;
  letter-spacing:-2px;
  color:var(--text);
}
.auth-card-pro .muted{display:none}
.auth-card-animated{animation:authCardIn .55s cubic-bezier(.22,1,.36,1) both}
.google-login-wrap{margin:0 0 30px;text-align:center}
.google-divider{display:none}
.google-login-wrap #googleSignInButton{
  display:flex;justify-content:center;min-height:48px;
}
.google-login-wrap #googleSignInButton>div{
  margin:0 auto!important;
}
.auth-google-note{display:none}
.auth-or-divider{
  display:flex;align-items:center;gap:14px;
  color:var(--muted);
  font-size:14px;font-weight:600;
  text-transform:none;letter-spacing:0;
  margin:0 0 26px;
}
.auth-or-divider:before,.auth-or-divider:after{
  content:"";height:1px;background:var(--border);flex:1;
}
.auth-or-divider span{white-space:nowrap}
.auth-field{margin-top:0;margin-bottom:20px;animation:none}
.auth-field label{
  display:block;margin:0 0 9px;
  font-size:17px;font-weight:700;color:var(--text);
}
.auth-field label small,.auth-hint{font-size:13px;color:var(--muted);font-weight:500}
.auth-label-row{display:flex;justify-content:space-between;align-items:center}
.auth-input-wrap{
  min-height:58px;
  border:1px solid #a9c8ff;
  border-radius:11px;
  background:var(--bg-2);
  box-shadow:0 2px 8px rgba(53,105,232,.08);
}
.auth-input-wrap>span{min-width:54px;color:#8391a9;font-size:18px}
.auth-input-wrap input{
  width:100%;min-height:56px;
  font-size:17px!important;color:var(--text)!important;
}
.auth-input-wrap:focus-within{
  border-color:var(--copper-bright);
  box-shadow:0 0 0 3px rgba(59,109,240,.10);
}
.auth-submit-pro{
  min-height:58px;
  margin-top:6px;
  padding:0 22px;
  border-radius:11px;
  justify-content:center;
  font-size:18px;
  background:var(--copper)!important;
  box-shadow:none!important;
}
.auth-submit-pro span{display:none}
.login-foot{
  text-align:center;
  color:var(--text);
  font-size:15px;
  margin-top:26px;
}
.login-foot a{color:var(--copper);font-weight:700}
.auth-register-page .auth-card-pro{padding-bottom:34px}
.auth-register-page .auth-card-pro h2{margin-bottom:28px}
.auth-register-page .auth-field{margin-bottom:18px}
.auth-register-page .auth-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
html[data-theme="light"] .auth-card-pro{
  background:#fff;border-color:#cdd8e8;
  box-shadow:0 18px 50px -28px rgba(31,48,79,.25);
}
html[data-theme="light"] .auth-input-wrap{
  background:#fff;border-color:#a9c8ff;
}
html[data-theme="light"] .auth-theme-fab{
  background:#fff;border-color:#dfe5ef;color:#142033;
}
@media(max-width:720px){
  .auth-theme-fab-wrap{top:12px;right:12px}
  .auth-theme-fab{width:38px;height:38px}
  .auth-page.auth-login-page,
  .auth-page.auth-register-page{padding:34px 14px 28px}
  .auth-card-pro{
    width:100%;padding:30px 24px 28px;border-radius:16px;
  }
  .auth-card-pro h2{font-size:38px;letter-spacing:-1.5px;margin-bottom:24px}
  .auth-or-divider{font-size:12px;margin-bottom:22px}
  .auth-field{margin-bottom:17px}
  .auth-field label{font-size:15px}
  .auth-input-wrap{min-height:54px}
  .auth-input-wrap input{min-height:52px;font-size:16px!important}
  .auth-input-wrap>span{min-width:46px;font-size:16px}
  .auth-submit-pro{min-height:54px;font-size:17px}
  .auth-register-page .auth-two-col{grid-template-columns:1fr;gap:0}
  .login-foot{font-size:14px}
}
@media(min-width:1000px){
  .auth-card-pro{padding-left:54px;padding-right:54px}
}


/* ===============================================================
   AFFRA PAY V14 — clean responsive auth screens
   Explicit layout rules prevent SVG/animation/layout collapse.
   =============================================================== */
.clean-auth-page{
  position:relative; min-height:100vh; width:100%; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  padding:40px 20px; overflow-x:hidden;
  background:var(--bg); color:var(--text);
}
.clean-theme-toggle{
  position:fixed; top:18px; right:20px; z-index:50;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; padding:0;
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  box-shadow:var(--shadow-sm); cursor:pointer; font-size:16px;
}
.clean-theme-toggle:hover{transform:translateY(-1px)}
.clean-theme-moon{display:inline}.clean-theme-sun{display:none}
html[data-theme="light"] .clean-theme-moon{display:none}
html[data-theme="light"] .clean-theme-sun{display:inline}
.clean-auth-card{
  position:relative; z-index:1; box-sizing:border-box;
  width:min(620px,100%); margin:0 auto; padding:46px 46px 40px;
  border:1px solid #cdd8e8; border-radius:20px; background:#fff;
  box-shadow:0 18px 55px -30px rgba(31,48,79,.28);
  animation:cleanAuthIn .42s ease-out both;
}
.clean-auth-card h1{
  margin:0 0 30px; color:#111d30;
  font:700 clamp(38px,5vw,52px)/1.05 'Space Grotesk',sans-serif;
  letter-spacing:-2px;
}
.clean-google{width:100%; display:flex; justify-content:center; align-items:center; min-height:48px; overflow:hidden}
.clean-google>div{max-width:100%; margin:0 auto!important}
.clean-divider{
  display:flex; align-items:center; gap:14px; margin:30px 0 26px;
  color:#6f7c91; font:600 14px/1.2 'Inter',sans-serif;
}
.clean-divider:before,.clean-divider:after{content:"";height:1px;background:#dfe5ef;flex:1}
.clean-divider span{white-space:nowrap}
.clean-field{margin:0 0 20px}
.clean-field label{display:block; margin:0 0 9px; color:#111d30; font:700 17px/1.25 'Inter',sans-serif}
.clean-field input{
  display:block; box-sizing:border-box; width:100%; height:58px; padding:0 16px;
  border:1px solid #a9c8ff; border-radius:11px; outline:0;
  background:#fff; color:#142033; font:400 17px/1 'Inter',sans-serif;
  box-shadow:0 2px 8px rgba(53,105,232,.08);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.clean-field input::placeholder{color:#9aa5b5}
.clean-field input:focus{border-color:#5a87ff; box-shadow:0 0 0 3px rgba(59,109,240,.10); transform:translateY(-1px)}
.clean-submit{
  width:100%; height:58px; margin-top:4px; border:0; border-radius:11px;
  background:#6f3fa0; color:#fff; cursor:pointer;
  font:700 18px/1 'Inter',sans-serif; box-shadow:none;
  transition:transform .2s,filter .2s,box-shadow .2s;
}
.clean-submit:hover{filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 10px 22px rgba(111,63,160,.18)}
.clean-auth-foot{margin-top:27px; text-align:center; color:#111d30; font:500 15px/1.5 'Inter',sans-serif}
.clean-auth-foot a{color:#6f3fa0; font-weight:700; text-decoration:none}
.clean-auth-alert{margin:-8px 0 18px; padding:12px 14px; border:1px solid #f0b6b6; border-radius:10px; background:#fff5f5; color:#a12f2f; font:500 13px/1.45 'Inter',sans-serif}
html:not([data-theme="light"]) .clean-auth-card{background:#111925;border-color:#293548;box-shadow:0 22px 65px -30px rgba(0,0,0,.65)}
html:not([data-theme="light"]) .clean-auth-card h1,html:not([data-theme="light"]) .clean-field label,html:not([data-theme="light"]) .clean-auth-foot{color:#eef3fb}
html:not([data-theme="light"]) .clean-field input{background:#151e2b;border-color:#2d3b50;color:#edf2fb}
html:not([data-theme="light"]) .clean-field input::placeholder{color:#77859a}
html:not([data-theme="light"]) .clean-divider{color:#8794a9}
html:not([data-theme="light"]) .clean-divider:before,html:not([data-theme="light"]) .clean-divider:after{background:#2b3749}
html:not([data-theme="light"]) .clean-auth-alert{background:#2a171b;border-color:#5c3037;color:#ffb4bd}
@keyframes cleanAuthIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:640px){
  .clean-auth-page{align-items:flex-start;padding:28px 12px 30px; min-height:100svh}
  .clean-theme-toggle{top:12px;right:12px;width:38px;height:38px}
  .clean-auth-card{width:100%;padding:30px 18px 26px;border-radius:17px;margin-top:30px}
  .clean-auth-card h1{font-size:36px;letter-spacing:-1.5px;margin-bottom:25px}
  .clean-divider{font-size:12px;margin:25px 0 22px;gap:10px}
  .clean-field{margin-bottom:17px}
  .clean-field label{font-size:15px;margin-bottom:8px}
  .clean-field input{height:54px;font-size:16px}
  .clean-submit{height:54px;font-size:17px}
  .clean-auth-foot{font-size:14px;margin-top:23px}
  .clean-google{min-height:48px}
}
@media(prefers-reduced-motion:reduce){.clean-auth-card,.clean-field input,.clean-submit,.clean-theme-toggle{animation:none!important;transition:none!important}}


/* ===== Affra PAY v21 settings/navigation polish ===== */
.settings-intro-card{display:flex;align-items:center;gap:14px;padding:20px 22px;margin-bottom:18px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,var(--panel-2),var(--panel));box-shadow:var(--shadow)}
.settings-intro-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(59,109,240,.13);border:1px solid rgba(91,140,255,.2);font-size:20px;flex:0 0 auto}
.settings-eyebrow{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--copper-bright);margin-bottom:4px}
.settings-intro-card h2{margin:0!important;font-size:21px!important}
.settings-intro-card .section-hint{margin:4px 0 0!important}
.settings-panel .card h2{display:flex;align-items:center;gap:8px}
.settings-panel .card h2:before{content:"";width:4px;height:19px;border-radius:4px;background:var(--copper-bright);display:inline-block}
.settings-panel label{display:block;margin-top:14px}
.settings-panel input[type=text],.settings-panel input[type=url],.settings-panel input[type=password],.settings-panel textarea{transition:border-color .18s,box-shadow .18s,background .18s}
.settings-panel input:focus,.settings-panel textarea:focus{box-shadow:0 0 0 3px rgba(59,109,240,.10)}
.settings-tab{transition:all .18s ease}
.settings-tab.active{box-shadow:0 6px 18px rgba(59,109,240,.12)}
.app-download-card{border:1px solid rgba(59,109,240,.18)!important;background:linear-gradient(135deg,rgba(59,109,240,.08),var(--panel-2))!important}
.app-download-card .btn{min-width:132px;text-align:center}
@media(max-width:700px){
  .settings-intro-card{padding:17px}.settings-intro-card h2{font-size:18px!important}
  .app-download-card{align-items:flex-start!important}.app-download-card .btn{width:100%}
}
html[data-theme="light"] .settings-intro-card{background:linear-gradient(145deg,#fff,#f7faff);border-color:#dfe6f0}
html[data-theme="light"] .app-download-card{background:linear-gradient(135deg,#f3f7ff,#fff)!important}