/* ===== GMC Guru – main styles ===== */
:root{
  --ink:#0B1020; --ink2:#1B2336; --bg:#F5F6FA; --white:#fff;
  --blue:#1A73E8; --blue-d:#174EA6; --blue-l:#E8F0FE;
  --g-blue:#4285F4; --g-red:#EA4335; --g-yellow:#FBBC04; --g-green:#34A853;
  --green-d:#137333; --green-l:#E6F4EA;
  --muted:#5F6368; --line:#E8EAED; --line2:#DADCE0; --text2:#3C4043;
  --head:'Space Grotesk',system-ui,sans-serif; --body:Inter,system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:24px; --tabbar:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-d)}
button{font:inherit}
.gg-container{max-width:1240px;margin:0 auto;padding:0 24px}
.gg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gg-mono{font-family:var(--mono);font-size:13px}
.gg-muted{color:var(--muted)}
.gg-green{color:var(--green-d)}
.gg-center{text-align:center;display:flex;justify-content:center}
.gg-small{font-size:13px;color:var(--muted)}
.gg-dot{width:9px;height:9px;border-radius:50%;background:var(--g-green);display:inline-block;flex-shrink:0}
@keyframes gg-pulse{0%{box-shadow:0 0 0 0 rgba(52,168,83,.6)}70%{box-shadow:0 0 0 10px rgba(52,168,83,0)}100%{box-shadow:0 0 0 0 rgba(52,168,83,0)}}
@keyframes gg-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes gg-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
.gg-live{animation:gg-pulse 2s infinite}
.gg-floaty{animation:gg-float 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.gg-live{animation:none!important}html{scroll-behavior:auto}}

/* ===== Mobile app tab bar ===== */
.gg-tabbar{display:none}
@media (max-width:860px){
  body{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
  .gg-tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:70;height:76px;padding:6px;border-radius:999px;background:rgba(40,42,48,.72);backdrop-filter:saturate(1.8) blur(22px);-webkit-backdrop-filter:saturate(1.8) blur(22px);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.25),0 18px 40px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.2);isolation:isolate}
  .gg-tabbar__pill{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/5);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),#26292F;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 6px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.3);transform:translateX(calc(var(--gg-i,0) * 100%));transition:transform .45s cubic-bezier(.34,1.4,.5,1);z-index:-1}
  .gg-tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#F1F3F4;font-size:12.5px;font-weight:600;letter-spacing:.01em;border-radius:999px;-webkit-tap-highlight-color:transparent;transition:color .25s,transform .15s}
  .gg-tabbar a:active{transform:scale(.92)}
  .gg-tabbar a.is-active{color:#7EE2A0}
  .gg-tabbar a.is-active svg{filter:drop-shadow(0 0 8px rgba(126,226,160,.35))}
  .gg-tabbar__ico{position:relative;display:flex}
  .gg-tabbar__dot{position:absolute;top:0;right:-2px;width:9px;height:9px;border-radius:50%;background:#34A853;box-shadow:0 0 0 2px rgba(40,42,48,.9)}
}

/* ===== v1.1 App header, side menu, search ===== */
.gg-header{position:sticky;top:0;z-index:80;background:rgba(11,16,32,.82);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid rgba(255,255,255,.08);padding-top:env(safe-area-inset-top)}
.gg-header__inner{max-width:1240px;margin:0 auto;padding:0 16px;height:68px;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px}
.gg-burger{width:46px;height:46px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;padding:0 12px;cursor:pointer;transition:background .2s}
.gg-burger:hover{background:rgba(255,255,255,.12)}
.gg-burger span{display:block;height:2.5px;border-radius:3px;background:#fff;transition:width .3s,transform .3s}
.gg-burger span:nth-child(1){width:20px}
.gg-burger span:nth-child(2){width:14px;background:linear-gradient(90deg,#4285F4,#34A853)}
.gg-burger span:nth-child(3){width:9px}
.gg-burger:hover span{width:20px}
.gg-logo{justify-self:center;display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.gg-logo:hover{color:#fff}
.gg-logo__mark{width:38px;height:38px;flex-shrink:0;display:block;background:none;border:0;padding:0}
.gg-logo__img{height:44px;width:auto}
.gg-logo__text{font-family:var(--head);font-size:22px;font-weight:500;letter-spacing:-.02em;color:#E8EAED}
.gg-logo__text b{font-weight:700;color:#fff}
.gg-logo--sm .gg-logo__mark{width:32px;height:32px}
.gg-logo--sm .gg-logo__text{font-size:19px}
.gg-header__actions{display:flex;align-items:center;gap:8px}
.gg-icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.gg-icon-btn:hover{background:rgba(255,255,255,.12)}
.gg-avatar{width:44px;height:44px;border-radius:50%;padding:2px;background:conic-gradient(#4285F4 0 25%,#EA4335 0 50%,#FBBC04 0 75%,#34A853 0);display:block}
.gg-avatar>*{width:100%;height:100%;border-radius:50%;background:#1B2336;color:#BDC1C6;display:flex;align-items:center;justify-content:center;object-fit:cover;border:2px solid #0B1020;box-sizing:border-box}
.gg-avatar svg{padding:8px}

.gg-drawer{position:fixed;inset:0;z-index:100;visibility:hidden}
.gg-drawer.is-open{visibility:visible}
.gg-drawer__backdrop{position:absolute;inset:0;background:rgba(5,8,18,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.gg-drawer.is-open .gg-drawer__backdrop{opacity:1}
.gg-drawer__panel{position:absolute;top:0;bottom:0;left:0;width:min(84vw,340px);background:#0B1020;border-right:1px solid rgba(255,255,255,.1);padding:calc(18px + env(safe-area-inset-top)) 18px 24px;transform:translateX(-100%);transition:transform .38s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:22px;color:#fff;box-shadow:20px 0 60px rgba(0,0,0,.4)}
.gg-drawer.is-open .gg-drawer__panel{transform:none}
.gg-drawer__head{display:flex;align-items:center;justify-content:space-between}
.gg-drawer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gg-drawer__links a{display:block;padding:15px 18px;border-radius:16px;color:#E8EAED;font-weight:600;font-size:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.gg-drawer__links a:hover{background:rgba(255,255,255,.08);color:#7EE2A0}

.gg-search{position:fixed;inset:0;z-index:110;visibility:hidden}
.gg-search.is-open{visibility:visible}
.gg-search__backdrop{position:absolute;inset:0;background:rgba(5,8,18,.6);backdrop-filter:blur(6px);opacity:0;transition:opacity .25s}
.gg-search.is-open .gg-search__backdrop{opacity:1}
.gg-search__box{position:relative;margin:calc(14px + env(safe-area-inset-top)) auto 0;width:min(92vw,620px);background:#fff;border-radius:20px;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;color:#5F6368;box-shadow:0 20px 60px rgba(0,0,0,.4);transform:translateY(-20px);opacity:0;transition:transform .3s,opacity .3s}
.gg-search.is-open .gg-search__box{transform:none;opacity:1}
.gg-search__box input[type=search]{flex:1;min-width:0;border:0;outline:0;font:500 16px var(--body);color:#0B1020;padding:12px 0;background:transparent}
.gg-search__close{border:0;background:#F1F3F4;color:#3C4043;font:600 14px var(--body);padding:12px 14px;border-radius:14px;cursor:pointer}
body.gg-lock{overflow:hidden}

.gg-blank{min-height:calc(100vh - 68px);background:#0B1020}
@media (max-width:860px){.gg-header__inner{height:62px;padding:0 12px}.gg-header.is-hidden{transform:none}.gg-logo__text{font-size:20px}}

/* ===== v1.2 Light header with Canva logo ===== */
.gg-header{background:rgba(255,255,255,.92);border-bottom:1px solid #E8EAED;box-shadow:0 4px 20px rgba(11,16,32,.05)}
.gg-burger{background:#F1F3F4;border-color:#E8EAED}
.gg-burger:hover{background:#E8EAED}
.gg-burger span{background:#0B1020}
.gg-header .gg-icon-btn{background:#F1F3F4;border-color:#E8EAED;color:#0B1020}
.gg-header .gg-icon-btn:hover{background:#E8EAED}
.gg-avatar>*{background:#E8F0FE;color:#1A73E8;border-color:#fff}
.gg-header .gg-logo__text{color:#3C4043}
.gg-header .gg-logo__text b{color:#0B1020}
.gg-header .gg-logo{height:50px;overflow:hidden;align-items:flex-start}
.gg-header .gg-logo__img{height:156px;width:156px;max-width:none;margin:-50px -6px 0 -8px}
.gg-blank{background:#F5F6FA}
@media (max-width:860px){.gg-header .gg-logo{height:44px}.gg-header .gg-logo__img{height:136px;width:136px;margin:-42px -5px 0 -7px}}