/* Grades Prep Premium Dark Kids UI */
:root{
  --gp-bg:#07131D;
  --gp-bg2:#091A27;
  --gp-surface:#0D2232;
  --gp-surface2:#102A3D;
  --gp-surface3:#153449;
  --gp-line:#28546C;
  --gp-line2:#32637C;
  --gp-text:#F4FBFE;
  --gp-muted:#B8D1DE;
  --gp-blue:#129BD7;
  --gp-green:#24B56A;
  --gp-green-dark:#087F43;
  --gp-yellow:#FFD45A;
  --gp-danger:#FFD9E1;
  --gp-shadow:0 18px 44px rgba(0,0,0,.26);
  --gp-sidebar:248px;
}
*{box-sizing:border-box}
html{background:var(--gp-bg)!important;color-scheme:dark}
body{
  min-height:100vh!important;
  color:var(--gp-text)!important;
  background:
    radial-gradient(circle at 10% 8%,rgba(36,169,224,.12),transparent 26%),
    radial-gradient(circle at 90% 26%,rgba(36,181,106,.09),transparent 24%),
    linear-gradient(180deg,var(--gp-bg),var(--gp-bg2) 55%,var(--gp-bg))!important;
  background-attachment:fixed!important;
  -webkit-font-smoothing:antialiased;
}
body.gp-has-shell{padding-left:var(--gp-sidebar)!important}
body.gp-nav-open{overflow:hidden!important}
a{transition:.15s ease}
h1,h2,h3,h4,h5,h6{color:var(--gp-text)!important}
p,.muted,.sub,.subtitle,.hint,.help,.fineprint,.footer-note,.brand-sub,.feature-copy{color:var(--gp-muted)!important}

/* sidebar */
.gp-sidebar{
  position:fixed;z-index:10060;left:0;top:0;bottom:0;width:var(--gp-sidebar);
  padding:16px 14px 18px;
  background:linear-gradient(180deg,#0A1C29,#0D2C40 62%,#0A2B22);
  border-right:1px solid #21475D;
  box-shadow:16px 0 34px rgba(0,0,0,.16);
  overflow:auto;
}
.gp-side-brand{
  display:flex;align-items:center;gap:10px;padding:8px 8px 16px;text-decoration:none;color:#fff!important;
}
.gp-side-logo{
  width:46px;height:46px;object-fit:contain;background:#EAF7FC;border-radius:13px;padding:5px;
  border:1px solid #2D6683;
}
.gp-side-title{font-weight:950;font-size:17px;line-height:1.05}
.gp-side-sub{font-size:10px;color:#AFCAD7;font-weight:750;margin-top:3px}
.gp-side-label{
  margin:7px 9px 8px;color:#759DB1;font-size:10px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;
}
.gp-side-menu{display:grid;gap:6px}
.gp-side-link{
  display:flex;align-items:center;gap:11px;min-height:44px;padding:10px 11px;border-radius:13px;
  color:#DDEEF5!important;text-decoration:none!important;font-size:13px;font-weight:850;
  border:1px solid transparent;
}
.gp-side-link:hover{background:#12364B;border-color:#28566E;color:#fff!important}
.gp-side-link.active{
  background:linear-gradient(135deg,#124C69,#0F5A3C);border-color:#347494;color:#fff!important;
}
.gp-side-icon{
  width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.07);
  font-size:15px;flex:0 0 28px;
}
.gp-side-bottom{margin-top:16px;padding-top:12px;border-top:1px solid #21475D}
.gp-side-logout{color:#BFEBD1!important}
.gp-side-close{display:none}
.gp-overlay{display:none}
.gp-mobile-bar{display:none}

/* shared page surfaces */
.wrap,.auth-wrap,.container,.page-wrap{
  color:var(--gp-text)!important;
}
.card,.panel,.box,.auth-card,.hero-card,.question-card,.summary-card,.section-card,.kid,.person,.empty,.report,.skill,.metric{
  background:linear-gradient(180deg,var(--gp-surface2),var(--gp-surface))!important;
  border-color:var(--gp-line)!important;
  color:var(--gp-text)!important;
  box-shadow:var(--gp-shadow)!important;
}
.top,.topbar,.header,.page-header{
  background:linear-gradient(135deg,#0B1D2A,#123B59 70%,#0C543A)!important;
  border-color:var(--gp-line)!important;
  color:var(--gp-text)!important;
}
.hero{
  background:
    radial-gradient(circle at 86% 14%,rgba(36,169,224,.18),transparent 30%),
    linear-gradient(135deg,#0D2232,#123149 58%,#0B352A)!important;
  border-color:var(--gp-line)!important;color:#fff!important;
}
.hero *, .topbar *, .top *{color:inherit}
.brand img,.brand-mark img,.logo{
  object-fit:contain;
}

/* buttons */
.btn,button,input[type=submit],input[type=button],.button,.go{
  border-radius:13px!important;font-weight:850!important;
}
.btn,button:not(.primary):not(.btn-primary):not(.danger),.button{
  background:var(--gp-surface3)!important;color:var(--gp-text)!important;border-color:var(--gp-line2)!important;
}
.btn:hover,button:hover,.button:hover{filter:brightness(1.08)}
.btn.primary,.btn-primary,.primary,input[type=submit],button.primary,.go{
  background:linear-gradient(135deg,var(--gp-green-dark),var(--gp-blue))!important;
  color:#fff!important;border-color:transparent!important;
}
.btn.green,.success-btn{background:linear-gradient(135deg,#0A6D42,var(--gp-green))!important;color:#fff!important;border-color:transparent!important}
.logout,.btn-secondary,.secondary,.back{background:#102A3D!important;color:#DDEEF5!important;border-color:var(--gp-line2)!important}

/* forms */
label,.label{color:#EAF7FC!important}
input,select,textarea,.input,.pin,.pw{
  background:var(--gp-surface3)!important;
  color:var(--gp-text)!important;
  -webkit-text-fill-color:var(--gp-text)!important;
  border-color:var(--gp-line2)!important;
}
input::placeholder,textarea::placeholder,.input::placeholder{color:#89AABC!important}
input:focus,select:focus,textarea:focus,.input:focus,.pin:focus,.pw:focus{
  border-color:#24A9E0!important;
  box-shadow:0 0 0 3px rgba(36,169,224,.16)!important;
  outline:none!important;
}
select option{background:#102A3D;color:#F4FBFE}

/* quiz / choices */
.answer,.option,.answer-option,.choice,.quiz-option,.subject label,.counts span{
  background:var(--gp-surface3)!important;color:#F4FBFE!important;border-color:var(--gp-line2)!important;
}
.answer:hover,.option:hover,.choice:hover,.quiz-option:hover,.subject label:hover,.counts span:hover{
  background:#1A4057!important;border-color:#4280A0!important;
}
.answer.correct,.correct,.subject input:checked+label,.counts input:checked+span{
  background:#103B2B!important;border-color:#2C9D62!important;color:#B9F2D0!important;
}
.progress,.bar,.progress-bar,.skill-bar{background:#244355!important}
.progress span,.bar span,.progress-bar span,.skill-bar span{
  background:linear-gradient(90deg,var(--gp-blue),var(--gp-green))!important;
}

/* tables */
table{background:var(--gp-surface)!important;color:var(--gp-text)!important;border-color:var(--gp-line)!important}
th{background:#123149!important;color:#F4FBFE!important;border-color:var(--gp-line)!important}
td{background:#0F2636!important;color:#DDEEF5!important;border-color:#21475D!important}
tr:nth-child(even) td{background:#102B3D!important}

/* status */
.ok,.success,.flash.success,.alert.success{background:#103B2B!important;color:#B9F2D0!important;border-color:#2C8055!important}
.err,.error,.flash.error,.alert.error,.alert-error{background:#3B1B25!important;color:#FFD9E1!important;border-color:#7C394B!important}
.warn,.warning{background:#3A3217!important;color:#FFE7A0!important;border-color:#705F26!important}

/* Force legacy white panels into dark palette */
body [style*="background:white"],body [style*="background: white"],
body [style*="background:#fff"],body [style*="background: #fff"],
body [style*="background:#FFF"],body [style*="background: #FFF"]{
  background:var(--gp-surface2)!important;color:var(--gp-text)!important;
}
body [style*="color:#173D5A"],body [style*="color: #173D5A"],
body [style*="color:#182038"],body [style*="color:#1c2740"]{color:var(--gp-text)!important}

/* Kids friendly visual accents */
.subject-icon,.feature-icon,.avatar,.kid-face,.brand-mark{
  border-color:#32637C!important;
}
.avatar{background:#123B59!important}
.stars{color:var(--gp-yellow)!important}

/* Mobile shell */
@media(max-width:840px){
  body.gp-has-shell{padding-left:0!important;padding-top:64px!important}
  .gp-mobile-bar{
    display:flex;position:fixed;z-index:10030;left:0;right:0;top:0;height:64px;
    align-items:center;justify-content:space-between;padding:9px 12px;
    background:linear-gradient(135deg,#081B29,#123B59 70%,#0B4F37);
    border-bottom:1px solid #28546C;box-shadow:0 8px 24px rgba(0,0,0,.22);
  }
  .gp-mobile-brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:950}
  .gp-mobile-brand img{width:40px;height:40px;object-fit:contain;background:#EAF7FC;border-radius:11px;padding:4px}
  .gp-burger{
    width:44px;height:44px;border-radius:12px!important;border:1px solid #32637C!important;
    background:#123149!important;color:#fff!important;font-size:24px!important;line-height:1!important;
    display:grid!important;place-items:center!important;padding:0!important;
  }
  .gp-sidebar{
    width:min(82vw,285px);transform:translateX(-105%);transition:transform .22s ease;
    box-shadow:20px 0 45px rgba(0,0,0,.32);
  }
  body.gp-nav-open .gp-sidebar{transform:translateX(0)}
  .gp-side-close{
    display:grid;position:absolute;right:12px;top:13px;width:38px;height:38px;place-items:center;
    border-radius:11px;background:#123149;color:#fff;border:1px solid #32637C;font-size:20px;cursor:pointer;
  }
  .gp-overlay{
    position:fixed;z-index:10050;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(2px);
  }
  body.gp-nav-open .gp-overlay{display:block}
  .wrap,.auth-wrap,.container,.page-wrap{max-width:100%!important}
}

/* Existing admin shell compatibility */
.admin-sidebar,.sidebar{
  background:linear-gradient(180deg,#0A1C29,#0D2C40 62%,#0A2B22)!important;
  border-color:#21475D!important;color:#F4FBFE!important;
}
.admin-sidebar a,.sidebar a{color:#DDEEF5!important}
.admin-sidebar a:hover,.sidebar a:hover,.admin-sidebar a.active,.sidebar a.active{
  background:#12364B!important;color:#fff!important;border-color:#28566E!important;
}
.layout-shell,.page-main{background:transparent!important;color:#F4FBFE!important}
.hero-banner{background:linear-gradient(135deg,#0B1D2A,#123B59 70%,#0C543A)!important}
.progress-burger{
  background:#123149!important;color:#fff!important;border-color:#32637C!important;
}

/* Remove duplicate legacy navigation controls when the unified shell is active */
body.gp-has-shell .nav-actions,
body.gp-has-shell .top-actions,
body.gp-has-shell .top > .actions,
body.gp-has-shell .mobile-topbar,
body.gp-has-shell .burger-btn,
body.gp-has-shell .progress-burger{
  display:none!important;
}


/* =========================================================
   v11 shell cleanup: one header, one sidebar, proper mobile stacking
   ========================================================= */
body.gp-has-shell .gp-redundant-header{
  display:none!important;
}

/* Old page navigation controls must never compete with the shared shell. */
body.gp-has-shell #burgerBtn,
body.gp-has-shell [class*="dashboard-burger"],
body.gp-has-shell [class*="history-burger"],
body.gp-has-shell [class*="pricing-burger"],
body.gp-has-shell [class*="progress-burger"]{
  display:none!important;
}

/* Contextual page headings remain, but their old logo tiles do not. */
body.gp-has-shell .topbar .brand-mark,
body.gp-has-shell .page-header .brand-mark{
  display:none!important;
}

/* The shell owns the left rail; legacy layout wrappers should not reserve another rail. */
body.gp-has-shell .layout-shell{
  width:100%!important;
  max-width:none!important;
}

/* Mobile drawer must sit above the fixed mobile header. */
@media(max-width:840px){
  .gp-mobile-bar{z-index:10030!important}
  .gp-overlay{z-index:10050!important}
  .gp-sidebar{
    z-index:10060!important;
    width:min(88vw,310px)!important;
    max-width:310px!important;
    padding-top:14px!important;
  }
  body.gp-nav-open .gp-mobile-bar{
    pointer-events:none;
  }
  .gp-side-brand{
    padding-right:48px!important;
  }
  .gp-side-close{
    z-index:2!important;
  }

  /* Give real page content comfortable room below the single mobile header. */
  body.gp-has-shell .wrap,
  body.gp-has-shell .auth-wrap,
  body.gp-has-shell .container,
  body.gp-has-shell .page-wrap{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.gp-has-shell .card,
  body.gp-has-shell .panel,
  body.gp-has-shell .box,
  body.gp-has-shell .kid,
  body.gp-has-shell .person{
    max-width:100%!important;
  }

  /* Prevent wide grids/forms from forcing horizontal scrolling. */
  body.gp-has-shell .layout,
  body.gp-has-shell .grid,
  body.gp-has-shell .row-2,
  body.gp-has-shell .kids,
  body.gp-has-shell .people,
  body.gp-has-shell .stats-grid{
    min-width:0!important;
  }

  body.gp-has-shell input,
  body.gp-has-shell select,
  body.gp-has-shell textarea,
  body.gp-has-shell button,
  body.gp-has-shell .btn{
    max-width:100%;
  }
}

/* Very small phones */
@media(max-width:420px){
  .gp-mobile-bar{height:60px!important;padding:8px 10px!important}
  body.gp-has-shell{padding-top:60px!important}
  .gp-mobile-brand img{width:38px!important;height:38px!important}
  .gp-mobile-brand span{font-size:14px!important}
  .gp-burger{width:42px!important;height:42px!important}
  .gp-sidebar{width:90vw!important}
}

/* =========================================================
   Install Grades Prep controls
   ========================================================= */
.gp-install-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;padding:8px 12px;border-radius:12px!important;
  border:1px solid #3A7897!important;
  background:linear-gradient(135deg,#0E5F43,#127FB0)!important;
  color:#fff!important;font-size:12px!important;font-weight:950!important;
  cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.20);white-space:nowrap;
}
.gp-install-btn[hidden]{display:none!important}
.gp-install-global{
  position:fixed;right:18px;top:16px;left:auto;z-index:10020;
}
.gp-mobile-tools{display:flex;align-items:center;gap:8px;margin-left:auto}


.gp-install-modal[hidden]{display:none!important}
.gp-install-modal{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;padding:18px}
.gp-install-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.gp-install-sheet{
  position:relative;width:min(440px,100%);padding:25px 21px 20px;border-radius:24px;
  background:linear-gradient(180deg,#102A3D,#0D2232);border:1px solid #32637C;
  color:#F4FBFE;box-shadow:0 28px 80px rgba(0,0,0,.45);text-align:center;
}
.gp-install-x{position:absolute!important;right:12px;top:12px;width:38px;height:38px;padding:0!important;border-radius:11px!important;font-size:22px!important}
.gp-install-appicon{width:72px;height:72px;margin:2px auto 13px;padding:7px;border-radius:20px;background:#EAF7FC;border:1px solid #3B7894}
.gp-install-appicon img{width:100%;height:100%;object-fit:contain}
.gp-install-sheet h2{margin:0 0 8px!important;font-size:24px!important}
.gp-install-sheet p{margin:0 auto 16px!important;max-width:350px;color:#B8D1DE!important;line-height:1.55}
.gp-install-steps{display:grid;gap:9px;text-align:left;margin:15px 0}
.gp-install-steps>div{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid #28546C;border-radius:14px;background:#123149}
.gp-install-steps b{display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border-radius:8px;background:#0F5C42;color:#fff}
.gp-install-steps span{color:#DDEEF5;line-height:1.45;font-size:13px}
.gp-install-done{width:100%;min-height:46px!important;background:linear-gradient(135deg,#087F43,#129BD7)!important;color:#fff!important;border:0!important}

@media(max-width:840px){
  .gp-mobile-tools .gp-install-global{
    position:static!important;right:auto!important;left:auto!important;top:auto!important;
    z-index:auto!important;min-height:40px!important;padding:7px 10px!important;font-size:11px!important;
    flex:0 0 auto!important;margin:0!important;
  }
  .gp-mobile-tools{display:flex!important;align-items:center!important;gap:8px!important;margin-left:auto!important}
  .gp-mobile-bar{justify-content:space-between!important}
}
@media(max-width:390px){
  .gp-mobile-tools .gp-install-global span{display:inline!important}
  .gp-mobile-tools .gp-install-global{
    width:auto!important;
    min-width:0!important;
    padding:6px 8px!important;
    gap:4px!important;
    font-size:10px!important;
    line-height:1!important;
  }
  .gp-mobile-tools{gap:6px!important}
  .gp-mobile-brand{gap:7px!important;min-width:0!important}
  .gp-mobile-brand span{font-size:13px!important;white-space:nowrap!important}
}

/* Grades Prep premium reward badges - SVG, no emoji dependency */
.gp-premium-reward-badge{--badge:#6EE7A8;position:relative;display:inline-grid;place-items:center;width:64px;height:64px;color:var(--badge);filter:drop-shadow(0 10px 16px color-mix(in srgb,var(--badge) 28%,transparent));vertical-align:middle}
.gp-premium-reward-badge svg{width:100%;height:100%;overflow:visible}
.gp-premium-reward-badge .gp-badge-shield{fill:#0A1A27;stroke:currentColor;stroke-width:3.2}
.gp-premium-reward-badge .gp-badge-ring{fill:url(#gpBadgeFill-growing);fill-opacity:.16;stroke:currentColor;stroke-width:2;stroke-dasharray:2 4}
.gp-premium-reward-badge .gp-badge-symbol{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.gp-premium-reward-badge.tier-rising{--badge:#61CFFF}
.gp-premium-reward-badge.tier-bronze{--badge:#B9A7FF}
.gp-premium-reward-badge.tier-silver{--badge:#D8F4FF}
.gp-premium-reward-badge.tier-gold{--badge:#FFD166}
.gp-premium-reward-badge.tier-perfect{--badge:#F3C34B}
.gp-premium-reward-badge.tier-perfect .gp-badge-shield{fill:#24153C;stroke-width:3.5}
.gp-premium-reward-badge.tier-gold .gp-badge-shield{fill:#2B2412}
.gp-premium-reward-badge.tier-silver .gp-badge-shield{fill:#152833}
.gp-premium-reward-badge.tier-bronze .gp-badge-shield{fill:#211D3A}
.gp-premium-reward-badge.tier-rising .gp-badge-shield{fill:#102A3B}
.gp-premium-reward-badge.tier-growing .gp-badge-shield{fill:#123027}
.gp-premium-reward-badge.sm{width:28px;height:28px;filter:none}
.gp-premium-reward-badge.md{width:54px;height:54px}
.gp-premium-reward-badge.lg{width:82px;height:82px}
.gp-premium-reward-badge.xl{width:96px;height:96px}
/* Premium badge placement overrides */
.medal.premium,.reward-badge.premium,.rw-emoji.premium,.gp-parent-reward-emoji.premium{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;font-size:0!important;overflow:visible!important}
.medal.premium{width:64px!important;height:64px!important;flex-basis:64px!important}
.reward-badge.premium{width:86px!important;height:86px!important}
.rw-emoji.premium{width:100px!important;height:100px!important}
.gp-parent-reward-emoji.premium{width:86px!important;height:86px!important;flex-basis:86px!important}
.badge .gp-premium-reward-badge.sm,button .gp-premium-reward-badge.sm{margin-right:5px}
button .gp-premium-reward-badge.sm{width:22px;height:22px;vertical-align:-6px}

/* Premium reward image assets - 2026-08-29 */
.gp-premium-reward-badge{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.gp-premium-reward-badge img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.28));
}
.gp-premium-reward-badge.sm img{filter:drop-shadow(0 4px 6px rgba(0,0,0,.22))}

/* Official Grades Prep Admin reward images - 2026-08-29 */
.gp-admin-reward-badge img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
}