:root{
  --prod-bg:#070c13;
  --prod-surface:#0d1622;
  --prod-surface-2:#111d2b;
  --prod-surface-3:#152438;
  --prod-border:#22364b;
  --prod-border-strong:#36536f;
  --prod-text:#f2f6fb;
  --prod-muted:#8fa6bd;
  --prod-blue:#67b7ff;
  --prod-cyan:#69e1ff;
  --prod-gold:#f2c66b;
  --prod-green:#55d690;
  --prod-danger:#e9808b;
  --prod-shadow:0 18px 50px rgba(0,0,0,.28);
}

body{
  background:
    radial-gradient(circle at 50% -20%,rgba(55,112,172,.14),transparent 35%),
    linear-gradient(180deg,#070b11 0%,#08101a 45%,#070b11 100%)!important;
  color:var(--prod-text);
}

.app{max-width:1240px!important;padding-top:18px!important}
.card{
  background:linear-gradient(180deg,rgba(18,30,45,.96),rgba(12,21,32,.98))!important;
  border-color:var(--prod-border)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.025),var(--prod-shadow)!important;
}
.btn{
  border-color:#2d4359!important;
  background:#101c29!important;
  border-radius:10px!important;
  transition:transform .12s ease,border-color .12s ease,background .12s ease!important;
}
.btn:hover{transform:translateY(-1px);border-color:#4d6b88!important;background:#142438!important}
.btn.primary{background:linear-gradient(180deg,#f6ce76,#eab95b)!important;border-color:#f0c46a!important;color:#10151c!important}
.tabs{gap:5px!important;background:rgba(7,12,19,.86)!important}
.tab{border-radius:10px!important}
.tab.active{box-shadow:0 5px 18px rgba(233,188,93,.16)}

.production-site-links{
  display:flex;
  gap:12px;
  align-items:center;
  margin-left:auto;
  font-size:12px;
}
.production-site-links a{color:#a7bad0;text-decoration:none}
.production-site-links a:hover{color:#fff}

.production-sync-card{
  min-height:0!important;
  margin-bottom:12px!important;
  padding:13px 15px!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(68,151,220,.11),transparent 34%),
    linear-gradient(180deg,#111e2d,#0d1722)!important;
}
.production-sync-card>.row{align-items:flex-start!important}
.production-sync-card #hiscoresStatus{
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  border-top:1px solid rgba(111,151,190,.16)!important;
  margin-top:10px!important;
  padding-top:10px!important;
}
.production-sync-card #hiscoresStatus>span:not(.sync-dot),
.production-sync-card #hiscoresStatus>strong{
  border:1px solid #294059;
  background:#0a141f;
  padding:4px 7px;
  border-radius:999px;
  color:#a9bed3;
  font-weight:600;
}
.production-sync-card #hiscoresStatus>strong{color:#edf7ff}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--prod-green);box-shadow:0 0 10px rgba(85,214,144,.6)}

/* Important: the production Skills layout must never override the base .view visibility state. */
.production-skills-view:not(.active){display:none!important}
.production-skills-view.active{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:0!important;
}
.production-skills-view #hiscoresSyncCard,
.production-skills-view .card:has(#skillGrid){width:100%!important}

.production-skill-grid{
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:8px!important;
  margin-top:12px;
}
.production-skill{
  min-height:92px!important;
  display:grid!important;
  grid-template-columns:38px 1fr!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  gap:4px 9px!important;
  padding:9px!important;
  border:1px solid #22374b!important;
  background:linear-gradient(180deg,#0e1925,#0a131d)!important;
  border-radius:12px!important;
  transition:transform .12s ease,border-color .12s ease,background .12s ease;
}
.production-skill:hover{transform:translateY(-1px);border-color:#3d5e7c!important;background:linear-gradient(180deg,#112032,#0c1723)!important}
.production-skill .skill-icon{
  grid-column:1;
  grid-row:1 / 3;
  width:36px;
  height:36px;
  object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));
  justify-self:center;
}
.production-skill .skill-name{
  grid-column:2;
  grid-row:1;
  font-size:10px!important;
  color:#8ea7bf!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:700!important;
}
.production-skill input{
  grid-column:2;
  grid-row:2;
  width:100%!important;
  margin:0!important;
  padding:6px 7px!important;
  font-size:17px!important;
  font-weight:850!important;
  border-radius:8px!important;
  background:#08111a!important;
}
.production-skill.skill-icon-missing{grid-template-columns:1fr!important}
.production-skill.skill-icon-missing .skill-name,
.production-skill.skill-icon-missing input{grid-column:1!important}

.production-skill-actions{margin-left:auto;display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.production-gp-control{display:grid;gap:4px}
.production-gp-label{font-size:10px;color:#8da4bb;font-weight:700}
.production-gp-input-wrap{display:flex;align-items:center;background:#08111a;border:1px solid #283b50;border-radius:9px;overflow:hidden}
.production-coin{padding:0 8px;font-size:10px;color:#f2c66b;font-weight:900;border-right:1px solid #283b50}
#productionGpInput{width:130px!important;border:0!important;border-radius:0!important;padding:7px 8px!important;background:transparent!important}

.production-route-gate{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
  border-color:#69572b!important;
  background:linear-gradient(180deg,#1c190e,#11120e)!important;
}
.production-route-gate[hidden]{display:none!important}
.production-route-gate strong{color:#f3d481;font-size:15px}
.production-route-gate p{margin:3px 0 0;color:#a9a184;font-size:12px;line-height:1.5}
.route-gate-icon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:#f2c66b;background:#2a2410;border:1px solid #5e5028;font-weight:900}
.production-retired{display:none!important}

@media(max-width:1100px){.production-skill-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media(max-width:780px){
  .production-skill-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .production-route-gate{grid-template-columns:auto 1fr}
  .production-route-gate .btn{grid-column:1/-1}
  .production-site-links{width:100%;margin-left:0}
}
@media(max-width:480px){
  .production-skill-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .production-skill{grid-template-columns:32px 1fr!important}
  .production-skill .skill-icon{width:30px;height:30px}
}