:root{
  --brand-primary:#4F8F2F;
  --brand-secondary:#F2C614;
  --ink:#122036;
  --muted:#6f7b8d;
  --surface:#ffffff;
  --surface-soft:#f6f9f3;
  --line:rgba(22,48,27,.09);
  --shadow:0 22px 65px rgba(35,72,24,.14);
  --safe-bottom:max(18px,env(safe-area-inset-bottom));
  --dock-clearance:150px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:#eaf2e4}
body{margin:0;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:
  radial-gradient(circle at 6% 2%,rgba(115,177,72,.36),transparent 28%),
  radial-gradient(circle at 96% 18%,rgba(242,198,20,.16),transparent 22%),
  linear-gradient(145deg,#edf5e8 0%,#f7faf5 48%,#eef3e9 100%);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit}
svg{width:24px;height:24px}
.ambient{position:fixed;pointer-events:none;filter:blur(5px);z-index:0;border-radius:999px;opacity:.45}
.ambient-one{width:320px;height:320px;left:-160px;top:42%;background:rgba(78,145,45,.25)}
.ambient-two{width:280px;height:280px;right:-120px;top:10%;background:rgba(242,198,20,.18)}
.app-shell{position:relative;z-index:1;width:min(1180px,calc(100% - 32px));min-height:calc(100vh - 32px);margin:16px auto 120px;border:1px solid rgba(255,255,255,.84);border-radius:42px;background:rgba(255,255,255,.78);box-shadow:var(--shadow);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);overflow:hidden}
.hero{position:relative;min-height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:62px 28px 30px;isolation:isolate;background:
  linear-gradient(140deg,rgba(101,166,61,.96) 0%,rgba(125,184,81,.86) 25%,rgba(246,250,242,.96) 62%,rgba(255,255,255,.98) 100%)}
.hero::before{content:"";position:absolute;inset:-20% -10% 42% -15%;z-index:-2;background:linear-gradient(130deg,rgba(43,101,31,.45),rgba(153,204,112,.15) 42%,transparent 66%);clip-path:polygon(0 0,100% 0,71% 52%,28% 94%,0 74%)}
.hero::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-34%;height:58%;z-index:-1;background:rgba(255,255,255,.56);border-radius:50% 50% 0 0/100% 100% 0 0;transform:rotate(-3deg)}
.hero-orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none;z-index:-1}
.hero-orb-one{width:190px;height:190px;right:8%;top:20%;background:radial-gradient(circle,rgba(255,255,255,.75),rgba(255,255,255,0) 70%)}
.hero-orb-two{width:160px;height:160px;left:8%;bottom:4%;background:radial-gradient(circle,rgba(242,198,20,.20),rgba(242,198,20,0) 70%)}
.round-action{position:absolute;top:28px;width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.6);border-radius:17px;background:rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 26px rgba(36,80,23,.12);backdrop-filter:blur(16px);cursor:pointer;transition:.25s ease;z-index:3}
.round-action:hover{transform:translateY(-2px);background:rgba(255,255,255,.56)}
.round-action svg{width:21px;height:21px}
.menu-trigger{left:28px}.school-link{right:28px}
.school-logo{width:158px;height:158px;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(36,74,26,.24));animation:logoFloat 5.5s ease-in-out infinite}
.hero-copy{text-align:center;margin-top:10px;position:relative;z-index:2}
.hero-copy h1{font-size:clamp(36px,5vw,58px);line-height:1;margin:0;font-weight:850;letter-spacing:-.045em;color:#142038;text-shadow:0 3px 12px rgba(255,255,255,.45)}
.hero-copy p{margin:12px 0 0;color:#367226;font-weight:800;letter-spacing:.42em;text-indent:.42em;font-size:15px}
.hero-accent{display:block;width:58px;height:5px;border-radius:20px;margin:16px auto 0;background:linear-gradient(90deg,var(--brand-secondary),#f8d949);box-shadow:0 7px 20px rgba(242,198,20,.32)}
.apps-section{position:relative;padding:30px 34px calc(var(--dock-clearance) + 22px);background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(248,250,247,.96));min-height:420px}
.app-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.app-card{position:relative;min-height:164px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px 10px 16px;border:1px solid rgba(255,255,255,.94);border-radius:27px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,249,246,.9));box-shadow:0 13px 32px rgba(37,62,31,.09),inset 0 1px 0 rgba(255,255,255,.95);transform:translateY(16px);opacity:0;animation:cardReveal .6s cubic-bezier(.2,.75,.25,1) forwards;animation-delay:var(--delay);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.app-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 5%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 47%);opacity:.9;pointer-events:none}
.app-card:hover{transform:translateY(-7px) scale(1.015);box-shadow:0 20px 45px color-mix(in srgb,var(--accent) 17%,rgba(37,62,31,.08));border-color:color-mix(in srgb,var(--accent) 26%,white)}
.app-card:active{transform:translateY(-2px) scale(.985)}
.app-card:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 45%,white);outline-offset:3px}
.app-icon-wrap{position:relative;width:78px;height:78px;display:grid;place-items:center;border-radius:25px;color:white;background:
  linear-gradient(145deg,color-mix(in srgb,var(--accent) 72%,white),var(--accent));box-shadow:
  0 14px 25px color-mix(in srgb,var(--accent) 26%,transparent),
  inset 0 1px 1px rgba(255,255,255,.55),
  inset 0 -6px 14px rgba(0,0,0,.07);overflow:hidden}
.app-icon-wrap::after{content:"";position:absolute;width:60px;height:36px;top:-12px;left:3px;border-radius:50%;background:rgba(255,255,255,.26);transform:rotate(-17deg);filter:blur(1px)}
.app-icon{width:39px;height:39px;position:relative;z-index:2;filter:drop-shadow(0 4px 4px rgba(0,0,0,.14))}
.app-custom-icon{width:52px;height:52px;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 4px 5px rgba(0,0,0,.14))}
.icon-shine{position:absolute;inset:0;background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.35) 48%,transparent 62%);transform:translateX(-120%);transition:transform .7s ease}
.app-card:hover .icon-shine{transform:translateX(120%)}
.app-name{position:relative;z-index:1;max-width:100%;font-size:14px;font-weight:780;text-align:center;line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere}
.pending-dot{position:absolute;right:14px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--brand-secondary);box-shadow:0 0 0 4px rgba(242,198,20,.15)}
.app-card.is-pending{cursor:pointer}
.app-card.is-pending .app-icon-wrap{filter:saturate(.82)}
.empty-state{display:grid;place-items:center;gap:10px;min-height:280px;color:var(--muted)}
.empty-state svg{width:42px;height:42px}.empty-state p{margin:0;font-weight:700}
.bottom-dock{position:fixed;z-index:30;left:50%;bottom:var(--safe-bottom);transform:translateX(-50%);width:min(720px,calc(100% - 30px));min-height:74px;display:grid;grid-template-columns:1fr 1fr 90px 1fr 1fr;align-items:center;padding:8px 18px;border:1px solid rgba(255,255,255,.82);border-radius:28px;background:rgba(255,255,255,.88);box-shadow:0 20px 50px rgba(29,58,26,.20),inset 0 1px 0 rgba(255,255,255,.95);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.dock-item{height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:#7b858f;cursor:pointer;border-radius:16px;transition:.2s ease}
.dock-item svg{width:22px;height:22px}.dock-item span{font-size:10px;font-weight:760}
.dock-item:hover,.dock-item.active{color:var(--brand-primary);background:color-mix(in srgb,var(--brand-primary) 8%,transparent)}
.dock-fab{width:72px;height:72px;display:grid;place-items:center;justify-self:center;margin-top:-24px;border:7px solid rgba(255,255,255,.95);border-radius:50%;color:white;background:linear-gradient(145deg,#79ba4c,var(--brand-primary));box-shadow:0 16px 34px rgba(58,121,34,.34),inset 0 1px 1px rgba(255,255,255,.55);cursor:pointer;transition:.25s ease}
.dock-fab:hover{transform:translateY(-4px) rotate(5deg)}.dock-fab:active{transform:scale(.94)}
.dock-fab svg{width:28px;height:28px}
.menu-backdrop{position:fixed;inset:0;z-index:50;background:rgba(11,24,15,.36);backdrop-filter:blur(5px);opacity:0;transition:.25s ease}
.menu-backdrop.show{opacity:1}
.quick-menu{position:fixed;z-index:60;left:50%;bottom:0;width:min(520px,100%);padding:12px 18px calc(22px + env(safe-area-inset-bottom));border-radius:30px 30px 0 0;background:rgba(255,255,255,.98);box-shadow:0 -20px 60px rgba(25,52,22,.2);transform:translate(-50%,110%);transition:transform .34s cubic-bezier(.2,.75,.25,1);visibility:hidden}
.quick-menu.open{transform:translate(-50%,0);visibility:visible}
.menu-handle{width:48px;height:5px;border-radius:20px;margin:0 auto 15px;background:#dfe5dc}
.quick-brand{display:flex;align-items:center;gap:12px;padding:8px 8px 18px;border-bottom:1px solid var(--line);margin-bottom:6px}
.quick-brand img{width:54px;height:54px;object-fit:contain}.quick-brand strong,.quick-brand span{display:block}.quick-brand strong{font-size:18px}.quick-brand span{font-size:12px;color:var(--muted);margin-top:2px}
.quick-menu>a,.quick-menu>button{width:100%;display:flex;align-items:center;gap:13px;padding:15px 12px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font-weight:730;text-align:left;cursor:pointer}
.quick-menu>a svg,.quick-menu>button svg{width:21px;height:21px;color:var(--brand-primary)}
.toast{position:fixed;z-index:80;left:50%;bottom:112px;max-width:min(420px,calc(100% - 36px));padding:13px 17px;border-radius:15px;background:#15231a;color:#fff;font-size:13px;font-weight:650;box-shadow:0 16px 38px rgba(0,0,0,.22);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:.25s ease;text-align:center}
.toast.show{transform:translate(-50%,0);opacity:1}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes cardReveal{to{opacity:1;transform:translateY(0)}}
@media(max-width:980px){.app-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.hero{min-height:350px}}
@media(max-width:680px){
  :root{--dock-clearance:138px}
  body{background:#f6f9f3}
  .app-shell{width:100%;min-height:100vh;margin:0 0 110px;border:0;border-radius:0;box-shadow:none;background:#fff}
  .hero{min-height:330px;padding:58px 18px 22px;border-radius:0 0 34px 34px}
  .round-action{top:18px;width:43px;height:43px;border-radius:15px}.menu-trigger{left:18px}.school-link{right:18px}
  .school-logo{width:132px;height:132px}.hero-copy h1{font-size:39px}.hero-copy p{font-size:13px;margin-top:9px}.hero-accent{margin-top:13px}
  .apps-section{padding:25px 16px calc(var(--dock-clearance) + 12px)}.app-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .app-card{min-height:142px;border-radius:23px;padding:14px 6px 12px;gap:11px}
  .app-icon-wrap{width:67px;height:67px;border-radius:22px}.app-icon{width:34px;height:34px}.app-custom-icon{width:45px;height:45px}.app-name{font-size:12.5px}
  .bottom-dock{width:calc(100% - 22px);min-height:70px;border-radius:25px;padding:7px 11px;grid-template-columns:1fr 1fr 78px 1fr 1fr}.dock-fab{width:64px;height:64px;border-width:6px;margin-top:-20px}.dock-item span{font-size:9px}
}
@media(max-width:380px){:root{--dock-clearance:132px}.hero{min-height:310px}.school-logo{width:116px;height:116px}.hero-copy h1{font-size:35px}.apps-section{padding-inline:11px;padding-bottom:calc(var(--dock-clearance) + 10px)}.app-grid{gap:9px}.app-card{min-height:132px;border-radius:20px}.app-icon-wrap{width:61px;height:61px;border-radius:20px}.app-name{font-size:11.5px}.bottom-dock{width:calc(100% - 14px)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}