/* portal-chrome.css — ONE shared header+footer for every HoopStar parent page.
   Include once per page:  <link rel="stylesheet" href="/portal/portal-chrome.css">
   Scoped under .hp- so it never collides with a page's own styles. */

/* Shared canvas — matches the certificate page: flat lilac wash (#f4effa) with
   faint purple hoop-outline rings in the corners. !important so it overrides
   each page's own body background. */
body{
  background-color:#f4effa !important;
  background-image:
    radial-gradient(circle at 100% 0%,   rgba(108,80,160,0) 206px, rgba(108,80,160,.10) 207px, rgba(108,80,160,.10) 209px, rgba(108,80,160,0) 210px),
    radial-gradient(circle at 0% 42%,     rgba(108,80,160,0) 148px, rgba(108,80,160,.09) 149px, rgba(108,80,160,.09) 151px, rgba(108,80,160,0) 152px),
    radial-gradient(circle at 100% 100%,  rgba(108,80,160,0) 267px, rgba(108,80,160,.08) 268px, rgba(108,80,160,.08) 270px, rgba(108,80,160,0) 271px) !important;
  background-attachment:fixed !important;
  background-repeat:no-repeat !important;
}

.hp-header{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid #ece7f3;box-shadow:0 2px 12px rgba(46,33,80,.05);font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.hp-header__in{max-width:1060px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:9px 16px}
.hp-logo{height:30px;flex:0 0 auto;display:block}
.hp-nav{display:flex;gap:3px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.hp-nav::-webkit-scrollbar{display:none}
.hp-nav a{font-size:14px;font-weight:600;color:#5a5470;text-decoration:none;padding:9px 13px;border-radius:100px;white-space:nowrap;transition:color .15s,background .15s}
.hp-nav a.is-active{background:#f1ecfa;color:#6C50A0}
.hp-nav a:hover{color:#6C50A0}
.hp-account{margin-left:6px;height:36px;min-width:36px;padding:0 6px;border-radius:100px;background:#6C50A0;color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:13px;text-decoration:none;flex:0 0 auto;border:none;cursor:pointer;font-family:inherit}
.hp-account__ini{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:12px}
.hp-account--out{background:#f1ecfa;color:#6C50A0}
.hp-acct{position:relative}
.hp-acct-menu{position:absolute;right:0;top:46px;min-width:158px;background:#fff;border:1px solid #ece7f3;border-radius:12px;box-shadow:0 14px 34px -12px rgba(46,33,80,.3);padding:6px;z-index:300;display:flex;flex-direction:column;gap:2px}
.hp-acct-menu[hidden]{display:none}
.hp-acct-menu a,.hp-acct-menu button{text-align:left;background:none;border:none;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;font-weight:600;color:#2E2150;padding:10px 12px;border-radius:8px;cursor:pointer;text-decoration:none;width:100%}
.hp-acct-menu a:hover{background:#f1ecfa;color:#6C50A0}
.hp-acct-menu #hpLogout{color:#c0392b}
.hp-acct-menu #hpLogout:hover{background:#fdecea}
@media(max-width:640px){.hp-logo{height:25px}.hp-nav a{padding:8px 10px;font-size:13px}.hp-account{height:32px;min-width:32px}}

.hp-footer{background:#2E2150;color:#cfc7e4;margin-top:36px;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.hp-footer__in{max-width:1060px;margin:0 auto;padding:34px 20px 22px;display:grid;grid-template-columns:1.5fr 1fr 1.1fr;gap:26px}
.hp-footer__brand img{height:32px;margin-bottom:12px;filter:brightness(0) invert(1);opacity:.95}
.hp-footer__brand p{font-size:13px;line-height:1.6;color:#a99fc7;margin:0 0 14px;max-width:30ch}
.hp-social{display:flex;gap:9px}
.hp-social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;font-size:14px;font-weight:700;text-decoration:none;transition:background .15s}
.hp-social a:hover{background:rgba(255,255,255,.16)}
.hp-fcol h4{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:#8c81ad;margin:0 0 13px}
.hp-fcol a{display:block;color:#d7d0ea;text-decoration:none;font-size:14px;margin-bottom:10px}
.hp-fcol a:hover{color:#fff}
.hp-badges{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.hp-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:7px 11px;color:#fff;text-decoration:none;font-size:11px;line-height:1.1}
.hp-footer__bar{border-top:1px solid rgba(255,255,255,.1)}
.hp-footer__bar-in{max-width:1060px;margin:0 auto;padding:14px 20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#8c81ad}
.hp-footer__bar-in a{color:#a99fc7;text-decoration:none}
.hp-footer__bar-in a:hover{color:#fff}
@media(max-width:640px){.hp-footer__in{grid-template-columns:1fr 1fr}.hp-footer__brand{grid-column:1/-1}}