:root{
  --pp-navy:#071B67;
  --pp-gold:#E5A800;
  --pp-ink:#00164f;
  --pp-muted:#5f6b8a;
  --pp-line:#dbe4f2;
  --pp-bg:#f5f8fc;
  --pp-danger:#a8071a;
  --pp-danger-bg:#fff1f0;
  --pp-success:#087047;
  --pp-success-bg:#ecfbf4;
}
.pp-auth-page{min-height:80vh;background:#f5f8fc;padding:70px 20px;color:var(--pp-ink);}
.pp-auth-card{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--pp-line);border-radius:24px;padding:36px;box-shadow:0 24px 70px rgba(7,27,103,.08);}
.pp-auth-wide{max-width:860px;}
.pp-auth-eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:900;color:var(--pp-navy);margin-bottom:14px;}
.pp-auth-eyebrow span{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff3cc;color:#b98200;}
.pp-auth-title{font-size:42px;line-height:1;margin:0 0 12px;color:var(--pp-navy);font-weight:900;}
.pp-auth-sub{color:#52628a;font-weight:600;line-height:1.6;margin-bottom:24px;}
.pp-auth-form{display:grid;gap:16px;}
.pp-auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.pp-auth-label{font-weight:900;color:var(--pp-navy);}
.pp-auth-input,.pp-auth-select{width:100%;box-sizing:border-box;border:1px solid var(--pp-line);border-radius:14px;padding:15px 16px;font-size:16px;font-weight:700;background:#fff;}
.pp-password-wrap{position:relative;}
.pp-password-wrap .pp-auth-input{padding-right:54px;}
.pp-show-pass{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:#eef4ff;color:var(--pp-navy);font-weight:900;border-radius:10px;padding:8px 10px;cursor:pointer;}
.pp-auth-btn{border:0;border-radius:14px;background:var(--pp-navy);color:#fff;font-weight:900;padding:16px 22px;cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;}
.pp-auth-btn-outline{background:#fff;color:var(--pp-navy);border:1px solid var(--pp-navy);}
.pp-auth-alert{border-radius:14px;padding:14px;margin-bottom:18px;font-weight:700;line-height:1.5;}
.pp-auth-error{background:var(--pp-danger-bg);border:1px solid #ffccc7;color:var(--pp-danger);}
.pp-auth-success{background:var(--pp-success-bg);border:1px solid #b9ecd5;color:var(--pp-success);}
.pp-auth-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:2px;}
.pp-auth-links a{color:var(--pp-navy);font-weight:900;text-decoration:none;}
@media(max-width:680px){
  .pp-auth-card{padding:24px;}
  .pp-auth-title{font-size:34px;}
  .pp-auth-grid{grid-template-columns:1fr;}
}


/* Enterprise auth clarity + business signup panels */
.auth-form input,.auth-form select,.pp-auth-input,.pp-auth-select{color:#00164f !important;background:#ffffff !important;border-color:#b8c5dc !important;font-weight:800 !important;-webkit-text-fill-color:#00164f;}
.auth-form input::placeholder,.pp-auth-input::placeholder{color:#5f6f92 !important;opacity:1 !important;font-weight:700 !important;}
.auth-form input:focus,.auth-form select:focus,.pp-auth-input:focus,.pp-auth-select:focus{border-color:#071b67 !important;box-shadow:0 0 0 4px rgba(7,27,103,.12) !important;}
.role-card{color:#00164f !important;background:#fff !important;}
.role-card b{color:#00164f !important;}
.role-card small{color:#223467 !important;}
.role-card.active{border-color:#e48700 !important;background:#fff8ec !important;box-shadow:0 0 0 2px rgba(228,135,0,.18) !important;}
.signup-panel{display:none;gap:18px;padding:18px;border:1px solid #d8dfec;border-radius:10px;background:#fbfdff;}
.signup-panel.active{display:grid;}
.signup-panel[hidden]{display:none !important;}
.auth-panel-note{border-left:4px solid #e48700;background:#fff8ec;border-radius:8px;padding:12px 14px;color:#00164f;font-size:13px;line-height:1.5;font-weight:800;}
.auth-divider,.social-btn{display:none !important;}


/* Round 6: robust account-type tab behavior */
.role-grid .role-card{appearance:none;-webkit-appearance:none;border:1px solid #d8dfec;text-align:left;width:100%;font-family:inherit;min-height:74px;height:auto!important;}
.role-grid button.role-card{background:#fff;}
.role-grid button.role-card:focus-visible{outline:3px solid rgba(228,135,0,.30);outline-offset:3px;}
.role-grid button.role-card.active{border-color:#e48700!important;background:#fff8ec!important;box-shadow:0 0 0 2px rgba(228,135,0,.18)!important;}


/* Round 7: force registration role cards to be clickable above all auth-page decoration */
.auth-card,.pp-auth-card,.auth-form,.pp-auth-form,#signupForm,#signupRoleGrid,.role-grid{position:relative;z-index:20;}
.role-grid{pointer-events:auto!important;}
.role-grid .role-card,.role-grid button.role-card{pointer-events:auto!important;cursor:pointer!important;position:relative;z-index:25;touch-action:manipulation;}
.role-grid .role-card *{pointer-events:none;}
.signup-panel[hidden]{display:none!important;}
.signup-panel.active{display:grid!important;}

/* Fundraiser/investor onboarding rebuild: visible password controls + guided next steps */
.auth-form .pass-wrap{position:relative;display:flex;align-items:center;}
.auth-form .pass-wrap input{width:100%;padding-right:72px!important;}
.auth-form .pass-wrap span{display:none!important;}
.auth-form .pass-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:1px solid #d8dfec;background:#f8fbff;color:#071b67;border-radius:10px;padding:7px 10px;font-weight:900;cursor:pointer;line-height:1;}
.auth-form .pass-toggle:hover{background:#071b67;color:#fff;border-color:#071b67;}
.auth-signup .role-card{align-items:center;gap:12px;}
.auth-signup .role-card.active{border-color:#e48700!important;background:#fff8ec!important;}
.auth-signup .signup-panel{border-radius:14px!important;background:#fbfdff!important;}
.auth-signup .auth-panel-note b{color:#071b67;}
.pp-onboarding-page{background:#f5f8fc;min-height:75vh;padding:48px 5vw 72px;color:#00164f;}
.pp-onboarding-hero{max-width:1180px;margin:0 auto 26px;padding:34px;border-radius:24px;background:linear-gradient(135deg,#061a55,#063f35);color:#fff;display:flex;justify-content:space-between;gap:24px;align-items:center;box-shadow:0 22px 60px rgba(0,20,70,.16);}
.pp-onboarding-hero h1{margin:8px 0 10px;font-size:38px;line-height:1;color:#fff!important;}
.pp-onboarding-hero p{margin:0;max-width:760px;color:#fff!important;opacity:.94;line-height:1.65;font-weight:650;}
.pp-onboarding-kicker{display:inline-flex;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:7px 12px;font-weight:900;background:rgba(255,255,255,.08);}
.pp-onboarding-btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border:1px solid rgba(255,255,255,.5);border-radius:14px;padding:13px 18px;color:#fff!important;text-decoration:none;font-weight:900;background:rgba(255,255,255,.08);}
.pp-onboarding-btn:hover{background:#fff;color:#071b67!important;}
.pp-onboarding-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.pp-onboarding-card{background:#fff;border:1px solid #dfe7f4;border-radius:20px;padding:20px;display:grid;grid-template-columns:54px 1fr;gap:16px;box-shadow:0 14px 34px rgba(7,27,103,.06);}
.pp-onboarding-step{width:46px;height:46px;border-radius:16px;background:#fff8ec;color:#b66a00;display:flex;align-items:center;justify-content:center;font-weight:1000;}
.pp-onboarding-card h2{font-size:18px;margin:0 0 7px;color:#071b67;}
.pp-onboarding-card p{margin:0;color:#53627f;font-weight:650;line-height:1.55;}
.pp-onboarding-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;}
.pp-onboarding-actions span{font-size:12px;font-weight:900;border-radius:999px;background:#eef5ff;color:#071b67;padding:7px 10px;}
.pp-onboarding-actions a{font-weight:900;color:#0b8f5a;text-decoration:none;}
.pp-onboarding-note{max-width:1180px;margin:18px auto 0;background:#fff8ec;border:1px solid #f5d59a;border-radius:18px;padding:22px;color:#071b67;}
.pp-onboarding-note h2{margin:0 0 8px;color:#071b67;}
.pp-onboarding-note p{margin:0;line-height:1.55;font-weight:700;}
@media(max-width:900px){.pp-onboarding-hero{display:block}.pp-onboarding-btn{margin-top:20px}.pp-onboarding-grid{grid-template-columns:1fr}.pp-onboarding-hero h1{font-size:30px}}


/* Phase 5AC: global mobile width expansion
   Goal: stop mobile pages/cards/forms from rendering as narrow center columns after login.
   Scope: mobile/tablet only; desktop layout is untouched. */
@media (max-width: 768px){
  :root{--pp-mobile-gutter:12px;--pp-mobile-page-width:calc(100vw - 24px);}
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;}

  /* Public and shared page containers */
  body .wide,
  body .container,
  body .site-container,
  body .page-container,
  body .section-container,
  body .content-container,
  body .public-page,
  body .public-shell,
  body .main-shell,
  body main,
  body .main,
  body .page-main{
    width:var(--pp-mobile-page-width)!important;
    max-width:var(--pp-mobile-page-width)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  /* Auth/login/register/reset cards across all roles */
  body .auth-wrap,
  body .auth-shell,
  body .login-wrap,
  body .register-wrap,
  body .password-wrap,
  body .auth-container,
  body .login-container,
  body .register-container,
  body .auth-card,
  body .login-card,
  body .register-card,
  body .password-card,
  body .reset-card,
  body .mfa-card,
  body .admin-login-card,
  body .pp-auth-card,
  body .pp-login-card,
  body .auth-panel,
  body .login-panel{
    width:var(--pp-mobile-page-width)!important;
    max-width:480px!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  body .auth-card,
  body .login-card,
  body .register-card,
  body .password-card,
  body .reset-card,
  body .mfa-card,
  body .admin-login-card,
  body .pp-auth-card,
  body .pp-login-card,
  body .auth-panel,
  body .login-panel{
    padding-left:clamp(18px,5vw,26px)!important;
    padding-right:clamp(18px,5vw,26px)!important;
  }

  /* Logged-in role shells: investor, fundraiser, issuer, admin and admin-role screens */
  body .role-shell,
  body .investor-shell,
  body .fundraiser-enterprise-shell,
  body .ppx-role-shell-fundraiser,
  body .admin-shell,
  body .enterprise-shell{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    box-sizing:border-box!important;
  }

  body .role-main,
  body .investor-main,
  body .issuer-main,
  body .ppx-main,
  body .ppx-role-main-fundraiser,
  body .admin-main,
  body .admin-content,
  body .admin-page,
  body .dashboard-main,
  body .dashboard-content,
  body .account-main,
  body .account-content,
  body .workspace-main,
  body .workspace-content{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-left:var(--pp-mobile-gutter)!important;
    padding-right:var(--pp-mobile-gutter)!important;
    box-sizing:border-box!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Common dashboard cards/sections should use available width instead of narrow caps */
  body .dashboard-card,
  body .metric-card,
  body .kpi-card,
  body .module-card,
  body .panel,
  body .card,
  body .section-card,
  body .form-card,
  body .table-card,
  body .command-card,
  body .fse-card,
  body .fcb-card,
  body .investor-card,
  body .admin-card{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* Forms and inputs should be comfortably full width on phones */
  body form,
  body .form-grid,
  body .input-group,
  body .field,
  body label,
  body input,
  body select,
  body textarea,
  body button[type="submit"]{
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  body input,
  body select,
  body textarea{
    width:100%!important;
    min-height:48px;
    font-size:16px!important;
  }

  /* Prevent nested grids from creating narrow columns on mobile */
  body .grid,
  body .cards-grid,
  body .stats-grid,
  body .kpi-grid,
  body .dashboard-grid,
  body .content-grid,
  body .form-grid,
  body .two-col,
  body .three-col,
  body .four-col{
    min-width:0!important;
  }
}

@media (min-width: 390px) and (max-width: 768px){
  :root{--pp-mobile-gutter:14px;--pp-mobile-page-width:calc(100vw - 28px);}
}

@media (max-width: 380px){
  :root{--pp-mobile-gutter:10px;--pp-mobile-page-width:calc(100vw - 20px);}
}