*{box-sizing:border-box}
html,body{min-height:100%}body{margin:0;background:
  radial-gradient(1100px 480px at 12% -8%,var(--page-glow-1) 0%,transparent 60%),
  radial-gradient(900px 420px at 108% 0%,var(--page-glow-2) 0%,transparent 55%),
  var(--paper);
  color:var(--ink);font:17px/1.6 var(--font-ui);letter-spacing:.1px}
button,input,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);border-bottom:3px solid var(--gold);display:flex;align-items:center;gap:24px;padding:12px 28px;box-shadow:0 6px 20px rgba(15,20,38,.18)}
.brand{display:flex;gap:13px;align-items:center;cursor:pointer;min-width:390px}
.logo{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--gold-2);background:radial-gradient(circle at 35% 30%,var(--gold-2),var(--gold) 70%);color:var(--navy-3);font-weight:800;font-size:23px;box-shadow:0 3px 10px rgba(0,0,0,.25),inset 0 1px 2px #ffffffaa}
.logo img{width:100%;height:100%;object-fit:contain;border-radius:inherit;background:#fff}
.brand h1{margin:0;font-size:22px;line-height:1.2;color:#fff;font-weight:700}
.brand small{font-size:12px;color:#c7d2ea;letter-spacing:.2px}
.nav{display:flex;gap:8px;justify-content:center;flex:1}
.nb,.outline,.chip{border:0;background:transparent;color:#dfe6f5;font-weight:700;padding:10px 14px;border-radius:var(--r-pill);transition:background .15s,color .15s}
.nb:hover{background:#ffffff1a;color:#fff}
.outline,.chip{border:1px solid #ffffff2e;background:#ffffff0d;color:#eef2fb}
.outline:hover{background:#ffffff22}
#sessionTools{display:flex;gap:8px}
.appearance-selectors{display:flex;gap:8px;align-items:end}
.appearance-selectors>label{width:min(100%,420px)}
.appearance-selectors label{margin:0;font-size:12px;color:var(--muted);font-weight:700}
.appearance-selectors select{display:block;min-width:175px;padding:7px 30px 7px 9px;margin-top:3px;font-size:13px;background:#fff}
.personalization-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}.personalization-colors input[type=color]{width:100%;height:52px;padding:4px}.content{min-width:0}#main{min-height:calc(100vh - 150px)}

.page{display:none}
.page.active{display:block}
.wrap{width:min(1480px,calc(100% - 42px));margin:26px auto}

/* ---------- hero ---------- */
.hero{min-height:260px;border-radius:var(--r-xl);padding:42px 46px 54px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 60%,var(--hero-end) 100%);
  box-shadow:var(--sh-lg);color:#fff}
.hero:before{content:'';position:absolute;inset:0;background:
  radial-gradient(220px 220px at 90% 8%,#ffe9b8aa,transparent 65%),
  radial-gradient(600px 360px at -6% 118%,#ffffff14,transparent 60%)}
.hero:after{content:'';position:absolute;right:-30px;top:-50px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#fff6d8,var(--gold-2) 45%,var(--gold) 78%,transparent 82%);
  opacity:.85;pointer-events:none}
.hero .wave-edge{position:absolute;left:0;right:0;bottom:-1px;height:26px;pointer-events:none;
  background:radial-gradient(circle at 20px 0,transparent 19px,var(--paper) 20px) 0 -14px/40px 26px repeat-x;}
.hero-trial{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,#ffffff16,#ffffff08);border:1px solid #ffffff2c;border-radius:var(--r);padding:14px 20px;margin-bottom:24px}
.hero-trial-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.hero-trial-copy .eyebrow{color:var(--gold-2);font-size:11px}
.hero-trial-copy strong{color:#fff;font-size:17px;font-weight:700}
.hero-trial-copy small{color:#cdd8ee;font-size:12.5px;max-width:600px}
.hero h2{font-size:40px;margin:0;position:relative;z-index:1;letter-spacing:.2px;text-shadow:0 2px 14px rgba(0,0,0,.25)}
.hero p{font-size:20px;color:#d7e0f3;position:relative;z-index:1;max-width:820px;margin-bottom:0}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm);transition:box-shadow .2s,transform .2s}
.entry{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
.entry .card{padding:24px;min-height:150px}
.entry .card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.entry h3{font-size:24px;margin:0 0 6px;font-weight:800}

.primary,.secondary{border:0;border-radius:var(--r-pill);padding:12px 20px;font-weight:800;transition:transform .15s,box-shadow .15s,filter .15s}
.primary{background:linear-gradient(135deg,var(--b),#1d4f95);color:#fff;box-shadow:0 8px 18px rgba(31,79,149,.28)}
.primary:hover{filter:brightness(1.06);transform:translateY(-1px)}
.secondary{background:var(--gold-soft);color:#7a5b1c}
.secondary:hover{background:#f0dfb2}

.footer{background:var(--navy-3);color:#c7d2ea;padding:16px 32px;display:flex;font-size:13.5px;border-top:3px solid var(--gold)}
.footer .right{margin-left:auto;display:flex;gap:22px}
.float{position:fixed;right:22px;bottom:86px;display:grid;gap:9px;z-index:15}
.float button{width:46px;height:46px;border:0;border-radius:50%;color:#fff;font-weight:900;box-shadow:var(--sh-md)}

/* ---------- dashboard shell ---------- */
.dash{display:grid;grid-template-columns:20% 1fr;gap:20px}
.side{padding:20px;min-height:720px;border-radius:var(--r-lg)}
.term{width:100%;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-weight:700}
.sg{padding:14px 4px;border-bottom:1px solid var(--line-2)}
.st{font-weight:800;color:var(--b);margin-bottom:6px}
.sl{padding:9px;border-radius:var(--r-sm);font-weight:700}
.sl:hover,.sl.active{background:#eaf1ff;color:var(--b)}
.tgrid{display:grid;grid-template-columns:3fr 1fr;gap:20px}
.agrid{display:grid;grid-template-columns:3fr 2fr;gap:20px}
.panel{padding:22px;border-radius:var(--r-lg)}
.ph{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ph h3{margin:0;font-size:22px;font-weight:800}
.grow{flex:1}
.tw{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:700px}
th,td{padding:13px;border-bottom:1px solid var(--line-2);text-align:left}
th{background:#f6f2e8;color:#5a5138;font-weight:800;font-size:14px;letter-spacing:.2px}
tbody tr:hover{background:#faf8f2}
.plus{color:var(--g);font-weight:800}
.badge{padding:4px 11px;border-radius:var(--r-pill);font-size:13.5px;font-weight:800;background:#e7f5ec;color:#1b7a4a}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.qi{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;text-align:center;background:#fff;transition:border-color .15s,box-shadow .15s,transform .15s}
.qi:hover{border-color:var(--gold);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.qi div{font-size:26px}
.qi strong{font-size:14px}
.nav-count{display:inline-block;min-width:19px;padding:1px 6px;border-radius:var(--r-pill);background:var(--r-danger);color:#fff;font-size:11.5px;font-weight:800;margin-left:7px;text-align:center;line-height:1.5}
.qgrid-more{text-align:right;margin-top:12px}
.qgrid-more button{color:var(--b);font-weight:700;font-size:14.5px}
.qgrid-more button:hover{text-decoration:underline}
.picker-search{margin-bottom:10px}
.picker-search input{max-width:320px}

/* ---------- student profile (legacy) ---------- */
.profile{display:grid;grid-template-columns:20% 1fr;gap:20px}
.studside{padding:20px;border-radius:var(--r-lg)}
.avatar{width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#eef6ff,#dce9fb);display:grid;place-items:center;font-size:40px;margin:auto;border:3px solid #fff;box-shadow:var(--sh-sm)}
.meta{text-align:center}
.meta h2{margin:8px 0 0}
.meta p{margin:3px;color:var(--muted)}
.pbox{margin:18px 0;background:linear-gradient(135deg,#f3f9f2,#eaf6ec);border-radius:var(--r);padding:18px;border:1px solid #d9ecda}
.pbox strong{font-size:36px;color:#1c7a45}
.smain{display:grid;grid-template-columns:2.2fr 1fr;gap:20px}
.banner{background:linear-gradient(135deg,var(--navy),#2c4d78 60%,#3a5f8f);color:#fff;min-height:205px;padding:32px;border-radius:var(--r-lg);box-shadow:var(--sh-md)}
.banner h2{font-size:38px;margin:0}
.chart{min-height:205px;display:grid;place-items:center}
.donut{width:140px;height:140px;border-radius:50%;background:conic-gradient(var(--g) 0 44%,var(--b) 44% 69%,var(--p) 69% 88%,var(--o) 88%);position:relative;box-shadow:var(--sh-sm)}
.donut:after{content:'1,280';position:absolute;inset:30px;background:#fff;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:800}
.rewards{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.reward{border:1px solid var(--line);border-radius:var(--r-sm);padding:13px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:20px}
.stat{padding:19px}
.stat b{font-size:32px}

/* ---------- modal / forms ---------- */
.modalbg{position:fixed;inset:0;background:rgba(10,15,30,.62);z-index:100;display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}
.modal{width:min(720px,96vw);background:var(--panel);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-lg)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:15px}
label{display:block;font-weight:800;margin-bottom:6px;color:#3a4256}
input,select{width:100%;padding:11px 13px;border:1px solid #dcd4bd;border-radius:var(--r-sm);background:#fffefb;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{outline:none;border-color:var(--b);box-shadow:0 0 0 3px #2f6fb02a}
.checks{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:220px;overflow:auto;margin:12px 0}
.check{padding:9px;border:1px solid var(--line);border-radius:var(--r-xs)}
.summary{padding:13px 15px;background:#f3f6fc;border-radius:var(--r-sm);border:1px solid #e4eaf5}
.acts{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.error{display:grid;grid-template-columns:130px 1fr 80px;gap:8px;padding:13px 0;border-bottom:1px solid var(--line)}
.branding-editor{display:flex;align-items:center;gap:22px;padding:18px;margin-bottom:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.branding-preview{width:120px;height:120px;display:grid;place-items:center;overflow:hidden;flex:0 0 auto;border:1px dashed var(--line);border-radius:var(--r);background:#fff;color:var(--muted);font-size:13px;text-align:center;padding:8px}
.branding-preview img{width:100%;height:100%;object-fit:contain}
.logo-upload{display:inline-block;cursor:pointer;margin:0 12px 0 0}
.danger-text{color:var(--r-danger);font-weight:700}

@media(max-width:1100px){.nav{display:none}.brand{min-width:0}.tgrid,.agrid,.smain{grid-template-columns:1fr}.dash,.profile{grid-template-columns:1fr}.side{min-height:auto}}
@media(max-width:700px){body{font-size:15.5px}.wrap{width:calc(100% - 18px)}.brand h1{font-size:17px}.brand small{display:none}.logo{width:42px;height:42px}.hero{padding:26px 18px}.hero h2{font-size:28px}.hero-trial{flex-direction:column;align-items:stretch;text-align:left;padding:16px}.hero-trial .demo-login{width:100%}.entry,.qgrid,.rewards,.row,.checks,.stats{grid-template-columns:1fr 1fr}.footer{display:block;text-align:center}.footer .right{margin-top:8px;justify-content:center;flex-wrap:wrap}}
@media(max-width:700px){.appearance-selectors{width:100%;display:grid;grid-template-columns:1fr}.appearance-selectors select{min-width:0}.branding-editor{align-items:flex-start;flex-direction:column}.branding-preview{width:96px;height:96px}}