*{margin:0;padding:0;box-sizing:border-box;}
html{background:#fff;}
body{
  font-family:'Nunito Sans',sans-serif;background:#fff;color:#333;
  overflow-x:hidden;
  min-height:100vh;min-height:-webkit-fill-available;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
  -webkit-overflow-scrolling:touch;
}

#loginPage{display:flex;min-height:100vh;min-height:-webkit-fill-available;opacity:1;transition:opacity .5s ease;overflow:hidden;gap:0;background:#1a3a5c;}
#loginPage.fade-out{opacity:0;pointer-events:none;}
#dashPage{display:none;min-height:100vh;min-height:-webkit-fill-available;background:#fff;position:relative;opacity:0;transition:opacity .5s ease;}
#dashPage.visible{display:block;}
#dashPage.fade-in{opacity:1;}

/* ================================================
   LOGIN — HERO (LEFT PANEL)
================================================ */
.hero{
  flex:1.15;
  background:#e4eef5;
  position:relative;
  overflow:hidden;
  padding:32px 38px 0;
  display:flex;
  flex-direction:column;
  min-width:0;
  margin-right:-1px;
}
/* TR: 637×337, half offsets top:-168 right:-318 */
.hero-wv-tr{
  position:absolute;top:-168px;right:-318px;
  width:637px;height:337px;
  pointer-events:none;z-index:1;
  opacity:0.65;
  transform-origin:center center;
}
/* BL: 412×787, half offsets bottom:-393 left:-206 */
.hero-wv-bl{
  position:absolute;bottom:-393px;left:-206px;
  width:412px;height:787px;
  pointer-events:none;z-index:1;
  opacity:0.65;
  transform-origin:center center;
}
.hero-logo{position:relative;z-index:2;margin-bottom:48px;}
.hero-logo img{height:clamp(48px,5.5vw,72px);width:auto;display:block;}
.hero-h1{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:clamp(22px, 3.2vw, 49.1px);
  color:#1a3a5c;line-height:1.18;
  margin-bottom:16px;
  position:relative;z-index:2;
  max-width:52%;
}
.hero-h1 .gold{color:#f5a623;}
.hero-p{
  font-size:clamp(12px, 1.3vw, 18.8px);
  color:#1a3a5c;
  line-height:1.85;
  max-width:48%;
  position:relative;z-index:2;
  opacity:0.88;
}
.hero-photo-wrap{
  position:absolute;
  bottom:0;right:0;
  z-index:2;
  width:62%;
}
.hero-photo-wrap img{
  display:block;
  width:100%;height:auto;
  object-fit:contain;
}

/* ================================================
   LOGIN — FORM PANEL (RIGHT PANEL)
================================================ */
.form-panel{
  flex:0 0 clamp(300px, 36%, 520px);
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:clamp(32px,4vw,52px) clamp(32px,4.5vw,60px) clamp(32px,4vw,52px) clamp(28px,4vw,56px);
  min-width:300px;
  max-width:520px;
}
.f-act{
  font-family:'Poppins',sans-serif;
  font-weight:900;font-size:68px;
  color:#1a3a5c;line-height:1;
  letter-spacing:-1.5px;
}
/* FICO Ratings — GOLD, not teal */
.f-sub{
  font-family:'Poppins',sans-serif;
  font-weight:700;font-size:28px;
  color:#f5a623;
  line-height:1.1;
  margin-top:2px;
  margin-bottom:52px;
}
.f-head{
  font-family:'Poppins',sans-serif;
  font-weight:700;font-size:20px;
  color:#1a3a5c;
  text-align:center;
  margin-bottom:28px;
}
.fg{margin-bottom:22px;}
.fg-label{
  display:block;font-weight:600;font-size:11px;
  color:#1a3a5c;margin-bottom:6px;letter-spacing:0.03em;
}
.fg-input{
  width:100%;padding:9px 0;
  border:none;border-bottom:2px solid #b8cdd8;
  font-family:'Nunito Sans',sans-serif;font-size:14px;
  color:#1a3a5c;background:transparent;outline:none;
  transition:border-color .2s;
}
.fg-input::placeholder{color:#a8b8c4;font-size:13px;}
.fg-input:focus{border-bottom-color:#1a3a5c;}
.fg-input.err-ring{border-bottom-color:#d9534f!important;}
.btn-row{display:flex;justify-content:center;margin-top:16px;}
.btn-sign{
  padding:12px 30px;background:#1a3a5c;color:#fff;
  border:none;border-radius:10px;width:100%;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;
  cursor:pointer;
  transition:background .15s,transform .12s,box-shadow .15s;
  box-shadow:0 4px 14px rgba(26,58,92,.3);
}
.btn-sign:hover{background:#12304d;transform:translateY(-1px);box-shadow:0 6px 18px rgba(26,58,92,.38);}
.btn-sign:active{transform:translateY(0);}
.err-msg{
  margin-top:10px;padding:7px 10px;
  background:#fdf2f2;border:1px solid #f5cfcf;
  border-radius:5px;display:none;align-items:center;gap:6px;
}
.err-msg.show{display:flex;}
.err-msg svg{width:14px;height:14px;flex-shrink:0;}
.err-msg span{font-size:11.5px;color:#a94442;font-weight:600;}
/* Forgot — navy text, navy link, pushed to bottom */
.f-foot{
  text-align:center;margin-top:auto;padding-top:36px;
  font-size:13px;color:#1a3a5c;line-height:1.7;font-weight:500;
}
.f-foot a{color:#1a3a5c;font-weight:700;text-decoration:underline;}

/* ================================================
   DASHBOARD
================================================ */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,3vw,48px);
  border-bottom:1px solid #e8eef4;
  position:relative;z-index:1;
}
.tb-left{flex:1;}
.tb-hi{font-family:'Poppins',sans-serif;font-size:26px;color:#1a3a5c;font-weight:400;}
.tb-hi b{font-weight:800;}
.tb-sub{font-size:13px;color:#7a8a99;margin-top:2px;}
.tb-right{display:flex;align-items:center;gap:14px;}
.btn-logout{
  background:none;border:none;cursor:pointer;
  color:#1a3a5c;display:flex;align-items:center;
  justify-content:center;padding:0;width:26px;height:26px;
  opacity:0.6;transition:opacity .2s;
}
.btn-logout:hover{opacity:1;}
.btn-logout svg{width:26px;height:26px;}
.tb-logo-icon{width:42px;height:42px;display:block;object-fit:contain;}

.dash-body{
  display:flex;
  padding:2vw 3vw 4vw;
  padding-bottom:calc(4vw + env(safe-area-inset-bottom));
  position:relative;z-index:1;
  max-width:1600px;
  margin:0 auto;
  width:100%;
  box-sizing:border-box;
}
.dash-left{flex:1;min-width:0;}
.dash-right{flex:0 0 clamp(250px, 25vw, 400px);padding-left:clamp(16px,2.5vw,44px);min-width:0;}
.main-row{display:flex;align-items:flex-start;gap:clamp(16px,2vw,32px);min-width:0;}

/* Gauge */
.gauge-col{display:flex;flex-direction:column;align-items:center;flex-shrink:0;min-width:0;}
.gauge-wrap{
  position:relative;
  width:clamp(180px, 24vw, 420px);
  height:clamp(180px, 24vw, 420px);
  margin-top:8px;
}
.gauge-wrap svg{width:100%;height:100%;}
.gauge-center{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);text-align:center;
}
.gauge-val{
  font-family:'Poppins',sans-serif;
  font-weight:900;
  font-size:clamp(36px, 5.5vw, 90px);
  color:#e53935;line-height:1;
}
.gauge-label{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:clamp(14px,1.8vw,28px);
  color:#e53935;
  margin-top:clamp(2px,0.4vw,8px);
}

/* Cards column */
.cards-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;}

/* Notification card — blue-gray per PDF */
.c-notif{
  background:#cddde8;
  border-radius:16px;padding:20px 22px;
  display:flex;align-items:center;gap:16px;
  position:relative;overflow:hidden;
}
.c-notif-waves{
  position:absolute;right:-202px;bottom:-112px;
  width:405px;height:225px;
  pointer-events:none;opacity:0.25;
  transform:translateX(-10%);
  transform-origin:center center;
}
.c-notif-icon{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:#1a3a5c;
}
.c-notif-icon svg{width:38px;height:38px;}
.c-notif-body{flex:1;position:relative;z-index:1;}
.c-notif-t{font-weight:800;font-size:14px;color:#1a3a5c;}
.c-notif-d{font-size:12px;color:#3a5068;margin-top:3px;line-height:1.5;}
.btn-allow{
  padding:9px 22px;background:#1a3a5c;color:#fff;
  border:none;border-radius:10px;
  font-family:'Nunito Sans',sans-serif;font-weight:700;font-size:12px;
  cursor:pointer;flex-shrink:0;position:relative;z-index:1;
  transition:background .15s;
}
.btn-allow:hover{background:#12304d;}

/* Toggle switch */
.notif-toggle{
  position:relative;flex-shrink:0;z-index:1;
  display:inline-block;width:52px;height:28px;cursor:pointer;
}
.notif-toggle input{opacity:0;width:0;height:0;position:absolute;}
.notif-slider{
  position:absolute;inset:0;
  background:#c0cdd8;border-radius:28px;
  transition:background .25s;
}
.notif-slider::before{
  content:'';position:absolute;
  width:20px;height:20px;
  left:4px;top:4px;
  background:#fff;border-radius:50%;
  transition:transform .25s,box-shadow .25s;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.notif-toggle input:checked + .notif-slider{background:#2e7d32;}
.notif-toggle input:checked + .notif-slider::before{transform:translateX(24px);}
.notif-toggle:hover .notif-slider{filter:brightness(0.95);}

/* What does this mean — pink, NO border */
.c-meaning{
  background:#f7c8c8;
  border-radius:16px;padding:20px 24px;
}
.c-meaning h3{
  font-family:'Poppins',sans-serif;
  font-weight:700;font-size:13.5px;color:#1a3a5c;margin-bottom:12px;
}
.c-meaning p{
  font-size:12.5px;line-height:1.8;
  color:#1a3a5c;margin-bottom:8px;opacity:0.85;
}
.c-meaning p:last-child{margin-bottom:0;}

/* Further Tips */
.c-tips{
  background:#f0f3f6;border-radius:16px;padding:20px 24px;
}
.c-tips h3{
  font-family:'Poppins',sans-serif;
  font-weight:700;font-size:13.5px;color:#1a3a5c;margin-bottom:10px;
}
.c-tips p{font-size:12.5px;line-height:1.75;color:#3a5068;margin-bottom:6px;}
.c-tips p:last-child{margin-bottom:0;}

/* History — solid navy header border per PDF */
.hist-head{
  font-family:'Poppins',sans-serif;
  font-weight:800;font-size:22.5px;color:#1a3a5c;
  padding-bottom:12.5px;
  border-bottom:2.5px solid #1a3a5c;
  margin-bottom:8px;
}
.hist-row{
  display:flex;align-items:center;
  padding:12px 14px;border-radius:10px;margin-bottom:8px;gap:8px;
  flex-wrap:wrap;
}
.hist-row.neg{background:#fde8e8;}
.hist-row.pos{background:#e6fbe6;}
.hist-row:last-child{margin-bottom:0;}
.hist-badge{
  font-family:'Poppins',sans-serif;
  font-weight:800;font-size:15px;
  min-width:36px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;flex-shrink:0;color:#fff;
}
.hist-badge.neg{background:#e53935;}
.hist-badge.pos{background:#2ecc71;}
.hist-reason{
  flex:1;font-size:13px;font-weight:600;line-height:1.4;
  word-break:break-word;
}
.hist-row.neg .hist-reason{color:#c0392b;}
.hist-row.pos .hist-reason{color:#1e8449;}
.hist-date{
  font-size:11.5px;font-weight:700;
  white-space:nowrap;flex-shrink:0;
  padding:5px 10px;border-radius:6px;color:#fff;
}
.hist-row.neg .hist-date{background:#e53935;}
.hist-row.pos .hist-date{background:#2ecc71;}
.hist-row.faded{opacity:0.28;}

/* Dashboard BL wave */
.dash-wv{
  position:fixed;bottom:-393px;left:-206px;
  width:412px;height:787px;
  pointer-events:none;z-index:0;
  opacity:0.65;
  transform-origin:center center;
}

/* ================================================
   TABLET  880–1150px
================================================ */
@media(max-width:1150px) and (min-width:881px){
  .dash-body{padding:20px 24px 36px;}
  .topbar{padding:18px 24px;}
  .f-act{font-size:clamp(40px,5vw,68px);}
  .f-sub{font-size:clamp(18px,2.5vw,28px);margin-bottom:clamp(28px,3vw,52px);}
  .c-notif{padding:14px 16px;gap:12px;}
  .c-meaning{padding:16px 18px;}
  .c-tips{padding:16px 18px;}
}

/* ================================================
   MOBILE  ≤ 880px
================================================ */
@media(max-width:880px){
  /* Login mobile */
  .hero{display:none;}
  #loginPage{flex-direction:column;}
  .form-panel{
    flex:auto;min-height:100vh;min-height:-webkit-fill-available;
    padding:0 24px 48px;padding-bottom:calc(48px + env(safe-area-inset-bottom));
    max-width:100%;min-width:0;
    flex-direction:column;
    align-items:stretch;justify-content:flex-start;
    position:relative;overflow:hidden;
  }
  .form-w{
    max-width:100%;margin:0;
    padding:0 32px 48px;
    display:flex;flex-direction:column;
    min-height:100vh;
    position:relative;z-index:1;
  }
  .mob-wv-tr{
    display:block!important;
    position:absolute;top:-120px;right:-225px;
    width:450px;height:240px;
    pointer-events:none;z-index:0;
    opacity:0.55;
    transform-origin:center center;
  }
  .mob-wv-bl{
    display:block!important;
    position:absolute;bottom:-285px;left:-150px;
    width:300px;height:570px;
    pointer-events:none;z-index:0;
    opacity:0.6;
    transform-origin:center center;
  }
  /* Centered logo */
  .mob-logo-center{
    display:flex!important;
    justify-content:center;
    padding-top:26vw;margin-bottom:5vw;
    position:relative;z-index:1;
  }
  .mob-logo-center img{height:82px;width:auto;}
  /* Big gold FICO Ratings */
  .mob-fico-title{
    display:block!important;
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:min(12vw,52px);
    color:#f5a623;
    text-align:center;
    margin-bottom:8vw;
    position:relative;z-index:1;
  }
  .f-act{display:none;}
  .f-sub{display:none;}
  .f-head{font-size:22px;text-align:center!important;margin-bottom:24px;position:relative;z-index:1;}
  .form-fields{position:relative;z-index:1;}
  .fg-input{border-bottom-color:#b8cdd8!important;}
  .fg-input:focus{border-bottom-color:#1a3a5c!important;}
  .fg-input.err-ring{border-bottom-color:#d9534f!important;}
  .btn-row{justify-content:center!important;}
  .btn-sign{padding:13px 36px;border-radius:14px;font-size:15px;width:100%;}
  .f-foot{margin-top:auto;padding-top:24px;color:#1a3a5c;font-size:13px;position:relative;z-index:1;}
  .f-foot a{color:#1a3a5c;}

  /* Dashboard mobile */
  .topbar{padding:14px 18px;align-items:center;}
  .mob-topbar-logo{display:block!important;width:38px;height:38px;object-fit:contain;flex-shrink:0;}
  .topbar-left-mob{flex:1;text-align:right;padding-right:10px;}
  .tb-hi{font-size:18px;}
  .tb-sub{font-size:11.5px;}
  .dash-body{flex-direction:column;padding:0 18px 40px;}
  .dash-left{padding-top:12px;}
  .main-row{flex-direction:column;align-items:center;gap:12px;}
  .gauge-wrap{width:min(300px,85vw);height:min(300px,85vw);margin-top:4px;}
  .gauge-val{font-size:55px;}
  .gauge-label{font-size:20px;}
  .cards-col{width:100%;}
  .dash-right{flex:auto;padding-left:0;margin-top:20px;}
  .dash-wv{display:none;}
  .dash-mob-wv{
    display:block!important;
    position:absolute;top:-285px;left:-150px;
    width:300px;height:570px;
    pointer-events:none;z-index:0;
    opacity:0.65;
    transform:scale(1,1) rotate(100deg);
    transform-origin:center center;
  }
  .tb-left{display:none!important;}
}

@media(min-width:881px){
  .mob-wv-tr,.mob-wv-bl,.mob-logo-center,.mob-fico-title,
  .mob-topbar-logo,.topbar-left-mob,.dash-mob-wv{display:none!important;}
}
.pass-wrap{position:relative;}
.pass-wrap .fg-input{padding-right:36px;}
.btn-eye{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:4px;
  color:#a8b8c4;display:flex;align-items:center;
  transition:color .2s;
}
.btn-eye:hover{color:#1a3a5c;}
.btn-eye svg{width:18px;height:18px;}

.user-wrap{position:relative;overflow:hidden;}
.user-suffix{
  position:absolute;left:0;top:0;
  padding:9px 0;
  font-family:'Nunito Sans',sans-serif;font-size:14px;
  color:rgba(26,58,92,0.7);
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
}


/* Remember me checkbox */
.remember-row{margin-top:14px;margin-bottom:4px;position:relative;z-index:1;}
.remember-label{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  font-size:13px;color:#1a3a5c;font-weight:500;
  user-select:none;-webkit-user-select:none;
}
.remember-label input{position:absolute;opacity:0;width:0;height:0;}
.remember-box{
  width:20px;height:20px;border-radius:5px;
  border:2px solid #b8cdd8;background:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:all .2s;
}
.remember-box::after{
  content:'';display:block;width:5px;height:10px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(0);transition:transform .15s;
  margin-top:-2px;
}
.remember-label input:checked ~ .remember-box{
  background:#1a3a5c;border-color:#1a3a5c;
}
.remember-label input:checked ~ .remember-box::after{
  transform:rotate(45deg) scale(1);
}
.remember-label:hover .remember-box{border-color:#1a3a5c;}
.remember-text{line-height:1;}

/* ================================================
   VERY SMALL PHONES ≤ 380px
================================================ */
@media(max-width:380px){
  .mob-logo-center{padding-top:20vw;margin-bottom:4vw;}
  .mob-logo-center img{height:64px;}
  .mob-fico-title{font-size:38px!important;margin-bottom:6vw;}
  .f-head{font-size:18px!important;}
  .form-panel{padding:0 18px 36px!important;}
  .gauge-val{font-size:44px!important;}
  .gauge-label{font-size:16px!important;}
  .hist-date{font-size:10px;padding:4px 7px;}
  .hist-badge{min-width:30px;height:24px;font-size:13px;}
  .hist-reason{font-size:11.5px;}
  .topbar{padding:12px 14px;}
  .tb-hi{font-size:16px!important;}
  .dash-body{padding:0 14px 30px!important;}
}