:root{
  --brand-blue:#2563eb;
  --brand-blue-2:#3b82f6;
  --brand-indigo:#4f46e5;
  --brand-purple:#7c3aed;
  --brand-violet:#9333ea;
  --brand-deep:#111b46;
  --brand-navy:#172554;
  --brand-ink:#172033;
  --brand-muted:#64748b;
  --brand-surface:rgba(255,255,255,.86);
  --brand-border:rgba(99,102,241,.16);
  --brand-shadow:0 24px 70px rgba(49,46,129,.14);
  --navbar-gradient:linear-gradient(100deg,rgb(18,35,78) 0%,rgb(37,56,135) 45%,rgb(89,37,153) 100%);
}

/* FINAL WHITE AUTH THEME */
html,body,body.auth-page,body.auth-page main,body.auth-page .auth-shell,body.auth-page .auth-shell-register{background:#fff!important;background-image:none!important;color:#172033!important}body.auth-page .auth-card,body.auth-page .auth-card-register,body.auth-page .auth-form-panel,body.auth-page .auth-form-panel-register,body.auth-page .auth-visual{background:#fff!important;background-image:none!important;color:#172033!important;border-color:#e2e8f0!important}body.auth-page .auth-card{box-shadow:0 22px 60px rgba(15,23,42,.11)!important}body.auth-page .auth-label,body.auth-page .auth-form-heading h1,body.auth-page .auth-form-heading h2{color:#172554!important}body.auth-page .auth-switch,body.auth-page .auth-options,body.auth-page .auth-agreement,body.auth-page .auth-agreement label{color:#667085!important}body.auth-page .auth-switch a,body.auth-page .forgot-password-link,body.auth-page .auth-back{color:#315bea!important}body.auth-page .auth-input-wrap>i{color:#5877dd!important}body.auth-page .auth-form .form-control,body.auth-page .auth-form .form-select{background:#fff!important;color:#172033!important;-webkit-text-fill-color:#172033!important;border:1px solid #d7dee9!important}body.auth-page .auth-form .form-control::placeholder{color:#98a2b3!important;-webkit-text-fill-color:#98a2b3!important;opacity:1!important}body.auth-page .auth-submit{background:#315bea!important;background-image:none!important;color:#fff!important;border-color:#315bea!important}body.auth-page .auth-submit span{color:#fff!important}body.auth-page .google-auth-button{background:#fff!important;color:#172033!important;border-color:#d7dee9!important}body.auth-page .auth-divider{color:#98a2b3!important}body.auth-page .auth-divider:before,body.auth-page .auth-divider:after{background:#e2e8f0!important}body.auth-page .modern-navbar{background:#fff!important;background-image:none!important}body.auth-page .modern-navbar .brand-copy strong{color:#172554!important}body.auth-page .modern-navbar .brand-copy small{color:#667085!important}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth;background:#eef2ff}
body{
  min-height:100vh;
  color:var(--brand-ink);
  background:
    radial-gradient(circle at 8% 8%,rgba(37,99,235,.20),transparent 29%),
    radial-gradient(circle at 90% 10%,rgba(147,51,234,.18),transparent 31%),
    radial-gradient(circle at 76% 87%,rgba(79,70,229,.15),transparent 35%),
    linear-gradient(135deg,rgb(242,247,255) 0%,rgb(246,244,255) 50%,rgb(252,247,255) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:linear-gradient(rgba(79,70,229,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.025) 1px,transparent 1px);
  background-size:40px 40px;
}
.modern-navbar{
  position:sticky!important;top:0;z-index:1050;
  padding:12px 0!important;
  background:var(--navbar-gradient)!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 16px 42px rgba(15,23,42,.26)!important;
  backdrop-filter:blur(18px) saturate(140%);
}
.modern-navbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(96,165,250,.9),rgba(192,132,252,.9),transparent);
}
.brand-lockup{display:flex!important;align-items:center;gap:11px;color:#fff!important;text-decoration:none!important;min-width:225px}
.brand-mark{
  width:43px;height:43px;display:grid;place-items:center;border-radius:13px;
  color:#fff;font-size:21px;
  background:linear-gradient(145deg,rgba(96,165,250,.95),rgba(124,58,237,.95));
  border:1px solid rgba(255,255,255,.34);
  box-shadow:0 10px 24px rgba(15,23,42,.26),inset 0 1px 0 rgba(255,255,255,.32);
}
.brand-copy{display:flex;flex-direction:column;line-height:1.05}
.brand-copy strong{font-size:1.12rem;letter-spacing:.4px}
.brand-copy small{font-size:.66rem;letter-spacing:.55px;text-transform:uppercase;color:rgba(255,255,255,.66);margin-top:5px;font-weight:600}
.modern-navbar .nav-link{
  position:relative;color:rgba(255,255,255,.78)!important;font-weight:650!important;
  margin:0 3px;padding:10px 14px!important;border-radius:12px!important;
  transition:all .2s ease!important;
}
.modern-navbar .nav-link:hover,.modern-navbar .nav-link.active{
  color:#fff!important;
  background:linear-gradient(135deg,rgba(59,130,246,.78),rgba(124,58,237,.82))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 8px 22px rgba(15,23,42,.18)!important;
  transform:translateY(-1px);
}
.modern-navbar .navbar-toggler{border-color:rgba(255,255,255,.28)!important;background:rgba(255,255,255,.08);box-shadow:none!important}
.modern-navbar .navbar-toggler-icon{filter:brightness(0) invert(1)}
.modern-navbar .d-flex.align-items-center{gap:8px}
.language-switcher .btn,.btn-login{
  color:#fff!important;border:1px solid rgba(255,255,255,.34)!important;
  background:rgba(255,255,255,.09)!important;backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.language-switcher .btn:hover,.btn-login:hover{background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.58)!important;color:#fff!important}
.btn-register{
  color:#fff!important;border-color:transparent!important;
  background:linear-gradient(135deg,rgb(59,130,246),rgb(124,58,237))!important;
  box-shadow:0 10px 25px rgba(30,64,175,.36)!important;
}
.btn-register:hover{filter:brightness(1.08);box-shadow:0 14px 32px rgba(109,40,217,.42)!important;color:#fff!important}
.user-toggle{color:#fff!important;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.user-toggle:hover{color:#fff!important;background:rgba(255,255,255,.15)}
.avatar-navbar{border-color:#a78bfa!important}.online-dot{border-color:#263a84!important}
.card,.accordion-item,.dropdown-menu{background:var(--brand-surface)!important;border:1px solid var(--brand-border)!important;box-shadow:var(--brand-shadow);backdrop-filter:blur(16px)}
.dropdown-menu{border-radius:16px!important;padding:8px!important}.dropdown-item{border-radius:10px!important}.dropdown-item:hover{background:rgba(79,70,229,.09)!important}
.form-control,.form-select{background-color:rgba(255,255,255,.92)!important;color:var(--brand-ink)!important;border-color:var(--brand-border)!important}
.form-control:focus,.form-select:focus{border-color:var(--brand-purple)!important;box-shadow:0 0 0 .25rem rgba(124,58,237,.14)!important}
.btn{border-radius:12px;font-weight:700;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary,.btn-success,.btn-info,.btn-warning{
  color:#fff!important;border-color:transparent!important;
  background:linear-gradient(135deg,rgb(37,99,235),rgb(79,70,229),rgb(124,58,237))!important;
  box-shadow:0 12px 28px rgba(79,70,229,.26)!important;
}
.btn-primary:hover,.btn-success:hover,.btn-info:hover,.btn-warning:hover{filter:brightness(1.06);box-shadow:0 16px 35px rgba(124,58,237,.34)!important}
.btn-outline-primary,.btn-outline-success,.btn-outline-info,.btn-outline-warning{
  color:var(--brand-indigo)!important;border-color:rgba(79,70,229,.38)!important;background:rgba(255,255,255,.7)!important;
}
.btn-outline-primary:hover,.btn-outline-success:hover,.btn-outline-info:hover,.btn-outline-warning:hover{color:#fff!important;border-color:transparent!important;background:linear-gradient(135deg,rgb(37,99,235),rgb(124,58,237))!important}
.hero-section{background:transparent!important;position:relative}
.hero-section::before,.hero-section::after{content:"";position:absolute;border-radius:50%;filter:blur(30px);pointer-events:none;z-index:-1}
.hero-section::before{width:320px;height:320px;left:-100px;top:70px;background:rgba(59,130,246,.17)}
.hero-section::after{width:360px;height:360px;right:-110px;top:40px;background:rgba(168,85,247,.15)}
.hero-title span,.text-primary{color:var(--brand-purple)!important}
.feature-icon{color:var(--brand-indigo)!important;background:linear-gradient(135deg,rgba(37,99,235,.11),rgba(147,51,234,.14))!important;border:1px solid rgba(99,102,241,.12)}
.feature-card,.hero-card{transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease!important}
.feature-card:hover,.hero-card:hover{transform:translateY(-7px);border-color:rgba(124,58,237,.28)!important;box-shadow:0 28px 75px rgba(79,70,229,.19)!important}
#about.bg-light{background:rgba(255,255,255,.52)!important;border-top:1px solid rgba(99,102,241,.08);border-bottom:1px solid rgba(99,102,241,.08)}
#about .bg-white{background:rgba(255,255,255,.82)!important;border:1px solid var(--brand-border);box-shadow:0 16px 40px rgba(49,46,129,.09)!important;transition:transform .2s ease}
#about .bg-white:hover{transform:translateY(-4px)}
.cta-section{background:linear-gradient(120deg,rgb(37,99,235),rgb(79,70,229),rgb(147,51,234))!important;box-shadow:0 25px 65px rgba(79,70,229,.3);border:1px solid rgba(255,255,255,.18)}
footer{background:linear-gradient(100deg,rgb(17,27,70),rgb(31,41,98),rgb(61,30,105))!important;color:rgba(255,255,255,.76)!important;border-top:1px solid rgba(255,255,255,.08)}
.language-switcher .dropdown-menu{max-height:420px;overflow-y:auto}
.language-switcher .dropdown-item.active,.language-switcher .dropdown-item:active{color:#fff!important;background:linear-gradient(135deg,rgb(37,99,235),rgb(124,58,237))!important}
@media(max-width:991.98px){
  .modern-navbar .navbar-collapse{margin-top:14px;padding:14px;border-radius:18px;background:rgba(13,26,70,.68);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(16px)}
  .brand-copy small{display:none}.brand-lockup{min-width:0}.modern-navbar .d-flex.align-items-center{align-items:stretch!important;flex-wrap:wrap}.language-switcher{margin-left:0!important}
}
@media(max-width:575.98px){.language-switcher{width:100%}.language-switcher .btn,.btn-login,.btn-register{width:100%}.modern-navbar .d-flex.align-items-center{display:grid!important;grid-template-columns:1fr 1fr;width:100%}.language-switcher{grid-column:1/-1}}

/* Barkodsal program icon */
.brand-mark{overflow:hidden;padding:3px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(224,231,255,.96))!important}
.brand-program-icon{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px}

/* Flag-based language selector */
.language-switcher .btn{display:inline-flex;align-items:center;gap:8px;min-height:42px}
.language-switcher .dropdown-item{display:flex;align-items:center;gap:11px;padding:10px 13px!important;white-space:nowrap}
.language-flag{display:inline-flex;align-items:center;justify-content:center;width:25px;min-width:25px;font-size:1.18rem;line-height:1;filter:saturate(1.08)}
.language-switcher .dropdown-menu{min-width:210px}

/* Shared professional footer */
.site-footer{padding:0!important;background:linear-gradient(110deg,rgb(12,23,61),rgb(31,37,99),rgb(69,29,112))!important;color:rgba(255,255,255,.78)!important}
.site-footer .footer-main{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:38px 0 30px}
.footer-brand{display:flex;align-items:center;gap:13px;color:#fff;text-decoration:none;min-width:280px}
.footer-brand:hover{color:#fff}
.footer-brand-mark{display:grid;place-items:center;width:54px;height:54px;padding:4px;border-radius:16px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.38);box-shadow:0 14px 35px rgba(0,0,0,.24)}
.footer-brand-mark img{display:block;width:100%;height:100%;object-fit:contain;border-radius:12px}
.footer-brand>span:last-child{display:flex;flex-direction:column}
.footer-brand strong{font-size:1.22rem;letter-spacing:.35px}
.footer-brand small{margin-top:5px;color:rgba(255,255,255,.61);font-size:.76rem}
.footer-links{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 10px}
.footer-links a{color:rgba(255,255,255,.76);text-decoration:none;font-weight:650;padding:9px 12px;border-radius:10px;transition:all .18s ease}
.footer-links a:hover{color:#fff;background:rgba(255,255,255,.10);transform:translateY(-1px)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0 22px;border-top:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.58)}
.footer-security{display:inline-flex;align-items:center;gap:7px;font-size:.78rem}
.footer-security i{color:#86efac}

@media(max-width:991.98px){
  .site-footer .footer-main{align-items:flex-start;flex-direction:column}
  .footer-links{justify-content:flex-start}
}
@media(max-width:575.98px){
  .language-name{max-width:145px;overflow:hidden;text-overflow:ellipsis}
  .site-footer .footer-main{padding:30px 0 23px}
  .footer-brand{min-width:0}
  .footer-links{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .footer-links a{padding-left:0}
  .footer-bottom{align-items:flex-start;flex-direction:column}
}

/* Shared layout hardening */
.modern-navbar{min-height:78px!important;padding:12px 0!important}
.brand-lockup{display:inline-flex!important;align-items:center!important;gap:12px!important;min-width:285px!important;text-decoration:none!important}
.brand-mark{display:grid!important;place-items:center!important;width:46px!important;height:46px!important;min-width:46px!important;border-radius:14px!important}
.brand-program-icon{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important;object-fit:contain!important}
.brand-copy{display:flex!important;flex-direction:column!important;line-height:1.05!important}
.brand-copy strong{font-size:1.05rem!important;color:#fff!important;letter-spacing:.25px!important}
.brand-copy small{margin-top:5px!important;max-width:230px!important;color:rgba(255,255,255,.62)!important;font-size:.68rem!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.navbar-actions{gap:6px!important}
.language-switcher{margin-left:0!important}
.site-footer{overflow:hidden!important}
.site-footer .footer-main{align-items:flex-start!important}
.footer-brand-mark{width:54px!important;height:54px!important;min-width:54px!important;overflow:hidden!important}
.footer-brand-mark img{width:46px!important;height:46px!important;max-width:46px!important;max-height:46px!important;object-fit:contain!important}
.footer-columns{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:42px;flex:1;max-width:680px}
.footer-column{display:flex;flex-direction:column;gap:9px}
.footer-column h2{margin:0 0 5px;color:#fff;font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.footer-column a{color:rgba(255,255,255,.72);text-decoration:none;font-weight:600;font-size:.88rem;transition:color .18s ease,transform .18s ease}
.footer-column a:hover{color:#fff;transform:translateX(2px)}
.premium-hero{padding:88px 0!important;background:radial-gradient(circle at 82% 22%,rgba(96,165,250,.22),transparent 32%),radial-gradient(circle at 20% 18%,rgba(168,85,247,.16),transparent 34%),linear-gradient(180deg,#f8faff,#eef3ff)!important}
.premium-hero .hero-title{font-size:clamp(2.45rem,4vw,4.35rem)!important}
#plans,.premium-hero+section{position:relative}
@media(max-width:991.98px){
  .brand-lockup{min-width:0!important}.navbar-actions{align-items:stretch!important;flex-wrap:wrap!important;width:100%!important}.navbar-actions>.btn{flex:1}
  .footer-columns{grid-template-columns:repeat(2,minmax(140px,1fr));max-width:none;width:100%;gap:28px}
}
@media(max-width:575.98px){
  .brand-copy small{display:none!important}.brand-mark{width:42px!important;height:42px!important;min-width:42px!important}.brand-program-icon{width:34px!important;height:34px!important}
  .footer-columns{grid-template-columns:1fr 1fr;gap:24px 18px}.footer-column:last-child{grid-column:1/-1}
}


/* Login and registration: crisp Barkodsal program mark */
.auth-shell{min-height:100vh;display:flex;align-items:center;padding:48px 0;background:radial-gradient(circle at 18% 12%,rgba(59,130,246,.19),transparent 30%),radial-gradient(circle at 84% 20%,rgba(168,85,247,.18),transparent 32%),linear-gradient(145deg,#f8faff,#eef2ff)}
.auth-shell .container{max-width:560px}
.auth-shell form{padding:30px;border:1px solid rgba(99,102,241,.14);border-radius:24px;background:rgba(255,255,255,.86);box-shadow:0 24px 65px rgba(49,46,129,.15);backdrop-filter:blur(18px)}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:12px}
.auth-brand-icon{display:block;width:96px!important;height:96px!important;max-width:96px!important;max-height:96px!important;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(79,70,229,.24))}
.auth-brand-name{font-size:1.45rem;font-weight:850;letter-spacing:.02em;color:#172554}
@media(max-width:575.98px){.auth-shell{padding:28px 14px}.auth-shell form{padding:22px}.auth-brand-icon{width:82px!important;height:82px!important}}

/* 2026 professional navbar/footer refresh */
.modern-navbar{
  min-height:72px!important;
  padding:10px 0!important;
  background:
    radial-gradient(circle at 18% -40%,rgba(59,130,246,.34),transparent 34%),
    linear-gradient(100deg,#061437 0%,#0b1743 46%,#25105f 100%)!important;
  box-shadow:0 12px 34px rgba(2,6,23,.3)!important;
}
.modern-navbar .container{max-width:1420px}
.brand-lockup{min-width:210px!important;gap:12px!important}
.brand-mark{
  width:48px!important;height:48px!important;min-width:48px!important;
  padding:4px!important;border-radius:16px!important;
  background:linear-gradient(145deg,#fff,#dfe7ff)!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:0 8px 24px rgba(44,28,145,.36),inset 0 1px 0 #fff!important;
}
.brand-program-icon{width:40px!important;height:40px!important;max-width:40px!important;max-height:40px!important}
.brand-copy strong{
  color:#fff!important;font-size:1.08rem!important;font-weight:850!important;
  letter-spacing:.02em!important;text-transform:none!important;
}
.modern-navbar .navbar-nav{gap:8px}
.modern-navbar .nav-link{padding:10px 15px!important;font-size:.94rem!important;font-weight:700!important}
.navbar-actions{gap:10px!important}
.language-switcher .btn,.btn-login,.btn-register{min-height:42px;padding:9px 17px!important;border-radius:10px!important}
.btn-login{border-color:rgba(139,92,246,.9)!important;background:rgba(7,16,55,.48)!important}
.btn-register{background:linear-gradient(135deg,#3b4de8,#7c2df3)!important;box-shadow:0 10px 26px rgba(83,45,210,.38)!important}

.site-footer{
  padding:0!important;
  background:
    radial-gradient(circle at 76% 12%,rgba(91,33,182,.32),transparent 28%),
    linear-gradient(105deg,#08173e 0%,#102263 48%,#25106a 100%)!important;
  color:rgba(255,255,255,.78)!important;
  border-top:1px solid rgba(130,148,255,.18)!important;
}
.site-footer .container{max-width:1420px}
.footer-grid{
  display:grid!important;
  grid-template-columns:minmax(260px,1.35fr) repeat(3,minmax(150px,.72fr))!important;
  gap:64px!important;
  align-items:start!important;
  padding:42px 0 34px!important;
}
.footer-intro{max-width:360px}
.footer-brand{display:inline-flex!important;align-items:center!important;gap:12px!important;color:#fff!important;text-decoration:none!important;margin-bottom:18px}
.footer-brand-mark{
  display:grid!important;place-items:center!important;
  width:44px!important;height:44px!important;min-width:44px!important;
  padding:4px!important;border-radius:13px!important;
  background:linear-gradient(145deg,#fff,#dfe7ff)!important;
  border:1px solid rgba(255,255,255,.65)!important;
  box-shadow:0 10px 28px rgba(2,6,23,.32)!important;
}
.footer-brand-mark img{width:36px!important;height:36px!important;max-width:36px!important;max-height:36px!important}
.footer-brand strong{font-size:1.08rem!important;font-weight:850!important;letter-spacing:.03em!important}
.footer-intro p{margin:0 0 18px;max-width:340px;color:rgba(255,255,255,.68);font-size:.92rem;line-height:1.65}
.footer-socials{display:flex;gap:10px}
.footer-socials a{
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  color:#fff;text-decoration:none;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.11);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}
.footer-socials a:hover{transform:translateY(-2px);background:linear-gradient(135deg,#2563eb,#7c3aed);box-shadow:0 8px 18px rgba(76,29,149,.35)}
.footer-column h2{font-size:.9rem!important;text-transform:none!important;letter-spacing:0!important;margin-bottom:10px!important}
.footer-column a{font-size:.9rem!important;color:rgba(255,255,255,.72)!important}
.footer-bottom{
  min-height:66px;padding:18px 0 22px!important;
  border-top:1px solid rgba(255,255,255,.11)!important;
  color:rgba(255,255,255,.62)!important;
}
.footer-version{font-size:.86rem;font-weight:700;color:rgba(255,255,255,.76)}

@media(max-width:1199.98px){
  .footer-grid{grid-template-columns:minmax(250px,1.3fr) repeat(3,minmax(125px,.7fr))!important;gap:34px!important}
  .brand-lockup{min-width:180px!important}
}
@media(max-width:991.98px){
  .modern-navbar .navbar-nav{margin:12px 0!important}
  .footer-grid{grid-template-columns:1.25fr 1fr 1fr!important;gap:32px!important}
  .footer-intro{grid-column:1/-1;max-width:none}
}
@media(max-width:575.98px){
  .brand-copy strong{font-size:1rem!important}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:28px 20px!important;padding:34px 0 28px!important}
  .footer-intro{grid-column:1/-1}
  .footer-column:last-child{grid-column:auto!important}
  .footer-bottom{align-items:flex-start!important;flex-direction:column!important;gap:8px!important}
}

/* 2026-08 unified page background + repaired authentication layout */
html{min-height:100%;background:#f4f7ff}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 12%,rgba(96,165,250,.22),transparent 34%),
    radial-gradient(circle at 91% 16%,rgba(192,132,252,.22),transparent 35%),
    radial-gradient(circle at 52% 88%,rgba(129,140,248,.12),transparent 38%),
    linear-gradient(135deg,#f8fbff 0%,#f3f5ff 48%,#faf5ff 100%);
  background-attachment:fixed;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(110deg,rgba(255,255,255,.30),transparent 36%,rgba(255,255,255,.26));}
.hero-section,#features,main>section:not(.premium-hero),.profile-page{background-color:transparent!important}

.auth-page{margin:0;overflow-x:hidden}
.auth-shell{min-height:100vh;padding:38px 22px;display:grid;place-items:center;background:transparent!important}
.auth-shell-register{padding-top:28px;padding-bottom:28px}
.auth-card{width:min(1080px,100%);display:grid;grid-template-columns:minmax(300px,.88fr) minmax(430px,1.12fr);overflow:hidden;border:1px solid rgba(99,102,241,.15);border-radius:28px;background:rgba(255,255,255,.86);box-shadow:0 28px 90px rgba(49,46,129,.18);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.auth-card-register{width:min(1210px,100%);grid-template-columns:minmax(330px,.82fr) minmax(610px,1.18fr)}
.auth-visual{position:relative;min-height:610px;padding:42px;display:flex;flex-direction:column;color:#fff;overflow:hidden;background:radial-gradient(circle at 10% 8%,rgba(59,130,246,.48),transparent 32%),radial-gradient(circle at 95% 30%,rgba(168,85,247,.40),transparent 40%),linear-gradient(145deg,#061642 0%,#0c1d5b 48%,#241068 100%)}
.auth-card-register .auth-visual{min-height:700px}
.auth-visual::before,.auth-visual::after{content:"";position:absolute;border-radius:50%;filter:blur(1px);opacity:.55}.auth-visual::before{width:430px;height:430px;left:-180px;bottom:-190px;border:1px solid rgba(96,165,250,.46);box-shadow:0 0 60px rgba(37,99,235,.34)}.auth-visual::after{width:330px;height:330px;right:-170px;top:120px;border:1px solid rgba(192,132,252,.42);box-shadow:0 0 70px rgba(126,34,206,.34)}
.auth-logo{position:relative;z-index:2;display:inline-flex;align-items:center;gap:13px;color:#fff;text-decoration:none}.auth-logo:hover{color:#fff}.auth-logo-frame{display:grid;place-items:center;width:58px;height:58px;padding:5px;border-radius:18px;background:linear-gradient(145deg,#fff,#dfe7ff);box-shadow:0 12px 30px rgba(2,6,23,.35)}.auth-logo-frame img{width:48px;height:48px;display:block}.auth-logo strong{font-size:1.34rem;font-weight:850;letter-spacing:.02em}
.auth-visual-copy{position:relative;z-index:2;margin:auto 0 40px}.auth-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:7px 12px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.09);font-size:.82rem;font-weight:750}.auth-visual-copy h1{max-width:400px;margin:0 0 16px;font-size:clamp(2rem,3.1vw,3.35rem);font-weight:850;line-height:1.08}.auth-visual-copy p{max-width:390px;margin:0;color:rgba(255,255,255,.73);line-height:1.7}
.auth-benefits{position:relative;z-index:2;display:grid;gap:13px}.auth-benefits span{display:flex;align-items:center;gap:11px;font-size:.9rem;color:rgba(255,255,255,.82)}.auth-benefits i{color:#a78bfa;font-size:1rem}
.auth-form-panel{position:relative;padding:52px 58px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(155deg,rgba(255,255,255,.94),rgba(247,249,255,.88))}.auth-form-panel-register{padding:34px 46px}
.auth-back{position:absolute;top:24px;right:28px;display:inline-flex;align-items:center;gap:7px;color:#64748b;text-decoration:none;font-size:.84rem;font-weight:700}.auth-back:hover{color:#4f46e5}
.auth-form-heading{margin-bottom:28px}.auth-form-heading h2{margin:0 0 8px;color:#111827;font-size:2rem;font-weight:850}.auth-form-heading p{margin:0;color:#64748b}
.auth-form{display:grid;gap:16px}.auth-register-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 18px}.auth-field{min-width:0}.auth-field-wide{grid-column:1/-1}
.auth-label{display:block;margin-bottom:7px;color:#27324a;font-size:.82rem;font-weight:750}.auth-input-wrap{position:relative}.auth-input-wrap>i{position:absolute;left:15px;top:50%;z-index:2;transform:translateY(-50%);color:#7c83a3}.auth-input-wrap .form-control{padding-left:44px!important}
.auth-form .form-control,.auth-form .form-select{width:100%;min-height:49px;margin:0!important;border:1px solid #d8def1!important;border-radius:11px!important;background:rgba(255,255,255,.84)!important;color:#172033!important;font-size:.91rem!important;box-shadow:none!important;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.auth-form .form-control:focus,.auth-form .form-select:focus{border-color:#7567ed!important;background:#fff!important;box-shadow:0 0 0 4px rgba(99,102,241,.11)!important}
.auth-options{display:flex;align-items:center;justify-content:space-between;margin-top:1px;color:#475569;font-size:.86rem}.auth-options label{display:flex;align-items:center;gap:7px;cursor:pointer}.auth-options input{accent-color:#6d4bf2}
.auth-submit{width:100%;min-height:50px;margin-top:5px;border:0;border-radius:11px;color:#fff;font-weight:800;background:linear-gradient(135deg,#6d28d9 0%,#4f46e5 48%,#2563eb 100%);box-shadow:0 12px 28px rgba(79,70,229,.26);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.auth-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 17px 34px rgba(79,70,229,.34);filter:saturate(1.12)}.auth-submit:disabled{opacity:.7}
.auth-switch{margin:24px 0 0;text-align:center;color:#64748b;font-size:.88rem}.auth-switch a{color:#6d28d9;font-weight:800;text-decoration:none}.auth-switch a:hover{text-decoration:underline}
#errorBox{border-radius:10px;padding:10px 12px;font-size:.86rem}
@media(max-width:991.98px){.auth-card,.auth-card-register{grid-template-columns:1fr;width:min(680px,100%)}.auth-visual,.auth-card-register .auth-visual{min-height:auto;padding:30px}.auth-visual-copy{margin:45px 0 28px}.auth-benefits{grid-template-columns:repeat(3,1fr);gap:8px}.auth-benefits span{font-size:.78rem}.auth-form-panel,.auth-form-panel-register{padding:44px 34px}.auth-back{top:18px;right:20px}}
@media(max-width:620px){.auth-shell{padding:16px}.auth-card{border-radius:21px}.auth-visual{padding:24px}.auth-logo-frame{width:50px;height:50px}.auth-logo-frame img{width:41px;height:41px}.auth-visual-copy h1{font-size:1.8rem}.auth-benefits{grid-template-columns:1fr}.auth-form-panel,.auth-form-panel-register{padding:42px 22px 28px}.auth-register-grid{grid-template-columns:1fr}.auth-field-wide{grid-column:auto}.auth-form-heading h2{font-size:1.65rem}.auth-back{position:static;align-self:flex-end;margin-bottom:20px}}


/* 2026-08-03 final visual system: deep wave main + full-canvas authentication */
.language-flag-img{display:block;width:25px;height:17px;min-width:25px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(15,23,42,.16),0 2px 5px rgba(15,23,42,.16)}
.language-switcher .btn{display:inline-flex!important;align-items:center!important;gap:9px!important}
.language-switcher .dropdown-item{display:flex!important;align-items:center!important;gap:11px!important}

.home-page{background:#07133b!important}
.home-page .modern-navbar{position:relative;z-index:20}
.home-page .hero-section,
.home-page #features,
.home-page #about,
.home-page main{
  position:relative;
  isolation:isolate;
  color:#fff;
  background:
    radial-gradient(ellipse at 16% 3%,rgba(36,99,235,.48) 0,rgba(36,99,235,.13) 27%,transparent 50%),
    radial-gradient(ellipse at 87% 8%,rgba(126,34,206,.48) 0,rgba(126,34,206,.16) 30%,transparent 54%),
    linear-gradient(128deg,#07143d 0%,#0a1d58 42%,#17105a 70%,#300b70 100%)!important;
}
.home-page .hero-section::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:0;filter:none;
  background:
    radial-gradient(ellipse 75% 9% at 10% 24%,transparent 72%,rgba(76,126,255,.47) 73%,rgba(76,126,255,.09) 75%,transparent 77%),
    radial-gradient(ellipse 80% 11% at 94% 18%,transparent 70%,rgba(183,74,255,.46) 71%,rgba(183,74,255,.09) 73%,transparent 75%),
    linear-gradient(115deg,transparent 18%,rgba(35,111,255,.1) 38%,transparent 57%,rgba(183,53,255,.1) 76%,transparent 90%);
  opacity:.95;
}
.home-page .hero-section::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:0;filter:none;background-image:radial-gradient(circle,rgba(129,157,255,.8) 0 1px,transparent 1.5px);background-size:110px 90px;opacity:.25}
.home-page .hero-section{padding:92px 0 105px!important}
.home-page .hero-title,.home-page .section-title,.home-page .fw-bold{color:#fff!important}
.home-page .hero-text,.home-page .text-muted,.home-page #about p{color:rgba(225,232,255,.73)!important}
.home-page .hero-card,.home-page .feature-card,.home-page #about .bg-white{background:linear-gradient(150deg,rgba(9,24,67,.84),rgba(18,26,74,.72))!important;border:1px solid rgba(135,157,255,.18)!important;box-shadow:0 28px 65px rgba(0,0,0,.26)!important;color:#fff!important;backdrop-filter:blur(18px)}
.home-page .hero-card .border{border-color:rgba(164,180,255,.18)!important;background:rgba(255,255,255,.035)}
.home-page #about.bg-light{background:linear-gradient(128deg,#081641,#101c59,#251060)!important;border-color:rgba(139,157,255,.12)!important}
.home-page #features{background:linear-gradient(128deg,#07143d,#0b1950 53%,#1e105d)!important}
.home-page .feature-icon{background:linear-gradient(135deg,rgba(45,113,255,.24),rgba(145,55,255,.24))!important;color:#a9b8ff!important;border-color:rgba(145,158,255,.22)!important}
.home-page .badge.text-bg-primary{background:linear-gradient(135deg,#2563eb,#7c3aed)!important}
.home-page .btn-outline-primary{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(180,190,255,.42)!important;backdrop-filter:blur(10px)}

.auth-page{overflow-x:hidden;background:#07133b!important}
.auth-topbar{position:fixed;top:0;left:0;right:0;z-index:50;height:76px;padding:0 clamp(22px,5vw,78px);display:flex;align-items:center;justify-content:space-between;background:rgba(4,12,42,.82);border-bottom:1px solid rgba(144,159,255,.14);backdrop-filter:blur(18px);box-shadow:0 12px 35px rgba(0,0,0,.16)}
.auth-top-brand{display:inline-flex;align-items:center;gap:11px;color:#fff;text-decoration:none}.auth-top-brand:hover{color:#fff}.auth-top-brand img{width:43px;height:43px;padding:3px;border-radius:13px;background:linear-gradient(145deg,#fff,#e4e8ff);box-shadow:0 8px 22px rgba(62,40,198,.34)}.auth-top-brand strong{font-size:1.06rem;font-weight:850;letter-spacing:.02em}
.auth-topbar .language-switcher .btn{color:#fff!important;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.16)!important}
.auth-shell,.auth-shell-register{min-height:100vh!important;padding:76px 0 0!important;display:block!important;background:#07133b!important}
.auth-card,.auth-card-register{width:100%!important;max-width:none!important;min-height:calc(100vh - 76px)!important;margin:0!important;border:0!important;border-radius:0!important;display:grid!important;grid-template-columns:minmax(420px,.92fr) minmax(560px,1.08fr)!important;overflow:hidden!important;background:#fff!important;box-shadow:none!important}
.auth-visual,.auth-card-register .auth-visual{min-height:calc(100vh - 76px)!important;padding:clamp(42px,5vw,82px)!important;border-radius:0!important;background:radial-gradient(circle at 18% 15%,rgba(37,99,235,.58),transparent 33%),radial-gradient(circle at 88% 22%,rgba(147,51,234,.48),transparent 37%),linear-gradient(140deg,#05143d 0%,#0b1c58 48%,#2c0969 100%)!important}
.auth-visual::before{width:720px!important;height:280px!important;left:-220px!important;bottom:7%!important;border-radius:50%!important;border:1px solid rgba(75,125,255,.5)!important;box-shadow:0 0 80px rgba(37,99,235,.34)!important;transform:rotate(10deg)}
.auth-visual::after{width:650px!important;height:240px!important;right:-260px!important;top:26%!important;border-radius:50%!important;border:1px solid rgba(190,72,255,.45)!important;box-shadow:0 0 85px rgba(147,51,234,.36)!important;transform:rotate(-12deg)}
.auth-logo{display:none!important}
.auth-visual-copy{margin:auto 0 48px!important}.auth-visual-copy h1{max-width:570px!important;font-size:clamp(2.6rem,4.2vw,5.2rem)!important;line-height:1.02!important}.auth-visual-copy p{max-width:560px!important;font-size:1.04rem!important}.auth-kicker{padding:9px 14px!important}
.auth-benefits{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}.auth-benefits span{padding:14px 15px;border:1px solid rgba(255,255,255,.13);border-radius:14px;background:rgba(255,255,255,.06);backdrop-filter:blur(10px)}
.auth-form-panel,.auth-form-panel-register{min-height:calc(100vh - 76px)!important;padding:clamp(62px,7vw,120px) clamp(48px,8vw,145px)!important;background:radial-gradient(circle at 90% 5%,rgba(168,85,247,.13),transparent 33%),radial-gradient(circle at 8% 88%,rgba(59,130,246,.13),transparent 36%),linear-gradient(145deg,#f9fbff,#f0f4ff)!important}
.auth-form-panel>*{width:min(600px,100%);margin-left:auto;margin-right:auto}.auth-form-heading h2{font-size:clamp(2rem,3vw,3rem)!important}.auth-form-heading p{font-size:1rem}
.auth-form{gap:18px!important}.auth-form .form-control,.auth-form .form-select{min-height:56px!important;border-radius:14px!important;background:#fff!important}.auth-input-wrap>i{left:18px!important}.auth-input-wrap .form-control{padding-left:50px!important}.auth-submit{min-height:56px!important;border-radius:14px!important;font-size:1rem!important}
.auth-back{top:30px!important;right:42px!important}.auth-switch{font-size:.95rem!important}
@media(max-width:1050px){.auth-card,.auth-card-register{grid-template-columns:1fr!important}.auth-visual,.auth-card-register .auth-visual{min-height:auto!important;padding:55px 34px!important}.auth-visual-copy{margin:40px 0 34px!important}.auth-visual-copy h1{font-size:2.6rem!important}.auth-benefits{grid-template-columns:repeat(3,1fr)!important}.auth-form-panel,.auth-form-panel-register{min-height:auto!important;padding:72px 34px!important}}
@media(max-width:620px){.auth-topbar{height:68px;padding:0 16px}.auth-top-brand img{width:39px;height:39px}.auth-top-brand strong{display:none}.auth-shell,.auth-shell-register{padding-top:68px!important}.auth-card,.auth-card-register{min-height:calc(100vh - 68px)!important}.auth-visual{padding:38px 22px!important}.auth-visual-copy h1{font-size:2rem!important}.auth-benefits{grid-template-columns:1fr!important}.auth-form-panel,.auth-form-panel-register{padding:62px 20px 42px!important}.auth-register-grid{grid-template-columns:1fr!important}.auth-back{position:static!important;align-self:flex-end!important;margin-bottom:24px!important}.language-name{display:none}.auth-topbar .language-switcher .dropdown-menu{right:0;left:auto}}

/* 2026-08-03: balanced home waves + shared navbar on authentication pages */
.home-page .hero-section{
  overflow:hidden;
  background:
    radial-gradient(ellipse at 5% 8%,rgba(37,99,235,.42) 0,rgba(37,99,235,.15) 28%,transparent 52%),
    radial-gradient(ellipse at 48% 5%,rgba(49,46,129,.30) 0,transparent 43%),
    radial-gradient(ellipse at 96% 10%,rgba(147,51,234,.43) 0,rgba(126,34,206,.14) 30%,transparent 54%),
    linear-gradient(120deg,#07143d 0%,#0b1d59 38%,#17105a 68%,#310a70 100%)!important;
}
.home-page .hero-section::before{
  inset:-2% -3%!important;
  background:
    radial-gradient(ellipse 52% 13% at 4% 18%,transparent 70%,rgba(72,124,255,.52) 71.2%,rgba(72,124,255,.10) 73.2%,transparent 75%),
    radial-gradient(ellipse 58% 12% at 37% 8%,transparent 71%,rgba(87,103,255,.32) 72.1%,rgba(87,103,255,.07) 74%,transparent 76%),
    radial-gradient(ellipse 58% 13% at 72% 25%,transparent 70%,rgba(132,73,255,.32) 71.2%,rgba(132,73,255,.07) 73.2%,transparent 75%),
    radial-gradient(ellipse 55% 12% at 101% 14%,transparent 69%,rgba(193,65,255,.52) 70.2%,rgba(193,65,255,.10) 72.3%,transparent 74.5%),
    linear-gradient(112deg,transparent 7%,rgba(38,111,255,.08) 28%,transparent 45%,rgba(99,72,255,.08) 62%,transparent 76%,rgba(185,54,255,.09) 91%)!important;
  background-size:100% 100%!important;
  background-position:center!important;
  opacity:1!important;
}
.home-page .hero-section::after{
  inset:0!important;
  background-image:
    radial-gradient(circle at 8% 18%,rgba(132,164,255,.85) 0 1px,transparent 1.7px),
    radial-gradient(circle at 31% 8%,rgba(103,147,255,.72) 0 1px,transparent 1.7px),
    radial-gradient(circle at 56% 24%,rgba(159,128,255,.70) 0 1px,transparent 1.7px),
    radial-gradient(circle at 78% 9%,rgba(191,111,255,.75) 0 1px,transparent 1.7px),
    radial-gradient(circle at 94% 27%,rgba(202,117,255,.78) 0 1px,transparent 1.7px)!important;
  background-size:260px 190px,310px 230px,280px 210px,330px 240px,250px 180px!important;
  background-position:0 0,12% 20%,42% 0,68% 18%,92% 0!important;
  opacity:.45!important;
}

.auth-page{overflow-x:clip!important;min-width:0!important;background:#07133b!important}
.auth-page .modern-navbar{position:sticky!important;top:0!important}
.auth-page .auth-shell,.auth-page .auth-shell-register{
  width:100%!important;
  min-width:0!important;
  min-height:calc(100vh - 68px)!important;
  padding:0!important;
  overflow-x:clip!important;
  background:#07133b!important;
}
.auth-page .auth-card,.auth-page .auth-card-register{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:calc(100vh - 68px)!important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
}
.auth-page .auth-visual,.auth-page .auth-form-panel,.auth-page .auth-form-panel-register{min-width:0!important}
.auth-page .auth-form-panel>*{max-width:600px!important;width:100%!important}
.auth-page .auth-register-grid{min-width:0!important}
.auth-page .auth-field{min-width:0!important}
.auth-page .auth-field input,.auth-page .auth-field select{width:100%!important;min-width:0!important}
.auth-page .auth-back{display:none!important}
@media(max-width:1199.98px){
  .auth-page .auth-card,.auth-page .auth-card-register{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important}
  .auth-page .auth-form-panel,.auth-page .auth-form-panel-register{padding:64px clamp(28px,5vw,72px)!important}
}
@media(max-width:991.98px){
  .auth-page .auth-card,.auth-page .auth-card-register{grid-template-columns:1fr!important}
  .auth-page .auth-visual,.auth-page .auth-card-register .auth-visual{min-height:auto!important}
  .auth-page .auth-form-panel,.auth-page .auth-form-panel-register{min-height:auto!important}
}
@media(max-width:575.98px){
  .auth-page .auth-shell,.auth-page .auth-shell-register{padding:0!important}
  .auth-page .auth-card,.auth-page .auth-card-register{min-height:auto!important}
}

/* 2026-08-03 verified layout repair: full-width hero artwork + viewport-safe auth pages */
.home-page .hero-section{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:
    radial-gradient(ellipse 42% 58% at 4% 10%,rgba(37,99,235,.38),transparent 72%),
    radial-gradient(ellipse 34% 48% at 38% 3%,rgba(49,46,129,.28),transparent 74%),
    radial-gradient(ellipse 38% 54% at 70% 10%,rgba(109,40,217,.25),transparent 74%),
    radial-gradient(ellipse 44% 62% at 99% 8%,rgba(147,51,234,.40),transparent 72%),
    linear-gradient(118deg,#06143d 0%,#0a1e58 38%,#18105c 68%,#330a72 100%)!important;
}
.home-page .hero-section::before{
  content:""!important;
  position:absolute!important;
  inset:-8% -6%!important;
  z-index:-1!important;
  pointer-events:none!important;
  border-radius:0!important;
  filter:none!important;
  opacity:.92!important;
  background:
    radial-gradient(ellipse 37% 8% at 2% 23%,transparent 68%,rgba(79,131,255,.62) 69.2%,rgba(79,131,255,.14) 71.3%,transparent 73.5%),
    radial-gradient(ellipse 39% 8% at 29% 10%,transparent 68%,rgba(70,104,255,.42) 69.2%,rgba(70,104,255,.10) 71.2%,transparent 73.4%),
    radial-gradient(ellipse 40% 8% at 55% 27%,transparent 68%,rgba(121,83,255,.38) 69.2%,rgba(121,83,255,.09) 71.2%,transparent 73.4%),
    radial-gradient(ellipse 40% 8% at 79% 11%,transparent 68%,rgba(166,64,255,.44) 69.2%,rgba(166,64,255,.10) 71.2%,transparent 73.4%),
    radial-gradient(ellipse 38% 8% at 103% 24%,transparent 68%,rgba(208,69,255,.62) 69.2%,rgba(208,69,255,.14) 71.3%,transparent 73.5%)!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-position:center!important;
}
.home-page .hero-section::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  border-radius:0!important;
  filter:none!important;
  opacity:.42!important;
  background-image:
    radial-gradient(circle at 6% 18%,rgba(147,177,255,.95) 0 1.2px,transparent 1.8px),
    radial-gradient(circle at 22% 7%,rgba(113,155,255,.85) 0 1px,transparent 1.7px),
    radial-gradient(circle at 39% 25%,rgba(134,137,255,.76) 0 1px,transparent 1.7px),
    radial-gradient(circle at 58% 8%,rgba(169,117,255,.80) 0 1px,transparent 1.7px),
    radial-gradient(circle at 76% 24%,rgba(193,101,255,.82) 0 1px,transparent 1.7px),
    radial-gradient(circle at 94% 10%,rgba(219,116,255,.90) 0 1.2px,transparent 1.8px)!important;
  background-size:240px 170px,280px 210px,255px 185px,300px 220px,260px 190px,235px 175px!important;
  background-position:0 0,17% 12%,35% 0,55% 13%,75% 0,96% 12%!important;
  background-repeat:repeat!important;
}

.auth-page{
  width:100%!important;
  min-width:0!important;
  overflow-x:hidden!important;
  background:#07133b!important;
}
.auth-page .modern-navbar{position:sticky!important;top:0!important;z-index:1050!important}
.auth-page .auth-shell,
.auth-page .auth-shell-register{
  width:100%!important;
  min-width:0!important;
  min-height:calc(100svh - 78px)!important;
  padding:0!important;
  margin:0!important;
  display:block!important;
  overflow:visible!important;
  background:#07133b!important;
}
.auth-page .auth-card,
.auth-page .auth-card-register{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  min-height:calc(100svh - 78px)!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(0,44%) minmax(0,56%)!important;
  background:#fff!important;
}
.auth-page .auth-visual,
.auth-page .auth-card-register .auth-visual{
  min-width:0!important;
  min-height:calc(100svh - 78px)!important;
  padding:clamp(38px,4.5vw,76px)!important;
  justify-content:center!important;
}
.auth-page .auth-visual-copy{margin:0 0 42px!important}
.auth-page .auth-visual-copy h1{font-size:clamp(2.2rem,3.6vw,4.5rem)!important;max-width:650px!important}
.auth-page .auth-benefits{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.auth-page .auth-form-panel,
.auth-page .auth-form-panel-register{
  width:100%!important;
  min-width:0!important;
  min-height:calc(100svh - 78px)!important;
  padding:clamp(34px,4.5vw,72px) clamp(32px,7vw,118px)!important;
  justify-content:center!important;
  overflow:visible!important;
}
.auth-page .auth-form-panel>*{width:min(680px,100%)!important;max-width:680px!important;margin-left:auto!important;margin-right:auto!important}
.auth-page .auth-card-register .auth-form-panel>*{width:min(760px,100%)!important;max-width:760px!important}
.auth-page .auth-form-heading{margin-bottom:22px!important}
.auth-page .auth-form{gap:14px!important}
.auth-page .auth-register-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px 16px!important}
.auth-page .auth-form .form-control,
.auth-page .auth-form .form-select{min-height:50px!important}
.auth-page .auth-submit{min-height:50px!important}
.auth-page .auth-back{display:none!important}

@media (max-width:991.98px){
  .auth-page .auth-card,
  .auth-page .auth-card-register{grid-template-columns:1fr!important;min-height:auto!important}
  .auth-page .auth-visual,
  .auth-page .auth-card-register .auth-visual{min-height:auto!important;padding:42px 28px!important}
  .auth-page .auth-visual-copy{margin:0 0 28px!important}
  .auth-page .auth-visual-copy h1{font-size:2.35rem!important}
  .auth-page .auth-form-panel,
  .auth-page .auth-form-panel-register{min-height:auto!important;padding:48px 28px!important}
}
@media (max-width:620px){
  .auth-page .auth-benefits{grid-template-columns:1fr!important}
  .auth-page .auth-register-grid{grid-template-columns:1fr!important}
  .auth-page .auth-field-wide{grid-column:auto!important}
  .auth-page .auth-form-panel,
  .auth-page .auth-form-panel-register{padding:38px 18px!important}
}

/* v15 — exact viewport authentication layout and full-width wave background */
:root{--barkodsal-navbar-height:72px}
.home-page main{
  background:#071b57 url('/pic/barkodsal-wave-background.svg?v=15') center top/cover no-repeat!important;
}
.home-page .hero-section,
.home-page #features,
.home-page #about{
  background:transparent!important;
}
.home-page .hero-section::before,
.home-page .hero-section::after{
  content:none!important;
  display:none!important;
}
.home-page #features,
.home-page #about{
  position:relative;
}

@media (min-width:992px){
  .auth-page{
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
  }
  .auth-page .modern-navbar{
    position:relative!important;
    height:var(--barkodsal-navbar-height)!important;
    min-height:var(--barkodsal-navbar-height)!important;
    padding:0!important;
    flex:0 0 var(--barkodsal-navbar-height)!important;
  }
  .auth-page .modern-navbar>.container{height:100%!important}
  .auth-page .auth-shell,
  .auth-page .auth-shell-register{
    height:calc(100dvh - var(--barkodsal-navbar-height))!important;
    min-height:0!important;
    max-height:calc(100dvh - var(--barkodsal-navbar-height))!important;
    overflow:hidden!important;
  }
  .auth-page .auth-card,
  .auth-page .auth-card-register{
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    grid-template-columns:minmax(0,48%) minmax(0,52%)!important;
    background:#071b57 url('/pic/barkodsal-wave-background.svg?v=15') center/cover no-repeat!important;
  }
  .auth-page .auth-visual,
  .auth-page .auth-card-register .auth-visual{
    height:100%!important;
    min-height:0!important;
    padding:clamp(32px,4vw,72px)!important;
    background:transparent!important;
  }
  .auth-page .auth-visual::before,
  .auth-page .auth-visual::after{display:none!important}
  .auth-page .auth-form-panel,
  .auth-page .auth-form-panel-register{
    height:100%!important;
    min-height:0!important;
    padding:clamp(24px,3vw,52px) clamp(28px,5vw,84px)!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    background:linear-gradient(145deg,rgba(7,18,53,.80),rgba(17,28,72,.76))!important;
    border-left:1px solid rgba(190,200,255,.16)!important;
    backdrop-filter:blur(22px)!important;
    -webkit-backdrop-filter:blur(22px)!important;
    color:#fff!important;
  }
  .auth-page .auth-form-panel::-webkit-scrollbar{width:7px}
  .auth-page .auth-form-panel::-webkit-scrollbar-thumb{background:rgba(139,92,246,.45);border-radius:999px}
  .auth-page .auth-form-heading{margin-bottom:18px!important}
  .auth-page .auth-form-heading h2,
  .auth-page .auth-label{color:#fff!important}
  .auth-page .auth-form-heading p,
  .auth-page .auth-options,
  .auth-page .auth-switch{color:rgba(226,232,255,.76)!important}
  .auth-page .auth-form{gap:11px!important}
  .auth-page .auth-register-grid{gap:9px 14px!important}
  .auth-page .auth-label{margin-bottom:5px!important}
  .auth-page .auth-form .form-control,
  .auth-page .auth-form .form-select{
    min-height:46px!important;
    background:rgba(7,18,52,.56)!important;
    border-color:rgba(167,180,255,.24)!important;
    color:#fff!important;
  }
  .auth-page .auth-form .form-control::placeholder{color:rgba(220,226,255,.55)!important}
  .auth-page .auth-form .form-select{color:#fff!important;color-scheme:dark}
  .auth-page .auth-input-wrap>i{color:#a9b8ff!important}
  .auth-page .auth-submit{
    min-height:48px!important;
    margin-top:3px!important;
    color:#fff!important;
    background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 48%,#2563eb 100%)!important;
    box-shadow:0 13px 32px rgba(61,45,220,.38)!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .auth-page .auth-submit:hover{filter:brightness(1.13)!important}
  .auth-page .auth-switch{margin-top:13px!important}
  .auth-page .auth-switch a{color:#c084fc!important}
  .auth-page .auth-visual-copy{margin:0 0 34px!important}
  .auth-page .auth-visual-copy h1{font-size:clamp(2.4rem,4vw,4.8rem)!important}
  .auth-page .auth-benefits span{background:rgba(255,255,255,.07)!important}
}

@media (max-width:991.98px){
  .auth-page{overflow-x:hidden!important;overflow-y:auto!important}
  .auth-page .auth-shell,
  .auth-page .auth-shell-register{min-height:calc(100dvh - 72px)!important;background:#071b57 url('/pic/barkodsal-wave-background.svg?v=15') center/cover fixed no-repeat!important}
  .auth-page .auth-card,
  .auth-page .auth-card-register{background:transparent!important}
  .auth-page .auth-visual,
  .auth-page .auth-card-register .auth-visual{background:transparent!important}
  .auth-page .auth-form-panel,
  .auth-page .auth-form-panel-register{background:rgba(8,18,52,.84)!important;color:#fff!important}
  .auth-page .auth-form-heading h2,.auth-page .auth-label{color:#fff!important}
  .auth-page .auth-form-heading p,.auth-page .auth-options,.auth-page .auth-switch{color:rgba(226,232,255,.76)!important}
  .auth-page .auth-form .form-control,.auth-page .auth-form .form-select{background:rgba(7,18,52,.6)!important;color:#fff!important;border-color:rgba(167,180,255,.24)!important}
  .auth-page .auth-form .form-control::placeholder{color:rgba(220,226,255,.55)!important}
}

/* v16 — one shared background + exact shared navbar on home/login/register */
:root{
  --barkodsal-wave-bg: url('/pic/barkodsal-wave-background.svg?v=16');
}

/* HOME: background belongs to a real main wrapper, so it always renders */
.home-page .site-main{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:#071b57!important;
  background-image:var(--barkodsal-wave-bg)!important;
  background-position:center top!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
.home-page .site-main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 18%,rgba(37,99,235,.18),transparent 30%),
    radial-gradient(circle at 84% 28%,rgba(147,51,234,.18),transparent 34%);
}
.home-page .site-main > section{
  position:relative;
  background:transparent!important;
}
.home-page .site-main .hero-section,
.home-page .site-main #features,
.home-page .site-main #about{
  background:transparent!important;
}
.home-page .site-main .hero-title,
.home-page .site-main .section-title,
.home-page .site-main h1,
.home-page .site-main h2,
.home-page .site-main h3,
.home-page .site-main h4,
.home-page .site-main h5{color:#fff!important}
.home-page .site-main .hero-text,
.home-page .site-main .text-muted,
.home-page .site-main p{color:rgba(226,232,255,.74)!important}
.home-page .site-main .hero-card,
.home-page .site-main .feature-card,
.home-page .site-main #about .bg-white{
  background:linear-gradient(145deg,rgba(8,20,58,.82),rgba(24,24,82,.74))!important;
  border:1px solid rgba(165,180,252,.18)!important;
  color:#fff!important;
  box-shadow:0 24px 60px rgba(2,6,23,.30)!important;
  backdrop-filter:blur(15px);
}
.home-page .site-main .border{border-color:rgba(165,180,252,.20)!important}
.home-page .site-main hr{border-color:rgba(165,180,252,.20)!important}
.home-page .site-main .btn-outline-primary{color:#fff;border-color:rgba(191,219,254,.58)}
.home-page .site-main .btn-outline-primary:hover{background:#fff;color:#312e81}

/* AUTH: use the exact same shared navbar without page-specific resizing */
@media (min-width:992px){
  .auth-page{
    min-height:100dvh!important;
    height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:#071b57!important;
  }
  .auth-page .modern-navbar{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:0!important;
    flex:0 0 auto!important;
    padding:14px 0!important;
  }
  .auth-page .modern-navbar>.container{height:auto!important}
  .auth-page .auth-shell,
  .auth-page .auth-shell-register{
    flex:1 1 auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    background-color:#071b57!important;
    background-image:var(--barkodsal-wave-bg)!important;
    background-position:center!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
  }
  .auth-page .auth-card,
  .auth-page .auth-card-register{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    background:transparent!important;
    grid-template-columns:minmax(0,50%) minmax(0,50%)!important;
  }
  .auth-page .auth-visual,
  .auth-page .auth-card-register .auth-visual{
    height:100%!important;
    min-height:0!important;
    background:transparent!important;
  }
  .auth-page .auth-form-panel,
  .auth-page .auth-form-panel-register{
    height:100%!important;
    min-height:0!important;
    overflow-y:auto!important;
    background:linear-gradient(145deg,rgba(5,13,43,.78),rgba(16,24,70,.72))!important;
  }
}

/* Keep the same background on smaller screens too. */
@media (max-width:991.98px){
  .auth-page{
    min-height:100dvh!important;
    background:#071b57 var(--barkodsal-wave-bg) center/cover fixed no-repeat!important;
  }
  .auth-page .auth-shell,
  .auth-page .auth-shell-register,
  .auth-page .auth-card,
  .auth-page .auth-card-register,
  .auth-page .auth-visual{
    background:transparent!important;
  }
}

/* v17 — single shared visual system on every page */
:root{
  --site-bg-image:url('/pic/barkodsal-unified-background.svg?v=17');
  --site-navbar-height:72px;
}
html,body{min-height:100%;background:#071746!important}
body{
  background-color:#071746!important;
  background-image:var(--site-bg-image)!important;
  background-position:center top!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}
body::before{display:none!important}

/* One navbar component, one size, on every page. */
.modern-navbar,
.home-page .modern-navbar,
.auth-page .modern-navbar{
  position:sticky!important;
  top:0!important;
  z-index:1050!important;
  width:100%!important;
  height:var(--site-navbar-height)!important;
  min-height:var(--site-navbar-height)!important;
  max-height:var(--site-navbar-height)!important;
  padding:0!important;
  margin:0!important;
  flex:0 0 var(--site-navbar-height)!important;
  background:linear-gradient(90deg,rgba(3,11,37,.96),rgba(7,18,58,.95) 52%,rgba(25,8,70,.96))!important;
  border-bottom:1px solid rgba(139,154,255,.18)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(18px) saturate(135%)!important;
}
.modern-navbar>.container,
.auth-page .modern-navbar>.container{
  width:100%!important;
  max-width:1320px!important;
  height:100%!important;
  min-height:0!important;
  padding-left:18px!important;
  padding-right:18px!important;
  display:flex!important;
  align-items:center!important;
}
.brand-lockup{height:100%!important;min-width:225px!important;margin:0!important;padding:0!important}
.brand-mark{width:43px!important;height:43px!important;flex:0 0 43px!important}
.brand-program-icon{width:42px!important;height:42px!important;display:block!important}
.modern-navbar .navbar-collapse{height:100%!important;align-items:center!important}
.modern-navbar .navbar-nav{align-items:center!important}
.modern-navbar .navbar-actions{align-items:center!important}
.modern-navbar .nav-link{white-space:nowrap!important}

/* Same full-canvas background on home, login and register. */
.home-page .site-main,
.auth-page .auth-shell,
.auth-page .auth-shell-register{
  position:relative!important;
  isolation:isolate!important;
  background-color:#071746!important;
  background-image:var(--site-bg-image)!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}
.home-page .site-main::before{display:none!important}
.home-page .site-main{min-height:calc(100dvh - var(--site-navbar-height))!important}
.home-page .site-main>section{background:transparent!important}

/* Auth pages use only this background; no second background/card canvas. */
.auth-page{
  min-height:100dvh!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow-x:hidden!important;
  background:#071746 var(--site-bg-image) center/cover fixed no-repeat!important;
}
.auth-page .auth-shell,
.auth-page .auth-shell-register{
  flex:1 1 auto!important;
  width:100%!important;
  min-height:calc(100dvh - var(--site-navbar-height))!important;
  height:auto!important;
  max-height:none!important;
  padding:clamp(24px,3vw,46px)!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
.auth-page .auth-card,
.auth-page .auth-card-register{
  width:min(1320px,100%)!important;
  height:auto!important;
  min-height:min(720px,calc(100dvh - var(--site-navbar-height) - 48px))!important;
  max-height:none!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)!important;
  overflow:hidden!important;
  border:1px solid rgba(151,166,255,.18)!important;
  border-radius:26px!important;
  background:rgba(5,13,43,.62)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(18px)!important;
}
.auth-page .auth-card-register{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important}
.auth-page .auth-visual,
.auth-page .auth-card-register .auth-visual{
  min-height:0!important;
  height:auto!important;
  padding:clamp(34px,4vw,70px)!important;
  background:rgba(4,16,56,.20)!important;
}
.auth-page .auth-visual::before,
.auth-page .auth-visual::after{display:none!important}
.auth-page .auth-form-panel,
.auth-page .auth-form-panel-register{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  padding:clamp(32px,4vw,64px)!important;
  color:#fff!important;
  background:linear-gradient(145deg,rgba(4,13,43,.82),rgba(16,19,67,.76))!important;
}
.auth-page .auth-form-panel-register{padding:32px clamp(28px,3.5vw,54px)!important}
.auth-page .auth-form-heading h2,.auth-page .auth-label{color:#fff!important}
.auth-page .auth-form-heading p,.auth-page .auth-options,.auth-page .auth-switch{color:rgba(226,232,255,.76)!important}
.auth-page .auth-form .form-control,.auth-page .auth-form .form-select{
  background:rgba(5,18,55,.74)!important;
  border-color:rgba(165,180,252,.24)!important;
  color:#fff!important;
}
.auth-page .auth-form .form-control::placeholder{color:rgba(225,231,255,.55)!important}
.auth-page .auth-submit{display:block!important;visibility:visible!important;opacity:1!important;color:#fff!important}

@media(max-width:991.98px){
  :root{--site-navbar-height:68px}
  .modern-navbar,.home-page .modern-navbar,.auth-page .modern-navbar{
    height:auto!important;min-height:var(--site-navbar-height)!important;max-height:none!important;
  }
  .modern-navbar>.container,.auth-page .modern-navbar>.container{min-height:var(--site-navbar-height)!important;height:auto!important}
  .modern-navbar .navbar-collapse{height:auto!important;padding:14px 0 18px!important}
  .auth-page{display:block!important;overflow-y:auto!important}
  .auth-page .auth-shell,.auth-page .auth-shell-register{min-height:calc(100dvh - var(--site-navbar-height))!important;padding:18px!important}
  .auth-page .auth-card,.auth-page .auth-card-register{grid-template-columns:1fr!important;min-height:0!important}
  .auth-page .auth-form-panel,.auth-page .auth-form-panel-register{overflow:visible!important}
}

/* v18 — authentication form surface now follows the Barkodsal theme */
.auth-page .auth-form-panel,
.auth-page .auth-form-panel-register{
  background:
    radial-gradient(circle at 92% 8%,rgba(124,58,237,.22),transparent 34%),
    radial-gradient(circle at 8% 92%,rgba(37,99,235,.20),transparent 38%),
    linear-gradient(145deg,rgba(7,20,59,.97) 0%,rgba(11,27,78,.96) 48%,rgba(35,16,96,.95) 100%)!important;
  border-left:1px solid rgba(167,139,250,.16)!important;
}
.auth-page .auth-form .form-control,
.auth-page .auth-form .form-select{
  background:rgba(34,48,91,.92)!important;
  border-color:rgba(165,180,252,.25)!important;
  color:#f8faff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.auth-page .auth-form .form-control:focus,
.auth-page .auth-form .form-select:focus{
  background:rgba(39,54,101,.98)!important;
  border-color:#818cf8!important;
  box-shadow:0 0 0 4px rgba(99,102,241,.18)!important;
}
.auth-page .auth-form .form-control::placeholder{color:rgba(225,231,255,.60)!important}
.auth-page .auth-form .form-select:disabled{background:rgba(31,43,80,.72)!important;color:rgba(225,231,255,.64)!important;opacity:1!important}
.auth-page .auth-form .form-select option{background:#111d4b;color:#fff}
.auth-page .auth-label{color:#f8faff!important;text-shadow:0 1px 8px rgba(0,0,0,.14)}
.auth-page .auth-input-wrap>i{color:#aebcff!important}
.auth-page .auth-switch,.auth-page .auth-options,.auth-page .auth-form-heading p{color:rgba(226,232,255,.76)!important}

/* v19 — remove the remaining white/grey authentication card surface */
.auth-page .auth-card,
.auth-page .auth-card-register{
  background:
    radial-gradient(circle at 12% 12%,rgba(59,130,246,.16),transparent 34%),
    radial-gradient(circle at 88% 88%,rgba(124,58,237,.18),transparent 38%),
    linear-gradient(145deg,rgba(5,13,43,.98),rgba(10,22,67,.98) 52%,rgba(28,13,82,.98))!important;
  border:1px solid rgba(129,140,248,.48)!important;
  box-shadow:0 28px 85px rgba(1,4,20,.54),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.auth-page .auth-form-panel,
.auth-page .auth-form-panel-register{
  background:
    radial-gradient(circle at 92% 8%,rgba(124,58,237,.15),transparent 35%),
    radial-gradient(circle at 8% 92%,rgba(37,99,235,.14),transparent 38%),
    linear-gradient(145deg,rgba(7,17,52,.96),rgba(12,24,70,.96) 52%,rgba(25,15,78,.96))!important;
  border-left:1px solid rgba(129,140,248,.24)!important;
  box-shadow:inset 18px 0 45px rgba(3,7,28,.16)!important;
}
.auth-page .auth-visual,
.auth-page .auth-card-register .auth-visual{
  background:linear-gradient(145deg,rgba(4,15,52,.78),rgba(16,15,69,.70))!important;
}
@media(max-width:991.98px){
  .auth-page .auth-form-panel,
  .auth-page .auth-form-panel-register{border-left:0!important;border-top:1px solid rgba(129,140,248,.24)!important}
}


/* v20 — definitive authentication card colour; replaces the legacy light grey surface. */
body.auth-page .auth-card,body.auth-page .auth-card-register{background:linear-gradient(145deg,#071333 0%,#0b1b4d 52%,#21105f 100%)!important}
body.auth-page .auth-form-panel,body.auth-page .auth-form-panel-register{background:radial-gradient(circle at 92% 8%,rgba(124,58,237,.17),transparent 34%),radial-gradient(circle at 8% 92%,rgba(37,99,235,.15),transparent 38%),linear-gradient(145deg,#09163d 0%,#101d51 52%,#21105f 100%)!important}

/* Google OAuth registration */
.google-auth-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:50px;padding:10px 18px;border:1px solid rgba(165,180,252,.36);border-radius:14px;background:rgba(255,255,255,.96);color:#172554!important;font-weight:750;text-decoration:none!important;box-shadow:0 8px 22px rgba(2,6,23,.18);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.google-auth-button:hover{transform:translateY(-1px);border-color:rgba(129,140,248,.78);box-shadow:0 12px 28px rgba(2,6,23,.26)}
.google-auth-button svg{width:22px;height:22px;flex:0 0 22px}
.auth-divider{display:flex;align-items:center;gap:12px;margin:13px 0;color:rgba(226,232,255,.68);font-size:.84rem;font-weight:700;text-transform:uppercase}
.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:rgba(165,180,252,.24)}
.google-auth-notice{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;margin-bottom:14px;border-radius:12px;font-size:.9rem;font-weight:650;line-height:1.45}
.google-auth-success{color:#d1fae5;background:rgba(16,185,129,.14);border:1px solid rgba(52,211,153,.32)}
.google-auth-error{color:#fee2e2;background:rgba(239,68,68,.13);border:1px solid rgba(248,113,113,.3)}
.google-auth-notice i{margin-top:1px;flex:0 0 auto}
.auth-agreement{margin:4px 0 14px;color:rgba(226,232,255,.8);font-size:.84rem;line-height:1.45}
.auth-agreement>label{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.auth-agreement input{width:17px;height:17px;margin:2px 0 0;flex:0 0 17px;accent-color:#7c3aed}
.auth-agreement span{min-width:0}
.auth-agreement a{color:#c4b5fd;font-weight:750;text-decoration:underline;text-underline-offset:2px}
.auth-agreement a:hover{color:#ddd6fe}
.auth-switch + .auth-divider{margin-top:15px}
body.auth-page .auth-visual,body.auth-page .auth-card-register .auth-visual{background:linear-gradient(145deg,rgba(5,17,57,.94),rgba(20,17,78,.90))!important}

/* v21 — root fix: legacy `.auth-shell form` rule was painting the form itself light grey. */
body.auth-page .auth-shell form.auth-form,
body.auth-page .auth-shell-register form.auth-form,
body.auth-page form#registerForm,
body.auth-page form#loginForm {
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

body.auth-page .auth-form-panel,
body.auth-page .auth-form-panel-register {
  background:
    radial-gradient(circle at 92% 8%,rgba(124,58,237,.17),transparent 34%),
    radial-gradient(circle at 8% 92%,rgba(37,99,235,.15),transparent 38%),
    linear-gradient(145deg,#09163d 0%,#101d51 52%,#21105f 100%)!important;
}

/* 2026-08 Barkodsal logo sharpness/alignment fix */
.modern-navbar .brand-mark{
  overflow:visible!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:16px!important;
}
.modern-navbar .brand-program-icon{
  width:48px!important;
  height:48px!important;
  max-width:48px!important;
  max-height:48px!important;
  border-radius:16px!important;
  object-fit:contain!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  image-rendering:auto;
}
.footer-brand-mark{
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.footer-brand-mark img{
  width:54px!important;
  height:54px!important;
  max-width:54px!important;
  max-height:54px!important;
  border-radius:18px!important;
  opacity:1!important;
  filter:none!important;
}
.footer-brand-mark,.footer-brand-mark:hover{padding:0!important;border:0!important;background:transparent!important;background-image:none!important;box-shadow:none!important;filter:none!important;transform:none!important;overflow:visible!important}.footer-brand-mark img,.footer-brand-mark:hover img{display:block!important;width:54px!important;height:54px!important;max-width:54px!important;max-height:54px!important;border-radius:15px!important;opacity:1!important;filter:none!important;transform:none!important;image-rendering:auto!important}
.modern-navbar .brand-copy small{
  display:block!important;
  margin-top:4px!important;
  max-width:245px!important;
  color:rgba(255,255,255,.72)!important;
  font-size:.67rem!important;
  font-weight:600!important;
  line-height:1.08!important;
  letter-spacing:.015em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:575.98px){
  .modern-navbar .brand-copy small{display:none!important}
}

/* v22 — navbar logo now uses the exact same visual treatment as the footer logo. */
.modern-navbar .brand-lockup{
  gap:12px!important;
}
.modern-navbar .brand-mark{
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  flex:0 0 44px!important;
  padding:4px!important;
  overflow:hidden!important;
  border-radius:13px!important;
  background:linear-gradient(145deg,#fff,#dfe7ff)!important;
  border:1px solid rgba(255,255,255,.65)!important;
  box-shadow:0 10px 28px rgba(2,6,23,.32)!important;
}
.modern-navbar .brand-program-icon{
  display:block!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  max-width:36px!important;
  max-height:36px!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:11px!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}

/* Purchase page uses the shared light canvas. Page-specific styling lives in premium.css. */
body.purchase-page{min-height:100dvh!important;background:#fff!important;background-image:none!important;color:#172033!important}

@media(max-width:575.98px){
  .modern-navbar .brand-mark{width:42px!important;height:42px!important;min-width:42px!important;flex-basis:42px!important;padding:4px!important}
  .modern-navbar .brand-program-icon{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:34px!important;max-height:34px!important}
}


/* v23 — Login/Register: promotional split panel removed; forms are centered. */
body.auth-page .auth-shell,
body.auth-page .auth-shell-register{
  min-height:calc(100dvh - var(--site-navbar-height,72px))!important;
  padding:clamp(24px,4vw,56px) 20px!important;
  display:grid!important;
  place-items:center!important;
  background:#071b57 url('/pic/barkodsal-wave-background.svg?v=15') center/cover fixed no-repeat!important;
}
body.auth-page .auth-card.auth-card-centered{
  width:min(650px,100%)!important;
  max-width:650px!important;
  min-height:0!important;
  margin:auto!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  border:1px solid rgba(129,140,248,.38)!important;
  border-radius:28px!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,#071333 0%,#0b1b4d 52%,#21105f 100%)!important;
  box-shadow:0 28px 80px rgba(2,6,23,.46)!important;
}
body.auth-page .auth-card.auth-card-centered.auth-card-centered-register{
  width:min(920px,100%)!important;
  max-width:920px!important;
  transform:translateY(-14px);
}
body.auth-page .auth-card-centered .auth-form-panel,
body.auth-page .auth-card-centered .auth-form-panel-register{
  min-height:0!important;
  width:100%!important;
  padding:clamp(44px,5vw,64px)!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
}
body.auth-page .auth-card-centered .auth-form-panel-no-heading{
  padding-top:clamp(42px,4vw,54px)!important;
  padding-bottom:clamp(42px,4vw,54px)!important;
}
body.auth-page .auth-card-centered .auth-form-panel>*{
  width:100%!important;
  max-width:600px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.auth-page .auth-card-centered-register .auth-form-panel-register>*{
  max-width:760px!important;
}
@media(max-width:620px){
  body.auth-page .auth-shell,
  body.auth-page .auth-shell-register{padding:18px 12px!important}
  body.auth-page .auth-card.auth-card-centered{border-radius:22px!important}
  body.auth-page .auth-card-centered .auth-form-panel,
  body.auth-page .auth-card-centered .auth-form-panel-register{padding:38px 20px 30px!important}
  body.auth-page .auth-card-centered .auth-form-panel-no-heading{padding-top:32px!important;padding-bottom:32px!important}
  body.auth-page .auth-card.auth-card-centered.auth-card-centered-register{transform:translateY(-8px)}
}

.auth-options .forgot-password-link{margin-left:auto;color:#aebcff!important;font-weight:750;text-decoration:none;white-space:nowrap}
.auth-options .forgot-password-link:hover{color:#fff!important;text-decoration:underline}
.reset-login-success{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;padding:13px 15px;border-radius:12px;background:rgba(34,197,94,.1);border:1px solid rgba(74,222,128,.25);color:#c8fbd9;font-size:.88rem;line-height:1.5}
@media(max-width:520px){.auth-options{align-items:flex-start;gap:10px;flex-direction:column}.auth-options .forgot-password-link{margin-left:0}}


/* Navbar actions: match the raised primary-action depth used by support submit buttons. */
.modern-navbar .navbar-actions .btn-login,
.modern-navbar .navbar-actions .btn-register,
.modern-navbar .navbar-actions .language-switcher > .btn,
.modern-navbar .navbar-actions .language-switcher .dropdown-toggle{
  box-shadow:0 12px 28px rgba(79,70,229,.26)!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background-color .18s ease,border-color .18s ease!important;
}
.modern-navbar .navbar-actions .btn-login:hover,
.modern-navbar .navbar-actions .btn-register:hover,
.modern-navbar .navbar-actions .language-switcher > .btn:hover,
.modern-navbar .navbar-actions .language-switcher .dropdown-toggle:hover{
  box-shadow:0 16px 35px rgba(124,58,237,.34)!important;
  transform:translateY(-1px);
}

/* FINAL WHITE AUTH CASCADE LOCK */
html,body,body.auth-page,body.auth-page main,body.auth-page .auth-shell,body.auth-page .auth-shell-register{background:#fff!important;background-image:none!important;color:#172033!important}body.auth-page .auth-card,body.auth-page .auth-card-register,body.auth-page .auth-form-panel,body.auth-page .auth-form-panel-register,body.auth-page .auth-visual{background:#fff!important;background-image:none!important;color:#172033!important;border-color:#e2e8f0!important}body.auth-page .auth-card{box-shadow:0 22px 60px rgba(15,23,42,.11)!important}body.auth-page .auth-label,body.auth-page .auth-form-heading h1,body.auth-page .auth-form-heading h2{color:#172554!important}body.auth-page .auth-switch,body.auth-page .auth-options,body.auth-page .auth-agreement,body.auth-page .auth-agreement label{color:#667085!important}body.auth-page .auth-switch a,body.auth-page .forgot-password-link,body.auth-page .auth-back{color:#315bea!important}body.auth-page .auth-input-wrap>i{color:#5877dd!important}body.auth-page .auth-form .form-control,body.auth-page .auth-form .form-select{background:#fff!important;color:#172033!important;-webkit-text-fill-color:#172033!important;border:1px solid #d7dee9!important}body.auth-page .auth-form .form-control::placeholder{color:#98a2b3!important;-webkit-text-fill-color:#98a2b3!important;opacity:1!important}body.auth-page .auth-submit{background:#315bea!important;background-image:none!important;color:#fff!important;border-color:#315bea!important}body.auth-page .auth-submit span{color:#fff!important}body.auth-page .google-auth-button{background:#fff!important;color:#172033!important;border-color:#d7dee9!important}body.auth-page .auth-divider{color:#98a2b3!important}body.auth-page .auth-divider:before,body.auth-page .auth-divider:after{background:#e2e8f0!important}body.auth-page .modern-navbar{background:#fff!important;background-image:none!important}body.auth-page .modern-navbar .brand-copy strong{color:#172554!important}body.auth-page .modern-navbar .brand-copy small{color:#667085!important}