/* V4.29 — Detonado Lab official dark identity.
   Brand assets supplied by the product owner. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#080E18;
  --panel:#101827;
  --panel2:#182235;
  --text:#F8FAFC;
  --muted:#A7B0C0;
  --brand:#FF8A00;
  --brand2:#FF3B00;
  --ok:#45D483;
  --warn:#FFC857;
  --danger:#FF5C6C;
  --border:rgba(255,138,0,.13);
  --shadow:0 18px 45px rgba(0,0,0,.34);
  --detonado-orange:#FF8A00;
  --detonado-red:#FF3B00;
  --detonado-navy:#080E18;
  --detonado-surface:#101827;
  --detonado-surface-2:#182235;
}
html,body,button,input,textarea,select{font-family:"Poppins",Inter,"Segoe UI",Arial,sans-serif}
body{
  background:
    radial-gradient(circle at 78% -12%,rgba(255,59,0,.095),transparent 34%),
    radial-gradient(circle at 16% 6%,rgba(255,138,0,.07),transparent 28%),
    linear-gradient(180deg,#070C15 0%,#0A111D 56%,#080E18 100%);
  color:var(--text)
}
::selection{background:rgba(255,138,0,.32);color:#fff}
a{color:#FFAA45}
a:hover{color:#FFC06B}

.sidebar{
  background:linear-gradient(180deg,rgba(7,12,21,.98),rgba(10,17,29,.96));
  border-right-color:rgba(255,138,0,.14)
}
.card,.login-card,.context-panel,.panel-block{
  border-color:rgba(255,255,255,.075)
}
.nav button .lu-icon{color:#FF9A24}
.nav button:hover,.nav button.active{
  color:#fff;
  border-color:rgba(255,138,0,.24);
  background:linear-gradient(90deg,rgba(255,138,0,.14),rgba(255,59,0,.055))
}
.nav button:hover .lu-icon,.nav button.active .lu-icon{
  color:#FFB04D;
  filter:drop-shadow(0 0 8px rgba(255,138,0,.28))
}
.eyebrow{color:#FFAA45}
.btn.primary{
  color:#fff;
  background:linear-gradient(135deg,#FF9800 0%,#FF6A00 48%,#FF3B00 100%);
  box-shadow:0 10px 24px rgba(255,74,0,.16)
}
.btn.primary:hover{filter:brightness(1.06);box-shadow:0 12px 28px rgba(255,74,0,.24)}
.btn:focus-visible,.nav button:focus-visible,.search:focus-visible{
  outline:2px solid #FF9A24;
  outline-offset:2px
}
.topic:hover,.course-card:hover,.admin-card:hover,.list-item:hover{
  border-color:rgba(255,138,0,.34)
}
.search,.admin-panel-input,.panel-block .field input,.panel-block .field textarea,.panel-block .field select{
  background:#0A1320;
  border-color:rgba(255,255,255,.09)
}
.search:focus,.admin-panel-input:focus,.panel-block .field input:focus,.panel-block .field textarea:focus,.panel-block .field select:focus{
  border-color:rgba(255,138,0,.55);
  box-shadow:0 0 0 3px rgba(255,138,0,.09)
}
.xp-track span,.course-progress-track span,.context-track span,.quiz-progress>div{
  background:linear-gradient(90deg,#FF9B19 0%,#FF7200 48%,#FF3B00 100%);
  box-shadow:0 0 14px rgba(255,106,0,.24)
}
.progress-ring{
  background:conic-gradient(var(--brand) 0deg,rgba(255,255,255,.075) 0deg)
}
.side-card,.hero-main,.final-exam-card{
  background:linear-gradient(135deg,rgba(255,138,0,.10),rgba(255,59,0,.045))
}
.count-badge{
  color:#FFD1A3;
  border-color:rgba(255,138,0,.26);
  background:rgba(255,138,0,.11)
}
.filebox{
  border-color:rgba(255,138,0,.42);
  background:rgba(255,138,0,.045)
}
.study-assist{background:rgba(255,138,0,.022)}
.study-assist .btn.active{
  border-color:rgba(255,138,0,.62);
  background:rgba(255,138,0,.11)
}
.option:hover{border-color:rgba(255,138,0,.38)}

.levelup-up{
  background:linear-gradient(135deg,#FFA11A 0%,#FF7200 50%,#FF3B00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.official-logo-login{
  width:min(380px,94%);
  max-height:138px;
  margin:0 auto 8px;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.26))
}
.official-logo-sidebar{
  width:190px;
  max-height:70px;
  object-position:left center;
  filter:drop-shadow(0 5px 16px rgba(0,0,0,.22))
}
.official-up-mark{
  width:45px;height:45px;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(255,106,0,.16))
}
.sidebar-brand-copy{min-width:0}
.sidebar-brand-copy .official-logo-sidebar{display:block}

.login-card #loginBtn{
  border-color:rgba(255,160,60,.46);
  box-shadow:0 3px 0 #7B2600,0 0 22px rgba(255,106,0,.20)
}
.login-card .login-intro{color:#F2F4F8}
html[data-ui="desktop"] .login-card{
  border-color:rgba(255,138,0,.20)!important;
  background:linear-gradient(145deg,rgba(12,18,30,.42),rgba(9,14,24,.28))!important
}
.chewe-hud{
  border-color:rgba(255,138,0,.28)!important;
  background:rgba(7,13,24,.88)!important;
  box-shadow:inset 0 -2px rgba(255,90,0,.12),0 3px rgba(0,0,0,.32)!important
}
.chewe-sound{
  border-color:rgba(255,138,0,.26)!important;
  background:rgba(17,24,39,.82)!important
}
.chewe-sound[aria-pressed="true"]{
  color:#FFD2A6!important;
  border-color:rgba(255,138,0,.48)!important;
  background:rgba(255,106,0,.10)!important
}
.chewe-sound:focus-visible,.chewe-controls button:focus-visible,.chewe-stage:focus-visible{
  outline-color:#FF9A24!important
}
.chewe-xp{--meter-color:#FF8A00!important}
.chewe-gem-icon{color:#FF9A24!important}
.chewe-dpad{filter:drop-shadow(0 4px 0 #05080D) drop-shadow(0 0 7px rgba(255,138,0,.12))!important}
.chewe-dpad::before,.chewe-dpad::after{
  background:linear-gradient(145deg,#6B7280,#374151 55%,#111827)!important
}
.chewe-dpad::after{background:linear-gradient(145deg,#3B4658,#1F2937 55%,#111827)!important}
.chewe-arrow{background:#D8DEE8!important}
.chewe-actions button{
  border-color:#A95A1A!important;
  background:radial-gradient(circle at 35% 25%,#7B431D,#4A2A18 65%,#21150F)!important;
  box-shadow:inset 0 2px 2px rgba(255,196,132,.28),inset 0 -4px 3px #1C110B,0 4px 0 #05080D,0 0 9px rgba(255,106,0,.14)!important
}
.chewe-actions button[data-chewe-control="boost"]{
  color:#FFE0C2!important;border-color:#C7651D!important;
  background:radial-gradient(circle at 35% 25%,#96501F,#5E3019 65%,#2B1710)!important
}

/* Minha Evolução keeps its gamer personality while inheriting the brand. */
#evolution{
  --evo-cyan:#FF9A24;
  --evo-gold:#F6C65B;
  --evo-violet:#FF5B23;
  --evo-green:#69DCA1;
  --evo-panel:rgba(13,20,34,.88)
}
#evolution .evo-kicker{color:#FFAC54}
#evolution .evo-level-panel,#evolution .evo-panel{border-color:rgba(255,138,0,.18)}
#evolution .evo-level-panel::before,#evolution .evo-panel::before{
  border-top-color:#FF8A00;border-left-color:#FF8A00
}
#evolution .evo-level-panel::after,#evolution .evo-panel::after{
  border-right-color:#FF8A00;border-bottom-color:#FF8A00
}
#evolution .evo-level-panel{
  background:linear-gradient(125deg,rgba(255,138,0,.13),rgba(255,59,0,.045)),var(--evo-panel)
}
#evolution .evo-level-badge{
  border-color:rgba(255,91,35,.52);outline-color:rgba(255,91,35,.13);background:rgba(255,91,35,.055)
}
#evolution .evo-level-badge small{color:#FFC196}
#evolution .evo-meter{border-color:rgba(255,91,35,.24)}
#evolution .evo-meter-progress{border-color:rgba(255,154,36,.28)}
#evolution .evo-level-path>i{background:linear-gradient(90deg,rgba(255,154,36,.52),rgba(255,59,0,.26))}
#evolution .evo-level-node>span{border-color:rgba(255,138,0,.22);background:#111827}
#evolution .evo-level-node.is-done>span{border-color:rgba(255,154,36,.42);color:#FFAA45;background:rgba(255,138,0,.055)}
#evolution .evo-level-node.is-current>span{
  border-color:rgba(255,91,35,.76);outline-color:rgba(255,91,35,.20);
  background:rgba(255,91,35,.105);box-shadow:0 0 20px rgba(255,91,35,.12)
}
#evolution .evo-level-node.is-current small{color:#FFC0A2}
#evolution .evo-mission-icon{border-color:rgba(255,138,0,.22);color:#FF9A24;background:rgba(255,138,0,.05)}
#evolution .evo-ranking thead{background:rgba(255,138,0,.055)}
#evolution .evo-ranking small{color:#FFB569}
#evolution .evo-you{background:rgba(255,138,0,.075);box-shadow:inset 3px 0 #FF8A00}

@media(max-width:650px){
  .official-logo-login{width:min(350px,94%);max-height:112px}
  .official-logo-sidebar{width:176px}
}
@media(prefers-reduced-motion:reduce){
  .btn.primary{transition:none}
}


/* Mobile shell uses the same official dark/orange identity. */
html[data-ui="mobile"][data-mobile-shell="ready"] .mobile-shell-header,
html[data-ui="mobile"][data-mobile-shell="ready"] .mobile-shell-tabs{
  background:rgba(8,14,24,.97);
  border-color:rgba(255,138,0,.16)
}
.mobile-shell-kicker{color:#FF9A24}
.mobile-shell-back{
  border-color:rgba(255,138,0,.18);
  background:#182235
}
.mobile-shell-tabs button{color:#A7B0C0}
.mobile-shell-tabs button.active{
  color:#fff;
  background:linear-gradient(145deg,rgba(255,138,0,.17),rgba(255,59,0,.075))
}
.mobile-shell-tabs button.active .lu-icon{color:#FF9A24}
html[data-ui="mobile"][data-mobile-shell="ready"] .context-panel{
  background:#080E18;
  border-left-color:rgba(255,138,0,.16)
}
html[data-ui="mobile"][data-mobile-shell="ready"] .sidebar-backdrop,
html[data-ui="mobile"][data-mobile-shell="ready"] .context-backdrop{
  background:rgba(3,7,13,.72)
}


/* V4.29.2 — Mobile login fit and brand rendering corrections. */
@media(max-width:1000px){
  .login-screen{
    height:100dvh;
    min-height:100dvh;
    padding:max(6px,env(safe-area-inset-top,0px)) 12px max(8px,env(safe-area-inset-bottom,0px));
    gap:6px;
    overflow:hidden
  }
  .login-card{
    width:min(100%,420px);
    max-width:420px;
    padding:4px 10px 2px
  }
  .official-logo-login{
    width:min(300px,80vw);
    max-height:100px;
    margin:0 auto 2px
  }
  .login-card .login-intro{
    font-size:12px;
    line-height:1.3;
    margin:2px 0 6px
  }
  .login-card #loginBtn{
    min-height:44px;
    padding:9px 14px
  }
  .login-card .pwa-controls{
    margin-top:6px;
    gap:5px
  }
  .login-card .pwa-controls[hidden]{display:none!important}
  .login-card .pwa-controls .btn{
    min-height:40px;
    padding:8px 12px;
    font-size:12px;
    line-height:1.2
  }
  .login-card .pwa-update-note{
    margin:1px 0;
    font-size:10px;
    line-height:1.25
  }
  .chewe-hud{
    width:min(100%,440px);
    padding:7px 9px
  }
  .chewe-hud-head{
    margin-bottom:5px;
    padding-bottom:5px
  }
  .chewe-meters{gap:7px}
  .chewe-controls{
    left:max(10px,env(safe-area-inset-left,0px));
    right:max(10px,env(safe-area-inset-right,0px));
    bottom:max(8px,env(safe-area-inset-bottom,0px))
  }
  .chewe-caption{
    bottom:calc(118px + env(safe-area-inset-bottom,0px))
  }
}
@media(max-width:650px) and (max-height:850px){
  .official-logo-login{
    width:min(270px,74vw);
    max-height:90px
  }
  .login-card .login-intro{font-size:11px;margin-bottom:5px}
  .login-card #loginBtn{min-height:42px}
  .login-card .pwa-controls .btn{min-height:38px;padding:7px 10px}
  .chewe-hud{padding:6px 8px}
  .chewe-dpad{transform:scale(.9);transform-origin:left bottom}
  .chewe-actions{transform:scale(.9);transform-origin:right bottom}
}
@media(max-width:420px){
  .official-logo-login{width:min(260px,76vw)}
  .official-logo-sidebar{width:190px;max-height:64px}
}


/* V4.29.3 — exact supplied brand assets; no synthetic icon. */
.official-logo-login{
  width:min(390px,90vw);
  max-height:none;
  height:auto;
  object-fit:contain;
  object-position:center;
  margin:0 auto 6px;
  border-radius:0;
  background:#000;
  filter:none
}
.official-logo-sidebar{
  width:min(215px,100%);
  max-height:none;
  height:auto;
  object-fit:contain;
  object-position:left center;
  background:#000;
  filter:none
}
.official-up-mark{
  display:none;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:8px;
  background:#000;
  filter:none!important;
  transform:none!important
}
.app.sidebar-collapsed .sidebar-toggle{
  width:58px!important;
  height:58px!important;
  flex:0 0 58px!important;
  padding:4px!important;
  border:1px solid rgba(255,138,0,.5)!important;
  border-radius:12px!important;
  background:#05080D!important;
  overflow:hidden!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.025) inset!important
}
.app.sidebar-collapsed .sidebar-toggle::after{content:none!important}
.app.sidebar-collapsed .sidebar-collapse-glyph{display:none!important}
.app.sidebar-collapsed .official-up-mark{display:block!important}
.app.sidebar-collapsed .sidebar-brand-row{
  align-items:center!important;
  justify-content:center!important
}
.app.sidebar-collapsed .sidebar-toggle:hover .official-up-mark{
  transform:none!important;
  filter:none!important
}
@media(max-width:1000px){
  .official-logo-login{
    width:min(340px,88vw);
    margin-bottom:4px
  }
  .official-logo-sidebar{
    width:min(230px,calc(100% - 50px));
    max-height:none
  }
}
@media(max-width:420px){
  .official-logo-login{width:min(315px,88vw)}
  .official-logo-sidebar{width:min(220px,calc(100% - 50px))}
}


/* V4.29.1 — supplied transparent brand assets. */
.official-logo-login,
.official-logo-sidebar,
.official-up-mark{
  background:transparent!important;
  mix-blend-mode:normal;
}
.app.sidebar-collapsed .sidebar-toggle{
  border-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
}
.app.sidebar-collapsed .sidebar-toggle:hover{
  border-color:rgba(255,138,0,.18)!important;
  background:rgba(255,138,0,.055)!important;
}