/* Royal glass: one palette across hubs; no global auth/form/layout replacement. */
html.royal-hub{--royal-gold:#a393ff;--royal-ink:#172345;--royal-shadow:0 2px 0 #fff inset,0 16px 40px -22px #222b6980; color-scheme:light}
html.royal-hub body{background:radial-gradient(ellipse at 5% 0,#e8e4ff,transparent 55%),radial-gradient(ellipse at 95% 35%,#e3f5fa,transparent 55%),#f3f5fc}
/* footer rule (owner 8 Nov 2026): never change the footer. The ink colour used to sit on body and flowed into the footer text. It now applies to main only. */
html.royal-hub main{color:var(--royal-ink)}
html.royal-hub .royal-nav{background:linear-gradient(115deg,#0d1532,#202956);color:#eef1ff;box-shadow:0 1px 0 #c9bfff4d inset,0 12px 28px -20px #111936;border-radius:20px 20px 0 0}
html.royal-hub .royal-nav :is(a,summary){border-radius:12px;transition:background .18s,color .18s}
html.royal-hub .royal-nav :is(a,summary):hover,html.royal-hub .royal-nav [aria-current=page]{color:#d9d2ff;background:#a393ff26}
html.royal-hub .royal-hero{position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;min-height:290px;padding:64px clamp(24px,5vw,80px);padding-right:32%;margin:0 0 28px;border-radius:0 0 30px 30px;background:radial-gradient(ellipse at 85% 0,#7445b999,transparent 60%),radial-gradient(ellipse at 5% 100%,#16728266,transparent 65%),linear-gradient(125deg,#111833,#25215b);color:#f4f2ff;box-shadow:0 1px 0 #ffffff40 inset,0 24px 50px -30px #19134c99}
html.royal-hub .royal-hero :is(h1,h2){color:#f4f2ff;text-shadow:0 3px 12px #090c2450;letter-spacing:-.035em;line-height:1.12}
html.royal-hub .royal-hero h1{font:750 clamp(32px,4vw,60px)/1.12 system-ui,sans-serif;margin:10px 0 18px}
html.royal-hub .royal-hero :is(p,small){color:#d3def5;line-height:1.8}
html.royal-hub .royal-hero a{color:#baf5ff}
html.royal-hub .royal-art{position:absolute;right:6%;top:50%;width:230px;height:160px;transform:translateY(-50%);pointer-events:none;perspective:700px}
html.royal-hub .royal-icon{position:absolute;display:grid;place-items:center;width:105px;height:105px;border-radius:30px;color:white;font:54px/1 system-ui;border:1px solid #ffffff99;background:linear-gradient(140deg,#e3c6ff,#8359f5 45%,#4026ad);box-shadow:5px 7px 4px #fff3 inset,-5px -7px 8px #1d086f66 inset,0 26px 28px -14px #040820aa;transform:rotate(-13deg) rotateY(-15deg);animation:royal-float 7s ease-in-out infinite}
html.royal-hub .royal-icon:nth-child(2){right:0;top:-30px;width:76px;height:76px;font-size:40px;border-radius:23px;background:linear-gradient(135deg,#b7fff1,#27bdc7,#11618f);transform:rotate(12deg);animation-delay:-2s}
html.royal-hub .royal-icon:nth-child(3){left:-40px;bottom:-15px;width:68px;height:68px;font-size:39px;border-radius:21px;background:linear-gradient(140deg,#ffe49a,#efab79,#ab438a);transform:rotate(15deg);animation-delay:-4s}
html.royal-hub .royal-hero :is(.gai-orbs,.nt-orbs){display:none}
html.royal-hub :is(.royal-card,.royal-panel){border:1px solid #bfc8e66b;border-radius:24px;background:linear-gradient(145deg,#ffffffed,#f1f2ffb8);box-shadow:var(--royal-shadow);backdrop-filter:blur(12px)}
html.royal-hub .royal-card{position:relative;transition:transform .2s,box-shadow .2s;transform:perspective(900px) translateZ(0)}
html.royal-hub .royal-card:hover{transform:perspective(900px) translateY(-5px) rotateX(1deg);box-shadow:0 2px 0 #fff inset,0 28px 45px -24px #32347c88}
html.royal-hub .royal-card-icon{border-radius:17px;box-shadow:2px 3px 3px #ffffffb3 inset,-2px -3px 5px #2d32621f inset,0 10px 16px -9px #3a3b7c80;transform:rotate(-6deg)}
html.royal-hub :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #6a57de;outline-offset:4px}
html.royal-hub .royal-checker{position:relative}
html.royal-hub .royal-checker summary{cursor:pointer;padding:12px;list-style:none;color:#d9d2ff}
html.royal-hub .royal-checker summary::after{content:' ▾'}
html.royal-hub .royal-submenu{position:absolute;top:100%;left:0;min-width:230px;padding:10px;border:1px solid #a393ff55;border-radius:16px;background:#172142;box-shadow:0 20px 45px #080d2d66}
html.royal-hub .royal-submenu a{display:block;padding:12px;color:#f0f2ff;text-decoration:none}
@keyframes royal-float{50%{translate:0 -9px}}
@media(max-width:760px){html.royal-hub .royal-hero{padding:32px 22px;min-height:0;border-radius:0 0 22px 22px}html.royal-hub .royal-art{position:relative;right:auto;top:auto;transform:none;margin:45px auto 25px;width:190px;height:130px}html.royal-hub .royal-submenu{position:static;min-width:0}html.royal-hub .royal-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html.royal-hub *,html.royal-hub *::before,html.royal-hub *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{html.royal-hub .royal-art{display:none}html.royal-hub .royal-hero{background:white;color:black;padding:0;min-height:0;box-shadow:none}html.royal-hub .royal-hero :is(h1,h2,p,small){color:black}html.royal-hub :is(.royal-card,.royal-panel){box-shadow:none;backdrop-filter:none}}

/* Shared finishing, including legacy glass layers. */
html.royal-hub .royal-nav a{color:#eef1ff}
html.royal-hub .royal-nav summary:focus-visible{outline-color:var(--royal-gold)}
html.royal-hub .royal-paused{padding:clamp(24px,5vw,64px);margin:24px 0;text-align:center}
html.royal-hub .royal-links{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0;padding:20px;border:1px solid #a393ff66;border-radius:22px;background:linear-gradient(120deg,#151f42,#30245a);box-shadow:var(--royal-shadow)}
html.royal-hub .royal-links a{padding:12px 18px;border:1px solid #ffffff33;border-radius:14px;color:#e4deff;text-decoration:none;background:linear-gradient(145deg,#ffffff19,#ffffff05);box-shadow:0 1px 0 #ffffff33 inset}
html.royal-hub .royal-links a:hover{background:#ffffff22}
html.royal-hub .royal-card:focus-visible{box-shadow:0 0 0 5px #a393ff66,var(--royal-shadow)}
@media(hover:none),(pointer:coarse),(max-width:760px){html.royal-hub .royal-icon{animation:none}html.royal-hub :is(.royal-card,.gai-tile,.gaiLink,.ntLink):hover{transform:none}}
@media(prefers-reduced-motion:reduce){html.royal-hub :is(.royal-card,.gai-tile,.gaiLink,.ntLink,.gai-btn,.nt-btn):hover{transform:none}}
@media print{html.royal-hub :is(.royal-nav,.royal-links){display:none}}

/* Final pass: tagline/Pricing collision, duplicate wallet, per-tool gem icons. */
html.royal-hub .royal-nav{gap:12px;flex-wrap:wrap;min-width:0}
html.royal-hub .royal-nav a{white-space:nowrap}
html.royal-hub .royal-tagline{display:none}
html.royal-hub .royal-dup{display:none!important}
html.royal-hub .royal-gem{display:inline-grid;place-items:center;width:52px;height:52px;margin:0 14px 8px 0;vertical-align:middle;border-radius:16px;font:26px/1 system-ui;color:#fff;border:1px solid #ffffffaa;box-shadow:3px 4px 3px #ffffff59 inset,-3px -4px 6px #1d086f55 inset,0 14px 18px -10px #2a1a7acc;transform:rotate(-6deg);background:linear-gradient(140deg,#e3c6ff,#8359f5 50%,#4026ad)}
html.royal-hub .royal-gem-teal{background:linear-gradient(140deg,#b7fff1,#27bdc7 50%,#11618f)}
html.royal-hub .royal-gem-gold{background:linear-gradient(140deg,#ffe49a,#efab79 50%,#ab438a)}
html.royal-hub .royal-gem-rose{background:linear-gradient(140deg,#ffd1e6,#e9528f 50%,#8b1d5e)}

/* ===== phone header (owner 8 Nov 2026) =====
   Icons sit flush right; the brand name may wrap onto two lines; nothing overlaps; Sign out is one round icon everywhere.
   Root cause: .hx__in kept 64px empty on the right for a hamburger that now lives in the bottom dock (body.hs-dock-open).
   Scoped to the header only (.hx). Never touches the footer. */
@media (max-width:760px){
  /* FIXED RULE (owner 8 Nov 2026): on phones the menu lives ONLY in the bottom dock. The top-bar hamburger never shows, not even for
     a moment on reload (it used to flash until hub-shell.js hid it), and the space it reserved on the right is gone. */
  html body .hx .nav-toggle,html body .hx .hs-own-toggle{display:none!important}
  html body .hx .hx__in{padding-right:14px!important}
  html body .hx .hx__row{width:100%!important;max-width:none!important;margin:0!important;flex:1 1 auto!important;flex-wrap:nowrap!important;gap:8px!important;align-items:center!important;min-height:56px;height:auto!important}
  html body .hx .hx__brand{flex:1 1 0!important;min-width:0!important;overflow:visible!important;gap:8px!important}
  html body .hx .site-brand__text{min-width:0!important;overflow:visible!important}
  html body .hx .site-brand__name{white-space:normal!important;overflow:visible!important;overflow-wrap:break-word;hyphens:none;line-height:1.15!important;font-size:14px!important;max-width:100%;letter-spacing:-.01em}
  html body .hx .site-brand__mark{width:42px!important;height:42px!important}
  html body .hx .site-brand__mark img{width:100%!important;height:100%!important}
  /* owner 8 Nov 2026: one money icon only - the wallet pill (its drawer already holds Buy credits + Monthly plans); no name avatar; Sign out last */
  html body .hx .hx__ctl .acct-badge__avatar{display:none!important}
  html body .hx .hx__ctl #abUpgrade.nav-upgrade{display:none!important}
  html body .hx .hx__ctl #pwWalletBadge{order:2!important}
  html body .hx .hx__ctl #acctBadge,html body .hx .hx__ctl .acct-badge{order:3!important}
  html body .hx .hx__ctl .nav-toggle{order:5!important}
  html body .hx .site-brand__name b{white-space:normal!important}
  html body .hx .hx__ctl{flex:0 0 auto!important;margin-left:auto!important;gap:5px!important}
  html body .hx .hx__ctl .acct-badge__signout{width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;border-radius:50%!important;font-size:0!important;display:inline-grid!important;place-items:center!important;white-space:nowrap!important}
  /* sign-out: drawn, not a font glyph (the power glyph rendered as a box on Android) */
  html body .hx .hx__ctl .acct-badge__signout::before{content:""!important;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M12 3v9'/><path d='M6.3 7.2a8 8 0 1 0 11.4 0'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><path d='M12 3v9'/><path d='M6.3 7.2a8 8 0 1 0 11.4 0'/></svg>") center/contain no-repeat}
  /* brand on two lines on phones: "Great AI" / "Question Master" (owner 8 Nov 2026) */
  html body .hx .site-brand__name b{display:block!important;white-space:normal!important}
  html body .hx .hx__ctl .pw-wallet-badge{padding:0 10px!important;gap:4px!important;height:34px!important}
}
/* narrow phones (<=380px): a tighter icon cluster so "Question Master" still fits on one line beside the icons */
@media (max-width:380px){
  html body .hx .hx__ctl{gap:4px!important}
  html body .hx .site-brand__mark{width:38px!important;height:38px!important}
  html body .hx .hx__ctl .acct-badge__avatar,html body .hx .hx__ctl .acct-badge__signout,html body .hx #abUpgrade.nav-upgrade{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important}
  html body .hx .hx__ctl .pw-wallet-badge{padding:0 8px!important;height:30px!important;font-size:12px!important}
  html body .hx .site-brand__name{font-size:13px!important}
}

/* owner 8 Nov 2026: the 4AB logo itself in the header - no gold circle, badge or ring behind it (every width). */
html body .hx .site-brand__mark{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;padding:0!important;overflow:visible!important}
html body .hx .site-brand__mark img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important;box-shadow:none!important}
html body .hx .site-brand__mark::before,html body .hx .site-brand__mark::after{display:none!important}

/* owner 8 Nov 2026: a clearer Sign out on phones - a small glass pill with an exit icon and the words, not a bare power circle. Always the last item. */
@media (max-width:760px){
  html body .hx .hx__ctl .acct-badge__signout{width:auto!important;min-width:0!important;height:34px!important;min-height:34px!important;padding:0 12px 0 10px!important;border-radius:999px!important;font:600 12.5px/1 Roboto,system-ui,sans-serif!important;display:inline-flex!important;align-items:center!important;gap:6px!important;color:#fff!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.32)!important;box-shadow:inset 0 1px rgba(255,255,255,.18)!important;white-space:nowrap!important}
  html body .hx .hx__ctl .acct-badge__signout::before{content:""!important;width:15px!important;height:15px!important;flex:none;background:currentColor!important;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='M16 17l5-5-5-5'/><path d='M21 12H9'/></svg>") center/contain no-repeat!important;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><path d='M16 17l5-5-5-5'/><path d='M21 12H9'/></svg>") center/contain no-repeat!important}
  html body .hx .hx__ctl .acct-badge__signout:hover,html body .hx .hx__ctl .acct-badge__signout:active{background:rgba(239,68,68,.30)!important;border-color:rgba(252,165,165,.7)!important}
}
/* very narrow phones: the same exit icon on its own, round */
@media (max-width:359px){
  html body .hx .hx__ctl .acct-badge__signout{width:34px!important;padding:0!important;font-size:0!important;justify-content:center!important;gap:0!important}
}

/* Owner 8 Nov 2026 (fixed rule): no menu flash on reload. Until hub-shell.css has loaded (royal-hub.js sets html.hs-ready),
   the header's floating menu controls and the side drawer stay invisible. Final look is unchanged; the bottom dock and the
   footer are not touched. If the script never runs, the 4 s animation shows them anyway. */
html:not(.hs-ready) .hx .hs-ctl,html:not(.hs-ready) #hsNav{visibility:hidden;animation:hsShowLate 0s linear 4s forwards}
@keyframes hsShowLate{to{visibility:visible}}

/* owner 8 Nov 2026: the header mark is the site's own 3D "4+" app icon (the one Chrome shows for 4ab.in). */
html body .hx .site-brand__mark img{content:url("/assets/icons3d/s-4ab-hub-256.webp")}

/* owner 8 Nov: no subtitle under header brand */
html body .hx .site-brand__tagline,html body .hx .royal-tagline{display:none!important}

/* owner 8 Nov: header spreads across the full top bar on PC */
@media (min-width:1100px){html body .hx .hx__in{max-width:none!important;padding-left:28px!important;padding-right:28px!important}html body .hx .hx__row{grid-template-columns:auto 1fr auto!important}html body .hx .hx__main{justify-content:center}}