/* ============================================================
   Starter Kit — site styles.

   All colours, fonts and spacing are custom properties declared
   once in :root below. Change them there and the whole site
   follows; you should not need to hunt through rules.

   Dark by default, with a light theme for visitors whose system
   asks for one.
   ============================================================ */

:root {
  color-scheme: dark;
  /* ---- Brand: the four values worth changing first ---- */
  --accent: #F5C518;
  --accent-strong: #FFD84D;
  --bg: #06122b;
  --surface: #0F2450;

  /* ---- Derived ---- */
  --surface-2: #16306a;
  --border: rgba(255, 255, 255, 0.09);
  --text: #e8edf5;
  --text-muted: #9dabc2;
  --text-dim: #7385a0;

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --maxw: 1080px;
  --gap: 1rem;
}


*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }

main { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem 4rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap);
  padding: 0.85rem 1.25rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); }
.brand__mark { display: block; height: 28px; width: auto; }
.brand__name { font-weight: 700; letter-spacing: -0.01em; }

.site-nav { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.site-nav a {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}
.site-nav a:hover { background: var(--surface-2); color: var(--text); }

/* ---------- hero + search ---------- */

.hero { padding: 3rem 0 2rem; }
.hero__title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1; letter-spacing: -0.02em;
}
.hero__tagline { margin: 0.6rem 0 0; color: var(--accent); font-weight: 600; }
.hero__desc { margin: 0.75rem 0 0; color: var(--text-muted); max-width: 60ch; }

.search { position: relative; margin-top: 1.75rem; max-width: 520px; }
.search__input {
  width: 100%;
  padding: 0.8rem 1rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.search__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.search__results:not(:empty) {
  margin-top: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.search-hit {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 1rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.search-hit:last-child { border-bottom: 0; }
.search-hit:hover { background: var(--surface-2); }
.search-hit__name { font-weight: 600; }
.search-hit__sem { color: var(--text-dim); font-size: 0.82rem; white-space: nowrap; }

/* ---------- catalogue ---------- */

.semester { margin-top: 2.5rem; }
.semester__title {
  margin: 0 0 1rem;
  font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-dim);
}

.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gap);
}

.subject-card {
  display: block;
  padding: 1.1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.subject-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  color: var(--text);
}
.subject-card__name { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.subject-card__meta { margin: 0.4rem 0 0; color: var(--text-dim); font-size: 0.84rem; }

/* ---------- resources ---------- */

.subject-head { padding: 2.5rem 0 0.5rem; }
.subject-head h1 { margin: 0.6rem 0 0; font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.2; }
.subject-head__sem { margin: 0.3rem 0 0; color: var(--text-dim); font-size: 0.9rem; }
.back { font-size: 0.88rem; color: var(--text-muted); }

.resource-group { margin-top: 2rem; }
.resource-group__title {
  margin: 0 0 0.75rem;
  font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-dim);
}
.resource-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.resource__link {
  display: block;
  padding: 0.8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.resource__link:hover { border-color: var(--accent); color: var(--text); }

.empty { color: var(--text-dim); }
.empty code, .note code {
  padding: 0.1rem 0.35rem;
  background: var(--surface-2);
  border-radius: 4px;
  font-size: 0.88em;
}

/* ---------- prose pages ---------- */

.prose { max-width: 68ch; padding: 2.5rem 0 0; }
.prose h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.2; margin: 0 0 0.75rem; }
.prose h2 { margin: 2rem 0 0.5rem; font-size: 1.15rem; }
.prose p { color: var(--text-muted); }
.note {
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

.button {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.65rem 1.3rem;
  background: var(--accent);
  color: #08111f;
  border-radius: 999px;
  font-weight: 600;
}
.button:hover { background: var(--accent-strong); color: #08111f; }

/* ---------- announcement ---------- */

.announcement {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 1.25rem;
  background: rgba(4, 8, 16, 0.7);
}
.announcement[hidden] { display: none; }
.announcement__box {
  position: relative;
  max-width: 420px;
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.announcement__box h2 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.announcement__box p { margin: 0; color: var(--text-muted); }
.announcement__close {
  position: absolute; top: 0.5rem; right: 0.65rem;
  background: none; border: 0; cursor: pointer;
  color: var(--text-dim); font-size: 1.5rem; line-height: 1;
}
.announcement__cta {
  display: inline-block; margin-top: 1rem;
  padding: 0.55rem 1.1rem;
  background: var(--accent); color: #08111f;
  border-radius: 999px; font-weight: 600;
}

/* ---------- footer ---------- */

.site-footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.88rem;
}
.site-footer p { margin: 0.25rem 0; }
.site-footer__links { display: flex; gap: 1rem; }
.site-footer__fine { color: var(--text-dim); opacity: 0.75; }

/* ---------- small screens ---------- */

@media (max-width: 560px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .subject-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 2rem; }
}

/* ---- buy box + prices ---- */
.resource__price{color:var(--accent);font-weight:700;margin-left:.4rem}
.buybox{margin-top:2rem;padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.buybox h2{margin:0 0 .5rem}
.buybox__msg{padding:.75rem;background:var(--surface-2);border-radius:var(--radius-sm);font-weight:600}
.buybox__row{display:flex;gap:.75rem;flex-wrap:wrap}

/* ---- vibes: memes, reviews, popup, toast, flying emojis ---- */
.vibes{max-width:1000px;margin:3rem auto;padding:0 1.25rem}
.vibes h2{margin:0 0 1rem}
.memes,.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.meme{background:#0b1d44;border:1px solid var(--border);border-radius:14px;padding:1rem;text-align:center;transition:transform .2s}
.meme:hover{transform:rotate(-1.5deg) scale(1.02)}
.meme__cap{font:700 1rem/1.35 Poppins,"Segoe UI",sans-serif;letter-spacing:.01em;color:#fff;text-shadow:0.5px 0 0 #F5C518,-0.5px 0 0 #F5C518,0 0.5px 0 #F5C518,0 -0.5px 0 #F5C518}
.meme__emoji{font-size:4rem;margin:.4rem 0}
.review{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1rem}
.review__stars{color:var(--accent)}
.review__who{color:var(--text-dim);font-size:.85rem;margin-top:.5rem}
.fly{position:fixed;bottom:-40px;font-size:28px;pointer-events:none;z-index:60;animation:flyup var(--d) ease-out forwards}
@keyframes flyup{to{transform:translate(var(--dx),-105vh) rotate(var(--r));opacity:0}}
.react{position:fixed;left:12px;bottom:12px;display:flex;gap:6px;z-index:55}
.react button{font-size:20px;border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:.3rem .6rem;cursor:pointer}
.pop{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}
.pop__box{background:var(--surface);border:2px solid var(--accent);border-radius:16px;max-width:380px;padding:1.5rem;text-align:center}
.pop__box h3{margin:.3rem 0;font-size:1.6rem}
.pop__row{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.toast{position:fixed;right:12px;bottom:12px;max-width:290px;background:var(--surface-2);border:1px solid var(--accent);border-radius:14px;padding:.8rem 1rem;z-index:90;animation:toastin .4s ease-out}
@keyframes toastin{from{transform:translateY(30px);opacity:0}}
@media (prefers-reduced-motion:reduce){.fly{display:none}}

/* ---- luxury + mobile pass ---- */
:root{--accent:#E2B646;--accent-strong:#F3CE6B;--bg:#0b1b3c;--surface:#12285a;--surface-2:#1a3474;--border:rgba(226,182,70,.28);--text:#f4ecd8;--text-muted:#cfc6a8}
body{background:linear-gradient(#0b1b3c,#081733) fixed;color:var(--text)}
h1,h2,h3,.brand__name{font-family:Georgia,"Times New Roman",serif;letter-spacing:.01em}
h2{color:var(--accent-strong)}
h2::after{content:"";display:block;width:56px;height:2px;background:var(--accent);margin-top:.5rem}
.button{background:transparent;color:var(--accent-strong);border:1px solid var(--accent);border-radius:999px;padding:.6rem 1.3rem;font-weight:700}
.button:hover{background:var(--accent);color:#0b1b3c}
.sky .hero__tagline{color:#6a4318;font-family:Georgia,serif;font-style:italic;font-size:1.3rem}
.sky .hero__desc{color:#4a3520}
.sky .search__input{background:#fffaf0;color:#2b1a0a;border:1px solid #c99a12}
.slides{position:relative;min-height:230px}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem 1.25rem;background:linear-gradient(135deg,#12285a,#1a3474);border:1px solid var(--accent);border-radius:20px;opacity:0;transition:opacity .8s}
.slide.on{opacity:1}
.slide blockquote{margin:0;font:italic 1.5rem/1.35 Georgia,serif;color:var(--accent-strong)}
.slide figcaption{margin-top:1rem;color:var(--text-muted)}
.help{text-align:center}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0}
.lead{font:italic 1.2rem/1.5 Georgia,serif;color:var(--accent-strong)}
details{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.8rem 1rem;margin:.6rem 0}
summary{cursor:pointer;font-weight:700}
.wheelbox{position:relative;width:min(340px,86vw);margin:1.5rem auto}
.wheelbox canvas{width:100%;height:auto;border-radius:50%;box-shadow:0 0 0 6px #E2B646,0 20px 40px rgba(0,0,0,.5);cursor:pointer}
.wheelpin{position:absolute;left:50%;top:-16px;transform:translateX(-50%);border:12px solid transparent;border-top:24px solid #f3ce6b;z-index:2}
.wheelres{max-width:420px;margin:1rem auto;padding:1rem;background:var(--surface);border:1px solid var(--accent);border-radius:14px;font-size:1.15rem}
@media (max-width:600px){
  .site-header{flex-wrap:wrap;gap:.5rem;padding:.6rem 1rem}
  .site-nav,.nav{flex-wrap:wrap;gap:.6rem;font-size:.9rem}
  .hero.sky{min-height:auto;padding:1.25rem 1rem 2rem}
  .sky .hero__tagline{font-size:1.1rem}
  .vibes{margin:2rem auto;padding:0 1rem}
  .slides{min-height:280px}.slide blockquote{font-size:1.2rem}
  .memes,.cards3{grid-template-columns:1fr}
  .button{display:inline-block;min-height:44px}
}

/* ---- more yellow + white accents in UI elements ---- */
.subject-card,.resource,.meme,.buybox,details{border-top:3px solid var(--accent)}
.subject-card__name,.resource__link{color:#fff}
.subject-card:hover{box-shadow:0 0 0 1px var(--accent),0 10px 22px rgba(0,0,0,.35)}
a{color:var(--accent-strong)}
a:hover{color:#fff}
.search__input:focus{outline:2px solid var(--accent);outline-offset:1px}
.site-nav a,.nav a{color:#fdf6e3}
.site-nav a:hover,.nav a:hover{color:var(--accent)}
.brand__name{color:#fff}

/* ---- push copy toward white, away from dim brown/grey, outside the light hero ---- */
body{color:var(--text)}
.subject-card,.resource,.meme,.buybox,.review,.slide figcaption,.prose,footer,.site-footer{color:#fefbf2}
.subject-card p,.resource p,.meme p,.buybox p,.prose p{color:#efe9d8}
.text-dim,.card__meta{color:#d8d0b8}

/* ---- Topper AI chat ---- */
.topperwrap{max-width:900px}
.topper{display:grid;grid-template-columns:1fr 240px;grid-template-areas:"log suggest" "form suggest";gap:1rem}
.topper__log{grid-area:log;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1rem;min-height:280px;max-height:440px;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem}
.msg{max-width:85%;padding:.6rem .9rem;border-radius:14px;line-height:1.4}
.msg--ai{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border);color:#fefbf2}
.msg--user{align-self:flex-end;background:var(--accent);color:#0b1b3c;font-weight:600}
.topper__form{grid-area:form;display:flex;gap:.5rem;flex-wrap:wrap}
.topper__form input{flex:1;min-width:160px;padding:.7rem .9rem;border-radius:999px;border:1px solid var(--accent);background:#fffaf0;color:#2b1a0a}
.topper__suggest{grid-area:suggest;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1rem;font-size:.9rem}
.topper__suggest ul{margin:.5rem 0 0;padding-left:1.1rem}
.topper__suggest a{word-break:break-word}
.topper__fine{text-align:center;color:var(--text-muted);margin-top:.75rem}
@media (max-width:760px){.topper{grid-template-columns:1fr;grid-template-areas:"log" "form" "suggest"}}

/* ---- login gate ---- */
.authgate{position:fixed;inset:0;background:rgba(6,14,32,.92);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem}
.authgate__box{background:var(--surface);border:1px solid var(--accent);border-radius:18px;max-width:360px;padding:2rem 1.5rem;text-align:center}
.authgate__logo{border-radius:50%;margin-bottom:.75rem}
.authgate__box h2{margin:.2rem 0 .5rem;color:var(--accent-strong)}
.authgate__btn{display:block;width:100%;margin-top:1rem}
.authgate__fine{margin-top:.75rem;color:var(--text-muted);font-size:.8rem}

/* ---- profile chip (top-right, shown after Google sign-in) ---- */
.site-header{position:relative}
.profilechip{margin-left:auto;position:relative}
.profilechip__btn{background:none;border:2px solid var(--accent);border-radius:50%;padding:0;width:38px;height:38px;overflow:hidden;cursor:pointer}
.profilechip__avatar{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.profilechip__avatar--big{width:56px;height:56px;margin:0 auto .5rem}
.profilechip__menu{position:absolute;right:0;top:48px;background:var(--surface);border:1px solid var(--accent);border-radius:14px;padding:1rem;width:220px;text-align:center;z-index:120;box-shadow:0 14px 30px rgba(0,0,0,.4)}
.profilechip__name{font-weight:700;color:#fff;margin:.2rem 0 0}
.profilechip__email{color:var(--text-muted);font-size:.8rem;margin:.1rem 0 .8rem;word-break:break-word}

/* ---- locked resources (Short Notes / Videos) ---- */
.resource__link--locked{background:none;border:1px dashed var(--accent);border-radius:8px;padding:.35rem .6rem;cursor:pointer;font:inherit;text-align:left;opacity:.9}
.resource__link--locked:hover{opacity:1;background:rgba(226,182,70,.08)}

/* ---- thumbnail cards ---- */
.resource-list--cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem}
.resource-list--cards .resource{border:0;padding:0;background:none}
.rcard{position:relative;display:block;width:100%;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#16233f;padding:0;cursor:pointer;color:#fff;font:inherit}
.rcard:hover{border-color:var(--accent)}
.rcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;background:#fff}
.rcard__ph{position:absolute;inset:0;display:grid;place-items:center;font-size:2.4rem}
.rcard__title{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .6rem .55rem;background:linear-gradient(transparent,rgba(0,0,0,.85));font-weight:700;font-size:.95rem;text-align:left}
.rcard__tag{position:absolute;top:8px;left:8px;background:var(--accent);color:#0A1F44;font-size:.7rem;font-weight:800;padding:2px 8px;border-radius:99px}
.rcard__tag--lock{left:auto;right:8px;background:rgba(0,0,0,.7);color:#fff;font-weight:600}
.rcard--locked .rcard__img{filter:brightness(.45) blur(2px)}
.pop__cat{font-size:4rem;line-height:1}
.pop__box h3{font-size:1.3rem}
.pop__price{margin:.9rem 0;padding:.7rem;border:1px dashed var(--accent);border-radius:12px}
.pop__price b{font-size:1.8rem;color:var(--accent)}
.pop__steps{font-weight:800;letter-spacing:.05em}