:root{
  --steel-blue:#5f8eb7;
  --steel-aqua:#35d9f5;
  --steel-ok:#58d99d;
  --steel-warn:#ffbd58;
  --steel-hot:#ff684f;
}

.brand small{
  letter-spacing:1.7px;
}

.page-heading h1{
  font-size:30px;
}

.main-mode{
  flex-basis:142px;
}

.expo-meta{
  position:fixed;
  right:18px;
  bottom:58px;
  z-index:45;
  display:flex;
  gap:8px;
  color:#7e9bb5;
  font-size:8px;
}

.expo-meta span{
  padding:6px 8px;
  border:1px solid rgba(95,142,183,.25);
  border-radius:5px;
  background:rgba(4,15,28,.86);
}

.expo-mode{
  display:flex;
  gap:5px;
  padding:4px;
  border:1px solid rgba(53,217,245,.22);
  border-radius:7px;
  background:rgba(5,19,34,.88);
}

.expo-mode button{
  border:0;
  border-radius:5px;
  padding:7px 9px;
  background:transparent;
  color:#7fa1b9;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

.expo-mode button.active{
  background:linear-gradient(135deg,#0c87b5,#1c6ad8);
  color:white;
}

.command-ribbon{
  grid-template-columns:1fr 1fr 1fr 1fr 144px;
}

.kpi-grid{
  grid-template-columns:repeat(6,1fr);
  height:112px;
}

.kpi strong{
  font-size:34px;
}

.kpi-top span{
  font-size:9px;
}

.kpi p{
  font-size:8px;
}

.overview-grid{
  grid-template-columns:2.05fr .82fr;
  min-height:410px;
}

.process-backdrop{
  background-image:linear-gradient(90deg,rgba(3,9,16,.13),rgba(3,11,22,.04)),url('assets/steel-meltshop-digital-twin.png')!important;
}

.twin-topline span:nth-child(1) b,
.twin-topline span:nth-child(2) b,
.twin-topline span:nth-child(3) b{
  font-size:8px;
}

.twin-footer b{
  font-size:13px;
}

.ai-brief-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
  margin-top:8px;
}

.ai-brief-grid button{
  border:1px solid rgba(53,217,245,.22);
  background:rgba(5,20,37,.75);
  border-radius:6px;
  padding:8px;
  text-align:left;
  cursor:pointer;
}

.ai-brief-grid b{
  display:block;
  font-size:9px;
}

.ai-brief-grid small{
  color:#7791a8;
  font-size:7px;
}

.alert-row{
  min-height:42px;
}

.scene-grid{
  height:540px;
}

.timeline{
  background-image:linear-gradient(90deg,rgba(10,27,45,.7),rgba(6,17,31,.82)),url('assets/control-room.png');
}

.timeline:after{
  content:"MELTSHOP PACER · HEAT H260902-017";
}

.stage{
  width:136px;
}

.plan-compare{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:10px;
}

.plan-card{
  border:1px solid rgba(95,142,183,.26);
  border-radius:6px;
  padding:9px;
  background:rgba(5,20,37,.74);
}

.plan-card.active{
  border-color:var(--steel-aqua);
  box-shadow:inset 0 0 18px rgba(53,217,245,.08);
}

.plan-card b{
  display:block;
  font-size:10px;
}

.plan-card span{
  display:block;
  color:#7e98ad;
  font-size:7px;
  margin-top:5px;
}

.plan-card em{
  color:var(--steel-ok);
  font-style:normal;
}

.state-machine{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
  margin-top:10px;
}

.state-machine span{
  padding:7px 4px;
  border-radius:5px;
  border:1px solid rgba(95,142,183,.22);
  text-align:center;
  font-size:7px;
  color:#7894aa;
}

.state-machine span.done{
  color:#eaffff;
  border-color:rgba(88,217,157,.42);
  background:rgba(88,217,157,.08);
}

.state-machine span.active{
  color:white;
  border-color:var(--steel-aqua);
  background:rgba(53,217,245,.12);
}

.energy-flow{
  height:154px;
}

.utility-strip{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:6px;
  margin-top:8px;
}

.utility-strip span{
  padding:8px;
  border-radius:5px;
  border:1px solid rgba(95,142,183,.22);
  background:rgba(5,20,37,.76);
  font-size:7px;
  color:#7792aa;
}

.utility-strip b{
  display:block;
  color:#e9f8ff;
  font-size:10px;
  margin-top:4px;
}

.blend-layout{
  grid-template-columns:.9fr 1.2fr .9fr;
}

.material-list{
  margin-top:9px;
  gap:7px;
}

.material{
  min-height:62px;
}

.chem-panel{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
  margin-top:10px;
}

.chem-panel span{
  padding:9px 7px;
  border:1px solid rgba(95,142,183,.22);
  background:rgba(5,20,37,.72);
  border-radius:5px;
  font-size:7px;
  color:#7e98ae;
}

.chem-panel b{
  display:block;
  color:#e8f8ff;
  font-size:10px;
  margin-top:4px;
}

.logistics-layout{
  grid-template-columns:1.7fr .78fr;
  height:540px;
}

.site-map{
  background-color:#071421;
}

.site-map .zone{
  min-width:105px;
}

.resource-conflict{
  position:absolute;
  left:39%;
  top:38%;
  width:250px;
  border:1px solid rgba(255,189,88,.42);
  border-radius:6px;
  background:rgba(38,26,13,.8);
  padding:8px;
  color:#ffd99e;
  font-size:8px;
  z-index:5;
}

.resource-conflict b{
  display:block;
  color:white;
  font-size:10px;
}

.ladle-path{
  position:absolute;
  left:24%;
  top:53%;
  width:440px;
  height:2px;
  border-top:3px dashed var(--steel-warn);
  transform:rotate(-12deg);
  transform-origin:left;
  z-index:4;
}

.drawer{
  width:460px;
  right:-480px;
}

.detail-stats span b{
  font-size:14px;
}

.approval-box{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(53,217,245,.22);
  border-radius:7px;
  background:rgba(5,20,37,.82);
}

.approval-box label{
  display:block;
  color:#87a2b8;
  font-size:8px;
  margin-bottom:6px;
}

.approval-box select,.approval-box input{
  width:100%;
  border:1px solid rgba(95,142,183,.32);
  border-radius:5px;
  background:#06182b;
  color:white;
  padding:8px;
  font-size:10px;
  margin-bottom:8px;
}

body.zh .timeline:after{
  content:"炼钢节奏工作台 · 炉次 H260902-017";
}

body.zh .sidebar:before{
  content:"运营模块";
}

@media(max-height:820px){
  .page-heading h1{font-size:24px}
  .kpi strong{font-size:27px}
  .kpi-grid{height:88px}
  .overview-grid{min-height:315px}
  .scene-grid,.logistics-layout{height:420px}
  .expo-meta{display:none}
}