/* OFC-UI-064 — 1499 PRINCIPAL. Sistema visual sem interferir em Moonlight público
   nem nos motores internos ADS, Karaokê, Jukebox ou Pandinha.
   As cores de borda vêm das artes, e os estados são semânticos. */
:root{--ofc-surface:#171318;--ofc-line:#493941;--ofc-cream:#f4e9e7;--ofc-sub:#cbbec3}
body{background:radial-gradient(ellipse 65% 25% at 10% 0%,#26151d 0,transparent 75%),#100d12}
#app-shell.shell{max-width:1360px;padding:16px clamp(12px,2.2vw,29px) 58px}
#app-shell>.session-strip,
#app-shell:has(#home-view:not([hidden]))>.session-strip,
#app-shell:has(.module-page:not([hidden]))>.session-strip{
 position:relative!important;inset:auto!important;top:auto!important;right:auto!important;
 display:flex!important;align-items:center;justify-content:space-between;gap:12px;
 width:100%!important;max-width:none!important;min-height:47px;
 margin:0 0 16px;padding:7px 11px!important;
 background:#1c171d!important;border:1px solid #47383f;border-radius:11px;
 box-shadow:none!important
}
#app-shell>.session-strip #session-welcome{display:flex!important;align-items:center;min-width:0}
#app-shell>.session-strip #session-welcome strong{
 display:block!important;color:#f6e8e2;letter-spacing:.025em;font-size:.82rem;font-weight:900
}
#app-shell>.session-strip #logout-button{
 font-size:.79rem;min-height:34px;padding:6px 11px;
 background:#30252a;border-color:#645055;color:#e2cbd0
}
#app-shell>.session-strip #logout-button:hover{background:#493039}
#app-shell>#home-view{max-width:1240px;margin-inline:auto}
#home-view .ofc-dashboard-hero{
 display:grid!important;grid-template-columns:105px minmax(0,1fr)!important;
 gap:clamp(14px,2.3vw,25px)!important;
 align-items:center;min-height:0!important;
 margin:0 0 clamp(24px,3vw,34px);
 padding:clamp(13px,2.1vw,23px)!important;
 border:1px solid #6e464d;border-radius:15px;
 background:linear-gradient(112deg,#261a22 0%,#181319 56%,#13171b 100%);
 box-shadow:0 9px 32px #09060966
}
#home-view .ofc-dashboard-hero>.masthead{
 width:100%!important;max-width:105px!important;height:auto;
 border-color:#8d5956;background:#1e1319;border-radius:13px;box-shadow:none
}
#home-view .ofc-dashboard-hero>.masthead img{
 display:block;width:100%;height:auto!important;max-height:none!important;
 aspect-ratio:1;object-fit:contain
}
#home-view .ofc-home-welcome{margin:0;min-width:0}
#home-view .ofc-home-welcome .eyebrow{
 margin:0 0 5px;font-size:.66rem;letter-spacing:.135em;color:#e0ae9b
}
#home-view .ofc-home-welcome h1{
 margin:0;line-height:1.15;letter-spacing:-.02em;
 font-size:clamp(1.3rem,2.5vw,2.12rem);text-transform:none;
 color:var(--ofc-cream);font-weight:900
}
#home-view .ofc-rc-label{
 display:inline-flex;align-items:center;position:relative;top:-.15em;
 margin-left:8px;font-size:.53em;letter-spacing:.09em;
 border-color:#805d43;background:#33251e;color:#f0cca6;
 border-radius:5px;padding:3px 6px
}
#home-view .ofc-home-group{
 --group-accent:#ba999b;min-width:0;margin:0 0 clamp(27px,3.8vw,44px)
}
#home-view .ofc-group-moonlight{--group-accent:#73c7d0}
#home-view .ofc-group-bar{--group-accent:#e3a46f}
#home-view .ofc-group-userscripts{--group-accent:#df849e}
#home-view .ofc-home-group-head{
 display:flex;align-items:center;gap:10px;padding:0 0 11px;margin:0 0 13px;
 border-bottom:1px solid color-mix(in srgb,var(--group-accent) 43%,#41383f)
}
#home-view .ofc-home-group-head:before{
 content:"";flex:none;width:5px;height:21px;background:var(--group-accent);border-radius:4px
}
#home-view .ofc-home-group-head>div{
 display:flex;align-items:baseline;justify-content:space-between;gap:12px;
 width:100%;flex-wrap:wrap
}
#home-view .ofc-home-group-head h2{
 margin:0;line-height:1.18;letter-spacing:.012em;
 font-size:clamp(1.12rem,1.55vw,1.45rem);color:#fff2ee
}
#home-view .ofc-home-group-note{
 margin:0;color:#c5b8bc;font-size:.74rem;line-height:1.3
}
#home-view .ofc-home-group .module-grid{
 width:100%;display:grid!important;align-items:stretch;
 grid-template-columns:repeat(3,minmax(0,1fr))!important;
 gap:clamp(11px,1.7vw,20px)!important
}
#home-view .ofc-group-moonlight .module-grid,
#home-view .ofc-group-userscripts .module-grid{
 grid-template-columns:repeat(2,minmax(0,1fr))!important
}
#home-view .ofc-home-group .module-card{
 --card-edge:#77646d;--card-glow:#d2b1ba;--card-surface:#1c171c;
 position:relative;min-width:0;margin:0!important;padding:0!important;
 border:1px solid color-mix(in srgb,var(--card-edge) 72%,#393139)!important;
 border-radius:14px!important;overflow:hidden;
 background:var(--card-surface)!important;color:var(--ofc-cream);
 text-decoration:none;box-shadow:0 8px 23px #07060972;
 transform:translateY(0);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}
#home-view .ofc-home-group .module-card:before{
 content:"";pointer-events:none;position:absolute;inset:0 0 auto;
 height:3px;background:var(--card-edge);opacity:.88;z-index:1
}
#home-view .ofc-home-group .module-card:not(.module-coming-soon):hover{
 transform:translateY(-3px);border-color:var(--card-edge)!important;
 box-shadow:0 12px 29px #0008,0 0 23px -15px var(--card-glow)
}
#home-view .ofc-home-group :is(button.module-card,a.module-card):focus-visible{
 outline:3px solid var(--card-glow);outline-offset:3px
}
#home-view .ofc-home-group .module-card>.module-info{
 display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
 min-width:0;min-height:0;gap:5px;
 margin:0;padding:14px 15px!important;
 background:linear-gradient(145deg,color-mix(in srgb,var(--card-edge) 11%,#1b161b),#151217 76%);
}
#home-view .ofc-home-group .module-info strong{
 font-size:clamp(.96rem,1.3vw,1.11rem)!important;
 line-height:1.25;letter-spacing:0;text-transform:none;
 color:#f9efed;overflow-wrap:anywhere
}
#home-view .ofc-home-group .module-info small{
 font-size:.81rem!important;line-height:1.45;color:#cdbfc4
}
#home-view .ofc-home-group .status-pill{
 display:inline-flex;align-items:center;max-width:100%;min-height:26px;
 margin-top:auto;padding:4px 8px;border-radius:7px;font-size:.72rem;line-height:1.28;
 font-weight:850;letter-spacing:0;overflow-wrap:anywhere;
 background:#342c30;border-color:#7d6974;color:#eedce2
}
#home-view .ofc-home-group .status-pill.good{
 background:#17342a;border-color:#457b65;color:#aaf2c7
}
#home-view .ofc-home-group .status-pill.bad{
 background:#3b2029;border-color:#a04f62;color:#ffc1ce
}
#home-view .ofc-home-group .status-pill.warn{
 background:#382c22;border-color:#997445;color:#f7d5a0
}
#home-view .ofc-home-group .status-local-064{
 background:#19303b;border-color:#477d8f;color:#b9e5f2
}
#home-view .ofc-home-group .status-beta-064{
 background:#25361a;border-color:#759640;color:#d2ff8a
}
#home-view .ofc-home-group .ofc-card-moonlight{--card-edge:#53b8d5;--card-glow:#8bd8ee}
#home-view .ofc-home-group .ofc-card-jukebox{--card-edge:#48c6a0;--card-glow:#90ecd2}
#home-view .ofc-home-group .ofc-card-chef{--card-edge:#cf8552;--card-glow:#ebb27c}
#home-view .ofc-home-group .ofc-card-cardapio{--card-edge:#74b4a0;--card-glow:#a4e4cf}
#home-view .ofc-home-group .ofc-card-pandinha{--card-edge:#baff15;--card-glow:#cfff6a}
#home-view .ofc-home-group .ofc-card-ads{--card-edge:#dba064;--card-glow:#f2c68c}
#home-view .ofc-home-group .ofc-card-karaoke{--card-edge:#d85878;--card-glow:#f299b2}
#home-view .ofc-home-group .module-card>img,
#home-view .ofc-home-group .module-card>.jb-card-art{
 display:block!important;width:100%!important;height:auto!important;
 aspect-ratio:1/1!important;min-width:0;max-height:none!important;
 object-fit:contain!important;background:#0d0d11!important;border:0!important;
 border-radius:0!important;overflow:hidden
}
#home-view .ofc-home-group .module-card>.jb-card-art img{
 width:100%!important;height:100%!important;aspect-ratio:1/1;
 object-fit:contain!important;border-radius:0!important
}
#home-view .ofc-group-moonlight .module-card,
#home-view .ofc-group-userscripts .module-card{
 display:grid!important;grid-template-columns:clamp(130px,15vw,178px) minmax(0,1fr);
 grid-template-rows:auto;align-items:stretch
}
#home-view .ofc-group-moonlight .module-card>img,
#home-view .ofc-group-userscripts .module-card>img,
#home-view .ofc-group-moonlight .module-card>.jb-card-art{
 width:100%!important;height:auto!important;
 aspect-ratio:1/1!important;object-fit:contain!important;align-self:start
}
#home-view .ofc-group-moonlight .module-card .module-info,
#home-view .ofc-group-userscripts .module-card .module-info{
 min-width:0;min-height:0;justify-content:center
}
#home-view .ofc-group-moonlight .module-card .status-pill,
#home-view .ofc-group-userscripts .module-card .status-pill{margin-top:9px}
#home-view .ofc-group-bar .module-card{display:flex;flex-direction:column}
#home-view .ofc-group-bar .module-card .module-info{flex:1}
#home-view .ofc-group-bar .module-card .status-pill{margin-top:9px}
#home-view .ofc-home-group .module-coming-soon,
#home-view .ofc-home-group .module-coming-soon.module-chef{
 cursor:default!important;pointer-events:none!important;transform:none!important;
 border-color:color-mix(in srgb,var(--card-edge) 47%,#464147)!important
}
#home-view .ofc-home-group .module-coming-soon>img{
 filter:grayscale(.35) saturate(.58) brightness(.7)!important
}
#home-view .ofc-home-group .module-coming-soon .module-info{opacity:.87}
#home-view .ofc-home-group .module-coming-soon .status-pill.upcoming{
 color:#d4c2c7!important;border-color:#69585f!important;background:#292328!important
}
/* Mesma família cromática na entrada dos painéis do 1499; controles internos preservados. */
#ads-page{--ofc-module-accent:#dba064}
#karaoke-page{--ofc-module-accent:#d85878}
#moonlight-page{--ofc-module-accent:#53b8d5}
#jukebox-page{--ofc-module-accent:#48c6a0}
#app-shell .module-page>.ofc-module-lead{
 display:grid;grid-template-columns:minmax(100px,148px) minmax(0,1fr)!important;
 gap:clamp(13px,2vw,22px)!important;align-items:center!important;
 background:linear-gradient(110deg,color-mix(in srgb,var(--ofc-module-accent) 9%,#20181f),#151218);
 border:1px solid color-mix(in srgb,var(--ofc-module-accent) 48%,#46343e);
 border-radius:14px;padding:clamp(12px,2vw,20px)!important;
 margin-bottom:17px;min-height:0!important
}
#app-shell .module-page>.ofc-module-lead .ofc-module-icon{
 max-width:148px;min-width:0;width:100%;padding:6px;
 background:#111014;border:1px solid color-mix(in srgb,var(--ofc-module-accent) 62%,#433942);
 border-radius:11px
}
#app-shell .module-page>.ofc-module-lead .ofc-module-icon img{
 display:block;width:100%!important;height:auto!important;max-height:none!important;
 aspect-ratio:1!important;object-fit:contain!important
}
#app-shell .module-page>.ofc-module-lead .ofc-module-icon figcaption{
 font-size:.71rem;color:#e2d1d4;line-height:1.25
}
#app-shell .module-page>.ofc-module-lead .version-stamp{
 font-size:.64rem;font-weight:750;color:var(--ofc-module-accent);
 border-color:color-mix(in srgb,var(--ofc-module-accent) 52%,#474047)
}
#app-shell .module-page>.ofc-module-lead .module-heading{margin:0!important;min-width:0}
#app-shell .module-page>.ofc-module-lead .module-heading h2{
 font-size:clamp(1.2rem,2vw,1.7rem)!important;line-height:1.18;
 color:#f9ebea;letter-spacing:.01em;text-transform:none!important
}
#app-shell .module-page>.ofc-module-lead .module-heading .eyebrow{
 font-size:.69rem;letter-spacing:.12em;color:var(--ofc-module-accent)
}
#app-shell .module-page>.ofc-module-lead .module-heading .muted{
 display:block!important;color:#cbbbc1;font-size:.84rem;line-height:1.45;
 margin-top:7px;max-width:60ch
}
#app-shell .module-page>.ofc-module-lead .module-heading .ml-platform{
 color:#f6cfac;font-size:.78rem;line-height:1.5
}
#app-shell #home-back:not([hidden]){
 position:relative!important;inset:auto!important;display:inline-flex;align-items:center;
 width:auto;min-height:40px;margin:0 0 7px;
 padding:8px 13px;font-size:.81rem;border:1px solid #62505c;
 background:#241c24;color:#efe0e7;border-radius:10px
}
#app-shell #home-back:hover{background:#352733}
#app-shell .module-page .button:focus-visible,
#app-shell .module-page button:focus-visible{
 outline:3px solid #f5b793;outline-offset:2px
}
/* Jukebox usa hero próprio, agora alinhado aos demais produtos do launcher. */
#app-shell #jukebox-page .jb-hero{
 display:grid;grid-template-columns:minmax(100px,148px) minmax(0,1fr)!important;
 gap:clamp(13px,2vw,22px)!important;align-items:center;
 padding:clamp(12px,2vw,20px)!important;border-radius:14px;
 border:1px solid #468a79;
 background:linear-gradient(110deg,#182922,#16151b)!important
}
#app-shell #jukebox-page .jb-hero-art.jb-official-art{
 width:100%;max-width:148px;height:auto!important;min-height:0!important;
 border:1px solid #4e9c84;border-radius:11px
}
#app-shell #jukebox-page .jb-hero-art.jb-official-art img{
 width:100%;height:auto!important;max-height:none!important;
 aspect-ratio:1!important;object-fit:contain!important
}
#app-shell #jukebox-page .jb-hero-copy h2{
 margin:0 0 8px;font-size:clamp(1.2rem,2vw,1.7rem)!important;
 line-height:1.2;letter-spacing:.01em;text-transform:none
}
#app-shell #jukebox-page .jb-hero-copy .eyebrow{font-size:.68rem;letter-spacing:.11em;color:#78d3b2}
#app-shell #jukebox-page .jb-hero-copy p:not(.eyebrow){
 font-size:.84rem;line-height:1.45;color:#cbbbc4;margin:0
}
#app-shell #jukebox-page .jb-chips{margin-top:9px;gap:6px}
#app-shell #jukebox-page .jb-chips span{
 color:#bde6d9;background:#20382f;border-color:#4f947e;
 border-radius:7px;font-size:.69rem;padding:5px 8px
}
@media(max-width:720px){
 #app-shell #jukebox-page .jb-hero{
  grid-template-columns:84px minmax(0,1fr)!important;gap:11px!important;
  padding:11px!important;border-radius:12px
 }
 #app-shell #jukebox-page .jb-hero-art.jb-official-art{max-width:84px}
 #app-shell #jukebox-page .jb-hero-copy h2{font-size:1.15rem!important}
 #app-shell #jukebox-page .jb-hero-copy .eyebrow{font-size:.58rem}
 #app-shell #jukebox-page .jb-hero-copy p:not(.eyebrow){font-size:.73rem}
}
/* Login: mesma escala de componentes e contraste, mantendo a advertência real de segurança. */
#login-view.login-view{background:radial-gradient(ellipse at 18% 12%,#301a21 0,transparent 60%),#100d12}
#login-view .login-panel{background:#171116;border-color:#79545a;border-radius:15px}
#login-view .login-lower{gap:clamp(17px,3vw,31px);padding:clamp(18px,3vw,34px)}
#login-view .login-copy h1{text-transform:none;letter-spacing:-.01em;font-size:clamp(1.45rem,2.7vw,2.2rem)}
#login-view .login-copy h1 span{color:#f29c7d}
#login-view .login-eyebrow{color:#eab39b!important;letter-spacing:.13em}
#login-view .login-hint{color:#bea7a6;font-size:.78rem}
#login-view .login-form input{border-radius:10px;min-height:46px}
#login-view .login-submit{border-radius:10px;background:#e85f42;border-color:#ff9677;min-height:48px}
#login-view .login-submit:hover{background:#f27255}
#login-view .login-foot{font-size:.69rem;letter-spacing:.1em;color:#b0a0a5}
@media(max-width:1050px){
 #home-view .ofc-group-moonlight .module-card,
 #home-view .ofc-group-userscripts .module-card{
  grid-template-columns:132px minmax(0,1fr)
 }
 #home-view .ofc-home-group .module-info strong{font-size:.97rem!important}
 #home-view .ofc-home-group .module-info small{font-size:.78rem!important}
}
@media(max-width:720px){
 #app-shell.shell{padding:10px 11px 60px}
 #home-view .ofc-dashboard-hero{
  grid-template-columns:83px minmax(0,1fr)!important;
  gap:12px!important;padding:12px!important;border-radius:12px
 }
 #home-view .ofc-dashboard-hero>.masthead{max-width:83px!important}
 #home-view .ofc-home-welcome h1{font-size:clamp(1.04rem,4.6vw,1.5rem)}
 #home-view .ofc-home-welcome .eyebrow{font-size:.6rem}
 #home-view .ofc-rc-label{font-size:.53em;margin-left:4px}
 #home-view .ofc-home-group{margin-bottom:24px}
 #home-view .ofc-home-group-head h2{font-size:1.14rem}
 #home-view .ofc-home-group .module-grid,
 #home-view .ofc-group-moonlight .module-grid,
 #home-view .ofc-group-bar .module-grid,
 #home-view .ofc-group-userscripts .module-grid{
  grid-template-columns:minmax(0,1fr)!important;gap:10px!important
 }
 #home-view .ofc-home-group .module-card,
 #home-view .ofc-group-bar .module-card,
 #home-view .ofc-group-moonlight .module-card,
 #home-view .ofc-group-userscripts .module-card{
  display:grid!important;grid-template-columns:112px minmax(0,1fr)!important;
  grid-template-rows:auto;align-items:stretch;min-height:112px
 }
 #home-view .ofc-home-group .module-card>img,
 #home-view .ofc-home-group .module-card>.jb-card-art{
  width:112px!important;min-width:0;height:112px!important;min-height:0!important;
  max-height:none!important;aspect-ratio:1/1!important;object-fit:contain!important
 }
 #home-view .ofc-home-group .module-card>.jb-card-art img{
  width:100%!important;height:100%!important;object-fit:contain!important
 }
 #home-view .ofc-home-group .module-card .module-info{
  min-height:112px;gap:3px;justify-content:center;padding:10px 12px!important
 }
 #home-view .ofc-home-group .module-info strong{font-size:.91rem!important;line-height:1.25}
 #home-view .ofc-home-group .module-info small{font-size:.75rem!important;line-height:1.33}
 #home-view .ofc-home-group .status-pill{font-size:.68rem;min-height:23px;padding:3px 6px}
 #home-view .ofc-group-moonlight .module-card .status-pill,
 #home-view .ofc-group-userscripts .module-card .status-pill,
 #home-view .ofc-group-bar .module-card .status-pill{margin-top:5px}
 #app-shell .module-page>.ofc-module-lead{
  grid-template-columns:84px minmax(0,1fr)!important;padding:11px!important;gap:11px!important
 }
 #app-shell .module-page>.ofc-module-lead .ofc-module-icon{
  max-width:84px;padding:3px
 }
 #app-shell .module-page>.ofc-module-lead .ofc-module-icon img{
  max-height:none!important;height:auto!important
 }
 #app-shell .module-page>.ofc-module-lead .ofc-module-icon figcaption{
  font-size:.61rem;margin-top:4px
 }
 #app-shell .module-page>.ofc-module-lead .module-heading h2{font-size:1.15rem!important}
 #app-shell .module-page>.ofc-module-lead .module-heading .muted{
  display:block!important;font-size:.72rem;margin-top:4px
 }
 #app-shell .module-page>.ofc-module-lead .module-heading .ml-platform{font-size:.7rem}
 #app-shell>.session-strip{min-height:42px;margin-bottom:9px}
}
@media(max-width:365px){
 #home-view .ofc-home-group .module-card,
 #home-view .ofc-group-bar .module-card,
 #home-view .ofc-group-moonlight .module-card,
 #home-view .ofc-group-userscripts .module-card{
  grid-template-columns:93px minmax(0,1fr)!important;min-height:97px
 }
 #home-view .ofc-home-group .module-card>img,
 #home-view .ofc-home-group .module-card>.jb-card-art{
  width:93px!important;height:93px!important
 }
 #home-view .ofc-home-group .module-card .module-info{min-height:97px;padding:8px!important}
 #home-view .ofc-home-group .module-info strong{font-size:.86rem!important}
 #home-view .ofc-home-group .module-info small{font-size:.7rem!important}
}
@media(prefers-reduced-motion:reduce){
 #home-view .ofc-home-group .module-card{transition:none}
}