/* HUEZON.COM — V1.5 layout/effects repair layer
   Shared after-page CSS: full-bleed background, repaired CTA bands, tighter responsive behaviour,
   and consistent card/table/nav finishing across app + SEO pages. */
:root{
  --ice: var(--horizon, #00D9FF);
  --ice-soft: rgba(0,217,255,.13);
  --ice-line: rgba(0,217,255,.34);
  --heat-soft: rgba(255,107,53,.16);
  --bloom-soft: rgba(255,61,129,.14);
  --purple-soft: rgba(124,58,237,.18);
  --glass: rgba(16,19,31,.70);
  --glass-strong: rgba(16,19,31,.90);
  --glass-line: rgba(255,255,255,.12);
  --glass-line-strong: rgba(255,255,255,.20);
  --deep-shadow: 0 34px 100px -60px rgba(0,0,0,.98);
  --soft-shadow: 0 20px 62px -44px rgba(0,0,0,.92);
  --ui-display: var(--font-display, var(--fd, 'Rajdhani', system-ui, sans-serif));
  --ui-body: var(--font-body, var(--fb, 'Inter', system-ui, sans-serif));
  --ui-mono: var(--font-mono, var(--fm, 'Space Mono', ui-monospace, monospace));
}
html{scroll-padding-top:110px;overflow-x:hidden;background:var(--night,#080A14)}
body{min-width:0;overflow-x:hidden;background:var(--night,#080A14)!important;position:relative;isolation:isolate;color:var(--text,#F4F2FB)}
body::before,
body::after{content:"";position:fixed;inset:0;pointer-events:none}
body::before{z-index:-2;background:
  radial-gradient(ellipse 72% 54% at 12% -10%, rgba(124,58,237,.34), transparent 62%),
  radial-gradient(ellipse 46% 44% at 95% 8%, rgba(255,107,53,.22), transparent 58%),
  radial-gradient(ellipse 52% 46% at 72% 96%, rgba(0,217,255,.13), transparent 62%),
  linear-gradient(180deg, rgba(255,255,255,.018), transparent 36%, rgba(0,0,0,.18));}
body::after{z-index:-1;opacity:.50;background:
  linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px),
  linear-gradient(120deg, transparent 0 39%, rgba(255,255,255,.035) 40%, transparent 43% 100%);
  background-size:72px 72px,72px 72px,100% 100%;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.42) 58%, rgba(0,0,0,.78));}
.hero-sky{display:none!important}
img,svg,canvas{max-width:100%;height:auto}button,input,select,textarea{font:inherit}main{min-width:0}
::selection{background:var(--ice);color:var(--night,#080A14)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:8px}

/* Top navigation — consistent, readable, no invisible overlap zones. */
.topbar,.top{isolation:isolate;box-shadow:0 14px 54px -40px rgba(0,0,0,.98)}
.topbar::before,.top::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,217,255,.060),transparent 34%,rgba(255,107,53,.045));pointer-events:none}
.wordmark{min-width:0}.wordmark .hz{white-space:nowrap}.brand-logo,.wordmark img,.wm img{background:transparent!important;object-fit:contain}
.tb-nav,.nav{min-width:0;flex-wrap:wrap}.tb-nav-link,.nav a{white-space:nowrap}
.tb-cta,.tb-btn,.cta,.cta-primary,.cta-secondary,.cta-2,.load-more,.t-btn,.fchip,.ftag,.icon-toggle,.code-row,.crow,.permalink{will-change:transform;border-color:rgba(255,255,255,.14)}
.tb-cta:hover,.tb-btn:hover,.cta:hover,.cta-primary:hover,.cta-secondary:hover,.cta-2:hover,.load-more:hover,.t-btn:hover,.fchip:hover,.ftag:hover,.code-row:hover,.crow:hover,.permalink:hover{transform:translateY(-2px)}

/* Cards, panels and swatches. */
.hero{width:min(1320px,100%);min-width:0}.hero-content,.hero-panel,.panel,.preview,.showcase,.seo-crawl-inner,.tablewrap,.upd-main{min-width:0}
.hero-panel,.preview,.showcase,.panel,.card,.upd-main,.upd,.seo-crawl-inner,.tablewrap,.conv,.drawer,.tray{box-shadow:var(--deep-shadow)}
.hero-panel,.preview,.showcase,.fcard,.paint-card,.chip,.card,.upd,.seo-crawl-inner,.panel,.tablewrap,.drawer,.tray,.conv,.feat,.faq details,.gridlinks a,.nc,.t-item,.sim{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.fcard,.paint-card,.chip,.feat,.upd,.card,.gridlinks a,.nc,.t-item,.sim,.panel,.seo-crawl-inner{position:relative;overflow:hidden}
.fcard::before,.paint-card::before,.chip::before,.feat::before,.upd::before,.card::before,.gridlinks a::before,.nc::before,.t-item::before,.panel::before,.seo-crawl-inner::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.072),transparent 38%,rgba(0,217,255,.034));opacity:.72;pointer-events:none}
.fcard:hover,.paint-card:hover,.chip:hover,.feat:hover,.upd:hover,.card:hover,.gridlinks a:hover,.nc:hover,.sim:hover{border-color:rgba(0,217,255,.45)!important;box-shadow:0 18px 52px -36px rgba(0,217,255,.55)}
.paint-swatch,.hp-swatch,.pv-img,.d-swatch,.swatch,.sw,.nsw,.seo-swatch{box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 -34px 60px rgba(0,0,0,.16)}
.hp-strip .sw,.spectrum button{min-width:4px}.hp-strip .sw.active::after,.spectrum button:focus-visible::after{content:"";position:absolute;inset:0;border:2px solid rgba(255,255,255,.86);mix-blend-mode:screen}

/* Library page — stop controls competing for one cramped row. */
.search-wrap{max-width:none}.spectrum{box-shadow:var(--soft-shadow)}.rail{box-shadow:0 16px 44px -36px rgba(0,0,0,.95)}
.rail .right{min-width:0;flex-wrap:wrap}.count{max-width:100%;overflow:hidden;text-overflow:ellipsis}.grid{max-width:1480px;margin-left:auto;margin-right:auto}.chip{min-width:0;text-align:left}.chip .meta{position:relative;z-index:1}.chip .name,.chip .brand,.t-item .nm,.sim .nm,.nn{min-width:0}.star{opacity:.78}.chip:hover .star,.chip:focus-within .star{opacity:1}.load-wrap{padding-bottom:30px}.load-more{box-shadow:var(--soft-shadow)}.drawer{box-shadow:-34px 0 90px -62px rgba(0,0,0,.95)}.conv{box-shadow:0 36px 120px -70px rgba(0,0,0,.98)}.conv-tools input[type="text"]{min-height:38px}.dropzone{min-height:340px}.dz-hint{line-height:1.6}

/* SEO/static pages — same finish as the app, not a pasted-on article page. */
.seo-crawl{margin-top:26px;margin-bottom:82px}.seo-crawl-inner{position:relative;overflow:hidden}.seo-crawl-inner::after{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:999px;background:rgba(0,217,255,.10);filter:blur(10px);pointer-events:none}.seo-link-grid a,.gridlinks a{min-height:46px;align-items:center}.seo-table-wrap,.tablewrap{scrollbar-width:thin;scrollbar-color:rgba(0,217,255,.45) transparent}.seo-table tr:last-child td,table tr:last-child td{border-bottom:0}.crumb{word-break:break-word}.wrap{min-width:0}.copy{min-width:0}.lower,.upd-grid,.cards{align-items:start}.faq details,.feat,.upd,.card{background:var(--glass)}

/* Full-bleed CTA repair — this fixes the broken-looking GET PAINTING section. */
.cta-band{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding:98px clamp(18px,4vw,56px) 104px!important;text-align:center;position:relative;isolation:isolate;overflow:hidden;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(8,10,20,.05),rgba(8,10,20,.46))}
.cta-band::before{content:""!important;position:absolute!important;inset:-2px!important;z-index:-2!important;background:
  radial-gradient(ellipse 58% 94% at 50% 48%, rgba(124,58,237,.34), transparent 66%),
  radial-gradient(ellipse 42% 70% at 18% 70%, rgba(255,61,129,.19), transparent 62%),
  radial-gradient(ellipse 40% 70% at 84% 22%, rgba(0,217,255,.18), transparent 64%),
  linear-gradient(90deg, rgba(255,255,255,.02), transparent 28%, rgba(255,255,255,.025) 52%, transparent 80%)}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg, transparent, rgba(255,255,255,.055), transparent),
  repeating-linear-gradient(90deg, rgba(255,255,255,.040) 0 1px, transparent 1px 88px);
  mask-image:linear-gradient(to right, transparent, #000 14%, #000 86%, transparent);opacity:.58}
.cta-band-content,.cta-band > h2,.cta-band > .cta,.cta-band > p{position:relative;z-index:1}.cta-band-content{width:min(760px,100%);margin:0 auto;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(16,19,31,.76),rgba(16,19,31,.52));border-radius:28px;padding:42px clamp(20px,4vw,54px);box-shadow:0 34px 120px -68px rgba(0,0,0,.96), inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.cta-band-content::before{content:"READY FOR THE GARAGE";display:inline-flex;margin-bottom:16px;font-family:var(--ui-mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:var(--ice);border:1px solid rgba(0,217,255,.28);background:rgba(0,217,255,.06);border-radius:999px;padding:7px 12px}.cta-band-content h2,.cta-band h2{font-family:var(--ui-display)!important;font-size:clamp(38px,7vw,72px)!important;line-height:.92!important;text-transform:uppercase!important;letter-spacing:.015em!important;margin-bottom:16px!important}.cta-band-content p,.cta-band p{max-width:560px!important;margin-left:auto!important;margin-right:auto!important;color:var(--muted,#9CA3C4)!important}.cta-band .cta-primary,.cta-band .cta{box-shadow:0 18px 54px -28px rgba(244,242,251,.55)}
.converter-page .cta-band,.cta-band.converter-cta{padding-top:82px!important;padding-bottom:92px!important}

/* Footer — no cramped/unfinished bottom edge. */
footer{position:relative;z-index:1;background:linear-gradient(180deg,rgba(8,10,20,.58),rgba(8,10,20,.88));border-top:1px solid rgba(255,255,255,.10)!important}.flinks{flex-wrap:wrap}.toast.show{box-shadow:0 18px 44px -24px rgba(0,217,255,.52)}

@media(max-width:1120px){
  .topbar{position:sticky!important;top:0!important;flex-wrap:wrap;padding:14px 24px!important}.topbar.scrolled{padding:12px 24px!important}.tb-nav{margin-left:auto}.search-wrap{order:10;flex-basis:100%;width:100%;min-width:0}.tb-btn{padding:10px 13px}.tb-btn svg{width:14px;height:14px}.hero{grid-template-columns:1fr!important;min-height:auto!important;padding:118px 26px 54px!important}.hero-panel{max-width:760px}.bento-wrap{padding-left:26px!important;padding-right:26px!important}.masthead{padding-left:26px!important;padding-right:26px!important}.rail{margin-left:26px;margin-right:26px}.grid{padding-left:26px!important;padding-right:26px!important}
}
@media(max-width:820px){
  html{scroll-padding-top:148px}.topbar,.top{gap:12px}.wordmark{font-size:18px}.wordmark .brand-logo,.wordmark img,.wm img{width:34px!important;height:34px!important}.tb-nav,.nav{order:5;width:100%;margin-left:0!important;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}.tb-nav::-webkit-scrollbar,.nav::-webkit-scrollbar{display:none}.tb-nav-link,.nav a{padding:8px 12px;font-size:12px;flex:0 0 auto}.hero h1,.masthead h1{font-size:clamp(42px,14vw,72px)}.hero{padding-top:96px!important}.hero-stats,.stats{gap:10px}.stats{grid-template-columns:1fr!important}.stat{padding:17px 18px}.hp-feature,.pv-body{grid-template-columns:1fr!important}.hp-meta,.pv-side{border-left:0!important;border-top:1px solid var(--line,rgba(255,255,255,.08))}.hp-swatch{min-height:190px}.feat-row,.steps,.lower,.hero{grid-template-columns:1fr!important}.showcase-head{gap:16px;align-items:flex-start}.paint-grid{grid-template-columns:1fr!important}.rail{position:relative;top:auto;margin-top:12px}.rail .right{width:100%;margin-left:0}.rail select{max-width:none;flex:1;min-width:150px}.chipset{width:100%}.drawer{width:100%}.conv-body{grid-template-columns:1fr!important}.tray-head{padding-left:18px;padding-right:18px}.tray-body{padding-left:18px;padding-right:18px}.spectrum{width:auto;margin-left:18px;margin-right:18px;height:126px}.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}.seo-crawl{padding-left:18px!important;padding-right:18px!important}footer{gap:18px}.wrap{grid-template-columns:1fr!important}.cta-band{padding-top:72px!important;padding-bottom:76px!important}.cta-band-content{border-radius:20px;padding:32px 20px}
}
@media(max-width:560px){
  body{font-size:14.5px}.topbar{padding:12px 16px!important}.wordmark .hz{display:none}.tb-btn{font-size:12px;padding:9px 11px}.tb-btn:not(#garage-btn):not(#convert-btn){max-width:44px;overflow:hidden}.tb-btn:not(#garage-btn):not(#convert-btn) svg{margin-right:0}.hero{padding-left:18px!important;padding-right:18px!important}.cta-row{width:100%;align-items:stretch}.cta-primary,.cta-secondary,.cta,.cta-2{width:100%;justify-content:center;text-align:center}.hero-panel{border-radius:16px}.bento-wrap,.masthead,.grid{padding-left:18px!important;padding-right:18px!important}.rail{margin-left:18px;margin-right:18px}.fcard,.card,.upd,.seo-crawl-inner{border-radius:16px}.seo-table,table{min-width:640px}.similar{grid-template-columns:repeat(2,1fr)!important}.harm-row{align-items:flex-start}.harm-row .hl{width:62px}.conv-tools .recent{width:100%;margin-left:0}.pv-img{min-height:180px}.fbrand{align-items:flex-start}.fbrand .brand-logo{margin-top:3px}.cta-band::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 58px)}.cta-band-content::before{font-size:9px;letter-spacing:.14em}.flinks{gap:14px}
}
@media(prefers-reduced-motion:reduce){body::before,body::after{opacity:.35}.hp-strip .sw,.spectrum button,.cta-band::before,.cta-band::after{transition:none!important;animation:none!important}}


/* ===== v1.7 /colors page rebuild =====
   The library now uses the same hero + panel language as the homepage.
   Also fixes the old empty-looking top colour strip and restores the missing year-stat hook used by JS. */
.colors-page{min-height:100vh;background:var(--night,#080A14);overflow-x:hidden}
.colors-page .topbar{position:fixed!important;top:0!important;left:0;right:0;z-index:55;background:rgba(8,10,20,.58);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:20px 40px;transition:background .25s,border-color .25s,padding .25s}
.colors-page .topbar::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(124,58,237,.12),transparent 35%,rgba(255,107,53,.08));opacity:.85;pointer-events:none}
.colors-page .tb-cta{font-family:var(--font-display,var(--ui-display));font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:11px 22px;border-radius:8px;background:linear-gradient(120deg,var(--sun,#FF6B35),var(--bloom,#FF3D81));color:#1a0a05;transition:transform .15s,box-shadow .15s;margin-left:8px;white-space:nowrap}
.colors-page .tb-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px -8px var(--sun,#FF6B35)}
.colors-page .library-main{position:relative;isolation:isolate;overflow:hidden}
.colors-page .hero-sky{display:block!important;position:fixed;inset:0;width:100vw;height:100vh;z-index:-3;pointer-events:none;background:
  radial-gradient(ellipse 60% 50% at 22% 0%, rgba(124,58,237,.38), transparent 60%),
  radial-gradient(ellipse 45% 45% at 92% 12%, rgba(255,107,53,.25), transparent 55%),
  radial-gradient(ellipse 55% 50% at 70% 92%, rgba(0,217,255,.14), transparent 60%),
  var(--night,#080A14);animation:colors-sky-drift 24s ease-in-out infinite alternate}
@keyframes colors-sky-drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(1.8%,.8%,0) scale(1.035)}}
.colors-page .library-hero{position:relative;z-index:1;max-width:1320px;margin:0 auto;min-height:min(880px,100svh);display:grid;grid-template-columns:minmax(0,1.02fr) minmax(380px,.86fr);align-items:end;gap:42px;padding:150px 40px 58px}
.colors-page .library-copy{min-width:0;max-width:680px}
.colors-page .eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-mono,var(--ui-mono));font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--horizon,#00D9FF);margin-bottom:26px;padding:8px 16px 8px 6px;border:1px solid rgba(255,255,255,.16);border-radius:99px;background:rgba(0,217,255,.06)}
.colors-page .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--horizon,#00D9FF);box-shadow:0 0 0 4px rgba(0,217,255,.18)}
.colors-page .library-hero h1{font-family:var(--font-display,var(--ui-display));font-weight:700;font-size:clamp(52px,7.3vw,104px);line-height:.92;letter-spacing:.01em;text-transform:uppercase;margin:0 0 24px;color:var(--text,#F4F2FB)}
.colors-page .library-hero h1 span{display:inline-block;transform:skewX(-7deg);background:linear-gradient(105deg,var(--sun,#FF6B35) 8%,var(--bloom,#FF3D81) 48%,var(--grape,#7C3AED) 96%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.05em}
.colors-page .library-desc{max-width:560px;color:var(--muted,#9CA3C4);font-size:17px;line-height:1.75;margin:0 0 30px}
.colors-page .library-search-card{position:relative;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(16,19,31,.78),rgba(16,19,31,.48));box-shadow:0 34px 90px -62px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);border-radius:22px;padding:16px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);max-width:680px;overflow:hidden}
.colors-page .library-search-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 34%,rgba(0,217,255,.035));pointer-events:none}
.colors-page .library-search,.colors-page .library-actions{position:relative;z-index:1}
.colors-page .library-search{max-width:none;min-width:0;width:100%;flex:0 0 auto;margin-bottom:12px}
.colors-page .library-search #search{height:58px;border-radius:14px;font-size:15px;padding-left:46px;background:rgba(8,10,20,.7)}
.colors-page .library-search svg{left:17px;width:17px;height:17px}
.colors-page .library-actions{display:flex;gap:10px;flex-wrap:wrap}
.colors-page .library-action{flex:1 1 170px;justify-content:center;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14);min-height:44px}
.colors-page .library-stats{display:flex;gap:30px;flex-wrap:wrap;margin-top:30px}
.colors-page .hstat{min-width:96px}
.colors-page .hstat b{display:block;font-family:var(--font-display,var(--ui-display));font-weight:700;font-size:30px;line-height:1;color:var(--text,#F4F2FB)}
.colors-page .hstat span{font-family:var(--font-mono,var(--ui-mono));font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim,#5A6182);margin-top:6px;display:block}
.colors-page .library-visual{position:relative;min-width:0;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(16,19,31,.82),rgba(16,19,31,.50));border-radius:24px;overflow:hidden;box-shadow:0 42px 110px -70px rgba(0,0,0,.98), inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.colors-page .library-visual::before{content:"";position:absolute;inset:-1px;background:radial-gradient(ellipse 72% 52% at 80% 0%,rgba(255,61,129,.16),transparent 66%),radial-gradient(ellipse 70% 50% at 0% 100%,rgba(0,217,255,.12),transparent 64%);pointer-events:none;z-index:0}
.colors-page .visual-head,.colors-page .visual-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-color:rgba(255,255,255,.09)}
.colors-page .visual-head{border-bottom:1px solid rgba(255,255,255,.09)}
.colors-page .visual-foot{border-top:1px solid rgba(255,255,255,.09);color:var(--muted,#9CA3C4);font-size:13px;flex-wrap:wrap}
.colors-page .visual-head span{font-family:var(--font-display,var(--ui-display));font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text,#F4F2FB)}
.colors-page .visual-head small,.colors-page .visual-foot a{font-family:var(--font-mono,var(--ui-mono));font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--horizon,#00D9FF)}
.colors-page .visual-foot a:hover{color:var(--text,#F4F2FB)}
.colors-page .spectrum{position:relative;z-index:1;width:100%!important;height:420px!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:linear-gradient(90deg,#ff3434,#ff9634,#fff042,#49f36a,#31e6ff,#5773ff,#c352ff,#ff3d81)!important;display:flex;overflow:hidden}
.colors-page .spectrum:empty::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ff3434,#ff9634,#fff042,#49f36a,#31e6ff,#5773ff,#c352ff,#ff3d81);opacity:.72}
.colors-page .spectrum:empty::after{content:"COLOUR DATA LOADING";position:absolute;left:18px;bottom:16px;font-family:var(--font-mono,var(--ui-mono));font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.72);text-shadow:0 2px 12px rgba(0,0,0,.8)}
.colors-page .spectrum button{position:relative;flex:1 1 2px;min-width:2px;height:100%;transition:flex-grow .22s ease,filter .22s ease;outline-offset:-3px;filter:saturate(.98) brightness(.94)}
.colors-page .spectrum button:hover,.colors-page .spectrum button:focus-visible{flex-grow:26;filter:saturate(1.08) brightness(1.08);z-index:2}
.colors-page .spectrum button .tip{position:absolute;inset:auto 0 0 0;padding:14px 12px;font-family:var(--font-mono,var(--ui-mono));font-size:10px;letter-spacing:.04em;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.95);opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .18s;background:linear-gradient(transparent,rgba(0,0,0,.74))}
.colors-page .spectrum button:hover .tip,.colors-page .spectrum button:focus-visible .tip{opacity:1}
.colors-page .library-workspace{position:relative;z-index:2;max-width:1520px;margin:0 auto;padding:0 0 26px}
.colors-page .library-workspace::before{content:"";display:block;height:1px;margin:0 40px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.colors-page .rail{position:sticky;top:84px;z-index:45;margin:26px 40px 6px;padding:16px;background:rgba(8,10,20,.82);border:1px solid rgba(255,255,255,.10);box-shadow:0 22px 70px -54px rgba(0,0,0,.95);border-radius:18px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.colors-page .grid{max-width:none;padding-top:24px}
.colors-page .chip{border-radius:16px;background:rgba(16,19,31,.74)}
.colors-page .load-wrap{padding-bottom:84px}
.colors-page .seo-crawl{position:relative;z-index:1;margin-top:14px!important}
.colors-page .seo-crawl-inner{max-width:1320px;margin:0 auto}
.colors-page .scrim,.colors-page .drawer,.colors-page .tray,.colors-page .conv-scrim,.colors-page .toast{z-index:70}
.colors-page .drawer{z-index:75}.colors-page .conv-scrim{z-index:80}.colors-page .tray{z-index:76}.colors-page .toast{z-index:90}
@media(max-width:1120px){
  .colors-page .topbar{position:fixed!important;top:0!important;padding:14px 24px}.colors-page .tb-cta{display:none}.colors-page .library-hero{grid-template-columns:1fr;min-height:auto;padding:126px 26px 46px;gap:34px}.colors-page .library-copy{max-width:760px}.colors-page .library-visual{max-width:860px;width:100%}.colors-page .spectrum{height:300px!important}.colors-page .rail{top:122px;margin-left:26px;margin-right:26px}.colors-page .library-workspace::before{margin-left:26px;margin-right:26px}
}
@media(max-width:820px){
  .colors-page .topbar{position:fixed!important;top:0!important;gap:12px}.colors-page .library-hero{padding:112px 18px 36px}.colors-page .library-hero h1{font-size:clamp(44px,14vw,74px)}.colors-page .library-desc{font-size:15.5px}.colors-page .library-search-card{border-radius:18px;padding:13px}.colors-page .library-actions{display:grid;grid-template-columns:1fr}.colors-page .library-action{width:100%;flex-basis:auto}.colors-page .library-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}.colors-page .hstat b{font-size:28px}.colors-page .visual-head,.colors-page .visual-foot{padding:15px 16px}.colors-page .spectrum{height:220px!important}.colors-page .rail{top:116px;margin:18px 18px 6px}.colors-page .library-workspace::before{margin-left:18px;margin-right:18px}.colors-page .grid{padding-left:18px!important;padding-right:18px!important}.colors-page .seo-crawl{padding-left:18px!important;padding-right:18px!important}
}
@media(max-width:560px){
  .colors-page .topbar{position:fixed!important;top:0!important;padding:12px 16px}.colors-page .library-hero{padding-top:102px}.colors-page .eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:20px}.colors-page .library-search #search{height:52px;font-size:14px}.colors-page .library-stats{grid-template-columns:1fr 1fr}.colors-page .library-visual{border-radius:18px}.colors-page .spectrum{height:168px!important}.colors-page .rail{top:104px}.colors-page .rail select{min-width:132px}.colors-page .grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))!important}.colors-page .tb-nav{display:flex!important}
}
@media(prefers-reduced-motion:reduce){.colors-page .hero-sky{animation:none!important}.colors-page .spectrum button{transition:none!important}}

/* Racing / Formula navigation pass shared by public pages */
.topbar,.top{position:sticky;top:0;z-index:70;background:linear-gradient(180deg,rgba(6,8,17,.96),rgba(8,10,20,.88))!important;border-bottom:1px solid rgba(255,255,255,.10)!important;box-shadow:0 18px 50px -42px rgba(0,0,0,.95),inset 0 -1px 0 rgba(0,217,255,.08);overflow:visible!important}.topbar::after,.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--sun,#FF6B35),var(--bloom,#FF3D81),var(--grape,#7C3AED),var(--horizon,#00D9FF));opacity:.72;pointer-events:none}.wordmark,.wm{padding:7px 12px 7px 8px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.026);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}.tb-nav,.nav{display:flex;align-items:center;gap:8px;margin-left:auto;min-width:0;padding:5px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.025);box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}.tb-nav-link,.nav a{position:relative;display:inline-flex!important;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:0 14px!important;border:1px solid transparent;border-radius:14px!important;background:transparent;color:#AAB2D3!important;font-size:12.5px!important;letter-spacing:.075em!important;line-height:1;text-decoration:none;overflow:hidden;isolation:isolate}.tb-nav-link::before,.nav a::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,107,53,.16),rgba(255,61,129,.10),rgba(0,217,255,.14));opacity:0;transition:opacity .16s;z-index:-1}.tb-nav-link:hover::before,.nav a:hover::before{opacity:1}.tb-nav-link:hover,.nav a:hover{color:var(--text,#F4F2FB)!important;border-color:rgba(255,255,255,.13)}.tb-nav-link.active,.nav a.active{color:var(--night,#080A14)!important;background:var(--horizon,#00D9FF)!important;border-color:var(--horizon,#00D9FF);box-shadow:0 12px 28px -24px var(--horizon,#00D9FF)}.nav-ico{width:17px;height:17px;display:inline-grid;place-items:center;flex:none}.nav-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.tb-nav-link.active .nav-ico svg,.nav a.active .nav-ico svg{stroke:var(--night,#080A14)!important}.nav-label{white-space:nowrap}.notif-badge{position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 5px;border-radius:99px;background:var(--bloom,#FF3D81);color:#fff;display:inline-grid;place-items:center;font:700 9px/1 var(--font-mono,'Space Mono',monospace);box-shadow:0 0 0 2px rgba(8,10,20,.9)}.verify-notice{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 18px;border-bottom:1px solid rgba(255,209,102,.2);background:linear-gradient(90deg,rgba(255,209,102,.11),rgba(255,107,53,.08));color:#FFE7A6;font-size:13.5px;text-align:center}.verify-notice b{color:var(--text,#F4F2FB)}.verify-notice a{color:var(--horizon,#00D9FF);font-weight:700}.verify-notice .button{min-height:34px;flex:none}@media(max-width:980px){.topbar,.top{flex-wrap:wrap}.tb-nav,.nav{order:5;width:100%;margin-left:0!important;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;scrollbar-width:none}.tb-nav::-webkit-scrollbar,.nav::-webkit-scrollbar{display:none}.tb-nav-link,.nav a{flex:0 0 auto}.verify-notice{flex-direction:column;gap:8px}}@media(max-width:560px){.wordmark .hz,.wm .hz{display:none}.tb-nav-link,.nav a{min-width:44px;padding:0 12px!important}.tb-nav-link:not(.active) .nav-label,.nav a:not(.active) .nav-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.tb-nav-link.active,.nav a.active{min-width:auto}.nav-ico{width:18px;height:18px}.nav-ico svg{width:18px;height:18px}}


/* ===== Step 6.2 hotfix: minimal racing nav, icon reset, account page polish ===== */
:root{--nav-rail:rgba(255,255,255,.035);--nav-border:rgba(255,255,255,.105);--nav-text:#B8C2EA;--nav-hot:#00D9FF}
.topbar,.top{min-height:62px!important;padding:9px clamp(14px,3vw,30px)!important;gap:14px!important;overflow:visible!important;align-items:center!important}
.wordmark,.wm{min-height:44px!important;padding:5px 10px 5px 6px!important;border-radius:14px!important;gap:9px!important;font-size:clamp(16px,1.25vw,20px)!important;letter-spacing:.035em!important}
.wordmark .brand-logo,.wordmark img,.wm img{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;border-radius:10px!important;object-fit:contain!important}
.tb-nav,.nav{gap:5px!important;padding:4px!important;border-radius:16px!important;background:var(--nav-rail)!important;border-color:var(--nav-border)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 16px 46px -42px rgba(0,0,0,.98)!important;flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none!important}.tb-nav::-webkit-scrollbar,.nav::-webkit-scrollbar{display:none!important}
.tb-nav-link,.nav a{min-height:38px!important;height:38px!important;gap:7px!important;padding:0 11px!important;border-radius:12px!important;font-size:11.5px!important;letter-spacing:.082em!important;color:var(--nav-text)!important;background:transparent!important;border:1px solid transparent!important;max-width:190px!important;line-height:1!important;flex:0 0 auto!important}
.tb-nav-link:hover,.nav a:hover{color:#fff!important;background:rgba(255,255,255,.045)!important;border-color:rgba(255,255,255,.12)!important;transform:none!important}.tb-nav-link.active,.nav a.active{background:linear-gradient(135deg,var(--horizon,#00D9FF),#52F3FF)!important;color:#050711!important;border-color:rgba(0,217,255,.72)!important;box-shadow:0 14px 30px -25px rgba(0,217,255,.8)!important}.tb-nav-link.active .nav-label,.nav a.active .nav-label{color:#050711!important}.topbar .nav-ico,.top .nav-ico{width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 16px!important;color:currentColor!important;overflow:hidden!important}.topbar .nav-ico svg,.top .nav-ico svg,.topbar a > svg,.top a > svg{width:16px!important;height:16px!important;max-width:16px!important;max-height:16px!important;min-width:16px!important;min-height:16px!important;display:block!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;color:currentColor!important;overflow:visible!important}.topbar .nav-ico svg path,.top .nav-ico svg path,.topbar .nav-ico svg circle,.top .nav-ico svg circle,.topbar .nav-ico svg polyline,.top .nav-ico svg polyline,.topbar .nav-ico svg rect,.top .nav-ico svg rect{vector-effect:non-scaling-stroke!important}.topbar .nav-ico svg [fill="currentColor"],.top .nav-ico svg [fill="currentColor"]{fill:currentColor!important;stroke:none!important}.topbar .nav-ico svg [fill="#000"],.top .nav-ico svg [fill="#000"],.topbar .nav-ico svg [fill="black"],.top .nav-ico svg [fill="black"]{fill:none!important;stroke:currentColor!important}.topbar .nav-label,.top .nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:112px}.is-signed-in .topbar .nav-account,.is-signed-in .top .nav-account{width:40px!important;min-width:40px!important;max-width:40px!important;padding:0!important}.is-signed-in .topbar .nav-account .nav-label,.is-signed-in .top .nav-account .nav-label{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}.is-signed-in .topbar .nav-account.active,.is-signed-in .top .nav-account.active{width:42px!important;min-width:42px!important;max-width:42px!important}.notif-badge{top:1px!important;right:1px!important;min-width:15px!important;height:15px!important;padding:0 4px!important;font-size:8px!important;line-height:1!important;box-shadow:0 0 0 2px rgba(6,8,17,.96)!important}
.verify-notice{padding:8px 14px!important;font-size:12.8px!important;gap:10px!important}.verify-notice .button{min-height:30px!important;padding:0 11px!important;font-size:11px!important;border-radius:9px!important}
.profile-shell,.public-shell{width:min(1160px,100%)!important;padding:clamp(30px,4vw,48px) clamp(16px,3vw,24px) clamp(74px,8vw,108px)!important;gap:22px!important}.auth-shell{width:min(1060px,100%)!important;padding:clamp(42px,6vw,70px) clamp(16px,3vw,24px) clamp(76px,8vw,110px)!important;gap:38px!important;align-items:center!important}.dashboard-hero,.public-card,.auth-card,.panel{border-radius:22px!important}.hero-inner,.public-hero{gap:22px!important;padding:28px!important}.avatar-xl{width:88px!important;height:88px!important;border-radius:24px!important;font-size:46px!important}.identity h1,.public-card h1{font-size:clamp(40px,5.4vw,68px)!important;line-height:.96!important}.bio-line,.lede,.panel-note{font-size:14.5px!important;line-height:1.72!important;color:#B7C0DE!important}.stats-row{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;padding:0 28px 26px!important}.stat-card{min-height:82px!important;padding:16px!important}.stat-card b{font-size:clamp(24px,3vw,32px)!important}.stat-card span{font-size:9.5px!important}.content-grid,.two-grid{gap:22px!important;align-items:start!important}.stack{gap:20px!important}.panel{padding:24px!important}.panel h2{font-size:clamp(24px,3vw,30px)!important}.panel h3{font-size:clamp(20px,2.4vw,24px)!important}.form{gap:15px!important}.button{min-height:44px!important;border-radius:12px!important;padding:0 18px!important;font-size:12.5px!important}.button.small{min-height:34px!important;padding:0 12px!important;font-size:11.5px!important}.actions-rail{gap:10px!important;flex-wrap:wrap!important}.notification-panel{width:min(100%,900px)!important}.notification-card{padding:13px!important;border-radius:16px!important}.notification-icon{width:36px!important;height:36px!important;border-radius:12px!important;font-size:18px!important}.notification-main b{font-size:18px!important}.notification-main small{font-size:13px!important}.friend-card,.staff-user-card,.saved-row,.security-item{border-radius:16px!important}.field input,.field textarea,.field select{min-height:44px!important;border-radius:12px!important;padding:12px 13px!important}.field textarea{min-height:104px!important}.auth-card{padding:28px!important}.card-head h2{font-size:28px!important}footer{padding:26px 24px 34px!important}.flinks{font-size:13px!important;gap:15px!important}
@media(max-width:980px){.topbar,.top{flex-wrap:wrap!important}.tb-nav,.nav{order:5;width:100%!important;margin-left:0!important}.auth-shell{grid-template-columns:1fr!important}.stats-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}.hero-inner,.public-hero{grid-template-columns:1fr!important}.actions-rail{align-items:stretch!important}.actions-rail .button{flex:1 1 150px!important}.content-grid,.two-grid{grid-template-columns:1fr!important}}
@media(max-width:560px){.topbar,.top{padding:10px 12px!important;gap:10px!important}.wordmark,.wm{max-width:calc(100vw - 24px)!important}.tb-nav-link,.nav a{min-width:38px!important;width:38px!important;max-width:38px!important;padding:0!important}.tb-nav-link .nav-label,.nav a .nav-label{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}.stats-row{grid-template-columns:1fr!important;padding:0 18px 20px!important}.panel,.auth-card{padding:20px 16px!important}.hero-inner,.public-hero{padding:22px 18px!important}.avatar-xl{width:74px!important;height:74px!important;border-radius:20px!important;font-size:38px!important}.notification-card{align-items:stretch!important;flex-direction:column!important}.notification-card .button{width:100%!important}}

/* Step 8.0 — global sizing, nav and account polish */
:root{
  --panel-pad: clamp(18px, 2vw, 28px);
  --shell: min(1180px, calc(100vw - 32px));
}
body{font-size:15px;line-height:1.58;}
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:14px;width:var(--shell);margin:14px auto 0;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:rgba(8,10,20,.78);backdrop-filter:blur(18px);box-shadow:0 18px 60px rgba(0,0,0,.28)}
.wordmark{display:flex;align-items:center;gap:9px;min-width:max-content;font-size:17px;font-weight:800;letter-spacing:.01em}.wordmark .hz{font-size:12px;color:var(--muted);font-weight:700}.brand-logo{width:34px!important;height:34px!important;object-fit:contain}.tb-nav{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}.tb-nav::-webkit-scrollbar{display:none}.tb-nav-link{height:36px;display:inline-flex!important;align-items:center;gap:7px;flex:0 0 auto;padding:0 11px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.035);color:#E9EEFF!important;font-size:12px!important;font-weight:800;line-height:1;letter-spacing:.01em;white-space:nowrap;transition:background .18s ease,border-color .18s ease,transform .18s ease}.tb-nav-link:hover{transform:translateY(-1px);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}.tb-nav-link.active{background:linear-gradient(135deg,rgba(242,206,27,.18),rgba(0,217,255,.12));border-color:rgba(242,206,27,.32);color:#fff!important}.nav-ico{width:18px;height:18px;display:grid;place-items:center;flex:0 0 18px}.nav-ico img,.nav-ico svg{width:18px!important;height:18px!important;max-width:18px!important;max-height:18px!important;display:block;object-fit:contain}.nav-label{display:inline-block}.is-signed-in .tb-nav-link.nav-account .nav-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}.is-signed-in .tb-nav-link.nav-account{width:38px;padding:0;justify-content:center}.notif-badge{position:absolute;min-width:17px;height:17px;padding:0 5px;margin-left:17px;margin-top:-18px;display:inline-grid;place-items:center;border-radius:99px;background:#FF3D81;color:#fff!important;font-size:10px;font-weight:900;box-shadow:0 0 0 2px rgba(8,10,20,.94)}.verify-notice{width:var(--shell);margin:10px auto 0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid rgba(242,206,27,.22);border-radius:16px;background:rgba(242,206,27,.08);color:#F5F7FF;font-size:13px}.verify-notice a{color:#F2CE1B;text-decoration:underline}.profile-shell,.auth-shell{width:var(--shell);margin:26px auto 0}.dashboard-hero,.panel,.auth-card,.loading-card{border-radius:26px!important;border:1px solid rgba(255,255,255,.09)!important;background:linear-gradient(180deg,rgba(17,21,36,.84),rgba(11,14,26,.88))!important;box-shadow:0 18px 70px rgba(0,0,0,.28)!important}.dashboard-hero{padding:var(--panel-pad)!important}.panel,.auth-card{padding:var(--panel-pad)!important}.hero-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}.identity h1,.dashboard-hero h1{font-size:clamp(34px,5vw,64px);line-height:.95;letter-spacing:-.04em;margin:4px 0 8px}.profile-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#F2CE1B;font-weight:900}.bio-line,.panel-note,.hint,small{color:var(--muted)}.content-grid,.staff-dashboard-grid,.settings-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:18px;margin-top:18px}.two-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.three-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.stack{display:grid;gap:18px}.form{display:grid;gap:14px}.field{display:grid;gap:7px}.field label{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#8994BD;font-weight:900}.field input,.field textarea,.field select{width:100%;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(0,0,0,.24);color:#F5F7FF;padding:12px 13px;outline:none}.field textarea{min-height:120px;resize:vertical}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 15px;border:1px solid rgba(242,206,27,.32);border-radius:999px;background:linear-gradient(135deg,#F2CE1B,#FF6B35);color:#080A14!important;font-size:13px;font-weight:900;text-decoration:none}.button.secondary{background:rgba(255,255,255,.06);color:#F5F7FF!important;border-color:rgba(255,255,255,.12)}.button.danger{background:rgba(255,61,129,.13);color:#FFDDE8!important;border-color:rgba(255,61,129,.3)}.button.small{min-height:32px;padding:0 11px;font-size:12px}.actions-rail,.form-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}.stat-card{padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.04)}.stat-card b{display:block;font-size:24px;line-height:1;color:#fff}.stat-card span{font-size:12px;color:var(--muted)}.avatar-xl,.avatar-lg,.friend-avatar,.mini-avatar{display:grid;place-items:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 34px rgba(0,0,0,.28);font-family:var(--font-display);font-weight:900;color:#06101C}.avatar-xl{width:82px;height:82px;border-radius:26px;font-size:42px}.avatar-lg{width:62px;height:62px;border-radius:20px;font-size:30px}.friend-avatar{width:44px;height:44px;border-radius:16px;font-size:20px}.mini-avatar{width:30px;height:30px;border-radius:11px;font-size:14px}.badge-strip,.badge-grid{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.profile-badge,.badge-toggle,.tag-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid color-mix(in srgb,var(--badge-accent,#00D9FF) 35%,transparent);border-radius:999px;background:color-mix(in srgb,var(--badge-accent,#00D9FF) 12%,transparent);color:#F5F7FF;font-size:12px;font-weight:800}.badge-toggle{cursor:pointer}.badge-toggle.is-owned{box-shadow:0 0 0 1px color-mix(in srgb,var(--badge-accent,#00D9FF) 45%,transparent)}.saved-list,.card-list,.staff-user-list{display:grid;gap:10px}.saved-row,.friend-pill,.notification-card,.palette-card,.profile-card,.staff-user-card,.security-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.035)}.saved-swatch{width:42px;height:42px;border-radius:14px;flex:0 0 auto;border:1px solid rgba(255,255,255,.12)}.palette-card,.profile-card{align-items:flex-start}.palette-swatches{display:flex;gap:4px;margin-top:10px}.palette-swatches span{width:28px;height:28px;border-radius:9px;border:1px solid rgba(255,255,255,.12)}.empty-box{padding:14px;border:1px dashed rgba(255,255,255,.13);border-radius:18px;color:var(--muted);display:grid;gap:3px}.message{display:none}.message.show{display:block;padding:10px 12px;border-radius:14px;background:rgba(80,250,145,.1);border:1px solid rgba(80,250,145,.22);color:#DFFFEA}.message.err{background:rgba(255,61,129,.12);border-color:rgba(255,61,129,.25);color:#FFDDE8}.toggle-row{display:flex;gap:11px;align-items:flex-start;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:17px;background:rgba(255,255,255,.035)}.toggle-row input{margin-top:4px}.char-row{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.footer,footer{width:var(--shell);margin:28px auto 18px;color:var(--muted)}.flinks{display:flex;gap:14px;flex-wrap:wrap;font-size:13px}.paint-check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:420px;overflow:auto;padding-right:4px}.paint-check{display:flex;align-items:center;gap:9px;padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03);font-size:13px}.paint-check input{accent-color:#F2CE1B}.paint-dot{width:25px;height:25px;border-radius:9px;border:1px solid rgba(255,255,255,.13);flex:0 0 auto}.subnav{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.subnav a{padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.1);font-size:12px;color:#E9EEFF}.subnav a.active{border-color:rgba(242,206,27,.32);background:rgba(242,206,27,.09)}
@media (max-width:900px){.topbar{align-items:flex-start;flex-direction:column;border-radius:20px}.tb-nav{width:100%;justify-content:flex-start}.content-grid,.staff-dashboard-grid,.settings-grid,.two-grid,.three-grid{grid-template-columns:1fr}.hero-inner{align-items:flex-start;flex-direction:column}.stats-row{grid-template-columns:repeat(2,minmax(0,1fr))}.paint-check-list{grid-template-columns:1fr}.identity h1,.dashboard-hero h1{font-size:40px}.nav-label{font-size:0}.tb-nav-link{width:38px;padding:0;justify-content:center}.tb-nav-link.active{width:auto;padding:0 11px}.tb-nav-link.active .nav-label{font-size:12px}.verify-notice{align-items:flex-start;flex-direction:column}.profile-shell,.auth-shell,.topbar,footer{width:min(100% - 20px,1180px)}}

/* ===== Step 8.1 — nav/footer/layout repair pass ===== */
:root{
  --shell: min(1260px, calc(100vw - 40px));
  --nav-bg: rgba(8,10,20,.88);
  --nav-line: rgba(255,255,255,.11);
  --nav-pill: rgba(255,255,255,.045);
  --nav-pill-hover: rgba(255,255,255,.08);
  --nav-text: #CAD2EF;
}
body{font-size:15.5px!important;line-height:1.62!important;min-width:0!important;}
body.auth-page{display:flex!important;flex-direction:column!important;}
.topbar,.top{
  position:sticky!important;
  top:12px!important;
  z-index:80!important;
  width:var(--shell)!important;
  max-width:var(--shell)!important;
  min-height:64px!important;
  margin:12px auto 0!important;
  padding:9px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  border:1px solid var(--nav-line)!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(13,16,28,.94),var(--nav-bg))!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  box-shadow:0 18px 54px -40px rgba(0,0,0,.96), inset 0 1px 0 rgba(255,255,255,.05)!important;
  overflow:visible!important;
}
.topbar::before,.top::before{border-radius:inherit!important;background:linear-gradient(90deg,rgba(255,107,53,.22),rgba(255,61,129,.11) 36%,rgba(0,217,255,.20))!important;inset:auto 0 -2px 0!important;height:2px!important;opacity:.95!important;}
.wordmark,.wm{
  flex:0 0 auto!important;
  min-width:0!important;
  min-height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  padding:5px 10px 5px 6px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.035)!important;
  color:#F6F7FF!important;
  font-family:var(--font-display, Rajdhani, system-ui, sans-serif)!important;
  font-size:18px!important;
  font-weight:800!important;
  letter-spacing:.025em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.wordmark .brand-logo,.wordmark img,.wm img{
  width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;border-radius:10px!important;object-fit:contain!important;
}
.wordmark .brand-main{line-height:1!important;}
.wordmark .brand-tag,.wordmark .hz,.wm .hz{
  display:inline-flex!important;align-items:center!important;height:18px!important;padding:0 5px!important;border-radius:5px!important;background:rgba(255,255,255,.06)!important;color:#AEB7D6!important;font-family:var(--font-mono, monospace)!important;font-size:9px!important;font-weight:800!important;letter-spacing:.08em!important;text-transform:uppercase!important;
}
.tb-nav,.nav{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  flex-wrap:nowrap!important;
}
.tb-nav::-webkit-scrollbar,.nav::-webkit-scrollbar{display:none!important;}
.tb-nav-link,.nav a{
  position:relative!important;
  flex:0 0 auto!important;
  height:38px!important;
  min-height:38px!important;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:0 12px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:12px!important;
  background:var(--nav-pill)!important;
  color:var(--nav-text)!important;
  font-family:var(--font-display, Rajdhani, system-ui, sans-serif)!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.045em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  transform:none!important;
  box-shadow:none!important;
}
.tb-nav-link:hover,.nav a:hover{background:var(--nav-pill-hover)!important;border-color:rgba(255,255,255,.16)!important;color:#fff!important;transform:translateY(-1px)!important;}
.tb-nav-link.active,.nav a.active{background:linear-gradient(135deg,#F2CE1B,#FF6B35 58%,#FF3D81)!important;border-color:rgba(255,209,102,.55)!important;color:#080A14!important;box-shadow:0 14px 34px -26px rgba(255,107,53,.92)!important;}
.tb-nav-link.active .nav-label,.nav a.active .nav-label{color:#080A14!important;}
.nav-ico,.topbar .nav-ico,.top .nav-ico{
  width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;flex:0 0 16px!important;display:inline-grid!important;place-items:center!important;overflow:visible!important;
}
.nav-ico img,.topbar .nav-ico img,.top .nav-ico img,.nav-ico svg,.topbar .nav-ico svg,.top .nav-ico svg{
  width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;max-width:16px!important;max-height:16px!important;display:block!important;object-fit:contain!important;border-radius:0!important;background:transparent!important;
}
.nav-label{display:inline-block!important;max-width:none!important;overflow:visible!important;text-overflow:clip!important;color:inherit!important;}
.is-signed-in .topbar .nav-account,.is-signed-in .top .nav-account{width:auto!important;min-width:0!important;max-width:none!important;padding:0 12px!important;}
.is-signed-in .topbar .nav-account .nav-label,.is-signed-in .top .nav-account .nav-label{position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;clip:auto!important;white-space:nowrap!important;border:0!important;}
.notif-badge{position:absolute!important;top:-5px!important;right:-5px!important;min-width:17px!important;height:17px!important;padding:0 5px!important;display:inline-grid!important;place-items:center!important;border-radius:999px!important;background:#FF3D81!important;color:#fff!important;font-size:9px!important;font-weight:900!important;line-height:1!important;box-shadow:0 0 0 3px rgba(8,10,20,.96)!important;}
.verify-notice{width:var(--shell)!important;margin:10px auto 0!important;border-radius:15px!important;padding:10px 12px!important;}

/* Better page rhythm — less empty space, fewer giant blocks. */
.auth-shell{
  width:min(1120px, calc(100vw - 40px))!important;
  max-width:1120px!important;
  margin:46px auto 0!important;
  padding:20px 0 64px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(340px,420px)!important;
  gap:42px!important;
  align-items:start!important;
}
.auth-copy{max-width:600px!important;gap:18px!important;align-self:center!important;}
.auth-copy h1{font-size:clamp(42px,5.4vw,68px)!important;line-height:.95!important;letter-spacing:.01em!important;max-width:620px!important;}
.auth-copy .lede,.lede{font-size:14.5px!important;line-height:1.72!important;color:#B8C2DF!important;}
.auth-points{gap:12px!important;margin-top:4px!important;}
.point{padding:16px!important;border-radius:16px!important;background:rgba(255,255,255,.028)!important;}
.point b{font-size:17px!important;margin-bottom:5px!important;}
.point span{font-size:13px!important;line-height:1.55!important;}
.auth-card{max-width:420px!important;width:100%!important;justify-self:end!important;padding:26px!important;border-radius:22px!important;}
.card-head{margin-bottom:18px!important;}
.card-head h2{font-size:26px!important;line-height:1.03!important;}
.field input,.field textarea,.field select{min-height:43px!important;border-radius:12px!important;padding:11px 12px!important;font-size:14px!important;}
.button{min-height:42px!important;border-radius:12px!important;padding:0 16px!important;font-size:12.5px!important;letter-spacing:.055em!important;}
.button.small{min-height:32px!important;padding:0 11px!important;font-size:11.5px!important;}
.profile-shell,.public-shell{width:var(--shell)!important;margin:34px auto 0!important;padding:20px 0 72px!important;gap:20px!important;}
.panel,.auth-card,.public-card,.dashboard-hero,.loading-card{border-radius:22px!important;}
.panel{padding:22px!important;}
.panel h2{font-size:clamp(24px,2.4vw,30px)!important;}
.panel h3{font-size:clamp(20px,2vw,24px)!important;}
.content-grid,.staff-dashboard-grid,.settings-grid{gap:18px!important;}
.stats-row{gap:10px!important;}
.stat-card{min-height:76px!important;padding:14px!important;border-radius:16px!important;}
.stat-card b{font-size:clamp(22px,2.3vw,30px)!important;}
.stat-card span{font-size:10px!important;}

/* Homepage repair */
.hero{width:100%!important;max-width:none!important;min-height:auto!important;padding:clamp(78px,9vh,118px) 24px clamp(56px,8vh,88px)!important;}
.hero-content{width:min(1120px,100%)!important;margin:0 auto!important;gap:22px!important;}
.hero h1{font-size:clamp(50px,7vw,96px)!important;line-height:.98!important;max-width:980px!important;}
.hero-desc{max-width:650px!important;font-size:16px!important;line-height:1.75!important;}
.cta-primary,.cta-secondary{min-height:50px!important;border-radius:12px!important;font-size:13px!important;padding:0 26px!important;}
.stats-strip{width:min(920px,100%)!important;gap:12px!important;margin-top:8px!important;}
.stat-item{min-height:102px!important;padding:20px 22px!important;border-radius:16px!important;}
.stat-value{font-size:clamp(28px,3vw,38px)!important;}
.spectrum-preview,.spectrum{max-width:min(920px,100%)!important;margin-left:auto!important;margin-right:auto!important;}

/* Footer repair — full-width finish, no floating black slab. */
footer,.footer{
  width:100%!important;
  max-width:none!important;
  margin:48px 0 0!important;
  padding:22px clamp(20px,4vw,48px) 30px!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  background:linear-gradient(180deg,rgba(8,10,20,.18),rgba(8,10,20,.58))!important;
  color:#8D96BD!important;
}
.flinks{width:var(--shell)!important;max-width:var(--shell)!important;margin:0 auto!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:16px!important;flex-wrap:wrap!important;font-size:12px!important;letter-spacing:.07em!important;}
.flinks a{color:#AAB2D3!important;}
.flinks a:hover{color:#00D9FF!important;}

@media(max-width:1100px){
  :root{--shell:min(100vw - 24px, 1260px);}
  .topbar,.top{top:8px!important;flex-wrap:wrap!important;align-items:flex-start!important;}
  .tb-nav,.nav{width:100%!important;justify-content:flex-start!important;}
  .auth-shell{grid-template-columns:1fr!important;gap:26px!important;margin-top:34px!important;}
  .auth-card{justify-self:start!important;max-width:560px!important;}
}
@media(max-width:760px){
  :root{--shell:calc(100vw - 20px);}
  .topbar,.top{border-radius:18px!important;padding:8px!important;margin-top:8px!important;}
  .wordmark,.wm{min-height:40px!important;font-size:16px!important;}
  .wordmark .brand-logo,.wordmark img,.wm img{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;}
  .tb-nav-link,.nav a{height:36px!important;min-height:36px!important;padding:0 10px!important;font-size:11.5px!important;}
  .nav-ico,.topbar .nav-ico,.top .nav-ico,.nav-ico img,.topbar .nav-ico img,.top .nav-ico img{width:15px!important;height:15px!important;min-width:15px!important;min-height:15px!important;}
  .auth-shell,.profile-shell,.public-shell{width:var(--shell)!important;margin-top:26px!important;padding-bottom:54px!important;}
  .auth-copy h1{font-size:clamp(38px,13vw,58px)!important;}
  .auth-points,.stats-strip,.stats-row{grid-template-columns:1fr!important;}
  .auth-card,.panel{padding:18px!important;}
  .hero{padding:58px 16px 48px!important;}
  .hero h1{font-size:clamp(44px,14vw,66px)!important;}
  .hero-desc{font-size:14.5px!important;}
  .flinks{width:100%!important;justify-content:flex-start!important;}
}

/* ===== Step 8.2 — final verified nav/footer/render-state repair ===== */
html,body{max-width:100%!important;overflow-x:hidden!important;}

/* Custom marketing footers use two .fcol columns. The global centred .flinks shell rule was
   forcing those link groups to 1260px wide and pushing them off-screen. */
footer .fcol{min-width:0!important;}
footer .fcol .flinks,
.footer .fcol .flinks{
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px 22px!important;
  flex-wrap:wrap!important;
}
footer .fcol .flinks a,
.footer .fcol .flinks a{white-space:nowrap!important;}

/* Account hero titles are real headings, not usernames only. Do not ellipsis full sentences. */
.identity h1,
.dashboard-hero .identity h1,
.profile-identity h1,
.public-card h1{
  max-width:min(780px,100%)!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  text-wrap:balance!important;
}

/* Paint Library hero: keep the skewed line inside its grid column and avoid mid-word breaks. */
.colors-page .library-copy{min-width:0!important;max-width:680px!important;}
.colors-page .library-hero{grid-template-columns:minmax(0,1fr) minmax(360px,.82fr)!important;}
.colors-page .library-hero h1{
  max-width:100%!important;
  font-size:clamp(50px,6.05vw,88px)!important;
  line-height:.94!important;
  overflow:visible!important;
}
.colors-page .library-hero h1 span{
  display:inline!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  box-decoration-break:clone!important;
  -webkit-box-decoration-break:clone!important;
}
.colors-page .library-visual{min-width:0!important;}
@media(max-width:1100px){
  .colors-page .library-hero{grid-template-columns:1fr!important;}
  .colors-page .library-copy{max-width:760px!important;}
  .colors-page .library-hero h1{font-size:clamp(46px,9vw,74px)!important;}
}
@media(max-width:560px){
  .colors-page .library-hero h1{font-size:clamp(42px,13.2vw,62px)!important;}
}

/* Signed-in nav can have 9–10 links. Keep core links readable and make utility links icon-first. */
.is-signed-in .topbar .tb-nav,
.is-signed-in .top .tb-nav,
.is-signed-in .topbar .nav,
.is-signed-in .top .nav{justify-content:flex-end!important;}
.is-signed-in .topbar .nav-account,
.is-signed-in .top .nav-account,
.is-signed-in .topbar .nav-notification,
.is-signed-in .top .nav-notification{
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  padding:0!important;
  justify-content:center!important;
}
.is-signed-in .topbar .nav-account .nav-label,
.is-signed-in .top .nav-account .nav-label,
.is-signed-in .topbar .nav-notification .nav-label,
.is-signed-in .top .nav-notification .nav-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.is-signed-in .topbar .nav-notification .notif-badge,
.is-signed-in .top .nav-notification .notif-badge{top:-5px!important;right:-5px!important;margin:0!important;}

/* The generated notifications are icon + text, not icon + trailing action. Keep them left-aligned. */
.notification-card{
  justify-content:flex-start!important;
  align-items:flex-start!important;
  gap:12px!important;
}
.notification-card > span:not(.friend-avatar):not(.notification-icon),
.notification-card .notification-main{
  display:grid!important;
  gap:4px!important;
  min-width:0!important;
  flex:1 1 auto!important;
  text-align:left!important;
}
.notification-card > span:not(.friend-avatar):not(.notification-icon) b,
.notification-card .notification-main b{
  display:block!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.1!important;
}
.notification-card > span:not(.friend-avatar):not(.notification-icon) small,
.notification-card .notification-main small{
  display:block!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.45!important;
  color:#AEB7D6!important;
}
@media(max-width:560px){
  .notification-card{flex-direction:row!important;align-items:flex-start!important;}
}

/* Stats inside narrow side panels need room for 4+ digit values. */
.panel > .stats-row{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  padding:0!important;
  margin-top:16px!important;
}
.panel > .stats-row .stat-card{min-width:0!important;padding:13px!important;}
.panel > .stats-row .stat-card b{
  font-size:clamp(21px,2.1vw,27px)!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.05!important;
}

/* ===== Step 8.4 — full navbar frontend rewrite ===== */
:root{
  --nav-shell: min(1188px, calc(100vw - 32px));
  --nav-glass: rgba(7,10,19,.72);
  --nav-glass-strong: rgba(15,18,31,.74);
  --nav-hairline: rgba(255,255,255,.105);
  --nav-muted: #AEB7D6;
  --nav-bright: #F7F8FF;
}
.topbar,.top{
  width:var(--nav-shell)!important;
  max-width:var(--nav-shell)!important;
  min-height:62px!important;
  top:12px!important;
  margin:12px auto 0!important;
  padding:8px!important;
  gap:12px!important;
  align-items:center!important;
  justify-content:space-between!important;
  border:1px solid var(--nav-hairline)!important;
  border-radius:24px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    radial-gradient(circle at 0% 0%,rgba(255,107,53,.13),transparent 36%),
    radial-gradient(circle at 96% 14%,rgba(0,217,255,.10),transparent 34%),
    var(--nav-glass)!important;
  box-shadow:0 22px 70px -48px rgba(0,0,0,.96), inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(22px) saturate(132%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(132%)!important;
  overflow:visible!important;
}
.topbar::before,.top::before{
  content:""!important;
  position:absolute!important;
  left:16px!important;
  right:16px!important;
  bottom:-1px!important;
  height:1px!important;
  inset:auto 16px -1px 16px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,transparent,rgba(255,107,53,.7),rgba(255,61,129,.55),rgba(0,217,255,.72),transparent)!important;
  opacity:.68!important;
  pointer-events:none!important;
}
.wordmark,.wm{
  flex:0 0 auto!important;
  min-width:0!important;
  min-height:46px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:5px 12px 5px 6px!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  color:var(--nav-bright)!important;
  font-family:var(--font-display, Rajdhani, system-ui, sans-serif)!important;
  text-transform:none!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}
.wordmark:hover,.wm:hover{background:rgba(255,255,255,.045)!important;}
.wordmark .brand-logo,.wordmark img,.wm img{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  border-radius:12px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 10px 20px rgba(255,61,129,.18))!important;
}
.brand-copy{display:grid!important;gap:1px!important;line-height:1!important;}
.wordmark .brand-main,.wm .brand-main{
  display:block!important;
  color:#F7F8FF!important;
  font-size:19px!important;
  font-weight:800!important;
  line-height:.92!important;
  letter-spacing:.01em!important;
  text-transform:uppercase!important;
}
.wordmark .brand-tag,.wordmark .hz,.wm .brand-tag,.wm .hz{
  display:block!important;
  height:auto!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#858FB2!important;
  font-family:var(--font-mono, ui-monospace, monospace)!important;
  font-size:9.5px!important;
  font-weight:700!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
}
.tb-nav,.nav{
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;
  padding:4px!important;
  margin-left:auto!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.032)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  flex-wrap:nowrap!important;
}
.tb-nav::-webkit-scrollbar,.nav::-webkit-scrollbar{display:none!important;}
.tb-nav-link,.nav a{
  position:relative!important;
  flex:0 0 auto!important;
  height:38px!important;
  min-height:38px!important;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:14px!important;
  background:transparent!important;
  color:var(--nav-muted)!important;
  font-family:var(--font-display, Rajdhani, system-ui, sans-serif)!important;
  font-size:12.5px!important;
  font-weight:800!important;
  letter-spacing:.035em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  text-decoration:none!important;
  transform:none!important;
  box-shadow:none!important;
  transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease!important;
}
.tb-nav-link:hover,.nav a:hover{
  background:rgba(255,255,255,.068)!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
}
.tb-nav-link.active,.nav a.active{
  background:rgba(255,255,255,.102)!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 28px -24px rgba(0,217,255,.95)!important;
}
.tb-nav-link.active::after,.nav a.active::after{
  content:""!important;
  position:absolute!important;
  left:14px!important;
  right:14px!important;
  bottom:5px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#FF6B35,#FF3D81,#00D9FF)!important;
  opacity:.9!important;
}
.nav-ico,.topbar .nav-ico,.top .nav-ico{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  flex:0 0 16px!important;
  display:inline-grid!important;
  place-items:center!important;
  opacity:.92!important;
  overflow:visible!important;
}
.nav-ico img,.topbar .nav-ico img,.top .nav-ico img,.nav-ico svg,.topbar .nav-ico svg,.top .nav-ico svg{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  max-width:16px!important;
  max-height:16px!important;
  display:block!important;
  object-fit:contain!important;
  border-radius:0!important;
  background:transparent!important;
}
.nav-label{
  display:inline-block!important;
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
  color:inherit!important;
  font-size:inherit!important;
}
.nav-cta,.tb-nav-link.nav-cta,.nav a.nav-cta{
  margin-left:4px!important;
  padding:0 15px!important;
  color:#070A13!important;
  background:linear-gradient(135deg,#F2CE1B,#FF8A35 48%,#FF3D81)!important;
  box-shadow:0 14px 32px -26px rgba(255,107,53,.9)!important;
}
.nav-cta:hover,.tb-nav-link.nav-cta:hover,.nav a.nav-cta:hover{
  color:#070A13!important;
  background:linear-gradient(135deg,#FFE37A,#FF9B4A 48%,#FF5C98)!important;
}
.nav-cta.active::after{background:rgba(8,10,20,.55)!important;}
.is-signed-in .topbar .tb-nav,.is-signed-in .top .tb-nav,.is-signed-in .topbar .nav,.is-signed-in .top .nav{justify-content:flex-end!important;}
.is-signed-in .topbar .nav-account:not(.nav-icon-only),.is-signed-in .top .nav-account:not(.nav-icon-only){
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  padding:0 12px!important;
}
.is-signed-in .topbar .nav-account:not(.nav-icon-only) .nav-label,.is-signed-in .top .nav-account:not(.nav-icon-only) .nav-label{
  position:static!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  clip:auto!important;
  white-space:nowrap!important;
  border:0!important;
}
.nav-icon-only,.is-signed-in .topbar .nav-icon-only,.is-signed-in .top .nav-icon-only{
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  padding:0!important;
}
.nav-icon-only .nav-label,.is-signed-in .topbar .nav-icon-only .nav-label,.is-signed-in .top .nav-icon-only .nav-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.notif-badge{top:-5px!important;right:-5px!important;}
@media(max-width:1160px){
  :root{--nav-shell:min(100vw - 24px,1188px);}
  .topbar,.top{top:8px!important;margin-top:8px!important;flex-wrap:wrap!important;align-items:flex-start!important;border-radius:22px!important;}
  .tb-nav,.nav{order:5;width:100%!important;justify-content:flex-start!important;margin-left:0!important;}
}
@media(max-width:760px){
  :root{--nav-shell:calc(100vw - 18px);}
  .topbar,.top{padding:7px!important;gap:8px!important;border-radius:20px!important;}
  .wordmark,.wm{min-height:40px!important;padding:4px 8px 4px 4px!important;}
  .wordmark .brand-logo,.wordmark img,.wm img{width:31px!important;height:31px!important;min-width:31px!important;min-height:31px!important;border-radius:10px!important;}
  .wordmark .brand-main,.wm .brand-main{font-size:16px!important;}
  .wordmark .brand-tag,.wordmark .hz,.wm .brand-tag,.wm .hz{display:none!important;}
  .tb-nav,.nav{padding:4px!important;border-radius:16px!important;gap:3px!important;}
  .tb-nav-link,.nav a{height:36px!important;min-height:36px!important;padding:0 10px!important;font-size:11.5px!important;}
  .nav-ico,.topbar .nav-ico,.top .nav-ico,.nav-ico img,.topbar .nav-ico img,.top .nav-ico img{width:15px!important;height:15px!important;min-width:15px!important;min-height:15px!important;}
  .nav-label{font-size:inherit!important;}
}
@media(max-width:430px){
  .tb-nav-link,.nav a{padding:0 9px!important;gap:6px!important;}
  .tb-nav-link[data-short-label] .nav-label{font-size:0!important;}
  .tb-nav-link[data-short-label] .nav-label::after{content:attr(data-short-label);font-size:11.5px!important;}
}

/* ===== Step 8.5 — compact navbar with More dropdown ===== */
.topbar,.top{
  min-height:58px!important;
  padding:7px!important;
  gap:10px!important;
}
.tb-nav,.nav{
  flex:0 1 auto!important;
  width:auto!important;
  max-width:calc(100% - 235px)!important;
  overflow:visible!important;
  justify-content:flex-end!important;
  gap:5px!important;
  padding:4px!important;
}
.tb-nav-link,.nav a,button.tb-nav-link{
  appearance:none!important;
  -webkit-appearance:none!important;
  cursor:pointer!important;
  border:0!important;
}
.nav-more{
  position:relative!important;
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  z-index:60!important;
}
.nav-more-button{
  padding:0 13px!important;
}
.nav-more.active .nav-more-button,
.nav-more.open .nav-more-button{
  background:rgba(255,255,255,.102)!important;
  color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 12px 28px -24px rgba(0,217,255,.95)!important;
}
.nav-more.active .nav-more-button::after,
.nav-more.open .nav-more-button::after{
  content:""!important;
  position:absolute!important;
  left:14px!important;
  right:14px!important;
  bottom:5px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#FF6B35,#FF3D81,#00D9FF)!important;
  opacity:.9!important;
}
.nav-menu-dots{
  width:18px!important;
  height:16px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
}
.nav-menu-dots i{
  width:4px!important;
  height:4px!important;
  border-radius:999px!important;
  background:currentColor!important;
  opacity:.95!important;
  display:block!important;
}
.nav-menu{
  position:absolute!important;
  top:calc(100% + 10px)!important;
  right:0!important;
  width:min(260px,calc(100vw - 34px))!important;
  padding:8px!important;
  display:grid!important;
  gap:5px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:18px!important;
  background:
    linear-gradient(180deg,rgba(19,22,37,.98),rgba(9,11,20,.97)),
    rgba(9,11,20,.97)!important;
  box-shadow:0 24px 70px -34px rgba(0,0,0,.98),inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(20px) saturate(132%)!important;
  -webkit-backdrop-filter:blur(20px) saturate(132%)!important;
  opacity:0!important;
  transform:translateY(-6px) scale(.985)!important;
  pointer-events:none!important;
  visibility:hidden!important;
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease!important;
  z-index:999!important;
}
.nav-more.open .nav-menu{
  opacity:1!important;
  transform:translateY(0) scale(1)!important;
  pointer-events:auto!important;
  visibility:visible!important;
}
.nav-menu-link{
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  padding:0 11px!important;
  border-radius:13px!important;
  color:#C9D1EA!important;
  font-family:var(--font-display, Rajdhani, system-ui, sans-serif)!important;
  font-size:12.5px!important;
  font-weight:800!important;
  letter-spacing:.035em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  background:transparent!important;
  position:relative!important;
  white-space:nowrap!important;
}
.nav-menu-link:hover{
  color:#fff!important;
  background:rgba(255,255,255,.07)!important;
}
.nav-menu-link.active{
  color:#fff!important;
  background:rgba(255,255,255,.10)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)!important;
}
.nav-menu-link.active::before{
  content:""!important;
  width:3px!important;
  align-self:stretch!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#FF6B35,#FF3D81,#00D9FF)!important;
  margin:8px 0 8px -4px!important;
}
.nav-menu-link .nav-ico,
.nav-menu-link .nav-ico img{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
}
.nav-menu-link .nav-label{
  display:inline-block!important;
  color:inherit!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.nav-menu-link .notif-badge{
  margin-left:auto!important;
  position:static!important;
  transform:none!important;
}
.is-signed-in .topbar .nav-account:not(.nav-icon-only),
.is-signed-in .top .nav-account:not(.nav-icon-only){
  padding:0 12px!important;
}
@media(max-width:1160px){
  .tb-nav,.nav{
    order:0!important;
    width:auto!important;
    max-width:calc(100% - 190px)!important;
    margin-left:auto!important;
    justify-content:flex-end!important;
  }
  .topbar,.top{
    flex-wrap:nowrap!important;
    align-items:center!important;
  }
}
@media(max-width:760px){
  .topbar,.top{
    flex-wrap:wrap!important;
    align-items:flex-start!important;
  }
  .tb-nav,.nav{
    order:5!important;
    width:100%!important;
    max-width:100%!important;
    justify-content:flex-start!important;
    overflow:visible!important;
  }
  .nav-menu{
    left:0!important;
    right:auto!important;
    width:min(280px,calc(100vw - 34px))!important;
  }
  .tb-nav-link,.nav a,button.tb-nav-link{
    padding:0 10px!important;
  }
  .nav-cta,.tb-nav-link.nav-cta,.nav a.nav-cta{
    margin-left:auto!important;
  }
}
@media(max-width:430px){
  .tb-nav,.nav{gap:4px!important;}
  .tb-nav-link,.nav a,button.tb-nav-link{padding:0 9px!important;}
  .nav-more-button{padding:0 10px!important;}
  .nav-cta,.tb-nav-link.nav-cta,.nav a.nav-cta{padding:0 11px!important;}
}

/* ===== Step 9.0 — release overpass: clean nav, page rhythm, mobile polish ===== */
:root{
  --release-shell:min(1180px,calc(100vw - 36px));
  --release-shell-wide:min(1320px,calc(100vw - 36px));
  --release-ink:#F6F7FF;
  --release-muted:#AEB7D6;
  --release-soft:#737B9D;
  --release-panel:rgba(13,16,28,.78);
  --release-panel-2:rgba(18,22,36,.74);
  --release-line:rgba(255,255,255,.105);
  --release-line-2:rgba(255,255,255,.18);
  --release-cyan:#00D9FF;
  --release-pink:#FF3D81;
  --release-orange:#FF6B35;
  --release-violet:#7C3AED;
}
html{overflow-x:hidden!important;scroll-padding-top:92px!important;background:#080A14!important;}
body{overflow-x:hidden!important;color:var(--text,var(--release-ink))!important;text-rendering:geometricPrecision!important;-webkit-font-smoothing:antialiased!important;}
body::before{pointer-events:none!important;}
img,svg,video,canvas{max-width:100%;height:auto;}
a,button,input,textarea,select{font:inherit;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid color-mix(in srgb,var(--release-cyan) 86%,white)!important;outline-offset:3px!important;}

/* Top navigation: intentionally small. Main pages stay visible, everything else lives in Menu. */
.topbar,.top,.seo-topbar{
  position:sticky!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:1000!important;
  width:100%!important;
  min-height:68px!important;
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  padding:12px max(18px,calc((100vw - 1180px)/2))!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  background:linear-gradient(180deg,rgba(8,10,20,.92),rgba(8,10,20,.78))!important;
  box-shadow:0 18px 42px -38px rgba(0,0,0,.95)!important;
  backdrop-filter:blur(18px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(130%)!important;
  overflow:visible!important;
}
.topbar::before,.top::before,.seo-topbar::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,var(--release-orange),var(--release-pink),var(--release-cyan),transparent)!important;
  opacity:.58!important;
  pointer-events:none!important;
}
.wordmark,.wm{
  height:44px!important;
  min-height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  gap:10px!important;
  padding:0 10px 0 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--release-ink)!important;
  text-decoration:none!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-weight:800!important;
  letter-spacing:.015em!important;
  text-transform:none!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
.wordmark .brand-logo,.wordmark img.brand-logo,.wm img,.seo-topbar .wordmark img{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  object-fit:contain!important;
  border-radius:11px!important;
  box-shadow:0 16px 30px -23px rgba(0,217,255,.86)!important;
  filter:none!important;
}
.brand-copy{display:grid!important;gap:0!important;line-height:1!important;}
.brand-main{display:block!important;font-size:19px!important;color:var(--release-ink)!important;letter-spacing:.02em!important;}
.brand-tag{display:block!important;margin-top:3px!important;font-family:var(--font-mono,ui-monospace,monospace)!important;font-size:9.5px!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:var(--release-soft)!important;}
.wordmark .hz,.wm .hz{display:none!important;}
.tb-nav,.nav{
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  height:44px!important;
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  scrollbar-width:none!important;
  flex-wrap:nowrap!important;
}
.tb-nav::-webkit-scrollbar,.nav::-webkit-scrollbar{display:none!important;}
.tb-nav-link,.nav a,button.tb-nav-link,.nav button{
  position:relative!important;
  min-width:auto!important;
  width:auto!important;
  max-width:none!important;
  height:38px!important;
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  flex:0 0 auto!important;
  padding:0 13px!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--release-muted)!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease!important;
  transform:none!important;
}
.tb-nav-link .nav-ico,.nav a .nav-ico{display:none!important;}
.tb-nav-link .nav-label,.nav a .nav-label,button.tb-nav-link .nav-label{
  position:static!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  clip:auto!important;
  overflow:visible!important;
  max-width:none!important;
  color:inherit!important;
  text-overflow:clip!important;
}
.tb-nav-link:hover,.nav a:hover,button.tb-nav-link:hover{
  color:#fff!important;
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.11)!important;
  transform:none!important;
}
.tb-nav-link.active,.nav a.active,.nav-more.active .nav-more-button{
  color:#fff!important;
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.15)!important;
  box-shadow:inset 0 -2px 0 rgba(0,217,255,.62)!important;
}
.tb-nav-link.active::after,.nav a.active::after{display:none!important;}
.nav-cta,.tb-nav-link.nav-cta,.nav a.nav-cta{
  margin-left:4px!important;
  padding:0 15px!important;
  color:#06101A!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,#f6fbff 0%,#DDF9FF 42%,#77E7FF 100%)!important;
  box-shadow:0 16px 30px -24px rgba(0,217,255,.9)!important;
}
.nav-cta:hover,.tb-nav-link.nav-cta:hover,.nav a.nav-cta:hover{
  color:#06101A!important;
  background:linear-gradient(135deg,#ffffff 0%,#EAFBFF 44%,#9AF0FF 100%)!important;
  border-color:transparent!important;
}
.nav-more{position:relative!important;display:inline-flex!important;align-items:center!important;flex:0 0 auto!important;z-index:1005!important;}
.nav-more-button{appearance:none!important;-webkit-appearance:none!important;border:1px solid rgba(255,255,255,.105)!important;background:rgba(255,255,255,.032)!important;padding:0 12px!important;}
.nav-more.open .nav-more-button{color:#fff!important;background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.18)!important;}
.nav-more-button::after,.nav-more.active .nav-more-button::after,.nav-more.open .nav-more-button::after{display:none!important;content:none!important;}
.nav-menu-dots{display:none!important;}
.nav-chevron{display:inline-block!important;margin-left:1px!important;font-size:15px!important;line-height:1!important;color:currentColor!important;opacity:.75!important;transform:translateY(-1px)!important;}
.nav-more.open .nav-chevron{transform:translateY(0) rotate(180deg)!important;}
.nav-menu{
  position:absolute!important;
  top:calc(100% + 12px)!important;
  right:0!important;
  left:auto!important;
  width:270px!important;
  max-width:calc(100vw - 32px)!important;
  padding:8px!important;
  display:grid!important;
  gap:4px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(17,21,34,.985),rgba(8,10,20,.985))!important;
  box-shadow:0 28px 70px -38px rgba(0,0,0,.98),inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(22px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(135%)!important;
  opacity:0!important;
  pointer-events:none!important;
  visibility:hidden!important;
  transform:translateY(-6px)!important;
  transition:opacity .14s ease,transform .14s ease,visibility .14s ease!important;
  z-index:1010!important;
}
.nav-more.open .nav-menu{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0)!important;}
.nav-menu-link{
  position:relative!important;
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:11px!important;
  padding:0 12px!important;
  border:1px solid transparent!important;
  border-radius:13px!important;
  background:transparent!important;
  color:#CBD3EA!important;
  text-decoration:none!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.nav-menu-link:hover{color:#fff!important;background:rgba(255,255,255,.065)!important;border-color:rgba(255,255,255,.09)!important;}
.nav-menu-link.active{color:#fff!important;background:rgba(0,217,255,.09)!important;border-color:rgba(0,217,255,.24)!important;box-shadow:none!important;}
.nav-menu-link.active::before{content:""!important;width:3px!important;height:18px!important;border-radius:999px!important;background:linear-gradient(180deg,var(--release-orange),var(--release-pink),var(--release-cyan))!important;margin-left:-5px!important;flex:0 0 auto!important;}
.nav-menu-link .nav-ico{width:17px!important;height:17px!important;min-width:17px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;opacity:.78!important;filter:brightness(1.4)!important;}
.nav-menu-link .nav-ico img{width:17px!important;height:17px!important;display:block!important;filter:brightness(0) invert(1)!important;opacity:.72!important;}
.nav-menu-link .nav-label{display:block!important;color:inherit!important;}
.notif-badge{position:absolute!important;top:-4px!important;right:-4px!important;min-width:18px!important;height:18px!important;padding:0 5px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;background:var(--release-pink)!important;color:#fff!important;font:800 9px/1 var(--font-mono,ui-monospace,monospace)!important;box-shadow:0 0 0 2px rgba(8,10,20,.98)!important;}
.nav-menu-link .notif-badge{position:static!important;margin-left:auto!important;box-shadow:none!important;}

/* Global release layout rhythm */
.wrap,.shell,.profile-shell,.public-shell,.auth-shell,main.profile-shell,main.public-shell{
  width:var(--release-shell)!important;
  max-width:var(--release-shell)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.wrap{padding:clamp(40px,5.5vw,72px) 0 clamp(78px,8vw,112px)!important;}
.profile-shell,.public-shell{padding:clamp(34px,4.5vw,58px) 0 clamp(76px,8vw,112px)!important;gap:24px!important;}
.auth-shell{padding:clamp(48px,6vw,84px) 0 clamp(78px,8vw,112px)!important;gap:clamp(26px,4vw,52px)!important;}
.hero,.hero-inner,.public-hero,.content-grid,.two-grid,.staff-dashboard-grid,.garage-grid,.converter-grid{
  min-width:0!important;
}
.hero,.hero-inner,.public-hero{gap:clamp(22px,3.4vw,42px)!important;}
.content-grid,.two-grid,.staff-dashboard-grid{gap:24px!important;}
.stack{gap:20px!important;}
.panel,.card,.public-card,.auth-card,.dashboard-hero,.tool-card,.feature-card,.saved-row,.friend-card,.staff-user-card,.palette-card,.security-item,.empty-box,.loading-card{
  border-color:var(--release-line)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.022))!important;
  box-shadow:0 24px 64px -52px rgba(0,0,0,.96),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.panel,.card,.public-card,.auth-card,.dashboard-hero{border-radius:24px!important;}
.panel{padding:clamp(20px,2.6vw,28px)!important;}
.auth-card{padding:clamp(24px,3.2vw,34px)!important;}
.hero-inner,.public-hero{padding:clamp(24px,3vw,34px)!important;}
h1,.identity h1,.public-card h1,.hero h1{max-width:100%!important;overflow-wrap:normal!important;word-break:normal!important;text-wrap:balance!important;letter-spacing:-.025em!important;}
h2,h3{max-width:100%!important;text-wrap:balance!important;}
p,.lede,.bio-line,.panel-note,.card p{max-width:72ch!important;}
.lede,.bio-line,.panel-note,.card p,td,small{color:var(--release-muted)!important;}
.profile-kicker,.eyebrow,.crumb{letter-spacing:.16em!important;}
.actions-rail,.form-row{gap:10px!important;flex-wrap:wrap!important;}
.button,.cta,button,.actions-rail .button{
  white-space:nowrap!important;
}
.button,.cta{border-radius:13px!important;font-weight:900!important;letter-spacing:.05em!important;}
.button.secondary,.cta.alt{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.12)!important;color:var(--release-ink)!important;}
.button.secondary:hover,.cta.alt:hover{background:rgba(255,255,255,.075)!important;border-color:rgba(255,255,255,.2)!important;}
.field input,.field textarea,.field select,input[type="text"],input[type="email"],input[type="password"],input[type="search"],textarea,select{
  border-color:rgba(255,255,255,.13)!important;
  background:rgba(5,7,14,.45)!important;
  color:var(--release-ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.field input::placeholder,.field textarea::placeholder,input::placeholder,textarea::placeholder{color:#697191!important;opacity:1!important;}
.tablewrap,.table-wrap{max-width:100%!important;overflow:auto!important;-webkit-overflow-scrolling:touch!important;}
table{max-width:100%!important;}
.stats,.stats-row{min-width:0!important;}
.stat-card,.stat{min-width:0!important;}
.stat-card b,.stat b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1!important;}
.panel .stats-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:0!important;gap:10px!important;}
.panel .stat-card{min-height:76px!important;padding:14px!important;}
.panel .stat-card b{font-size:clamp(23px,2.3vw,30px)!important;}
.notification-card{justify-content:flex-start!important;align-items:flex-start!important;gap:13px!important;}
.notification-card > span:not(.friend-avatar):not(.notification-icon),.notification-card .notification-main{display:grid!important;gap:3px!important;text-align:left!important;min-width:0!important;flex:1 1 auto!important;}
.notification-card b{display:block!important;color:var(--release-ink)!important;line-height:1.15!important;}
.notification-card small{display:block!important;line-height:1.5!important;}
.friend-card,.staff-user-card,.saved-row,.palette-card,.security-item{gap:14px!important;}
.empty-box{border-style:solid!important;color:var(--release-muted)!important;}

/* Footer: calmer and consistent across standard + custom footers. */
footer{
  width:100%!important;
  margin:0!important;
  padding:30px max(18px,calc((100vw - 1180px)/2)) 38px!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
  background:linear-gradient(180deg,rgba(8,10,20,.18),rgba(8,10,20,.66))!important;
  color:var(--release-soft)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  flex-wrap:wrap!important;
  overflow:hidden!important;
}
.flinks,footer .flinks,.fcol .flinks{
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.flinks a,footer a,.footerline a{color:#AEB7D6!important;text-decoration:none!important;font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;font-size:12.5px!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase!important;padding:6px 8px!important;border-radius:999px!important;}
.flinks a:hover,footer a:hover,.footerline a:hover{color:#fff!important;background:rgba(255,255,255,.06)!important;}
.footerline{width:var(--release-shell)!important;margin:0 auto!important;color:var(--release-soft)!important;}

/* Page-specific rescue polish for generated SEO/code pages. */
.seo-topbar + .wrap,.topbar + .wrap{padding-top:clamp(36px,5vw,62px)!important;}
.gridlinks{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))!important;gap:10px!important;}
.gridlinks a{min-width:0!important;align-items:center!important;}
.cards{gap:16px!important;}
.copy{max-width:100%!important;}
.copy h2{line-height:1!important;}
.paint-grid,.library-grid,.results-grid{min-width:0!important;}
.release-note{max-width:100%!important;}
.hero .panel,.hero aside{min-width:0!important;}
.skew-line,.hero h1 span,.identity h1 span{max-width:100%!important;}

@media(max-width:980px){
  :root{--release-shell:min(100% - 28px,920px)!important;}
  .topbar,.top,.seo-topbar{padding:10px 14px!important;min-height:64px!important;gap:12px!important;}
  .brand-main{font-size:18px!important;}
  .brand-tag{display:none!important;}
  .tb-nav,.nav{gap:5px!important;}
  .tb-nav-link,.nav a,button.tb-nav-link{height:36px!important;min-height:36px!important;padding:0 11px!important;font-size:12.5px!important;}
  .nav-cta,.tb-nav-link.nav-cta,.nav a.nav-cta{padding:0 13px!important;}
  .hero,.hero-inner,.public-hero,.content-grid,.two-grid,.staff-dashboard-grid{grid-template-columns:1fr!important;}
  .stats,.stats-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .actions-rail .button{flex:0 1 auto!important;}
}
@media(max-width:680px){
  :root{--release-shell:calc(100vw - 24px)!important;}
  html{scroll-padding-top:116px!important;}
  .topbar,.top,.seo-topbar{min-height:auto!important;flex-wrap:wrap!important;align-items:center!important;padding:10px 12px 12px!important;gap:10px!important;}
  .wordmark,.wm{height:38px!important;min-height:38px!important;max-width:calc(100vw - 24px)!important;}
  .wordmark .brand-logo,.wordmark img.brand-logo,.wm img,.seo-topbar .wordmark img{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;}
  .brand-main{font-size:17px!important;}
  .tb-nav,.nav{order:5!important;width:100%!important;max-width:100%!important;margin-left:0!important;justify-content:flex-start!important;overflow:visible!important;height:auto!important;}
  .tb-nav-link,.nav a,button.tb-nav-link{height:34px!important;min-height:34px!important;padding:0 10px!important;font-size:12px!important;}
  .nav-cta,.tb-nav-link.nav-cta,.nav a.nav-cta{margin-left:auto!important;}
  .nav-menu{left:0!important;right:auto!important;top:calc(100% + 9px)!important;width:min(286px,calc(100vw - 24px))!important;}
  .nav-more:nth-last-child(2) .nav-menu{left:auto!important;right:0!important;}
  .wrap,.profile-shell,.public-shell,.auth-shell{padding-top:32px!important;padding-bottom:76px!important;}
  .hero-inner,.public-hero,.panel,.auth-card{padding:20px 16px!important;border-radius:20px!important;}
  h1,.identity h1,.public-card h1,.hero h1{font-size:clamp(38px,11vw,56px)!important;line-height:.98!important;}
  h2,.panel h2{font-size:clamp(25px,7vw,34px)!important;line-height:1!important;}
  .lede,.bio-line,.panel-note,.card p{font-size:14.5px!important;line-height:1.65!important;}
  .stats,.stats-row,.panel .stats-row{grid-template-columns:1fr!important;}
  .actions-rail,.form-row{align-items:stretch!important;}
  .actions-rail .button,.form-row .button{flex:1 1 150px!important;}
  .gridlinks{grid-template-columns:1fr 1fr!important;}
  footer{padding:26px 12px 34px!important;align-items:flex-start!important;}
}
@media(max-width:430px){
  .topbar,.top,.seo-topbar{gap:8px!important;}
  .tb-nav,.nav{gap:4px!important;}
  .tb-nav-link,.nav a,button.tb-nav-link{padding:0 9px!important;font-size:11.5px!important;letter-spacing:.035em!important;}
  .nav-cta,.tb-nav-link.nav-cta,.nav a.nav-cta{padding:0 10px!important;}
  .nav-menu{width:calc(100vw - 24px)!important;}
  .gridlinks{grid-template-columns:1fr!important;}
  .button,.cta{width:auto!important;}
  .actions-rail .button,.form-row .button{width:100%!important;flex-basis:100%!important;}
}

/* Release overpass cleanup: page-specific topbar CTAs move back into page content, not the global nav. */
.topbar > .tb-cta,.top > .tb-cta,.seo-topbar > .tb-cta{display:none!important;}
.colors-page .library-actions .tb-btn,
.colors-page .library-actions .library-action,
.colors-page .library-actions .tb-btn:not(#garage-btn):not(#convert-btn){
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  overflow:visible!important;
  justify-content:center!important;
}
.colors-page .library-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;}
@media(max-width:680px){.colors-page .library-actions{grid-template-columns:1fr!important;}.colors-page .library-search-card{gap:10px!important;}}
@media(max-width:680px){
  .nav-more .nav-menu,
  .nav-more:nth-last-child(2) .nav-menu{
    position:fixed!important;
    top:112px!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
  }
}
@media(max-width:430px){.nav-more .nav-menu,.nav-more:nth-last-child(2) .nav-menu{top:110px!important;}}

/* ===== Step 9.1 — hard navbar rebuild =====
   Fixes the broken order/overlap issue by forcing one clean structure:
   brand on the left, two primary links, one Menu dropdown, Staff access on the right. */
.topbar,
.top,
.seo-topbar{
  width:min(1320px,calc(100vw - 48px))!important;
  min-height:64px!important;
  margin:8px auto 0!important;
  padding:10px 18px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:18px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-bottom-color:rgba(0,217,255,.28)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(8,10,20,.94),rgba(8,10,20,.86))!important;
  box-shadow:0 24px 70px -56px rgba(0,0,0,.98),inset 0 1px 0 rgba(255,255,255,.055)!important;
  overflow:visible!important;
}
.topbar::before,
.top::before,
.seo-topbar::before{
  top:auto!important;
  bottom:-2px!important;
  left:0!important;
  right:0!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,var(--release-orange,#FF6B35),var(--release-pink,#FF3D81),var(--release-violet,#7C3AED),var(--release-cyan,#00D9FF))!important;
  opacity:.9!important;
}
.topbar > *,
.top > *,
.seo-topbar > *{min-width:0!important;}
.wordmark,
.wm,
.topbar .wordmark,
.top .wordmark,
.seo-topbar .wordmark{
  grid-column:1!important;
  order:0!important;
  justify-self:start!important;
  align-self:center!important;
  width:auto!important;
  max-width:260px!important;
  min-width:0!important;
  height:42px!important;
  min-height:42px!important;
  margin:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#F6F7FF!important;
  text-decoration:none!important;
  overflow:hidden!important;
}
.wordmark .brand-logo,
.wordmark img.brand-logo,
.wm img,
.seo-topbar .wordmark img{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  border-radius:12px!important;
  object-fit:contain!important;
  box-shadow:0 14px 32px -22px rgba(0,217,255,.75)!important;
  filter:none!important;
}
.brand-copy{min-width:0!important;display:grid!important;gap:1px!important;line-height:1!important;}
.brand-main{font-size:19px!important;font-weight:900!important;letter-spacing:.025em!important;text-transform:uppercase!important;color:#fff!important;}
.brand-tag{font-size:9.5px!important;font-weight:800!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:#8F9ABC!important;}
.tb-nav,
.nav,
.topbar .tb-nav,
.top .tb-nav,
.seo-topbar .tb-nav{
  grid-column:2!important;
  order:0!important;
  justify-self:end!important;
  align-self:center!important;
  width:auto!important;
  max-width:100%!important;
  min-width:0!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  flex-wrap:nowrap!important;
}
.tb-nav-link,
.nav a,
button.tb-nav-link,
.nav button{
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  flex:0 0 auto!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#B7C0DD!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:12.5px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.tb-nav-link .nav-ico,
.nav a .nav-ico{display:none!important;}
.tb-nav-link .nav-label,
.nav a .nav-label,
button.tb-nav-link .nav-label{
  position:static!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  clip:auto!important;
  overflow:visible!important;
  color:inherit!important;
  text-overflow:clip!important;
}
.tb-nav-link:hover,
.nav a:hover,
button.tb-nav-link:hover,
.nav button:hover{
  color:#fff!important;
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.11)!important;
  transform:none!important;
}
.tb-nav-link.active,
.nav a.active,
.nav-more.active .nav-more-button{
  color:#fff!important;
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:none!important;
}
.tb-nav-link.active::after,
.nav a.active::after{display:none!important;}
.nav-more{position:relative!important;display:inline-flex!important;align-items:center!important;flex:0 0 auto!important;z-index:1010!important;}
.nav-more-button{
  height:38px!important;
  padding:0 13px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.035)!important;
}
.nav-more.open .nav-more-button{color:#fff!important;background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.2)!important;}
.nav-chevron{font-size:15px!important;line-height:1!important;opacity:.7!important;transform:translateY(-1px)!important;}
.nav-more.open .nav-chevron{transform:translateY(0) rotate(180deg)!important;}
.nav-menu{
  position:absolute!important;
  top:calc(100% + 12px)!important;
  right:0!important;
  left:auto!important;
  width:268px!important;
  max-width:calc(100vw - 36px)!important;
  padding:8px!important;
  display:grid!important;
  gap:4px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(18,22,36,.98),rgba(8,10,20,.98))!important;
  box-shadow:0 28px 70px -40px rgba(0,0,0,.98),inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(22px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(130%)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(-6px)!important;
  z-index:1100!important;
}
.nav-more.open .nav-menu{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0)!important;}
.nav-menu-link{
  min-height:42px!important;
  padding:0 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:11px!important;
  border-radius:13px!important;
  color:#CBD3EA!important;
  background:transparent!important;
  border:1px solid transparent!important;
  font-size:13px!important;
}
.nav-menu-link .nav-ico,
.nav-menu-link .nav-ico img{display:inline-flex!important;width:17px!important;height:17px!important;min-width:17px!important;opacity:.78!important;filter:brightness(0) invert(1)!important;}
.nav-menu-link:hover{color:#fff!important;background:rgba(255,255,255,.065)!important;border-color:rgba(255,255,255,.09)!important;}
.nav-menu-link.active{color:#fff!important;background:rgba(0,217,255,.09)!important;border-color:rgba(0,217,255,.24)!important;}
.nav-cta,
.tb-nav-link.nav-cta,
.nav a.nav-cta{
  margin-left:3px!important;
  padding:0 16px!important;
  color:#06101A!important;
  background:linear-gradient(135deg,#FFFFFF,#DDF9FF 52%,#87ECFF)!important;
  border-color:transparent!important;
  box-shadow:0 16px 34px -26px rgba(0,217,255,.9)!important;
}
.nav-cta:hover,
.tb-nav-link.nav-cta:hover,
.nav a.nav-cta:hover{color:#06101A!important;background:linear-gradient(135deg,#FFFFFF,#EAFBFF 55%,#A3F3FF)!important;}
.notif-badge{top:-4px!important;right:-4px!important;}

@media(max-width:760px){
  .topbar,
  .top,
  .seo-topbar{
    width:calc(100vw - 24px)!important;
    min-height:auto!important;
    margin-top:8px!important;
    padding:10px!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .wordmark,
  .wm,
  .topbar .wordmark,
  .top .wordmark,
  .seo-topbar .wordmark{
    grid-column:1!important;
    width:100%!important;
    max-width:100%!important;
    height:38px!important;
    min-height:38px!important;
  }
  .wordmark .brand-logo,
  .wordmark img.brand-logo,
  .wm img,
  .seo-topbar .wordmark img{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;}
  .brand-main{font-size:17px!important;}
  .brand-tag{display:none!important;}
  .tb-nav,
  .nav,
  .topbar .tb-nav,
  .top .tb-nav,
  .seo-topbar .tb-nav{
    grid-column:1!important;
    width:100%!important;
    height:auto!important;
    justify-self:stretch!important;
    justify-content:flex-start!important;
    gap:5px!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    padding:1px 1px 3px!important;
    scrollbar-width:none!important;
  }
  .tb-nav::-webkit-scrollbar,.nav::-webkit-scrollbar{display:none!important;}
  .tb-nav-link,
  .nav a,
  button.tb-nav-link,
  .nav button{height:34px!important;min-height:34px!important;max-height:34px!important;padding:0 10px!important;font-size:11.5px!important;letter-spacing:.04em!important;}
  .nav-cta,.tb-nav-link.nav-cta,.nav a.nav-cta{margin-left:auto!important;padding:0 12px!important;}
  .nav-menu,
  .nav-more .nav-menu,
  .nav-more:nth-last-child(2) .nav-menu{
    position:fixed!important;
    top:110px!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-width:none!important;
  }
}
@media(max-width:420px){
  .tb-nav-link,.nav a,button.tb-nav-link,.nav button{padding:0 9px!important;font-size:11px!important;}
  .nav-more-button{padding:0 10px!important;}
  .nav-cta,.tb-nav-link.nav-cta,.nav a.nav-cta{padding:0 11px!important;}
}

/* ===== Step 9.1b — nav accent edge wrap fix ===== */
.topbar::before,
.top::before,
.seo-topbar::before{
  top:auto!important;
  left:12px!important;
  right:12px!important;
  bottom:7px!important;
  height:10px!important;
  border-radius:0 0 18px 18px!important;
  background:
    radial-gradient(16px 10px at left bottom, rgba(255,107,53,.82) 0, rgba(255,61,129,.78) 45%, transparent 72%) left bottom/22px 10px no-repeat,
    linear-gradient(90deg,var(--release-orange,#FF6B35),var(--release-pink,#FF3D81),var(--release-violet,#7C3AED),var(--release-cyan,#00D9FF)) center bottom/calc(100% - 44px) 2px no-repeat,
    radial-gradient(16px 10px at right bottom, rgba(124,58,237,.80) 0, rgba(0,217,255,.84) 48%, transparent 72%) right bottom/22px 10px no-repeat!important;
  opacity:.95!important;
  box-shadow:0 0 16px -6px rgba(0,217,255,.45)!important;
}

@media(max-width:760px){
  .topbar::before,
  .top::before,
  .seo-topbar::before{
    left:10px!important;
    right:10px!important;
    bottom:6px!important;
    background:
      radial-gradient(12px 8px at left bottom, rgba(255,107,53,.8) 0, rgba(255,61,129,.76) 46%, transparent 72%) left bottom/18px 8px no-repeat,
      linear-gradient(90deg,var(--release-orange,#FF6B35),var(--release-pink,#FF3D81),var(--release-violet,#7C3AED),var(--release-cyan,#00D9FF)) center bottom/calc(100% - 36px) 2px no-repeat,
      radial-gradient(12px 8px at right bottom, rgba(124,58,237,.78) 0, rgba(0,217,255,.82) 48%, transparent 72%) right bottom/18px 8px no-repeat!important;
  }
}


/* ===== Step 9.2 — proper navbar border fix =====
   Removes the loose underline completely. The colour now lives inside the nav pill as a real border,
   so it follows the rounded corners instead of sitting underneath the bar. */
.topbar,
.top,
.seo-topbar{
  border:1px solid transparent!important;
  background:
    linear-gradient(180deg,rgba(8,10,20,.96),rgba(8,10,20,.87)) padding-box,
    linear-gradient(90deg,
      rgba(255,107,53,.72) 0%,
      rgba(255,61,129,.60) 28%,
      rgba(124,58,237,.58) 58%,
      rgba(0,217,255,.76) 100%) border-box!important;
  box-shadow:
    0 24px 70px -56px rgba(0,0,0,.98),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(255,255,255,.025)!important;
  overflow:visible!important;
}

.topbar::before,
.top::before,
.seo-topbar::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  border-radius:inherit!important;
  padding:1px!important;
  background:
    linear-gradient(90deg,
      rgba(255,107,53,.62),
      rgba(255,61,129,.48),
      rgba(124,58,237,.42),
      rgba(0,217,255,.66))!important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0)!important;
  mask-composite:exclude!important;
  opacity:.72!important;
  box-shadow:none!important;
  pointer-events:none!important;
  z-index:0!important;
}

.topbar::after,
.top::after,
.seo-topbar::after{
  content:none!important;
  display:none!important;
}

.topbar > *,
.top > *,
.seo-topbar > *{
  position:relative!important;
  z-index:1!important;
}

/* Keep the dropdown above the decorative border. */
.nav-more,
.nav-menu{
  z-index:30!important;
}


/* ===== Step 9.3 — clean menu dropdown + visible logout =====
   Fixes the staff menu panel so it is compact, opaque, aligned, and includes a clear logout action. */
.nav-more{
  position:relative!important;
  z-index:80!important;
}

.nav-more-button{
  min-width:86px!important;
}

.nav-more-button .nav-chevron{
  margin-left:2px!important;
  font-size:13px!important;
  opacity:.78!important;
}

.nav-menu,
.nav-more .nav-menu,
.nav-more:nth-last-child(2) .nav-menu{
  position:absolute!important;
  top:calc(100% + 12px)!important;
  right:0!important;
  left:auto!important;
  width:286px!important;
  max-width:min(286px,calc(100vw - 28px))!important;
  max-height:min(76vh,560px)!important;
  padding:10px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:3px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:20px!important;
  background:
    linear-gradient(180deg,rgba(15,18,31,.99),rgba(7,9,18,.99)) padding-box,
    linear-gradient(135deg,rgba(255,107,53,.42),rgba(255,61,129,.26),rgba(0,217,255,.42)) border-box!important;
  box-shadow:
    0 28px 80px -42px rgba(0,0,0,.98),
    inset 0 1px 0 rgba(255,255,255,.065)!important;
  backdrop-filter:blur(24px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(145%)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(-8px) scale(.985)!important;
  transform-origin:top right!important;
  z-index:5000!important;
}

.nav-more.open .nav-menu{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1)!important;
}

.nav-menu::before,
.nav-menu::after{
  content:none!important;
  display:none!important;
}

.nav-menu-divider{
  width:100%!important;
  margin:8px 0 5px!important;
  padding:0 8px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  color:#6F7A9A!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  pointer-events:none!important;
}

.nav-menu-divider:first-child{
  margin-top:0!important;
}

.nav-menu-divider::after{
  content:""!important;
  height:1px!important;
  flex:1 1 auto!important;
  background:rgba(255,255,255,.075)!important;
}

.nav-menu-link,
.nav-menu button.nav-menu-link,
.nav-menu a.nav-menu-link{
  width:100%!important;
  min-height:40px!important;
  height:40px!important;
  max-height:none!important;
  margin:0!important;
  padding:0 11px!important;
  display:grid!important;
  grid-template-columns:20px minmax(0,1fr) auto!important;
  align-items:center!important;
  justify-content:stretch!important;
  gap:10px!important;
  border:1px solid transparent!important;
  border-radius:13px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#C5CEE8!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:12.5px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  text-decoration:none!important;
  text-align:left!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}

.nav-menu-link .nav-ico,
.nav-menu-link .nav-ico img,
.nav-menu button.nav-menu-link .nav-ico,
.nav-menu button.nav-menu-link .nav-ico img{
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  min-height:17px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  opacity:.78!important;
  filter:brightness(0) invert(1)!important;
}

.nav-menu-link .nav-label,
.nav-menu button.nav-menu-link .nav-label{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  color:inherit!important;
}

.nav-menu-link:hover,
.nav-menu button.nav-menu-link:hover{
  color:#fff!important;
  background:rgba(255,255,255,.065)!important;
  border-color:rgba(255,255,255,.10)!important;
  transform:none!important;
}

.nav-menu-link.active{
  color:#fff!important;
  background:rgba(0,217,255,.095)!important;
  border-color:rgba(0,217,255,.24)!important;
}

.nav-menu-link.active::before{
  content:none!important;
  display:none!important;
}

.nav-menu-link .notif-badge{
  position:static!important;
  width:auto!important;
  min-width:18px!important;
  height:18px!important;
  padding:0 5px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  background:#FF3D81!important;
  color:#fff!important;
  font-size:9px!important;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:none!important;
  transform:none!important;
}

.nav-menu-logout{
  margin-top:4px!important;
  color:#FFD7E3!important;
  background:rgba(255,61,129,.08)!important;
  border-color:rgba(255,61,129,.18)!important;
}

.nav-menu-logout:hover{
  color:#fff!important;
  background:rgba(255,61,129,.14)!important;
  border-color:rgba(255,61,129,.30)!important;
}

/* Do not let old mobile rules stretch the dropdown into a strange side panel. */
@media(max-width:760px){
  .nav-menu,
  .nav-more .nav-menu,
  .nav-more:nth-last-child(2) .nav-menu{
    position:fixed!important;
    top:auto!important;
    right:12px!important;
    bottom:14px!important;
    left:12px!important;
    width:auto!important;
    max-width:none!important;
    max-height:min(72vh,540px)!important;
    transform-origin:bottom center!important;
    border-radius:22px!important;
  }

  .nav-more.open .nav-menu{
    transform:translateY(0) scale(1)!important;
  }
}

@media(min-width:761px){
  .nav-menu,
  .nav-more .nav-menu,
  .nav-more:nth-last-child(2) .nav-menu{
    bottom:auto!important;
  }
}


/* ===== Step 9.4 — active nav readability + login alignment =====
   Keeps selected nav text readable and lines the staff login card up with the left hero block. */

/* Active nav should never turn into dark-on-dark. Keep CTA as dark text on light pill only. */
.tb-nav-link.active:not(.nav-cta),
.nav a.active:not(.nav-cta),
button.tb-nav-link.active:not(.nav-cta),
.nav-more.active .nav-more-button{
  color:#F7FAFF!important;
  background:rgba(255,255,255,.085)!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),0 14px 34px -30px rgba(0,217,255,.85)!important;
}

.tb-nav-link.active:not(.nav-cta) .nav-label,
.nav a.active:not(.nav-cta) .nav-label,
button.tb-nav-link.active:not(.nav-cta) .nav-label,
.nav-more.active .nav-more-button .nav-label{
  color:#F7FAFF!important;
}

.tb-nav-link.active:not(.nav-cta)::after,
.nav a.active:not(.nav-cta)::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:13px!important;
  right:13px!important;
  bottom:5px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#FF6B35,#FF3D81,#00D9FF)!important;
  opacity:.85!important;
}

/* Light staff CTA stays intentionally dark text because the pill is light. */
.tb-nav-link.nav-cta,
.nav a.nav-cta,
.tb-nav-link.nav-cta.active,
.nav a.nav-cta.active{
  color:#06101A!important;
}

.tb-nav-link.nav-cta .nav-label,
.nav a.nav-cta .nav-label,
.tb-nav-link.nav-cta.active .nav-label,
.nav a.nav-cta.active .nav-label{
  color:#06101A!important;
}

/* The login card was floating too high compared with the left Staff Access block. */
@media(min-width:901px){
  body.auth-page .auth-shell:has(#loginForm){
    align-items:start!important;
  }

  body.auth-page .auth-shell:has(#loginForm) .auth-card{
    margin-top:clamp(150px,21vh,210px)!important;
    align-self:start!important;
  }
}

@media(max-width:900px){
  body.auth-page .auth-shell:has(#loginForm) .auth-card{
    margin-top:0!important;
  }
}

/* ===== Step 9.5 — staff/account dashboard polish =====
   Final pass for logged-in staff pages: profile, staff, palettes, alerts, friends,
   settings, security and mobile account states. */
body.profile-page{
  background-attachment:fixed!important;
}

.profile-shell,
main.profile-shell{
  width:min(1220px,calc(100vw - 48px))!important;
  max-width:min(1220px,calc(100vw - 48px))!important;
  padding:clamp(34px,4.6vw,58px) 0 clamp(84px,8vw,118px)!important;
  gap:26px!important;
  align-content:start!important;
}

.dashboard-hero{
  border-color:rgba(255,255,255,.12)!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(0,217,255,.13),transparent 34%),
    radial-gradient(circle at 10% 10%,rgba(255,61,129,.10),transparent 32%),
    linear-gradient(135deg,rgba(19,23,37,.96),rgba(10,13,24,.90) 58%,rgba(11,15,26,.94))!important;
  box-shadow:0 30px 90px -64px rgba(0,0,0,.98),inset 0 1px 0 rgba(255,255,255,.055)!important;
}

.dashboard-hero::before{
  height:3px!important;
  background:linear-gradient(90deg,#FF6B35,#FF3D81,#7C3AED,#00D9FF)!important;
  opacity:.95!important;
}

.dashboard-hero::after{
  opacity:.72!important;
  filter:blur(2px)!important;
}

.hero-inner,
.public-hero{
  padding:clamp(26px,3.2vw,36px)!important;
  gap:clamp(18px,2.6vw,30px)!important;
  align-items:center!important;
}

.dashboard-hero .identity h1,
.identity h1{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  text-wrap:balance!important;
  max-width:780px!important;
}

.identity .handle,
.handle,
.profile-meta{
  color:#AEB8D8!important;
  word-break:break-word!important;
}

.bio-line{
  max-width:72ch!important;
  color:#C2CAE4!important;
}

.actions-rail{
  min-width:min(220px,100%)!important;
  gap:10px!important;
}

.actions-rail .button{
  justify-content:center!important;
  min-height:42px!important;
}

.stats-row{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  padding:0 clamp(22px,3vw,34px) clamp(24px,3vw,34px)!important;
}

.stat-card{
  min-width:0!important;
  min-height:84px!important;
  padding:16px!important;
  border-color:rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.050),rgba(255,255,255,.024))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}

.stat-card b{
  font-size:clamp(25px,3vw,34px)!important;
  line-height:.96!important;
  letter-spacing:-.02em!important;
  color:#F6F7FF!important;
  max-width:100%!important;
}

.stat-card span{
  color:#7F8CAD!important;
}

.panel .stats-row,
aside .stats-row{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  padding:0!important;
}

.content-grid{
  grid-template-columns:minmax(0,1.16fr) minmax(300px,.84fr)!important;
  gap:26px!important;
  align-items:start!important;
}

.stack{
  gap:22px!important;
}

.panel,
.public-card,
.auth-card{
  border-color:rgba(255,255,255,.105)!important;
  background:linear-gradient(180deg,rgba(18,22,36,.80),rgba(9,12,22,.70))!important;
  box-shadow:0 24px 72px -58px rgba(0,0,0,.98),inset 0 1px 0 rgba(255,255,255,.045)!important;
}

.panel{
  padding:clamp(22px,2.5vw,30px)!important;
}

.panel h2{
  margin-bottom:9px!important;
  color:#F6F7FF!important;
  letter-spacing:-.015em!important;
}

.panel h3,
.friend-subtitle{
  color:#D7DEF5!important;
}

.panel-note{
  color:#AEB8D7!important;
  margin-bottom:16px!important;
}

.form,
.saved-list,
.friend-list,
.card-list,
.paint-check-list,
.security-list{
  gap:12px!important;
}

.saved-row,
.notification-card,
.friend-card,
.security-row,
.security-item,
.palette-card,
.paint-check,
.toggle-row,
.empty-box{
  border-color:rgba(255,255,255,.095)!important;
  background:rgba(255,255,255,.032)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.032)!important;
}

.saved-row:hover,
.notification-card:hover,
.friend-card:hover,
.palette-card:hover,
.paint-check:hover{
  border-color:rgba(0,217,255,.25)!important;
  background:rgba(255,255,255,.050)!important;
}

.saved-row,
.notification-card,
.security-row{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:13px!important;
  padding:13px!important;
  border-radius:17px!important;
  text-decoration:none!important;
  color:inherit!important;
}

.notification-card > span:not(.friend-avatar),
.saved-row > span:not(.friend-avatar),
.security-row > span:not(.friend-avatar){
  min-width:0!important;
  display:grid!important;
  gap:3px!important;
}

.notification-card b,
.saved-row b,
.security-row b,
.friend-main b,
.palette-card b{
  color:#F6F7FF!important;
  font-size:17px!important;
  line-height:1.05!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

.notification-card small,
.saved-row small,
.security-row small,
.friend-main small,
.palette-card .panel-note{
  color:#AEB8D7!important;
  line-height:1.45!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

.friend-card{
  align-items:center!important;
  border-radius:18px!important;
  padding:13px!important;
}

.friend-main{
  min-width:0!important;
  text-decoration:none!important;
}

.friend-actions{
  flex:0 0 auto!important;
  gap:8px!important;
}

.friend-actions .button.small,
.button.small{
  min-height:34px!important;
}

.friend-search{
  gap:10px!important;
  margin:18px 0 14px!important;
}

.friend-search input,
.field input,
.field textarea,
.field select{
  border-color:rgba(255,255,255,.12)!important;
  background:rgba(4,7,15,.72)!important;
  color:#F6F7FF!important;
}

.field input:focus,
.field textarea:focus,
.field select:focus,
.friend-search input:focus{
  outline:2px solid rgba(0,217,255,.32)!important;
  border-color:rgba(0,217,255,.55)!important;
}

.palette-card{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
  border-radius:18px!important;
  padding:16px!important;
}

.palette-card > div:first-child{
  min-width:0!important;
}

.palette-swatches{
  display:flex!important;
  gap:6px!important;
  flex-wrap:wrap!important;
  margin-top:12px!important;
}

.palette-swatches span{
  width:30px!important;
  height:30px!important;
  border-radius:10px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 10px 20px -16px rgba(0,0,0,.9)!important;
}

.paint-check-list{
  max-height:360px!important;
  overflow:auto!important;
  padding-right:4px!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(0,217,255,.45) transparent!important;
}

.paint-check{
  min-height:58px!important;
  border-radius:16px!important;
  padding:11px 12px!important;
}

.paint-check input{
  accent-color:#00D9FF!important;
}

.paint-dot{
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 10px 24px -18px rgba(0,0,0,.9)!important;
}

.toggle-row{
  border-radius:16px!important;
  padding:13px!important;
}

.toggle-row input{
  accent-color:#00D9FF!important;
}

.profile-badge,
.tag-pill,
.status-pill{
  border-color:rgba(255,255,255,.13)!important;
  background:rgba(255,255,255,.045)!important;
}

.badge-strip{
  gap:9px!important;
}

.message.show{
  border-radius:14px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.04)!important;
  padding:12px 13px!important;
}

.message.show.ok{
  border-color:rgba(80,250,145,.25)!important;
  color:#C8FFD8!important;
}

.message.show.err{
  border-color:rgba(255,61,129,.28)!important;
  color:#FFD3E2!important;
}

.settings-session-panel .button{
  margin-top:4px!important;
  width:100%!important;
}

.button.danger,
.nav-menu-logout{
  color:#FFD7E3!important;
  border-color:rgba(255,61,129,.24)!important;
  background:rgba(255,61,129,.10)!important;
}

.button.danger:hover,
.nav-menu-logout:hover{
  color:#fff!important;
  border-color:rgba(255,61,129,.38)!important;
  background:rgba(255,61,129,.16)!important;
}

@media(max-width:1040px){
  .profile-shell,
  main.profile-shell{
    width:min(100% - 32px,920px)!important;
  }
  .content-grid{
    grid-template-columns:1fr!important;
  }
  .hero-inner,
  .public-hero{
    grid-template-columns:1fr!important;
    align-items:start!important;
  }
  .actions-rail{
    width:100%!important;
    min-width:0!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
  }
  .actions-rail .button{
    flex:1 1 170px!important;
  }
  .stats-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:680px){
  .profile-shell,
  main.profile-shell{
    width:calc(100vw - 24px)!important;
    padding-top:24px!important;
    gap:18px!important;
  }
  .dashboard-hero,
  .panel,
  .public-card,
  .auth-card{
    border-radius:21px!important;
  }
  .hero-inner,
  .public-hero{
    padding:22px 16px!important;
    gap:16px!important;
  }
  .avatar-xl{
    width:74px!important;
    height:74px!important;
    border-radius:21px!important;
    font-size:38px!important;
  }
  .identity h1{
    font-size:clamp(38px,12vw,56px)!important;
  }
  .bio-line{
    font-size:14.5px!important;
    line-height:1.62!important;
  }
  .stats-row,
  .panel .stats-row,
  aside .stats-row{
    grid-template-columns:1fr!important;
    padding:0 16px 18px!important;
  }
  .stat-card{
    min-height:auto!important;
    padding:15px!important;
  }
  .content-grid,
  .two-grid,
  .stack{
    gap:18px!important;
  }
  .panel{
    padding:19px 16px!important;
  }
  .saved-row,
  .notification-card,
  .security-row{
    grid-template-columns:40px minmax(0,1fr)!important;
    align-items:flex-start!important;
  }
  .friend-card,
  .palette-card{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .friend-actions,
  .palette-card .actions-rail{
    width:100%!important;
    justify-content:stretch!important;
  }
  .friend-actions .button,
  .palette-card .actions-rail .button{
    flex:1 1 130px!important;
  }
  .friend-search{
    grid-template-columns:1fr!important;
  }
  .paint-check-list{
    max-height:300px!important;
  }
  .form-row,
  .actions-rail{
    flex-direction:column!important;
  }
  .form-row .button,
  .actions-rail .button{
    width:100%!important;
  }
}


/* ===== Step 10.1 — rich Updates editor and public changelog renderer ===== */
.updates-admin-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr)!important;
  gap:24px!important;
  align-items:start!important;
}
.update-editor-panel .form{gap:16px!important;}
.update-toolbar{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin:0 0 10px!important;
}
.update-toolbar button{
  min-height:30px!important;
  padding:0 10px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.045)!important;
  color:#D9E0F7!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
}
.update-toolbar button:hover{
  color:#fff!important;
  background:rgba(0,217,255,.10)!important;
  border-color:rgba(0,217,255,.28)!important;
}
.update-format-guide .format-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
.update-format-guide .format-grid span{
  min-height:54px!important;
  padding:11px 12px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.026)!important;
  color:#98A4C6!important;
  font-size:12.5px!important;
  line-height:1.35!important;
}
.update-format-guide .format-grid b{
  display:block!important;
  color:#F5F7FF!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:13px!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
  margin-bottom:3px!important;
}
.update-preview-panel{position:sticky!important;top:96px!important;}
.update-preview-panel #previewBox{display:grid!important;gap:14px!important;}
.update-admin-card{
  display:grid!important;
  gap:10px!important;
  padding:14px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.028)!important;
}
.update-admin-card b{
  color:#F5F7FF!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:18px!important;
  line-height:1.08!important;
  text-transform:uppercase!important;
}
.update-admin-card span{color:#98A4C6!important;font-size:12.5px!important;}

.updates-hero .identity h1{max-width:820px!important;}
.updates-feed{
  display:grid!important;
  gap:22px!important;
}
.update-card{
  --update-accent:#00D9FF;
  position:relative!important;
  overflow:hidden!important;
  padding:clamp(22px,3vw,36px)!important;
  border-color:rgba(255,255,255,.105)!important;
}
.update-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto!important;
  height:3px!important;
  background:linear-gradient(90deg,var(--update-accent),rgba(255,255,255,.18))!important;
  opacity:.95!important;
}
.update-card.accent-orange{--update-accent:#FF6B35;}
.update-card.accent-pink{--update-accent:#FF3D81;}
.update-card.accent-violet{--update-accent:#7C3AED;}
.update-card.accent-green{--update-accent:#2CB67D;}
.update-card.style-spotlight{
  background:
    radial-gradient(circle at 88% 4%,color-mix(in srgb,var(--update-accent) 20%,transparent),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.058),rgba(255,255,255,.024))!important;
}
.update-card.style-spotlight h2{font-size:clamp(42px,7vw,76px)!important;line-height:.9!important;max-width:900px!important;}
.update-card.style-patch .update-body-rich{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.update-card.style-patch .update-section-title,
.update-card.style-patch .update-copy,
.update-card.style-patch .update-callout,
.update-card.style-patch .update-note,
.update-card.style-patch .update-warning,
.update-card.style-patch .update-divider,
.update-card.style-patch .update-link-row,
.update-card.style-patch .update-stat{grid-column:1/-1!important;}
.update-card.style-compact{
  padding:22px!important;
}
.update-card.style-compact h2{font-size:clamp(28px,4vw,42px)!important;}
.update-card-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:16px!important;
}
.update-card h2{
  margin:0 0 14px!important;
  color:#F7F8FF!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:clamp(36px,5vw,56px)!important;
  line-height:.94!important;
  text-transform:uppercase!important;
  letter-spacing:.01em!important;
}
.update-body-rich{
  display:block!important;
  margin-top:18px!important;
  color:#CAD3EA!important;
}
.update-copy{
  max-width:82ch!important;
  margin:0 0 13px!important;
  color:#C4CEE8!important;
  font-size:15.5px!important;
  line-height:1.72!important;
}
.update-section-title{
  margin:22px 0 10px!important;
  color:#fff!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:24px!important;
  line-height:1!important;
  letter-spacing:.055em!important;
  text-transform:uppercase!important;
}
.update-bullets{
  display:grid!important;
  gap:9px!important;
  list-style:none!important;
  padding:0!important;
  margin:0 0 14px!important;
}
.update-item{
  display:grid!important;
  grid-template-columns:12px minmax(0,1fr)!important;
  gap:11px!important;
  align-items:start!important;
  color:#C7D0EA!important;
  font-size:15.5px!important;
  line-height:1.55!important;
}
.update-item span{
  width:7px!important;
  height:7px!important;
  margin-top:9px!important;
  border-radius:50%!important;
  background:#FF5C73!important;
  box-shadow:0 0 0 3px rgba(255,92,115,.10)!important;
}
.update-item.new span{background:#2CB67D!important;box-shadow:0 0 0 3px rgba(44,182,125,.11)!important;}
.update-item.fix span{background:#00D9FF!important;box-shadow:0 0 0 3px rgba(0,217,255,.11)!important;}
.update-item b{font-weight:600!important;color:inherit!important;}
.update-callout,
.update-note,
.update-warning{
  margin:14px 0!important;
  padding:15px 16px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.038)!important;
  color:#EDF3FF!important;
  line-height:1.6!important;
}
.update-callout{
  border-left:3px solid var(--update-accent)!important;
  font-weight:650!important;
}
.update-note{border-color:rgba(0,217,255,.22)!important;background:rgba(0,217,255,.055)!important;}
.update-warning{border-color:rgba(255,209,102,.26)!important;background:rgba(255,209,102,.06)!important;color:#FFEAB8!important;}
.update-link-row a{
  color:#00D9FF!important;
  font-weight:800!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(0,217,255,.45)!important;
}
.update-stat{
  display:inline-grid!important;
  min-width:150px!important;
  margin:10px 10px 12px 0!important;
  padding:14px 16px!important;
  border:1px solid color-mix(in srgb,var(--update-accent) 35%,rgba(255,255,255,.10))!important;
  border-radius:17px!important;
  background:color-mix(in srgb,var(--update-accent) 9%,rgba(255,255,255,.026))!important;
}
.update-stat strong{
  color:#fff!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:30px!important;
  line-height:.95!important;
}
.update-stat span{
  color:#9FAAD0!important;
  font-size:12px!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
}
.update-divider{
  height:1px!important;
  border:0!important;
  margin:18px 0!important;
  background:linear-gradient(90deg,transparent,var(--update-accent),transparent)!important;
  opacity:.52!important;
}
.update-cta-row{margin:20px 0 0!important;}
.update-card .tag-row{margin-top:20px!important;}

@media(max-width:980px){
  .updates-admin-grid{grid-template-columns:1fr!important;}
  .update-preview-panel{position:relative!important;top:auto!important;}
  .update-card.style-patch .update-body-rich{grid-template-columns:1fr!important;}
}
@media(max-width:620px){
  .update-format-guide .format-grid{grid-template-columns:1fr!important;}
  .update-card-head{align-items:flex-start!important;flex-direction:column!important;}
  .update-card.style-spotlight h2{font-size:clamp(38px,12vw,58px)!important;}
}


/* ===== Step 10.2 — feature pack: builder, shares, requests, roadmap, media kit ===== */
.feature-hero .identity h1{max-width:860px!important;}
.feature-builder-grid,
.media-kit-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr)!important;
  gap:24px!important;
  align-items:start!important;
}
.builder-slots{display:grid!important;gap:12px!important;}
.builder-slot{
  display:grid!important;
  grid-template-columns:150px minmax(0,1fr) 120px!important;
  gap:12px!important;
  align-items:center!important;
  padding:14px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.026)!important;
}
.builder-slot b{
  display:block!important;
  color:#F7F8FF!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:18px!important;
  text-transform:uppercase!important;
}
.builder-slot small{color:#98A4C6!important;font-size:12px!important;}
.feature-preview{position:sticky!important;top:96px!important;}
.feature-palette-card{
  --fp-accent:#00D9FF;
  position:relative!important;
  overflow:hidden!important;
  padding:24px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 88% 0%, color-mix(in srgb,var(--fp-accent) 20%, transparent), transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.024))!important;
  box-shadow:0 24px 70px -54px rgba(0,0,0,.96),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.feature-palette-card::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto!important;
  height:3px!important;
  background:linear-gradient(90deg,var(--fp-accent),rgba(255,255,255,.16))!important;
}
.feature-palette-card.large{padding:clamp(26px,4vw,42px)!important;}
.fp-head span{
  display:inline-flex!important;
  margin-bottom:10px!important;
  padding:7px 10px!important;
  border:1px solid color-mix(in srgb,var(--fp-accent) 35%,rgba(255,255,255,.12))!important;
  border-radius:999px!important;
  color:#DDF8FF!important;
  font-family:var(--font-mono,'Space Mono',monospace)!important;
  font-size:10px!important;
  text-transform:uppercase!important;
  letter-spacing:.14em!important;
}
.fp-head b{
  display:block!important;
  color:#fff!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:clamp(32px,5vw,58px)!important;
  line-height:.92!important;
  text-transform:uppercase!important;
  margin-bottom:10px!important;
}
.fp-head p{max-width:760px!important;color:#B8C2DF!important;margin:0 0 18px!important;}
.fp-strip{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(70px,1fr))!important;min-height:84px!important;border-radius:18px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.12)!important;margin:18px 0!important;}
.fp-strip span{min-height:84px!important;}
.fp-list{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important;gap:10px!important;}
.fp-colour{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  gap:11px!important;
  align-items:center!important;
  padding:11px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:14px!important;
  background:rgba(0,0,0,.12)!important;
}
.fp-swatch{width:42px!important;height:42px!important;border-radius:12px!important;border:1px solid rgba(255,255,255,.18)!important;}
.fp-colour b{
  display:block!important;color:#F4F7FF!important;font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;font-size:15px!important;text-transform:uppercase!important;line-height:1!important;
}
.fp-colour small{display:block!important;margin-top:4px!important;color:#9AA5C8!important;font-size:12px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
.feature-list{display:grid!important;gap:24px!important;}
.feature-card-wrap{display:grid!important;gap:12px!important;}
.feature-actions{display:flex!important;flex-wrap:wrap!important;gap:10px!important;justify-content:flex-end!important;}
.request-admin-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:14px!important;
  padding:16px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.026)!important;
}
.request-admin-card b{display:block!important;color:#fff!important;font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;font-size:20px!important;text-transform:uppercase!important;}
.request-admin-card span{display:block!important;color:#98A4C6!important;font-size:12.5px!important;margin:3px 0 8px!important;}
.request-admin-card p{color:#C2CBE4!important;margin:0 0 8px!important;}
.request-admin-card a{color:#00D9FF!important;text-decoration:none!important;font-weight:800!important;}
.roadmap-board{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(190px,1fr))!important;
  gap:14px!important;
  align-items:start!important;
}
.roadmap-lane{
  min-height:280px!important;
  padding:16px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.026)!important;
}
.roadmap-lane h2{font-size:26px!important;margin-bottom:12px!important;}
.roadmap-lane > div{display:grid!important;gap:10px!important;}
.roadmap-item{
  padding:13px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:15px!important;
  background:rgba(0,0,0,.14)!important;
}
.roadmap-item span{
  display:inline-flex!important;
  color:#00D9FF!important;
  font-family:var(--font-mono,'Space Mono',monospace)!important;
  font-size:10px!important;
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
  margin-bottom:8px!important;
}
.roadmap-item b{display:block!important;color:#fff!important;font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;font-size:18px!important;text-transform:uppercase!important;line-height:1.05!important;}
.roadmap-item p{margin:8px 0 0!important;color:#AEB8D8!important;font-size:13px!important;line-height:1.55!important;}
.media-kit-grid textarea{
  width:100%!important;
  min-height:140px!important;
  resize:vertical!important;
}
.media-logo-panel img{
  width:96px!important;height:96px!important;border-radius:24px!important;object-fit:contain!important;box-shadow:0 20px 60px -34px rgba(0,217,255,.85)!important;
}
@media(max-width:1100px){
  .roadmap-board{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:900px){
  .feature-builder-grid,.media-kit-grid{grid-template-columns:1fr!important;}
  .feature-preview{position:relative!important;top:auto!important;}
  .builder-slot{grid-template-columns:1fr!important;}
  .roadmap-board{grid-template-columns:1fr!important;}
  .request-admin-card{grid-template-columns:1fr!important;}
}
@media(max-width:560px){
  .fp-list{grid-template-columns:1fr!important;}
  .feature-actions{justify-content:flex-start!important;}
}

/* ===== Step 10.3 — feature page layout repair, media kit cleanup, professional roadmap ===== */
.feature-hero,
.roadmap-hero,
.media-hero{
  overflow:hidden!important;
}
.feature-hero .hero-inner,
.roadmap-hero .hero-inner,
.media-hero .hero-inner{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(170px,auto)!important;
  gap:clamp(18px,4vw,42px)!important;
  align-items:center!important;
}
.feature-hero .identity,
.roadmap-hero .identity,
.media-hero .identity{min-width:0!important;}
.feature-hero .actions-rail,
.roadmap-hero .actions-rail,
.media-hero .actions-rail{
  display:grid!important;
  gap:10px!important;
  align-content:center!important;
  justify-items:stretch!important;
  min-width:160px!important;
  max-width:240px!important;
}
.feature-hero .actions-rail .button,
.roadmap-hero .actions-rail .button,
.media-hero .actions-rail .button{
  width:100%!important;
  min-width:0!important;
  white-space:nowrap!important;
}
.feature-builder-grid,
.media-kit-grid,
.updates-admin-grid{
  gap:clamp(18px,3vw,28px)!important;
  margin-top:clamp(22px,3vw,34px)!important;
}
.feature-builder-grid > *,
.media-kit-grid > *,
.updates-admin-grid > *,
.feature-list > *,
.content-grid > *{
  min-width:0!important;
}
.feature-preview,
.feature-card-wrap,
#preview,
#shareRoot{
  min-width:0!important;
}
.feature-preview{overflow:visible!important;}
.feature-preview #preview{
  display:grid!important;
  gap:14px!important;
}
.feature-actions{
  position:static!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  justify-content:flex-start!important;
  align-items:center!important;
  margin-top:14px!important;
  padding-top:0!important;
  z-index:2!important;
}
.feature-actions .button{
  flex:0 1 auto!important;
  min-width:72px!important;
  min-height:42px!important;
  white-space:nowrap!important;
}
.feature-card-wrap .feature-actions{
  justify-content:flex-end!important;
  padding-right:2px!important;
}
.feature-palette-card{
  min-width:0!important;
  width:100%!important;
  isolation:isolate!important;
}
.feature-palette-card.large{
  max-width:100%!important;
}
.fp-head,
.fp-head b,
.fp-head p,
.fp-colour,
.fp-colour span{min-width:0!important;}
.fp-strip{
  grid-template-columns:repeat(auto-fit,minmax(64px,1fr))!important;
  max-width:100%!important;
}
.fp-list{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))!important;
}
.fp-colour small{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.35!important;
}
.builder-slot{min-width:0!important;}
.builder-slot input{min-width:0!important;}
.builder-slots + .form-row,
.feature-preview .feature-actions{
  margin-top:18px!important;
}
.request-admin-card .friend-actions,
.staff-feature-page .friend-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  justify-content:flex-end!important;
  align-items:center!important;
  min-width:0!important;
}
.request-admin-card .friend-actions .button,
.staff-feature-page .friend-actions .button{
  min-width:86px!important;
  flex:0 1 auto!important;
  white-space:nowrap!important;
}

/* Media kit, cleaned up from the crowded first pass. */
.polished-media-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:stretch!important;
}
.media-kit-page .panel{
  min-width:0!important;
}
.kit-copy-card{
  display:grid!important;
  grid-template-rows:auto 1fr auto!important;
  gap:14px!important;
}
.media-kit-page textarea{
  display:block!important;
  width:100%!important;
  min-height:160px!important;
  padding:16px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:18px!important;
  background:rgba(3,6,16,.58)!important;
  color:#F3F6FF!important;
  font-size:15px!important;
  line-height:1.65!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.media-kit-page .copy-kit{
  justify-self:start!important;
}
.kit-links-panel{
  display:grid!important;
  gap:16px!important;
  align-content:start!important;
}
.media-kit-page .gridlinks,
.kit-link-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
}
.media-kit-page .gridlinks a,
.kit-link-grid a{
  display:grid!important;
  align-content:center!important;
  gap:3px!important;
  min-width:0!important;
  min-height:76px!important;
  padding:16px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
  color:#F5F7FF!important;
  text-decoration:none!important;
  overflow:hidden!important;
}
.media-kit-page .gridlinks a b,
.kit-link-grid a b{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  color:#fff!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:18px!important;
  line-height:1!important;
  text-transform:uppercase!important;
  letter-spacing:.035em!important;
}
.media-kit-page .gridlinks a span,
.kit-link-grid a span{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  color:#9FAAD0!important;
  font-size:12.5px!important;
  line-height:1.35!important;
}
.polished-logo-panel{
  display:grid!important;
  gap:14px!important;
  align-content:start!important;
}
.logo-showcase{
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr)!important;
  gap:18px!important;
  align-items:center!important;
  padding:18px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:22px!important;
  background:radial-gradient(circle at 8% 8%,rgba(255,61,129,.14),transparent 34%),rgba(255,255,255,.025)!important;
}
.media-logo-panel .logo-showcase img{
  width:112px!important;
  height:112px!important;
  border-radius:28px!important;
  object-fit:contain!important;
}
.logo-showcase b{
  display:block!important;
  color:#fff!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:24px!important;
  line-height:1!important;
  text-transform:uppercase!important;
}
.logo-showcase p{
  color:#AEB8D8!important;
  margin:7px 0 14px!important;
  line-height:1.55!important;
}

/* Roadmap — rebuilt as a polished product board instead of basic columns. */
.roadmap-hero-stats{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:clamp(24px,4vw,42px)!important;
}
.roadmap-hero-stats span{
  padding:14px 16px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.035)!important;
}
.roadmap-hero-stats b{
  display:block!important;
  color:#fff!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:22px!important;
  line-height:1!important;
  text-transform:uppercase!important;
}
.roadmap-hero-stats small{
  display:block!important;
  margin-top:4px!important;
  color:#95A0C5!important;
  font-size:12px!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
}
.pro-roadmap{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:18px!important;
  margin-top:28px!important;
}
.pro-roadmap .roadmap-lane{
  position:relative!important;
  display:grid!important;
  grid-template-columns:290px minmax(0,1fr)!important;
  gap:18px!important;
  min-height:0!important;
  padding:18px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:26px!important;
  background:
    radial-gradient(circle at 98% 0%,rgba(0,217,255,.09),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
  overflow:hidden!important;
}
.pro-roadmap .roadmap-lane::before{
  content:""!important;
  position:absolute!important;
  inset:0 auto 0 0!important;
  width:3px!important;
  background:#00D9FF!important;
  opacity:.9!important;
}
.pro-roadmap .roadmap-lane.tone-hot::before{background:#FF6B35!important;}
.pro-roadmap .roadmap-lane.tone-violet::before{background:#7C3AED!important;}
.pro-roadmap .roadmap-lane.tone-green::before{background:#2CB67D!important;}
.pro-roadmap .roadmap-lane.tone-done::before{background:#F2CE1B!important;}
.roadmap-lane-head{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  gap:14px!important;
  align-items:start!important;
}
.roadmap-lane-head > span{
  display:grid!important;
  place-items:center!important;
  width:48px!important;
  height:48px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:16px!important;
  background:rgba(0,0,0,.20)!important;
  color:#F2CE1B!important;
  font-family:var(--font-mono,'Space Mono',monospace)!important;
  font-size:12px!important;
  font-weight:900!important;
}
.pro-roadmap .roadmap-lane h2{
  margin:0 0 6px!important;
  color:#fff!important;
  font-size:30px!important;
  line-height:.95!important;
  text-transform:uppercase!important;
}
.roadmap-lane-head p{
  margin:0!important;
  color:#98A4C6!important;
  font-size:13.5px!important;
  line-height:1.55!important;
}
.roadmap-lane-list{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;
  gap:12px!important;
  min-width:0!important;
}
.pro-roadmap .roadmap-item{
  display:grid!important;
  gap:9px!important;
  min-width:0!important;
  padding:16px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:18px!important;
  background:rgba(3,6,16,.38)!important;
}
.roadmap-item-top{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}
.pro-roadmap .roadmap-item span,
.pro-roadmap .roadmap-item em{
  margin:0!important;
  color:#00D9FF!important;
  font-family:var(--font-mono,'Space Mono',monospace)!important;
  font-size:10px!important;
  font-style:normal!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.11em!important;
}
.pro-roadmap .roadmap-item em{
  color:#F2CE1B!important;
  opacity:.88!important;
}
.pro-roadmap .roadmap-item b{
  font-size:21px!important;
  letter-spacing:.025em!important;
}
.pro-roadmap .roadmap-item p{
  color:#BAC4E2!important;
  font-size:14px!important;
  line-height:1.62!important;
}
.pro-roadmap .roadmap-item small{
  justify-self:start!important;
  margin-top:2px!important;
  padding:6px 9px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.04)!important;
  color:#E7ECFF!important;
  font-size:11px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:.07em!important;
}

@media(max-width:1120px){
  .feature-hero .hero-inner,
  .roadmap-hero .hero-inner,
  .media-hero .hero-inner{grid-template-columns:1fr!important;align-items:start!important;}
  .feature-hero .actions-rail,
  .roadmap-hero .actions-rail,
  .media-hero .actions-rail{display:flex!important;max-width:none!important;min-width:0!important;}
  .feature-hero .actions-rail .button,
  .roadmap-hero .actions-rail .button,
  .media-hero .actions-rail .button{width:auto!important;}
  .pro-roadmap .roadmap-lane{grid-template-columns:1fr!important;}
}
@media(max-width:900px){
  .polished-media-grid{grid-template-columns:1fr!important;}
  .feature-card-wrap .feature-actions{justify-content:flex-start!important;}
  .request-admin-card .friend-actions,.staff-feature-page .friend-actions{justify-content:flex-start!important;}
}
@media(max-width:680px){
  .media-kit-page .gridlinks,.kit-link-grid{grid-template-columns:1fr!important;}
  .logo-showcase{grid-template-columns:1fr!important;}
  .roadmap-hero-stats{grid-template-columns:1fr!important;}
  .roadmap-lane-list{grid-template-columns:1fr!important;}
  .feature-actions .button,
  .request-admin-card .friend-actions .button,
  .staff-feature-page .friend-actions .button{flex:1 1 130px!important;}
}

/* ===== Step 10.4 — QA pass: performance, accessibility, mobile and notifications ===== */
html{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid #00D9FF!important;outline-offset:3px!important;box-shadow:0 0 0 5px rgba(0,217,255,.13)!important}
.public-card,.panel,.feature-palette-card,.palette-card,.notification-card-v2,.chip,.saved-row{content-visibility:auto;contain-intrinsic-size:auto 240px}
img{max-width:100%;height:auto}.button,.tb-btn,.tb-nav-link,.fchip,.load-more,.copy-btn{min-height:42px;align-items:center;justify-content:center}.actions-rail,.friend-actions,.form-row,.library-actions{display:flex;flex-wrap:wrap;gap:10px}.actions-rail .button,.friend-actions .button,.form-row .button{white-space:nowrap}.hero-inner{gap:22px!important}.dashboard-hero .actions-rail{align-self:flex-start!important}.panel{overflow:hidden}.card-list,.saved-list{min-width:0}.saved-row,.notification-card,.palette-card{min-width:0}.saved-row b,.palette-card b,.notification-card b{overflow-wrap:anywhere}

/* Navigation notification badge + preview */
.notif-badge.nav-notif-badge{min-width:19px;height:19px;padding:0 6px;margin-left:6px;background:linear-gradient(135deg,#FF3D81,#FF6B35);box-shadow:0 0 0 3px rgba(255,61,129,.12),0 8px 18px rgba(0,0,0,.28)}
.nav-notification{position:relative}.nav-notif-preview{position:absolute;right:0;top:calc(100% + 14px);width:min(340px,88vw);padding:13px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(9,12,23,.96);box-shadow:0 24px 80px rgba(0,0,0,.46);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease;z-index:100;color:#DDE5FF;text-transform:none;letter-spacing:0;font-family:var(--font-body,Inter,system-ui,sans-serif)}
.nav-notification:hover .nav-notif-preview,.nav-notification:focus-within .nav-notif-preview{opacity:1;visibility:visible;transform:translateY(0)}.nav-notif-preview strong{display:block;margin:0 0 8px;color:#fff;font-family:var(--font-display,Rajdhani,system-ui,sans-serif);font-size:16px;text-transform:uppercase;letter-spacing:.04em}.nav-notif-preview>span{display:grid;grid-template-columns:30px 1fr;gap:8px;padding:8px;border-radius:12px;background:rgba(255,255,255,.035);margin-top:6px}.nav-notif-preview i{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(0,217,255,.12);font-style:normal}.nav-notif-preview b{font-size:13px;color:#fff;line-height:1.15}.nav-notif-preview small{font-size:12px;color:#98A4C6;line-height:1.35;white-space:normal}.nav-notif-preview em{display:block;margin-top:9px;color:#00D9FF;font-size:12px;font-style:normal;font-weight:800}.nav-menu .nav-notif-preview{display:none!important}

/* Rich notifications page */
.notification-layout{display:grid;grid-template-columns:minmax(230px,280px) minmax(0,1fr);gap:22px;align-items:start}.notification-sidebar{position:sticky;top:96px}.notif-search input{width:100%;min-height:46px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);color:#F5F7FF;padding:0 14px}.notif-filter-list{display:grid;gap:8px;margin-top:14px}.notif-filter{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.028);color:#B9C4E4;text-align:left}.notif-filter:hover,.notif-filter.active{color:#fff;border-color:rgba(0,217,255,.28);background:rgba(0,217,255,.075)}.notif-filter b{font:800 12px var(--font-mono,monospace);color:#00D9FF}.notification-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}.notification-title-row h2{margin:0!important}.notification-title-row p{margin:4px 0 0;color:#98A4C6}.notification-list-v2{display:grid;gap:12px}.notification-card-v2{position:relative;border:1px solid rgba(255,255,255,.085);border-radius:18px;background:rgba(255,255,255,.027);overflow:hidden}.notification-card-v2.unread{border-color:rgba(0,217,255,.26);background:linear-gradient(90deg,rgba(0,217,255,.075),rgba(255,255,255,.028))}.notification-card-v2.unread:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#00D9FF}.notif-main-link{display:grid;grid-template-columns:46px minmax(0,1fr);gap:13px;padding:15px;color:inherit;text-decoration:none}.notif-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:19px}.notif-icon.type-friend{background:rgba(44,182,125,.12)}.notif-icon.type-badge{background:rgba(255,209,102,.13)}.notif-icon.type-featured{background:rgba(255,61,129,.13)}.notif-icon.type-system{background:rgba(0,217,255,.10)}.notif-copy{display:grid;gap:4px;min-width:0}.notif-type{font:800 10px var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:#00D9FF}.notif-copy b{color:#fff;font:800 18px/1 var(--font-display,Rajdhani,system-ui,sans-serif);text-transform:uppercase}.notif-copy small{color:#B4BEDC;line-height:1.45}.notif-copy em{font-style:normal;color:#6F7A9F;font-size:12px}.notification-row-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 15px 15px 74px}.notification-actions{display:flex;gap:8px;flex-wrap:wrap}.button.small{min-height:34px;padding:7px 12px;font-size:12px}.notif-delete{min-height:34px;padding:7px 12px;border:1px solid rgba(255,255,255,.09);border-radius:12px;color:#98A4C6;background:rgba(255,255,255,.035);font:800 12px var(--font-display,Rajdhani,system-ui,sans-serif);text-transform:uppercase}.notif-delete:hover{color:#fff;border-color:rgba(255,92,115,.35);background:rgba(255,92,115,.08)}

/* Colour browsing upgrade */
.advanced-filter-card{grid-column:1/-1;width:100%;padding:13px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.03);margin:0 0 8px}.af-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.af-head span{font:900 13px var(--font-display,Rajdhani,system-ui,sans-serif);letter-spacing:.075em;text-transform:uppercase;color:#fff}.af-head button{min-height:30px;padding:0 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#9FAAD0}.af-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.af-grid label{display:grid;gap:6px;color:#7E88AA;font:800 10px var(--font-mono,monospace);letter-spacing:.08em;text-transform:uppercase}.af-grid select,.af-grid input{width:100%;min-height:40px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:#090C16;color:#F5F7FF;padding:0 10px}.compare-add{position:absolute;right:10px;bottom:10px;z-index:3;min-height:30px;padding:0 9px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(8,10,20,.72);color:#fff;font:900 10px var(--font-display,Rajdhani,system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:.15s}.chip:hover .compare-add,.chip:focus-within .compare-add,.chip.in-compare .compare-add{opacity:1}.chip.in-compare{outline:2px solid rgba(0,217,255,.45);outline-offset:2px}.brand-group-head{grid-column:1/-1;margin:8px 0 0;padding:13px 4px 4px;color:#00D9FF;font:900 18px var(--font-display,Rajdhani,system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(0,217,255,.18)}.compare-panel{position:fixed;left:20px;right:20px;bottom:18px;z-index:70;transform:translateY(calc(100% + 30px));transition:.22s ease;border:1px solid rgba(0,217,255,.22);border-radius:22px;background:rgba(8,11,22,.94);box-shadow:0 22px 70px rgba(0,0,0,.45);backdrop-filter:blur(18px);padding:14px}.compare-panel.open{transform:translateY(0)}.compare-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.compare-head span{font:900 16px var(--font-display,Rajdhani,system-ui,sans-serif);text-transform:uppercase;color:#fff}.compare-head button{min-height:32px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:#B5BFE0}.compare-body{display:flex;gap:10px;overflow-x:auto;padding-bottom:3px}.compare-card{position:relative;display:grid;grid-template-columns:58px minmax(150px,1fr);grid-template-rows:auto auto auto;gap:3px 10px;min-width:275px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.035)}.compare-card>button{position:absolute;right:8px;top:7px;width:25px;height:25px;border-radius:8px;background:rgba(255,255,255,.06);color:#B7C0DD}.compare-swatch{grid-row:1/4;width:58px;height:74px;border-radius:14px;border:1px solid rgba(255,255,255,.12)}.compare-card b{padding-right:24px;color:#fff;font:800 15px var(--font-display,Rajdhani,system-ui,sans-serif);text-transform:uppercase}.compare-card small{color:#9FAAD0}.compare-card div{display:flex;gap:7px;flex-wrap:wrap;margin-top:3px}.compare-card a{display:inline-flex;gap:5px;align-items:center;color:#BFD0FF;font-size:12px}.compare-card i{width:13px;height:13px;border-radius:4px}.compare-add-card{min-width:130px;border:1px dashed rgba(255,255,255,.16);border-radius:16px;color:#9FAAD0;background:rgba(255,255,255,.025);font-weight:800;text-transform:uppercase}
.chip{position:relative}.chip .meta{padding-bottom:44px}.d-sec .similar,.similar{display:grid!important;gap:8px}.d-sec .sim,.similar .sim{min-width:0;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}

/* Error pages + public profiles */
.error-page .topbar{display:none}.error-hero{margin-top:48px}.error-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.public-profile-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:22px;align-items:stretch}.profile-share-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:radial-gradient(circle at 80% 10%,color-mix(in srgb,var(--profile-accent) 22%,transparent),transparent 38%),linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.025));padding:clamp(22px,4vw,38px);box-shadow:0 26px 80px rgba(0,0,0,.22)}.profile-share-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#FF6B35,#FF3D81,var(--profile-accent),#00D9FF)}.profile-card-top,.profile-card-main,.profile-card-stats{position:relative;z-index:1}.profile-card-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:22px}.profile-card-kicker,.profile-card-handle{font:800 12px var(--font-mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:#AEB8D8}.profile-card-handle{color:#00D9FF}.profile-card-main{display:flex;gap:18px;align-items:center}.profile-card-main h1{margin:0;color:#fff;font:900 clamp(42px,7vw,78px)/.88 var(--font-display,Rajdhani,system-ui,sans-serif);text-transform:uppercase}.profile-card-main p{max-width:700px;color:#B7C0DD}.profile-card-strip{display:flex;overflow:hidden;border-radius:20px;margin:28px 0 20px;border:1px solid rgba(255,255,255,.12);min-height:68px}.profile-card-strip span{flex:1;min-width:42px}.profile-card-stats{display:flex;flex-wrap:wrap;gap:10px}.profile-card-stats span{display:flex;gap:7px;align-items:baseline;padding:10px 12px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.035);color:#AEB8D8}.profile-card-stats b{color:#fff;font:900 22px var(--font-display,Rajdhani,system-ui,sans-serif)}.profile-side-panel{border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.03);padding:22px;display:flex;flex-direction:column;gap:16px}.profile-paint-row,.profile-palette-card{border-radius:16px!important}

@media(max-width:980px){.notification-layout,.public-profile-hero{grid-template-columns:1fr}.notification-sidebar{position:relative;top:auto}.af-grid{grid-template-columns:1fr}.compare-panel{left:10px;right:10px;bottom:10px}.error-grid{grid-template-columns:1fr}.rail{position:relative!important;top:auto!important}.library-workspace{padding-top:10px!important}}
@media(max-width:640px){.hero-inner{align-items:flex-start!important}.dashboard-hero .actions-rail{width:100%}.dashboard-hero .actions-rail .button{flex:1 1 160px}.notification-row-actions{padding-left:15px}.notif-main-link{grid-template-columns:40px 1fr}.notif-icon{width:40px;height:40px}.compare-body{display:grid;grid-template-columns:1fr;max-height:48vh}.compare-card{min-width:0}.profile-card-main{align-items:flex-start;flex-direction:column}.profile-card-main h1{font-size:46px}.profile-card-stats{display:grid;grid-template-columns:1fr}.chip .meta{padding-bottom:40px}.compare-add{opacity:1}.library-actions .tb-btn{flex:1 1 calc(50% - 8px)}}

/* ===== Step 10.5 — Huezon rebrand + fixed mobile Menu sheet ===== */
:root{--huezon-cyan:#00D9FF;--huezon-lime:#6DFF9B;--huezon-pink:#FF3D81;--huezon-orange:#FF6B35;}
.brand-main{letter-spacing:.07em!important;}
.brand-tag{color:#6DFF9B!important;letter-spacing:.22em!important;}
.wordmark .brand-logo,.wordmark img.brand-logo,.wm img{background:rgba(0,217,255,.05)!important;}

@media(max-width:760px){
  body.nav-menu-open{overflow:hidden!important;touch-action:none!important;}
  .topbar,.top,.seo-topbar{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    width:min(100% - 18px,1320px)!important;
    padding:9px!important;
    margin-top:7px!important;
    border-radius:20px!important;
  }
  .wordmark,.wm,.topbar .wordmark,.top .wordmark,.seo-topbar .wordmark{
    grid-column:1!important;
    max-width:100%!important;
    height:40px!important;
    min-height:40px!important;
  }
  .wordmark .brand-logo,.wordmark img.brand-logo,.wm img,.seo-topbar .wordmark img{
    width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;
  }
  .brand-main{font-size:18px!important;}
  .brand-tag{font-size:9px!important;}
  .tb-nav,.nav,.topbar .tb-nav,.top .tb-nav,.seo-topbar .tb-nav{
    grid-column:1!important;
    width:100%!important;
    max-width:100%!important;
    justify-content:flex-start!important;
    align-items:center!important;
    height:auto!important;
    min-height:42px!important;
    gap:6px!important;
    overflow:visible!important;
    padding:0!important;
  }
  .tb-nav-link,.nav a,button.tb-nav-link,.nav button{
    height:38px!important;
    min-height:38px!important;
    max-height:38px!important;
    padding:0 11px!important;
    flex:0 0 auto!important;
    font-size:12px!important;
  }
  .tb-nav-link .nav-label,.nav a .nav-label,button.tb-nav-link .nav-label{
    position:static!important;
    width:auto!important;
    height:auto!important;
    clip:auto!important;
    overflow:visible!important;
    white-space:nowrap!important;
    font-size:12px!important;
  }
  .tb-nav-link:not(.active):not(.nav-more-button) .nav-label,
  .nav a:not(.active):not(.nav-more-button) .nav-label{
    font-size:12px!important;
  }
  .nav-more{position:static!important;z-index:10050!important;}
  .nav-more-button{position:relative!important;}
  .nav-more.open .nav-more-button{z-index:10060!important;}
  .nav-more .nav-menu,
  .nav-more:nth-last-child(2) .nav-menu{
    position:fixed!important;
    top:calc(var(--mobile-nav-top, 104px) + env(safe-area-inset-top,0px))!important;
    left:10px!important;
    right:10px!important;
    bottom:auto!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    max-height:calc(100dvh - 122px - env(safe-area-inset-bottom,0px))!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding:10px!important;
    border-radius:20px!important;
    z-index:10040!important;
  }
  .nav-menu-link{
    min-height:46px!important;
    padding:0 13px!important;
    white-space:normal!important;
    line-height:1.08!important;
  }
  .nav-menu-link .nav-label{white-space:normal!important;overflow:visible!important;}
  .nav-menu-divider{padding:9px 10px 4px!important;}
  .nav-menu-divider span{font-size:10px!important;letter-spacing:.16em!important;}
  .nav-menu::after{
    content:""!important;
    display:block!important;
    height:max(8px,env(safe-area-inset-bottom,0px))!important;
  }
}
@media(max-width:420px){
  .tb-nav,.nav,.topbar .tb-nav{gap:5px!important;}
  .tb-nav-link,.nav a,button.tb-nav-link,.nav button{padding:0 9px!important;font-size:11.5px!important;}
  .tb-nav-link .nav-label,.nav a .nav-label,button.tb-nav-link .nav-label{font-size:11.5px!important;}
  .nav-more .nav-menu,.nav-more:nth-last-child(2) .nav-menu{top:100px!important;max-height:calc(100dvh - 116px - env(safe-area-inset-bottom,0px))!important;}
}


/* ===== Step 10.6 — brand lockup + small rebrand/mobile nav cleanups ===== */
.wordmark,.wm,.topbar .wordmark,.top .wordmark,.seo-topbar .wordmark{
  display:inline-flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow:visible!important;
  min-width:max-content!important;
  max-width:none!important;
  gap:10px!important;
}
.wordmark .brand-lock,.wm .brand-lock,.fwordmark{
  display:inline-flex!important;
  align-items:center!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  color:#F7F8FF!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-weight:900!important;
  font-size:20px!important;
  line-height:1!important;
  letter-spacing:.065em!important;
  text-transform:uppercase!important;
}
.wordmark .brand-copy,.wordmark .brand-main,.wordmark .brand-tag{display:none!important;}
.wordmark .hz,.wm .hz{white-space:nowrap!important;}
.topbar .tb-nav,.top .tb-nav,.seo-topbar .tb-nav{min-width:0!important;}
@media(max-width:760px){
  .wordmark,.wm,.topbar .wordmark,.top .wordmark,.seo-topbar .wordmark{
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    justify-self:start!important;
    flex:0 0 auto!important;
  }
  .wordmark .brand-lock,.wm .brand-lock,.fwordmark{
    font-size:18px!important;
    letter-spacing:.055em!important;
  }
  .topbar .tb-nav,.top .tb-nav,.seo-topbar .tb-nav{
    overflow-x:auto!important;
    overflow-y:visible!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .topbar .tb-nav::-webkit-scrollbar,.top .tb-nav::-webkit-scrollbar,.seo-topbar .tb-nav::-webkit-scrollbar{display:none!important;}
  .nav-more .nav-menu,.nav-more:nth-last-child(2) .nav-menu{
    top:var(--mobile-nav-top,94px)!important;
    max-height:calc(100dvh - var(--mobile-nav-top,94px) - 16px - env(safe-area-inset-bottom,0px))!important;
    left:10px!important;
    right:10px!important;
    width:auto!important;
  }
}
@media(max-width:420px){
  .wordmark .brand-lock,.wm .brand-lock{font-size:16.5px!important;letter-spacing:.045em!important;}
  .nav-more .nav-menu,.nav-more:nth-last-child(2) .nav-menu{
    top:var(--mobile-nav-top,92px)!important;
    max-height:calc(100dvh - var(--mobile-nav-top,92px) - 14px - env(safe-area-inset-bottom,0px))!important;
  }
}

/* ===== Step 10.8 — Updates Studio upgrade ===== */
.updates-page-v2 .profile-shell,
.updates-studio-page .profile-shell{max-width:1280px!important;}
.updates-hero-v2,
.updates-studio-hero{overflow:hidden!important;position:relative!important;}
.updates-hero-v2:after,
.updates-studio-hero:after{content:""!important;position:absolute!important;right:clamp(24px,6vw,90px)!important;top:28px!important;width:170px!important;height:170px!important;border-radius:999px!important;background:radial-gradient(circle,rgba(0,217,255,.18),transparent 68%)!important;pointer-events:none!important;}
.update-hero-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;min-width:min(430px,100%)!important;}
.update-hero-stats span{display:grid!important;gap:5px!important;padding:14px 15px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:16px!important;background:rgba(255,255,255,.035)!important;color:#9EA9C8!important;font-size:12px!important;text-transform:uppercase!important;letter-spacing:.075em!important;}
.update-hero-stats b{color:#fff!important;font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;font-size:22px!important;line-height:.95!important;letter-spacing:.02em!important;text-transform:none!important;}
.updates-control-panel{display:grid!important;grid-template-columns:minmax(240px,1fr) minmax(170px,.34fr) minmax(170px,.34fr) auto!important;gap:12px!important;align-items:end!important;margin:24px 0!important;padding:16px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:24px!important;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;}
.updates-layout-v2{display:grid!important;grid-template-columns:minmax(0,1fr) 330px!important;gap:24px!important;align-items:start!important;}
.updates-main-feed{display:grid!important;gap:18px!important;min-width:0!important;}
.updates-feed-v2{grid-template-columns:1fr!important;gap:18px!important;}
.updates-feed-heading{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:16px!important;margin-top:10px!important;}
.updates-feed-heading h2{margin:0!important;color:#fff!important;font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;font-size:28px!important;text-transform:uppercase!important;}
.updates-feed-heading span{color:#98A4C6!important;font-size:13px!important;}
.updates-side-panel{position:sticky!important;top:96px!important;display:grid!important;gap:16px!important;}
.update-timeline{display:grid!important;gap:9px!important;}
.update-timeline a{display:grid!important;gap:4px!important;padding:12px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:15px!important;background:rgba(255,255,255,.026)!important;text-decoration:none!important;}
.update-timeline a:hover{border-color:rgba(0,217,255,.28)!important;background:rgba(0,217,255,.055)!important;}
.update-timeline b{color:#fff!important;font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;font-size:15px!important;}
.update-timeline span{color:#C6D0EA!important;font-size:13px!important;line-height:1.35!important;}
.update-timeline small{color:#8995B5!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.07em!important;}
.update-tag-cloud{display:flex!important;flex-wrap:wrap!important;gap:8px!important;}
.update-tag-cloud button,
.update-card .tag-row button{border:1px solid rgba(0,217,255,.20)!important;border-radius:999px!important;background:rgba(0,217,255,.065)!important;color:#BFEFFF!important;padding:7px 10px!important;font-size:11px!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase!important;cursor:pointer!important;}
.update-card-v2{box-shadow:0 28px 70px rgba(0,0,0,.25)!important;}
.update-card-v2.is-pinned{border-color:rgba(255,194,43,.22)!important;background:radial-gradient(circle at 96% 8%,rgba(255,194,43,.10),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022))!important;}
.update-card-pills{display:flex!important;flex-wrap:wrap!important;gap:8px!important;align-items:center!important;}
.update-category-pill,
.update-impact-pill{display:inline-flex!important;align-items:center!important;gap:7px!important;min-height:30px!important;padding:0 11px!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:999px!important;background:rgba(255,255,255,.045)!important;color:#EAF0FF!important;font-size:11px!important;font-weight:900!important;letter-spacing:.07em!important;text-transform:uppercase!important;}
.update-category-pill i{font-style:normal!important;color:var(--update-accent,#00D9FF)!important;}
.update-impact-pill{border-color:rgba(255,91,115,.28)!important;background:rgba(255,91,115,.09)!important;color:#FFD4DC!important;}
.update-eyebrow{margin:10px 0 8px!important;color:var(--update-accent,#00D9FF)!important;font-family:var(--font-mono,monospace)!important;font-size:12px!important;font-weight:900!important;letter-spacing:.14em!important;text-transform:uppercase!important;}
.update-actions-line{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin-top:18px!important;}
.update-item.todo span{background:#FFC22B!important;box-shadow:0 0 0 3px rgba(255,194,43,.12)!important;}
.update-colour-chip{display:inline-flex!important;align-items:center!important;gap:10px!important;margin:8px 10px 10px 0!important;padding:9px 12px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:999px!important;background:rgba(255,255,255,.045)!important;}
.update-colour-chip i{width:20px!important;height:20px!important;border-radius:999px!important;box-shadow:0 0 0 4px rgba(255,255,255,.06)!important;}
.update-colour-chip span{color:#F4F7FF!important;font-weight:800!important;font-size:13px!important;}
.update-colour-chip code{color:#98A4C6!important;font-size:12px!important;}
.updates-studio-grid{grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr)!important;}
.panel-title-row{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:12px!important;margin-bottom:12px!important;}
.panel-title-row h2{margin:0!important;}
.template-row{display:flex!important;flex-wrap:wrap!important;gap:8px!important;padding:10px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:16px!important;background:rgba(255,255,255,.025)!important;}
.template-row button{min-height:34px!important;padding:0 11px!important;border:1px solid rgba(0,217,255,.18)!important;border-radius:999px!important;background:rgba(0,217,255,.055)!important;color:#DDF7FF!important;font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;font-size:12px!important;font-weight:900!important;letter-spacing:.055em!important;text-transform:uppercase!important;cursor:pointer!important;}
.template-row button:hover{background:rgba(0,217,255,.11)!important;border-color:rgba(0,217,255,.38)!important;}
.toggle-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
.updates-list-tools{display:grid!important;grid-template-columns:minmax(0,1fr) 150px!important;gap:10px!important;margin-bottom:12px!important;}
.updates-list-tools input,
.updates-list-tools select{width:100%!important;min-height:42px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:13px!important;background:rgba(0,0,0,.20)!important;color:#F5F7FF!important;padding:0 12px!important;}
.update-admin-card.is-pinned{border-color:rgba(255,194,43,.22)!important;background:rgba(255,194,43,.045)!important;}
.updates-list-panel .friend-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important;}
.updates-list-panel .friend-actions .button{min-height:34px!important;padding:0 11px!important;font-size:11px!important;}
.update-format-guide .format-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.update-preview-panel .update-card-v2 h2{font-size:clamp(30px,4vw,44px)!important;}
@media(max-width:1060px){.updates-layout-v2,.updates-studio-grid{grid-template-columns:1fr!important}.updates-side-panel,.update-preview-panel{position:relative!important;top:auto!important}.updates-control-panel{grid-template-columns:1fr 1fr!important}.updates-control-panel .button{grid-column:1/-1!important}.update-hero-stats{min-width:0!important;width:100%!important}}
@media(max-width:720px){.updates-control-panel{grid-template-columns:1fr!important;padding:12px!important}.update-hero-stats{grid-template-columns:1fr!important}.toggle-grid{grid-template-columns:1fr!important}.updates-list-tools{grid-template-columns:1fr!important}.update-card-v2{padding:20px!important}.update-card-v2 h2{font-size:clamp(32px,11vw,46px)!important}.update-card-head{gap:10px!important}.update-actions-line .button{width:100%!important}.template-row,.update-toolbar{max-height:none!important}.update-format-guide .format-grid{grid-template-columns:1fr!important}}

/* ===== Step 10.9 — Staff HQ rebuild ===== */
.staff-dashboard-page .profile-shell{
  width:min(1480px,calc(100% - 32px))!important;
  padding-top:34px!important;
}
.staff-hero{
  position:relative!important;
  overflow:hidden!important;
  border-radius:32px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:
    radial-gradient(circle at 12% 12%,rgba(0,217,255,.18),transparent 34%),
    radial-gradient(circle at 92% 0%,rgba(255,107,53,.15),transparent 32%),
    linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
}
.staff-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto!important;
  height:4px!important;
  background:linear-gradient(90deg,#F2CE1B,#FF6B35,#FF3D81,#00D9FF,#2CB67D)!important;
}
.staff-hero .hero-inner{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(220px,300px)!important;
  gap:28px!important;
  align-items:stretch!important;
}
.staff-hero h1{
  font-size:clamp(54px,8vw,104px)!important;
  letter-spacing:-.055em!important;
  line-height:.84!important;
  margin-bottom:18px!important;
}
.staff-status-row{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-top:22px!important;
}
.staff-status-pill{
  display:inline-flex!important;
  align-items:center!important;
  min-height:31px!important;
  padding:0 11px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.045)!important;
  color:#DDE5FF!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.staff-status-pill.ok{border-color:rgba(44,182,125,.28)!important;background:rgba(44,182,125,.09)!important;color:#B9FFD8!important;}
.staff-status-pill.warn{border-color:rgba(255,209,102,.30)!important;background:rgba(255,209,102,.08)!important;color:#FFE7A3!important;}
.staff-hero-panel{
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:22px!important;
  border-radius:24px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  background:rgba(7,9,20,.58)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.staff-hero-panel span,
.staff-hero-panel small{
  color:#9DA8C8!important;
  font-size:12px!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
  font-weight:800!important;
}
.staff-hero-panel b{
  color:#fff!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:64px!important;
  line-height:.86!important;
}
.staff-command-bar{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  margin:20px 0 22px!important;
  padding:12px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.03)!important;
}
.staff-command-bar a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:40px!important;
  padding:0 15px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  color:#EEF3FF!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  text-decoration:none!important;
  text-transform:uppercase!important;
}
.staff-command-bar a:hover{border-color:rgba(0,217,255,.3)!important;background:rgba(0,217,255,.07)!important;}
.staff-metrics-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:12px!important;
  margin:0 0 24px!important;
}
.staff-metric{
  min-height:120px!important;
  padding:18px!important;
  border-radius:22px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025))!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  overflow:hidden!important;
  position:relative!important;
}
.staff-metric::after{
  content:""!important;
  position:absolute!important;
  right:-24px!important;
  top:-24px!important;
  width:86px!important;
  height:86px!important;
  border-radius:999px!important;
  background:rgba(0,217,255,.14)!important;
  filter:blur(4px)!important;
}
.staff-metric.pink::after{background:rgba(255,61,129,.15)!important;}
.staff-metric.orange::after{background:rgba(255,107,53,.15)!important;}
.staff-metric.green::after{background:rgba(44,182,125,.15)!important;}
.staff-metric.violet::after{background:rgba(124,58,237,.18)!important;}
.staff-metric.silver::after{background:rgba(192,202,212,.14)!important;}
.staff-metric span{
  position:relative!important;
  z-index:1!important;
  color:#98A4C8!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}
.staff-metric b{
  position:relative!important;
  z-index:1!important;
  color:#fff!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:clamp(34px,4.5vw,54px)!important;
  line-height:.85!important;
}
.staff-metric small{
  position:relative!important;
  z-index:1!important;
  color:#AAB5D5!important;
  font-size:12.5px!important;
  line-height:1.35!important;
}
.staff-layout-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.45fr) minmax(350px,.78fr)!important;
  gap:24px!important;
  align-items:start!important;
}
.staff-main-stack,.staff-side-stack{
  display:grid!important;
  gap:18px!important;
  min-width:0!important;
}
.staff-panel{
  overflow:hidden!important;
  border-radius:24px!important;
}
.staff-panel-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:14px!important;
  margin-bottom:16px!important;
}
.staff-panel-head h2{
  margin:0!important;
  color:#fff!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:clamp(25px,3vw,38px)!important;
  line-height:.95!important;
  text-transform:uppercase!important;
  letter-spacing:.015em!important;
}
.staff-panel-head>a,
.staff-panel-head>span{
  flex:0 0 auto!important;
  color:#95A2C5!important;
  font-size:12px!important;
  text-decoration:none!important;
  text-transform:uppercase!important;
  letter-spacing:.08em!important;
  font-weight:800!important;
}
.staff-queue-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:11px!important;
}
.staff-queue-item{
  min-height:112px!important;
  padding:16px!important;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  background:rgba(255,255,255,.035)!important;
  display:grid!important;
  align-content:space-between!important;
  gap:13px!important;
  text-decoration:none!important;
}
.staff-queue-item>span{
  width:34px!important;height:34px!important;border-radius:12px!important;
  display:grid!important;place-items:center!important;
  background:linear-gradient(135deg,#F2CE1B,#FF6B35)!important;
  color:#080A14!important;font-weight:950!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
}
.staff-queue-item b{display:block!important;color:#fff!important;font-size:15px!important;line-height:1.2!important;}
.staff-queue-item small{display:block!important;color:#9AA6CA!important;line-height:1.42!important;margin-top:5px!important;}
.staff-tools-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
.staff-tools-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
.staff-tool-card{
  min-height:164px!important;
  padding:17px!important;
  border-radius:20px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.048),rgba(255,255,255,.023))!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  text-decoration:none!important;
  position:relative!important;
  overflow:hidden!important;
}
.staff-tool-card::after{
  content:""!important;
  position:absolute!important;
  inset:auto -30px -42px auto!important;
  width:110px!important;height:110px!important;border-radius:999px!important;
  background:rgba(0,217,255,.10)!important;
}
.staff-tool-card.pink::after{background:rgba(255,61,129,.12)!important;}
.staff-tool-card.orange::after{background:rgba(255,107,53,.13)!important;}
.staff-tool-card.green::after{background:rgba(44,182,125,.12)!important;}
.staff-tool-card.violet::after{background:rgba(124,58,237,.15)!important;}
.staff-tool-dot{
  width:28px!important;height:28px!important;border-radius:11px!important;
  background:linear-gradient(135deg,#00D9FF,#2CB67D)!important;
  box-shadow:0 0 0 6px rgba(0,217,255,.07)!important;
}
.staff-tool-card.pink .staff-tool-dot{background:linear-gradient(135deg,#FF3D81,#7C3AED)!important;}
.staff-tool-card.orange .staff-tool-dot{background:linear-gradient(135deg,#F2CE1B,#FF6B35)!important;}
.staff-tool-card.green .staff-tool-dot{background:linear-gradient(135deg,#2CB67D,#00D9FF)!important;}
.staff-tool-card.violet .staff-tool-dot{background:linear-gradient(135deg,#7C3AED,#00D9FF)!important;}
.staff-tool-card strong{
  color:#fff!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:19px!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
  position:relative!important;z-index:1!important;
}
.staff-tool-card small{
  color:#9EA9CA!important;
  font-size:13px!important;
  line-height:1.45!important;
  position:relative!important;z-index:1!important;
}
.staff-tool-card em{
  margin-top:auto!important;
  color:#EAF2FF!important;
  font-style:normal!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  position:relative!important;z-index:1!important;
}
.staff-system-list{
  display:grid!important;
  gap:9px!important;
}
.staff-system-list div,
.staff-email-card{
  padding:13px 14px!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  background:rgba(255,255,255,.032)!important;
  min-width:0!important;
}
.staff-system-list span,
.staff-email-card span{
  display:block!important;
  color:#7F8AAD!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  margin-bottom:5px!important;
}
.staff-system-list b,
.staff-email-card b{
  display:block!important;
  color:#F6F8FF!important;
  font-size:14px!important;
  line-height:1.35!important;
  overflow-wrap:anywhere!important;
}
.staff-email-card small{
  display:block!important;
  margin-top:6px!important;
  color:#9EA9CA!important;
  line-height:1.4!important;
}
.staff-mini-list{
  display:grid!important;
  gap:9px!important;
}
.staff-user-row,
.staff-mini-row{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  padding:11px!important;
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background:rgba(255,255,255,.028)!important;
  text-decoration:none!important;
  min-width:0!important;
}
.staff-avatar{
  width:38px!important;height:38px!important;border-radius:14px!important;
  display:grid!important;place-items:center!important;
  background:var(--a,#00D9FF)!important;
  color:#07101A!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-weight:950!important;
}
.staff-user-row b,.staff-mini-row b{display:block!important;color:#F7F8FF!important;line-height:1.18!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.staff-user-row small,.staff-mini-row small{display:block!important;color:#96A1C4!important;font-size:12px!important;margin-top:3px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.staff-mini-row{grid-template-columns:minmax(0,1fr) auto!important;}
.staff-mini-row>span{
  color:#AAB5D5!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:999px!important;
  padding:5px 8px!important;
  font-size:11px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.staff-dashboard-page .button{white-space:nowrap!important;}
@media(max-width:1180px){
  .staff-metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .staff-layout-grid{grid-template-columns:1fr!important;}
  .staff-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .staff-queue-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:760px){
  .staff-dashboard-page .profile-shell{width:min(100% - 22px,1480px)!important;padding-top:22px!important;}
  .staff-hero .hero-inner{grid-template-columns:1fr!important;}
  .staff-hero{border-radius:24px!important;}
  .staff-hero-panel b{font-size:48px!important;}
  .staff-command-bar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .staff-command-bar a{width:100%!important;min-width:0!important;text-align:center!important;font-size:12px!important;padding:0 10px!important;}
  .staff-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .staff-tools-grid,.staff-tools-grid.compact,.staff-queue-grid{grid-template-columns:1fr!important;}
  .staff-panel-head{align-items:flex-start!important;flex-direction:column!important;}
}
@media(max-width:470px){
  .staff-metrics-grid{grid-template-columns:1fr!important;}
  .staff-command-bar{grid-template-columns:1fr!important;}
}

/* ===== Step 10.10 — Staff HQ email lab + ops console ===== */
.staff-dashboard-page .staff-command-bar{
  align-items:center!important;
  overflow:hidden!important;
}
.staff-dashboard-page .staff-command-bar a[href="#email-lab"]{
  background:linear-gradient(135deg,rgba(0,217,255,.16),rgba(124,58,237,.13))!important;
  border-color:rgba(0,217,255,.26)!important;
  color:#F6FBFF!important;
}
.email-lab-panel{
  position:relative!important;
  border-color:rgba(0,217,255,.14)!important;
  background:
    radial-gradient(circle at 90% 0%,rgba(0,217,255,.09),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.058),rgba(255,255,255,.024))!important;
}
.email-lab-panel::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto!important;
  height:3px!important;
  background:linear-gradient(90deg,#00D9FF,#7C3AED,#FF3D81)!important;
}
.staff-email-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(310px,.82fr)!important;
  gap:18px!important;
  align-items:start!important;
  margin-top:16px!important;
}
.staff-email-form{
  display:grid!important;
  gap:14px!important;
  min-width:0!important;
}
.staff-email-actions{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
.staff-email-actions .button{
  min-height:42px!important;
}
.staff-env-pills{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin-top:2px!important;
}
.staff-env-pills span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:30px!important;
  padding:0 10px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.038)!important;
  color:#AEB9D8!important;
  font-size:11px!important;
  font-weight:850!important;
  letter-spacing:.045em!important;
  overflow-wrap:anywhere!important;
}
.staff-email-preview{
  display:grid!important;
  gap:11px!important;
  min-width:0!important;
}
.staff-email-result{
  display:grid!important;
  gap:4px!important;
  min-height:86px!important;
  align-content:center!important;
  padding:14px 15px!important;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  background:rgba(255,255,255,.034)!important;
}
.staff-email-result b{
  display:block!important;
  color:#F7F9FF!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:18px!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
}
.staff-email-result span,
.staff-email-result small{
  display:block!important;
  color:#9EABCC!important;
  font-size:12.5px!important;
  line-height:1.45!important;
  overflow-wrap:anywhere!important;
}
.staff-email-result.ok{
  border-color:rgba(44,182,125,.24)!important;
  background:linear-gradient(180deg,rgba(44,182,125,.08),rgba(255,255,255,.028))!important;
}
.staff-email-result.err{
  border-color:rgba(255,61,129,.28)!important;
  background:linear-gradient(180deg,rgba(255,61,129,.09),rgba(255,255,255,.026))!important;
}
.staff-email-result.idle{
  border-color:rgba(0,217,255,.18)!important;
}
.staff-email-missing{
  padding:13px 14px!important;
  border-radius:16px!important;
  border:1px solid rgba(255,209,102,.22)!important;
  background:rgba(255,209,102,.06)!important;
}
.staff-email-missing b{
  display:block!important;
  color:#FFE8A8!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:15px!important;
  text-transform:uppercase!important;
  margin-bottom:4px!important;
}
.staff-email-missing span{
  color:#D8C891!important;
  font-size:12.5px!important;
  overflow-wrap:anywhere!important;
}
.staff-ops-panel .staff-ops-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:11px!important;
}
.staff-ops-panel .staff-queue-item{
  min-height:104px!important;
}
.staff-dashboard-page button:disabled{
  opacity:.58!important;
  cursor:wait!important;
  filter:saturate(.8)!important;
}
.staff-dashboard-page .field input[type="email"]{
  font-family:var(--font-body,Inter,system-ui,sans-serif)!important;
}
.staff-dashboard-page .staff-system-list small{
  display:block!important;
  margin-top:5px!important;
  color:#8390B2!important;
  font-size:12px!important;
  line-height:1.35!important;
}
@media(max-width:1180px){
  .staff-email-grid{grid-template-columns:1fr!important;}
  .staff-ops-panel .staff-ops-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:760px){
  .staff-email-actions{display:grid!important;grid-template-columns:1fr!important;}
  .staff-email-actions .button{width:100%!important;}
  .staff-env-pills{display:grid!important;grid-template-columns:1fr!important;}
  .staff-ops-panel .staff-ops-grid{grid-template-columns:1fr!important;}
}

/* ===== Step 10.11 — cleaner grouped nav dropdown ===== */
.nav-more{isolation:isolate!important;}
.nav-more .nav-menu.nav-menu-clean,
.nav-more:nth-last-child(2) .nav-menu.nav-menu-clean{
  width:min(520px,calc(100vw - 26px))!important;
  max-width:calc(100vw - 26px)!important;
  padding:12px!important;
  border-radius:24px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  background:
    radial-gradient(circle at 10% 0%,rgba(255,107,53,.12),transparent 38%),
    radial-gradient(circle at 92% 8%,rgba(0,217,255,.12),transparent 36%),
    linear-gradient(180deg,rgba(12,16,31,.985),rgba(7,10,21,.982))!important;
  box-shadow:0 28px 90px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.035) inset!important;
  backdrop-filter:blur(20px) saturate(1.14)!important;
  overflow:hidden!important;
}
.nav-menu-clean::before,
.nav-menu-clean::after{display:none!important;}
.nav-menu-head{
  display:grid!important;
  gap:4px!important;
  padding:12px 13px 13px!important;
  margin:0 0 10px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
}
.nav-menu-head strong{
  color:#fff!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:18px!important;
  line-height:1!important;
  letter-spacing:.06em!important;
  text-transform:uppercase!important;
}
.nav-menu-head small{
  color:#A7B2D2!important;
  font-size:12.5px!important;
  line-height:1.35!important;
}
.nav-menu-inner{
  display:grid!important;
  gap:10px!important;
  max-height:min(66vh,620px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  padding:1px 2px 2px!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(0,217,255,.42) transparent!important;
}
.nav-menu-inner::-webkit-scrollbar{width:7px!important;}
.nav-menu-inner::-webkit-scrollbar-track{background:transparent!important;}
.nav-menu-inner::-webkit-scrollbar-thumb{background:rgba(0,217,255,.32)!important;border-radius:999px!important;}
.nav-menu-section{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  padding:10px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.025)!important;
}
.nav-menu-clean .nav-menu-divider{
  grid-column:1/-1!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 1px 2px!important;
  margin:0 0 2px!important;
  border:0!important;
  min-height:auto!important;
}
.nav-menu-clean .nav-menu-divider span{
  color:#F2CE1B!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
.nav-menu-clean .nav-menu-divider::after{
  content:""!important;
  display:block!important;
  height:1px!important;
  flex:1 1 auto!important;
  background:linear-gradient(90deg,rgba(242,206,27,.42),transparent)!important;
}
.nav-menu-clean .nav-menu-link,
.nav-menu-clean button.nav-menu-link,
.nav-menu-clean a.nav-menu-link{
  min-height:58px!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 11px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:15px!important;
  background:rgba(255,255,255,.024)!important;
  color:#E9EEFF!important;
  text-align:left!important;
  white-space:normal!important;
  line-height:1.2!important;
  overflow:hidden!important;
}
.nav-menu-clean .nav-menu-link:hover,
.nav-menu-clean button.nav-menu-link:hover{
  transform:translateY(-1px)!important;
  color:#fff!important;
  border-color:rgba(0,217,255,.28)!important;
  background:linear-gradient(135deg,rgba(0,217,255,.105),rgba(255,255,255,.035))!important;
  box-shadow:0 12px 28px rgba(0,0,0,.22)!important;
}
.nav-menu-clean .nav-menu-link.active{
  color:#fff!important;
  border-color:rgba(0,217,255,.38)!important;
  background:linear-gradient(135deg,rgba(0,217,255,.16),rgba(255,255,255,.045))!important;
}
.nav-menu-clean .nav-menu-link.active::before{display:none!important;}
.nav-menu-clean .nav-ico,
.nav-menu-clean .nav-ico img{
  display:grid!important;
  place-items:center!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  border-radius:12px!important;
}
.nav-menu-clean .nav-ico{
  background:rgba(0,217,255,.095)!important;
  border:1px solid rgba(0,217,255,.14)!important;
}
.nav-menu-clean .nav-ico img{
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  opacity:.9!important;
  filter:brightness(0) invert(1)!important;
}
.nav-menu-clean .nav-text{
  display:grid!important;
  gap:2px!important;
  min-width:0!important;
}
.nav-menu-clean .nav-label{
  display:block!important;
  color:inherit!important;
  font-family:var(--font-display,Rajdhani,system-ui,sans-serif)!important;
  font-size:14.5px!important;
  font-weight:900!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.nav-menu-clean .nav-text small{
  display:block!important;
  color:#8F9ABD!important;
  font-size:11.5px!important;
  font-weight:650!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.nav-menu-clean .nav-menu-link:hover .nav-text small,
.nav-menu-clean .nav-menu-link.active .nav-text small{color:#B8C3E3!important;}
.nav-menu-clean .nav-menu-logout{
  grid-column:1/-1!important;
  border-color:rgba(255,92,115,.18)!important;
  background:rgba(255,92,115,.055)!important;
}
.nav-menu-clean .nav-menu-logout .nav-ico{background:rgba(255,92,115,.12)!important;border-color:rgba(255,92,115,.18)!important;}
.nav-menu-clean .nav-menu-logout:hover{background:rgba(255,92,115,.11)!important;border-color:rgba(255,92,115,.32)!important;}
.nav-menu-clean .nav-notif-badge{position:absolute!important;top:7px!important;right:7px!important;}
.nav-more-button .nav-label{white-space:nowrap!important;}

@media(max-width:760px){
  .nav-more .nav-menu.nav-menu-clean,
  .nav-more:nth-last-child(2) .nav-menu.nav-menu-clean{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    top:var(--mobile-nav-top,86px)!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - var(--mobile-nav-top,86px) - 16px - env(safe-area-inset-bottom,0px))!important;
    padding:10px!important;
    border-radius:22px!important;
    overflow:hidden!important;
    transform:translateY(-8px) scale(.985)!important;
  }
  .nav-more.open .nav-menu.nav-menu-clean{transform:translateY(0) scale(1)!important;}
  .nav-menu-inner{max-height:calc(100dvh - var(--mobile-nav-top,86px) - 118px - env(safe-area-inset-bottom,0px))!important;}
  .nav-menu-section{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;padding:9px!important;border-radius:17px!important;}
  .nav-menu-clean .nav-menu-link,
  .nav-menu-clean button.nav-menu-link,
  .nav-menu-clean a.nav-menu-link{min-height:56px!important;padding:9px!important;grid-template-columns:34px minmax(0,1fr)!important;}
  .nav-menu-clean .nav-ico{width:34px!important;height:34px!important;min-width:34px!important;}
  .nav-menu-clean .nav-label{font-size:13.5px!important;}
  .nav-menu-clean .nav-text small{font-size:11px!important;}
}
@media(max-width:430px){
  .nav-more .nav-menu.nav-menu-clean,
  .nav-more:nth-last-child(2) .nav-menu.nav-menu-clean{left:10px!important;right:10px!important;top:var(--mobile-nav-top,82px)!important;}
  .nav-menu-head{padding:11px!important;margin-bottom:8px!important;}
  .nav-menu-head strong{font-size:16px!important;}
  .nav-menu-head small{font-size:11.5px!important;}
  .nav-menu-section{grid-template-columns:1fr!important;}
  .nav-menu-clean .nav-menu-link,
  .nav-menu-clean button.nav-menu-link,
  .nav-menu-clean a.nav-menu-link{min-height:52px!important;}
  .nav-menu-clean .nav-label,
  .nav-menu-clean .nav-text small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;}
}


/* ===== Step 10.13 — release recovery polish (surgical, layout-safe) ===== */
:root{
  --safe-page-max:1180px;
  --safe-page-pad:clamp(16px,3vw,28px);
  --safe-gap:clamp(16px,2.5vw,26px);
}
*,*::before,*::after{box-sizing:border-box;}
html{overflow-x:hidden;scroll-padding-top:92px;}
body{min-width:0;overflow-x:hidden;}
img,svg,canvas,video{max-width:100%;height:auto;}
button,input,select,textarea{font:inherit;min-width:0;}
a{overflow-wrap:anywhere;}
pre,code{max-width:100%;overflow:auto;}

/* Page frame: keep pages centered without forcing weird widths. */
.profile-shell,
.page-shell,
.main-shell{
  width:min(var(--safe-page-max),calc(100% - (var(--safe-page-pad) * 2)))!important;
  max-width:var(--safe-page-max)!important;
  margin-inline:auto!important;
  min-width:0!important;
}
.profile-shell{padding-top:clamp(20px,3vw,38px)!important;padding-bottom:clamp(34px,5vw,68px)!important;}
.dashboard-hero,.feature-hero,.public-card,.panel,.auth-card,.paint-card,.update-card,.request-admin-card,.feature-card-wrap,.logo-showcase,.media-logo-panel,.kit-copy-card,.saved-row,.notification-card-v2,.staff-tool-card,.staff-queue-item{min-width:0!important;}

/* Hero/action safety: actions should wrap instead of climbing over text. */
.hero-inner{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  gap:var(--safe-gap)!important;
  min-width:0!important;
}
.identity{min-width:0!important;}
.identity h1,.identity p,.bio-line,.panel-note{overflow-wrap:break-word!important;}
.actions-rail,.feature-actions,.form-row,.friend-actions,.notification-actions,.notification-row-actions,.update-actions-line,.staff-email-actions,.copy-kit,.gridlinks,.kit-link-grid{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  align-items:center!important;
  min-width:0!important;
}
.actions-rail{justify-content:flex-end!important;align-content:flex-start!important;}
.button,button.button,a.button{
  max-width:100%!important;
  min-width:0!important;
  white-space:normal!important;
  text-align:center!important;
  line-height:1.12!important;
  flex-shrink:0!important;
}
.form-row .button,.friend-actions .button,.notification-row-actions .button,.staff-email-actions .button,.update-actions-line .button{flex:0 1 auto!important;}

/* Grid safety: every generated page must be allowed to shrink cleanly. */
.content-grid,.feature-builder-grid,.media-kit-grid,.polished-media-grid,.updates-admin-grid,.updates-studio-grid,.staff-layout-grid,.notification-layout,.staff-dashboard-grid,.staff-email-grid,.staff-metrics-grid,.staff-queue-grid,.staff-tools-grid,.staff-ops-grid,.roadmap-board,.roadmap-hero-stats{
  min-width:0!important;
  gap:var(--safe-gap)!important;
  align-items:start!important;
}
.content-grid>* , .feature-builder-grid>* , .media-kit-grid>* , .polished-media-grid>* , .updates-admin-grid>* , .updates-studio-grid>* , .staff-layout-grid>* , .notification-layout>* , .staff-dashboard-grid>* , .staff-email-grid>* , .roadmap-board>*{min-width:0!important;}
.stack{min-width:0!important;}
.panel,.public-card{
  overflow:hidden!important;
  overflow-wrap:break-word!important;
}
.saved-list,.notification-list-v2,.roadmap-lane-list,.feature-list{min-width:0!important;display:grid!important;gap:12px!important;}

/* Top nav: keep wordmark intact and prevent menu from spilling off-screen. */
.topbar{max-width:min(1280px,calc(100% - 20px))!important;margin-inline:auto!important;}
.wordmark,.wordmark .hz{white-space:nowrap!important;min-width:max-content!important;}
.wordmark{gap:10px!important;}
.tb-nav{min-width:0!important;}
.nav-more{position:relative!important;}
.nav-more .nav-menu.nav-menu-clean{right:0!important;left:auto!important;}
.nav-menu-clean .nav-menu-link{position:relative!important;}
.nav-menu-clean .nav-text,.nav-menu-clean .nav-label{min-width:0!important;}

/* Feature pages: card controls and previews should breathe. */
.feature-builder-grid{grid-template-columns:minmax(0,1fr) minmax(300px,.78fr)!important;}
.feature-preview{position:relative!important;top:auto!important;}
.builder-slots{display:grid!important;gap:12px!important;}
.builder-slot,.feature-card-wrap,.request-admin-card,.update-admin-card,.staff-user-card{overflow:hidden!important;}
.feature-card-wrap .feature-actions,.public-card .feature-actions{margin-top:14px!important;}

/* Media kit: quick links should not crush together. */
.media-kit-grid,.polished-media-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important;}
.kit-link-grid,.gridlinks{align-items:stretch!important;}
.kit-link-grid .button,.gridlinks .button,.copy-kit .button{flex:1 1 180px!important;min-height:46px!important;}
.logo-showcase,.media-logo-panel{display:grid!important;place-items:center!important;text-align:center!important;}
.logo-showcase img,.media-logo-panel img{max-width:min(220px,70%)!important;height:auto!important;}

/* Staff HQ / Email Lab: avoid crowded sidebars and overflowing cards. */
.staff-layout-grid{grid-template-columns:minmax(0,1fr) minmax(300px,.38fr)!important;}
.staff-email-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.staff-command-bar,.staff-tools-grid,.staff-ops-grid{min-width:0!important;}
.staff-tool-card,.staff-mini-row,.staff-status-row{overflow:hidden!important;}
.staff-email-form .two-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
.staff-email-result,.staff-email-preview{white-space:normal!important;overflow-wrap:anywhere!important;}

/* Notifications and update studio. */
.notification-layout{grid-template-columns:minmax(260px,.34fr) minmax(0,1fr)!important;}
.notification-card-v2{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:12px!important;}
.notification-row-actions{grid-column:1/-1!important;justify-content:flex-start!important;}
.updates-studio-grid,.updates-admin-grid{grid-template-columns:minmax(0,1.08fr) minmax(320px,.82fr)!important;}
.update-preview-panel{top:96px!important;}
.update-toolbar{display:flex!important;flex-wrap:wrap!important;gap:8px!important;}
.update-toolbar button{flex:0 1 auto!important;}
.update-card-v2,.update-card{overflow:hidden!important;}

/* Colour browsing: mobile/desktop controls should stack predictably. */
.paint-card,.colour-card,.color-card{min-width:0!important;}
.paint-card .button,.colour-card .button,.color-card .button{min-height:40px!important;}
.compare-tray,.garage-controls,.saved-controls{min-width:0!important;}

@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr!important;align-items:start!important;}
  .actions-rail{justify-content:flex-start!important;width:100%!important;}
  .actions-rail .button{flex:1 1 180px!important;}
  .feature-builder-grid,.media-kit-grid,.polished-media-grid,.staff-layout-grid,.notification-layout,.updates-admin-grid,.updates-studio-grid{grid-template-columns:1fr!important;}
  .feature-preview,.update-preview-panel{position:relative!important;top:auto!important;}
  .staff-email-grid,.staff-email-form .two-grid{grid-template-columns:1fr!important;}
}
@media(max-width:760px){
  .profile-shell,.page-shell,.main-shell{width:min(100% - 24px,var(--safe-page-max))!important;}
  .topbar{max-width:calc(100% - 16px)!important;}
  .wordmark{min-width:0!important;max-width:100%!important;}
  .wordmark .hz{display:inline!important;}
  .tb-nav{max-width:100%!important;overflow-x:auto!important;scrollbar-width:none!important;}
  .tb-nav::-webkit-scrollbar{display:none!important;}
  .dashboard-hero,.feature-hero,.public-card,.panel{border-radius:22px!important;}
  .content-grid,.staff-dashboard-grid,.roadmap-board,.staff-metrics-grid,.staff-queue-grid,.staff-tools-grid,.staff-ops-grid{grid-template-columns:1fr!important;}
  .notification-card-v2{grid-template-columns:1fr!important;}
  .notification-icon{margin-bottom:-4px!important;}
}
@media(max-width:520px){
  .actions-rail,.feature-actions,.form-row,.friend-actions,.notification-actions,.notification-row-actions,.update-actions-line,.staff-email-actions,.copy-kit,.gridlinks,.kit-link-grid{display:grid!important;grid-template-columns:1fr!important;width:100%!important;}
  .button,button.button,a.button{width:100%!important;}
  .dashboard-hero,.feature-hero,.public-card,.panel{padding:clamp(18px,5vw,24px)!important;}
  .profile-shell{width:calc(100% - 20px)!important;}
  .nav-more .nav-menu.nav-menu-clean{left:10px!important;right:10px!important;width:auto!important;}
}


/* ===== Step 10.14 — dropdown viewport + logout reliability fix ===== */
.nav-more.open{z-index:2147483000!important;}
.nav-more .nav-menu.nav-menu-clean,
.nav-more:nth-last-child(2) .nav-menu.nav-menu-clean{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
  z-index:2147483000!important;
}
.nav-menu-clean .nav-menu-head{flex:0 0 auto!important;}
.nav-menu-clean .nav-menu-inner{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  padding-bottom:8px!important;
}
.nav-menu-footer{
  flex:0 0 auto!important;
  display:grid!important;
  gap:8px!important;
  padding:10px 2px 0!important;
  margin-top:10px!important;
  border-top:1px solid rgba(255,255,255,.09)!important;
  background:linear-gradient(180deg,rgba(7,10,21,0),rgba(7,10,21,.92))!important;
}
.nav-menu-footer .nav-menu-logout{
  width:100%!important;
  grid-column:auto!important;
  min-height:54px!important;
  background:linear-gradient(135deg,rgba(255,92,115,.12),rgba(255,92,115,.055))!important;
  border-color:rgba(255,92,115,.26)!important;
}
.nav-menu-footer .nav-menu-logout .nav-label{color:#fff!important;}
.nav-menu-footer .nav-menu-logout small{color:#FFB5C0!important;}
@media(min-width:761px){
  .nav-more .nav-menu.nav-menu-clean,
  .nav-more:nth-last-child(2) .nav-menu.nav-menu-clean{
    position:fixed!important;
    top:var(--mobile-nav-top,76px)!important;
    right:max(18px,calc((100vw - 1280px)/2 + 18px))!important;
    left:auto!important;
    bottom:max(16px,env(safe-area-inset-bottom,0px))!important;
    height:auto!important;
    max-height:none!important;
  }
  .nav-menu-clean .nav-menu-inner{max-height:none!important;}
}
@media(max-width:760px){
  body.nav-menu-open{overflow:hidden!important;}
  .nav-more .nav-menu.nav-menu-clean,
  .nav-more:nth-last-child(2) .nav-menu.nav-menu-clean{
    position:fixed!important;
    top:var(--mobile-nav-top,76px)!important;
    left:10px!important;
    right:10px!important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 10px)!important;
    width:auto!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    padding:10px!important;
    border-radius:22px!important;
  }
  .nav-menu-clean .nav-menu-head{margin-bottom:8px!important;}
  .nav-menu-clean .nav-menu-inner{max-height:none!important;}
  .nav-menu-footer{padding-top:9px!important;margin-top:8px!important;}
}
@media(max-width:430px){
  .nav-more .nav-menu.nav-menu-clean,
  .nav-more:nth-last-child(2) .nav-menu.nav-menu-clean{
    left:8px!important;
    right:8px!important;
    top:var(--mobile-nav-top,74px)!important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 8px)!important;
  }
  .nav-menu-clean .nav-menu-section{gap:7px!important;padding:8px!important;}
  .nav-menu-footer .nav-menu-logout{min-height:52px!important;}
}

/* ===== Step 10.15 — Discord invite button + soft join popup ===== */
.tb-nav .nav-discord-cta{
  position:relative!important;
  border-color:rgba(88,101,242,.34)!important;
  background:linear-gradient(135deg,rgba(88,101,242,.22),rgba(0,217,255,.11))!important;
  box-shadow:0 14px 34px rgba(88,101,242,.14)!important;
  color:#f7f9ff!important;
}
.tb-nav .nav-discord-cta:hover{
  border-color:rgba(125,139,255,.58)!important;
  box-shadow:0 18px 42px rgba(88,101,242,.22)!important;
}
.nav-menu-clean .nav-external[href*="discord.gg"]{
  border-color:rgba(88,101,242,.26)!important;
  background:linear-gradient(135deg,rgba(88,101,242,.14),rgba(0,217,255,.055))!important;
}
.nav-menu-clean .nav-external[href*="discord.gg"] .nav-ico{
  color:#9aa6ff!important;
}
.discord-invite-pop{
  position:fixed!important;
  right:clamp(14px,2.4vw,28px)!important;
  bottom:calc(env(safe-area-inset-bottom,0px) + clamp(14px,2.4vw,28px))!important;
  z-index:2147482500!important;
  width:min(420px,calc(100vw - 28px))!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  gap:14px!important;
  padding:16px!important;
  border:1px solid rgba(144,164,255,.22)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 15% 5%,rgba(88,101,242,.22),transparent 34%),
    radial-gradient(circle at 95% 100%,rgba(0,217,255,.12),transparent 38%),
    linear-gradient(135deg,rgba(9,13,27,.96),rgba(7,10,20,.94))!important;
  box-shadow:0 24px 80px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.035) inset!important;
  backdrop-filter:blur(18px)!important;
  transform:translateY(16px) scale(.985)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .22s ease,transform .22s ease!important;
}
.discord-invite-pop.show{
  transform:translateY(0) scale(1)!important;
  opacity:1!important;
  pointer-events:auto!important;
}
.discord-pop-close{
  position:absolute!important;
  top:10px!important;
  right:10px!important;
  width:32px!important;
  height:32px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.055)!important;
  color:rgba(255,255,255,.82)!important;
  font:700 20px/1 Inter,system-ui,sans-serif!important;
  cursor:pointer!important;
}
.discord-pop-close:hover{background:rgba(255,255,255,.1)!important;color:#fff!important;}
.discord-pop-mark{
  width:52px!important;
  height:52px!important;
  border-radius:18px!important;
  display:grid!important;
  place-items:center!important;
  color:#fff!important;
  background:linear-gradient(135deg,#5865f2,#00d9ff)!important;
  box-shadow:0 18px 36px rgba(88,101,242,.26)!important;
}
.discord-pop-mark .nav-ico{width:24px!important;height:24px!important;margin:0!important;}
.discord-pop-mark .nav-ico img{width:24px!important;height:24px!important;filter:brightness(0) invert(1)!important;}
.discord-pop-copy{
  min-width:0!important;
  padding-right:28px!important;
  display:grid!important;
  gap:5px!important;
}
.discord-pop-copy strong{
  color:#fff!important;
  font:800 clamp(16px,1.7vw,19px)/1.08 Rajdhani,Inter,system-ui,sans-serif!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
}
.discord-pop-copy span{
  color:rgba(232,239,255,.72)!important;
  font:500 13px/1.45 Inter,system-ui,sans-serif!important;
  max-width:34em!important;
}
.discord-pop-actions{
  grid-column:1/-1!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  align-items:center!important;
  padding-top:2px!important;
}
.discord-pop-actions .button{
  flex:1 1 150px!important;
  min-height:42px!important;
  margin:0!important;
}
.discord-pop-join{
  background:linear-gradient(135deg,#5865f2,#00d9ff)!important;
  border-color:rgba(145,167,255,.55)!important;
  color:#fff!important;
}
.discord-pop-later{
  flex:0 1 120px!important;
}
@media(max-width:760px){
  .tb-nav .nav-discord-cta{min-width:auto!important;}
  .discord-invite-pop{
    left:12px!important;
    right:12px!important;
    bottom:calc(env(safe-area-inset-bottom,0px) + 12px)!important;
    width:auto!important;
    border-radius:22px!important;
  }
}
@media(max-width:430px){
  .discord-invite-pop{
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:15px!important;
  }
  .discord-pop-mark{width:48px!important;height:48px!important;}
  .discord-pop-copy{padding-right:30px!important;}
  .discord-pop-actions{display:grid!important;grid-template-columns:1fr!important;}
  .discord-pop-later{flex:1 1 auto!important;}
}

/* ===== Step 10.16 — clean Discord icon + dropdown repair ===== */
.tb-nav .nav-discord-cta{display:none!important;}
.tb-nav .nav-discord-icon{
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:15px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:linear-gradient(135deg,#5865F2 0%,#6D7CFF 54%,#00D9FF 145%)!important;
  box-shadow:0 12px 28px rgba(88,101,242,.22),0 0 0 1px rgba(255,255,255,.08) inset!important;
  color:#fff!important;
  overflow:hidden!important;
}
.tb-nav .nav-discord-icon::before{display:none!important;}
.tb-nav .nav-discord-icon .nav-ico,
.tb-nav .nav-discord-icon .nav-ico img{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  display:block!important;
  margin:0!important;
  opacity:1!important;
  filter:brightness(0) invert(1)!important;
}
.tb-nav .nav-discord-icon:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(255,255,255,.24)!important;
  box-shadow:0 16px 36px rgba(88,101,242,.32),0 0 0 1px rgba(255,255,255,.12) inset!important;
}
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.nav-more.open{z-index:2147483200!important;}
.nav-more .nav-menu.nav-menu-clean,
.nav-more:nth-last-child(2) .nav-menu.nav-menu-clean{
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
  overflow:hidden!important;
  z-index:2147483200!important;
}
.nav-menu-clean .nav-menu-head{flex:0 0 auto!important;}
.nav-menu-clean .nav-menu-inner{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
}
.nav-menu-footer{
  flex:0 0 auto!important;
  position:relative!important;
  padding:10px 2px 0!important;
  margin-top:8px!important;
  border-top:1px solid rgba(255,255,255,.09)!important;
  background:linear-gradient(180deg,rgba(7,10,21,0),rgba(7,10,21,.96))!important;
}
.nav-menu-footer .nav-menu-logout{width:100%!important;min-height:52px!important;}
@media(min-width:761px){
  .nav-more .nav-menu.nav-menu-clean,
  .nav-more:nth-last-child(2) .nav-menu.nav-menu-clean{
    position:fixed!important;
    top:var(--mobile-nav-top,76px)!important;
    right:max(14px,calc((100vw - 1280px)/2 + 14px))!important;
    left:auto!important;
    bottom:auto!important;
    width:min(500px,calc(100vw - 28px))!important;
    max-height:calc(100dvh - var(--mobile-nav-top,76px) - 18px)!important;
    height:auto!important;
  }
  .nav-menu-clean .nav-menu-inner{max-height:none!important;}
}
@media(max-width:760px){
  body.nav-menu-open{overflow:hidden!important;}
  .tb-nav{gap:7px!important;}
  .tb-nav .nav-discord-icon{order:8;width:40px!important;min-width:40px!important;height:40px!important;border-radius:14px!important;}
  .nav-more{order:7!important;}
  .nav-more .nav-menu.nav-menu-clean,
  .nav-more:nth-last-child(2) .nav-menu.nav-menu-clean{
    position:fixed!important;
    top:var(--mobile-nav-top,76px)!important;
    left:10px!important;
    right:10px!important;
    bottom:auto!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - var(--mobile-nav-top,76px) - 10px - env(safe-area-inset-bottom,0px))!important;
    height:auto!important;
    padding:10px!important;
    border-radius:22px!important;
  }
  .nav-menu-clean .nav-menu-inner{max-height:none!important;}
}
@media(max-width:430px){
  .tb-nav .nav-discord-icon{width:38px!important;min-width:38px!important;height:38px!important;}
  .nav-more .nav-menu.nav-menu-clean,
  .nav-more:nth-last-child(2) .nav-menu.nav-menu-clean{
    left:8px!important;
    right:8px!important;
    top:var(--mobile-nav-top,74px)!important;
    max-height:calc(100dvh - var(--mobile-nav-top,74px) - 8px - env(safe-area-inset-bottom,0px))!important;
  }
}