/* GUULRAADRAAC v1587 — Visual System Phase 1
   Scope: typography, palette, surfaces, borders, shadows, Home + leaderboard/P2.
   No layout/functionality/database changes. */

:root{
  --gr-bg:#f5f2e9;
  --gr-bg-2:#fbfaf4;
  --gr-surface:#fffdf8;
  --gr-surface-soft:#f1f6f1;
  --gr-surface-mint:#eaf7f1;
  --gr-ink:#132820;
  --gr-ink-2:#203a31;
  --gr-muted:#687870;
  --gr-line:#dce7e0;
  --gr-primary:#0f766e;
  --gr-primary-2:#18a88d;
  --gr-primary-deep:#0a5d55;
  --gr-gold:#f2b83f;
  --gr-gold-soft:#fff4cf;
  --gr-coral:#eb8d6b;
  --gr-lav:#7167e8;
  --gr-blue:#6797df;
  --gr-shadow:0 10px 28px rgba(28,55,46,.075);
  --gr-shadow-strong:0 16px 38px rgba(24,53,44,.11);
  --gr-radius:20px;
}

html[data-guul-comfort-resolved="dark"]{
  --gr-bg:#0d1a16;
  --gr-bg-2:#101f1a;
  --gr-surface:#172820;
  --gr-surface-soft:#1c3028;
  --gr-surface-mint:#18352c;
  --gr-ink:#f5f3e9;
  --gr-ink-2:#e5eee8;
  --gr-muted:#a9b8b1;
  --gr-line:#29443a;
  --gr-primary:#2bcaa6;
  --gr-primary-2:#42d5b5;
  --gr-primary-deep:#18a98b;
  --gr-gold:#f4c65a;
  --gr-gold-soft:#3b341d;
  --gr-coral:#f0a184;
  --gr-lav:#a399ff;
  --gr-blue:#8ab4ef;
  --gr-shadow:0 10px 28px rgba(0,0,0,.18);
  --gr-shadow-strong:0 18px 42px rgba(0,0,0,.26);
}

.v2Home,.p2App,.p2Overlay,.leaderboardPage{
  font-family:GuulHero,"Nunito Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important;
  color:var(--gr-ink)!important;
}

/* HOME — page + typography */
.v2Home{
  background:linear-gradient(180deg,var(--gr-bg-2) 0%,var(--gr-bg) 54%,var(--gr-bg-2) 100%)!important;
  color:var(--gr-ink)!important;
}
.v2SectionHead h2,.v2ChallengeCopy h2,.v2ServiceCopy b{
  color:var(--gr-ink)!important;
  font-family:inherit!important;
  letter-spacing:-.018em!important;
}
.v2SectionHead h2{font-weight:900!important}
.v2ServiceCopy small,.v2ChallengeCopy p,.v2ChallengeCopy em{color:var(--gr-muted)!important}
.v2SectionHead button{color:var(--gr-primary)!important}

/* HERO — keep structure, unify typography/colors */
.g1581HeroShell{--hero-bg:var(--gr-surface);--hero-ink:var(--gr-ink);--hero-muted:var(--gr-muted);--hero-card:var(--gr-surface)!important}
.g1581Hero{background:var(--gr-surface)!important}
.g1581Brand strong,.g1581Copy h1,.g1581MetaCard b{color:var(--gr-ink)!important}
.g1581Brand small,.g1581Copy p,.g1581MetaCard small{color:var(--gr-muted)!important}
.g1581MetaCard,.g1581Search{
  background:color-mix(in srgb,var(--gr-surface) 94%,white 6%)!important;
  border-color:var(--gr-line)!important;
  box-shadow:var(--gr-shadow)!important;
}
.g1581Search:focus-within{border-color:var(--gr-primary-2)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--gr-primary) 16%,transparent)!important}

/* Weekly challenge */
.v2Challenge{
  background:linear-gradient(160deg,var(--gr-surface) 0%,color-mix(in srgb,var(--gr-surface-mint) 64%,var(--gr-surface)) 100%)!important;
  border:1px solid var(--gr-line)!important;
  border-radius:22px!important;
  box-shadow:var(--gr-shadow)!important;
  color:var(--gr-ink)!important;
}
.v2Challenge::after{background:radial-gradient(circle,color-mix(in srgb,var(--gr-primary) 9%,transparent),transparent 68%)!important}
.v2ChallengeCopy small{color:var(--gr-primary)!important}
.v2ChallengeBar{background:color-mix(in srgb,var(--gr-line) 76%,transparent)!important}
.v2ChallengeBar i{background:linear-gradient(90deg,var(--gr-primary),var(--gr-primary-2))!important}
.v2ChallengeRing{background:conic-gradient(var(--gr-primary-2) 0 28%,color-mix(in srgb,var(--gr-line) 80%,transparent) 28%)!important;box-shadow:inset 0 0 0 9px var(--gr-surface),0 7px 18px rgba(21,90,73,.08)!important}
.v2ChallengeRing b{color:var(--gr-primary)!important}
.v2ChallengeRing span{color:var(--gr-muted)!important}
.v2ChallengeWin{background:linear-gradient(90deg,var(--gr-surface-mint),color-mix(in srgb,var(--gr-surface) 76%,var(--gr-gold-soft)))!important;border-color:var(--gr-line)!important;color:var(--gr-ink)!important}
.v2ChallengeWin small{color:var(--gr-primary)!important}

/* Service cards — one coherent family, accents carry category identity */
.v2ServiceCard{
  background:var(--gr-surface)!important;
  border:1px solid var(--gr-line)!important;
  box-shadow:var(--gr-shadow)!important;
  color:var(--gr-ink)!important;
  border-radius:18px!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.v2ServiceCard:hover{transform:translateY(-2px);box-shadow:var(--gr-shadow-strong)!important}
.v2ServiceCard.books,.v2ServiceCard.exams,.v2ServiceCard.english,.v2ServiceCard.lessons{border-bottom:3px solid #63bca9!important}
.v2ServiceCard.game{border-bottom:3px solid var(--gr-gold)!important}
.v2ServiceCard.gov{border-bottom:3px solid #8f87d9!important}
.v2ServiceIcon{background:var(--gr-surface-soft)!important;border:1px solid var(--gr-line)!important;box-shadow:none!important}
.v2Chevron{color:var(--gr-primary)!important}

/* Bottom navigation */
.v2BottomNav{
  background:color-mix(in srgb,var(--gr-surface) 92%,transparent)!important;
  border-color:var(--gr-line)!important;
  box-shadow:0 -8px 26px rgba(28,55,46,.09)!important;
  backdrop-filter:blur(16px)!important;
}
.v2BottomNav button{color:var(--gr-muted)!important;font-family:inherit!important}
.v2BottomNav button.active{color:var(--gr-primary)!important;background:var(--gr-surface-mint)!important}

/* OFFLINE CTA — align with new design language */
.v2Home>.guulOfflineBelowHero .guulOfflineLauncher{font-family:inherit!important;border-color:color-mix(in srgb,var(--gr-primary-2) 35%,transparent)!important;box-shadow:0 9px 22px rgba(14,118,110,.15)!important}

/* PHASE 2 / LEADERBOARD — shell */
.p2Overlay{background:rgba(9,31,25,.42)!important}
.p2App{
  background:linear-gradient(180deg,var(--gr-bg-2),var(--gr-bg))!important;
  color:var(--gr-ink)!important;
}
.p2Head{
  background:radial-gradient(circle at 88% 10%,rgba(255,255,255,.12),transparent 28%),linear-gradient(125deg,#0b5f56 0%,#117c6d 56%,#2a9c84 100%)!important;
  color:#fff!important;
}
.p2HeadCopy small{color:#cdeee4!important}
.p2HeadCopy p{color:#ebfaf5!important}
.p2Back,.p2Close{background:rgba(255,255,255,.13)!important;border:1px solid rgba(255,255,255,.14)!important}

/* Leaderboard top hero */
.p2Top20HeroV69,.p2LeaderboardHeroV136{
  border-color:color-mix(in srgb,var(--gr-gold) 34%,var(--gr-line))!important;
  background:radial-gradient(circle at 88% 18%,rgba(244,184,63,.18),transparent 30%),linear-gradient(135deg,var(--gr-surface) 0%,var(--gr-bg-2) 58%,var(--gr-surface-mint) 100%)!important;
  box-shadow:var(--gr-shadow)!important;
}
.p2Top20HeroV69 small,.p2LeaderboardHeroV136 small{color:var(--gr-primary)!important}
.p2Top20HeroV69 h3,.p2LeaderboardHeroV136 h3{color:var(--gr-ink)!important;letter-spacing:-.025em!important}
.p2Top20HeroV69 p,.p2LeaderboardHeroV136 p{color:var(--gr-muted)!important}
.p2Top20HeroV69>span,.p2LeaderboardHeroV136>span{background:linear-gradient(145deg,var(--gr-gold),#f0a92c)!important;box-shadow:0 14px 28px rgba(189,130,17,.19)!important;color:#fff!important}

/* Leaderboard summary cards */
.p2RankSummary>div,.p2RankSummaryV135>div,.p2RankSummaryV136>div{
  background:var(--gr-surface)!important;
  border-color:var(--gr-line)!important;
  box-shadow:var(--gr-shadow)!important;
  color:var(--gr-ink)!important;
}
.p2RankSummary small,.p2RankSummaryV135 small,.p2RankSummaryV136 small{color:var(--gr-muted)!important}

/* Top 3 podiums — keep medals, refine palette */
.p2Top3InfoV142,.p2Top3NameV139{background:var(--gr-surface)!important;border-color:var(--gr-line)!important;box-shadow:var(--gr-shadow)!important}
.p2Top3CardV142.rank1 .p2Top3InfoV142,.p2Top3CardV139.rank1 .p2Top3NameV139{background:linear-gradient(180deg,#fffdf3,var(--gr-gold-soft))!important;border-color:#eed78b!important}
.p2Top3CardV142.rank2 .p2Top3InfoV142,.p2Top3CardV139.rank2 .p2Top3NameV139{background:linear-gradient(180deg,#fbfdff,#edf4ff)!important;border-color:#cfdef5!important}
.p2Top3CardV142.rank3 .p2Top3InfoV142,.p2Top3CardV139.rank3 .p2Top3NameV139{background:linear-gradient(180deg,#fffaf7,#fff0e7)!important;border-color:#efd5c6!important}
.p2Top3InfoV142 h3,.p2Top3NameV139 h3{color:var(--gr-ink)!important;font-family:inherit!important}
.p2Top3InfoV142 strong,.p2Top3NameV139 strong{color:var(--gr-primary)!important}
.p2Top3CardV142.rank1 .p2Top3PodiumV142{background:linear-gradient(180deg,#f6c33e,#e9a91d 70%,#ffe9a2)!important}
.p2Top3CardV142.rank2 .p2Top3PodiumV142{background:linear-gradient(180deg,#94b9ef,#b9cff3 70%,#e6effc)!important}
.p2Top3CardV142.rank3 .p2Top3PodiumV142{background:linear-gradient(180deg,#eaa07d,#efb596 70%,#f8dfd1)!important}

/* Leaderboard list */
.p2RankTitleV69 small,.p2RankTitleV136 small{color:var(--gr-primary)!important}
.p2RankTitleV69 h3,.p2RankTitleV136 h3{color:var(--gr-ink)!important}
.p2RankRowV69,.p2RankCardV136{
  background:var(--gr-surface)!important;
  border-color:var(--gr-line)!important;
  box-shadow:0 6px 16px rgba(25,57,47,.055)!important;
  color:var(--gr-ink)!important;
}
.p2RankRowV69:hover,.p2RankCardV136:hover{border-color:color-mix(in srgb,var(--gr-primary) 28%,var(--gr-line))!important;box-shadow:var(--gr-shadow)!important}
.p2RankRowV69.me,.p2RankCardV136.me{background:linear-gradient(135deg,var(--gr-surface-mint),var(--gr-surface))!important;border-color:color-mix(in srgb,var(--gr-primary) 42%,var(--gr-line))!important;box-shadow:inset 4px 0 var(--gr-primary),var(--gr-shadow)!important}
.p2RankWho small,.p2RankPersonV136 small,.p2RankTitleV69>span,.p2RankTitleV136>span{color:var(--gr-muted)!important}
.p2RankPoints,.p2RankScoreV136{color:var(--gr-ink)!important}

/* Own rank card */
.p2OwnRankCardV135,.p2OwnRankV136,.p2OwnRankV139{
  background:linear-gradient(135deg,var(--gr-surface-mint),var(--gr-surface))!important;
  border-color:color-mix(in srgb,var(--gr-primary) 30%,var(--gr-line))!important;
  box-shadow:var(--gr-shadow)!important;
}
.p2OwnRankWhoV135 small,.p2OwnRankV136>div:nth-child(2) small,.p2OwnCopyV139 small{color:var(--gr-primary)!important}
.p2OwnRankNumbersV135 strong,.p2OwnNumbersV136 b{background:var(--gr-surface)!important;color:var(--gr-primary)!important}
.p2MeChipV135{background:var(--gr-primary)!important;color:#fff!important}

/* Dark-mode specific leaderboard polish */
html[data-guul-comfort-resolved="dark"] .p2Top3CardV142.rank1 .p2Top3InfoV142,
html[data-guul-comfort-resolved="dark"] .p2Top3CardV139.rank1 .p2Top3NameV139{background:linear-gradient(180deg,#2e2b1e,#342d16)!important;border-color:#62552c!important}
html[data-guul-comfort-resolved="dark"] .p2Top3CardV142.rank2 .p2Top3InfoV142,
html[data-guul-comfort-resolved="dark"] .p2Top3CardV139.rank2 .p2Top3NameV139{background:linear-gradient(180deg,#1b2a32,#1a2730)!important;border-color:#344b5d!important}
html[data-guul-comfort-resolved="dark"] .p2Top3CardV142.rank3 .p2Top3InfoV142,
html[data-guul-comfort-resolved="dark"] .p2Top3CardV139.rank3 .p2Top3NameV139{background:linear-gradient(180deg,#31251f,#2d211c)!important;border-color:#5a4134!important}

@media(prefers-reduced-motion:reduce){
  .v2ServiceCard,.p2RankRowV69,.p2RankCardV136{transition:none!important}
}