/* Final interaction polish — visual only, no application logic changes. */

.topline{display:none!important;height:0!important;min-height:0!important;background:transparent!important;box-shadow:none!important}

/* Navigation */
header{min-height:88px!important}
.nav{gap:clamp(20px,2.3vw,36px)!important}
.nav button{
  min-height:48px!important;
  padding:14px 10px!important;
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:1.55px!important;
  color:#819074!important;
  transform:translateZ(0);
  transition:color .2s ease,background-color .2s ease,transform .18s cubic-bezier(.22,.8,.22,1),text-shadow .2s ease!important;
}
.nav button:hover{color:var(--text)!important;transform:translateY(-2px)}
.nav button.active{color:var(--lime)!important;text-shadow:0 0 18px rgba(214,254,80,.18)}
.nav button:after{bottom:5px!important;height:2px!important}
.nav button[data-tab="jobs"]{position:relative;isolation:isolate}
.nav button[data-tab="jobs"]:before{
  content:'';position:absolute;z-index:-1;inset:7px -10px;border:1px solid transparent;
  background:rgba(214,254,80,0);opacity:0;transform:scale(.96);
  transition:opacity .2s ease,transform .22s cubic-bezier(.22,.8,.22,1),background-color .2s ease,border-color .2s ease;
}
.nav button[data-tab="jobs"]:hover{color:var(--lime)!important;text-shadow:0 0 22px rgba(214,254,80,.28)}
.nav button[data-tab="jobs"]:hover:before{opacity:1;transform:scale(1);border-color:rgba(214,254,80,.34);background:rgba(214,254,80,.045)}
.nav button[data-tab="jobs"].active:before{opacity:.65;transform:scale(1);border-color:rgba(214,254,80,.18);background:rgba(214,254,80,.025)}

/* Homepage button, injected next to wallet by ui-navigation.js */
.home-link{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:1px solid rgba(214,254,80,.28);
  background:transparent;
  color:#9daa91;
  font-family:var(--pixel);
  font-size:8px;
  line-height:1;
  letter-spacing:.6px;
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s cubic-bezier(.22,.8,.22,1);
}
.home-link:hover{background:var(--lime);color:#050805;border-color:var(--lime);transform:translateY(-2px)}

/* Requested headline highlight: static inverted block. */
.hero h1{
  width:fit-content!important;
  max-width:min(720px,100%)!important;
  padding:12px 15px 11px!important;
  background:var(--lime)!important;
  color:#050805!important;
  text-shadow:none!important;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.hero p{margin-top:20px!important}

/* Economic loop remains informational, not an inverted button. */
.loop-step.active{
  margin:0!important;
  padding:14px 0!important;
  background:transparent!important;
  color:var(--lime)!important;
  border-top-color:rgba(214,254,80,.16)!important;
  cursor:default!important;
  transform:none!important;
  box-shadow:none!important;
}
.loop-step.active b{color:var(--lime)!important;text-shadow:none!important}
.loop-step.active:before{display:block!important;content:''!important;background:var(--lime)!important}
.loop-step.active:hover{background:transparent!important;color:var(--lime)!important;transform:none!important}

/* Sidebar collapse control: permanently inverted so it is easy to find. */
.sidebar-toggle{
  background:var(--lime)!important;
  color:#050805!important;
  border-color:var(--lime)!important;
  box-shadow:0 0 0 1px rgba(214,254,80,.08),0 5px 18px rgba(214,254,80,.08)!important;
  animation:sidebarHint 3.8s ease-in-out infinite;
}
.sidebar-toggle:hover{
  background:var(--lime)!important;
  color:#050805!important;
  border-color:var(--lime)!important;
  transform:translateX(2px) scale(1.04)!important;
  animation:none;
}

/* Remove hidden-sidebar content from layout so it cannot create tall blank pages. */
.shell.sidebar-collapsed{min-height:0!important}
.shell.sidebar-collapsed .left-sidebar-content{display:none!important}
.shell.sidebar-collapsed>aside:first-child{align-self:stretch!important;min-height:0!important;height:auto!important}
.shell.sidebar-collapsed main{padding-bottom:28px!important}

/* Job tiers — invert only, no selected badge or decorative stroke. */
.tier{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  min-height:0!important;
  padding:24px 22px 22px!important;
  transition:transform .22s cubic-bezier(.22,.8,.22,1),background-color .18s ease,color .18s ease!important;
}
.tier:before,.tier.selected:after{display:none!important;content:none!important}
.tier:hover,.tier.selected{
  transform:translateY(-3px)!important;
  background:var(--lime)!important;
  color:#050805!important;
  outline:0!important;
  box-shadow:none!important;
}
.tier .tier-num{
  margin-bottom:9px!important;
  font-size:14px!important;
  line-height:1!important;
  letter-spacing:.6px;
}
.tier h3{
  margin:0 0 9px!important;
  font-size:13px!important;
  line-height:1.35!important;
}
.tier .tier-role{
  min-height:34px;
  margin-bottom:18px!important;
  font-size:11px!important;
  line-height:1.5!important;
  color:#88977c!important;
}
.tier .tier-row{
  display:grid!important;
  grid-template-columns:minmax(94px,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  min-height:34px;
  margin:0!important;
  padding:8px 0!important;
  border-top:1px solid rgba(214,254,80,.075)!important;
  font-size:12px!important;
  line-height:1.25!important;
}
.tier .tier-row span{
  color:#849177!important;
  font-size:11px!important;
  line-height:1.3!important;
}
.tier .tier-row b{
  color:#e6f5da!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.25!important;
  text-align:right!important;
  white-space:nowrap;
}
.tier .risk{
  margin-top:16px!important;
  padding:8px 9px!important;
  font-size:9px!important;
  font-weight:700;
  letter-spacing:.55px!important;
}
.tier:hover .tier-num,.tier.selected .tier-num,
.tier:hover h3,.tier.selected h3,
.tier:hover .tier-role,.tier.selected .tier-role,
.tier:hover .tier-row,.tier.selected .tier-row,
.tier:hover .tier-row span,.tier.selected .tier-row span,
.tier:hover .tier-row b,.tier.selected .tier-row b,
.tier:hover .risk,.tier.selected .risk{color:#050805!important;text-shadow:none!important}
.tier:hover .tier-row,.tier.selected .tier-row{border-top-color:rgba(5,8,5,.14)!important}
.tier:hover .risk,.tier.selected .risk{opacity:.78}
.tier.selected > .risk:before,.tier.selected > .risk:after{display:none!important;content:none!important}

/* Information hierarchy: labels recede, values/actions stand forward. */
.section-title{color:var(--lime)!important;text-shadow:0 0 16px rgba(214,254,80,.07)}
.summary-row{
  min-height:34px;
  align-items:center!important;
  padding:8px 0!important;
  margin:0!important;
}
.summary-row span{font-size:11px!important;color:#829075!important}
.summary-row b{font-size:12px!important;color:var(--lime)!important;font-weight:700!important}
.balance-row strong{color:var(--lime)!important;font-weight:700!important}
#pendingH00,#pendingTSLA{font-size:27px!important;line-height:1!important}
.pill.lime{background:var(--lime)!important;color:#050805!important;border-color:var(--lime)!important;font-weight:700}
.worker-name,.nft-name{color:var(--lime)!important}

/* Light micro-interactions. */
.wallet-btn:not(:disabled):hover,.btn-primary:not(:disabled):hover{box-shadow:0 0 0 1px rgba(214,254,80,.18),0 8px 28px rgba(214,254,80,.08)!important}
.nft .art img{transition:transform .34s cubic-bezier(.22,.8,.22,1),filter .28s ease!important}
.nft:hover .art img{transform:scale(1.025);filter:brightness(1.035)}
.stat .v{transition:color .2s ease,text-shadow .2s ease,transform .2s cubic-bezier(.22,.8,.22,1)!important}
.stat:hover .v{color:#e0ff6a!important;text-shadow:0 0 18px rgba(214,254,80,.12);transform:translateY(-1px)}
.sidebar-flow-group[data-flow="active-job"],.sidebar-flow-group[data-flow="rewards"]{position:relative;overflow:hidden}
.sidebar-flow-group[data-flow="active-job"]:after,.sidebar-flow-group[data-flow="rewards"]:after{
  content:'';position:absolute;left:-35%;right:100%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(214,254,80,.5),transparent);animation:quietScan 5.5s ease-in-out infinite;
}

@keyframes sidebarHint{
  0%,82%,100%{box-shadow:0 0 0 1px rgba(214,254,80,.08),0 5px 18px rgba(214,254,80,.08)}
  90%{box-shadow:0 0 0 1px rgba(214,254,80,.18),0 5px 25px rgba(214,254,80,.18)}
}
@keyframes quietScan{
  0%,62%{left:-35%;right:100%;opacity:0}
  70%{opacity:.75}
  86%{left:100%;right:-35%;opacity:0}
  100%{left:100%;right:-35%;opacity:0}
}

@media(max-width:1100px){
  .tier{padding:20px 16px!important}
  .tier .tier-row{grid-template-columns:minmax(86px,1fr) auto!important;gap:8px!important;font-size:11px!important}
  .tier .tier-row span{font-size:10px!important}
  .tier .tier-row b{font-size:11px!important}
}
@media(max-width:800px){
  header{min-height:80px!important}
  .nav{gap:9px!important}
  .nav button{min-height:42px!important;padding:11px 5px!important;font-size:9px!important;letter-spacing:.8px!important}
  .nav button[data-tab="jobs"]:before{inset:5px -3px}
  .home-link{min-height:36px;padding:9px 10px;font-size:7px}
  .hero h1{padding:10px 11px 9px!important}
  .shell.sidebar-collapsed .left-sidebar-content{display:grid!important}
  .shell.sidebar-collapsed{min-height:initial!important}
}
@media(prefers-reduced-motion:reduce){
  .sidebar-toggle,.sidebar-flow-group[data-flow="active-job"]:after,.sidebar-flow-group[data-flow="rewards"]:after{animation:none!important}
}