.cod-control-board{
  margin:16px 0 20px;
  padding:18px;
  border:2px solid #7dd3fc;
  border-radius:20px;
  background:linear-gradient(145deg,#f0f9ff,#ecfeff);
  box-shadow:0 12px 28px rgba(14,116,144,.1);
}
.cod-control-board.is-clear{
  border-color:#a7f3d0;
  background:linear-gradient(145deg,#f0fdf4,#ecfdf5);
}
.cod-control-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.cod-control-head h3{
  margin:2px 0 4px;
  color:#0c4a6e;
  font-size:1.18rem;
}
.cod-control-head p{
  margin:0;
  color:#475569;
  font-size:.84rem;
}
.cod-control-head>strong{
  flex:0 0 auto;
  padding:9px 12px;
  border-radius:12px;
  background:#075985;
  color:#fff;
  font-size:.88rem;
}
.cod-control-board.is-clear .cod-control-head>strong{background:#047857}
.cod-stage-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.cod-stage-summary article{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:4px 9px;
  align-items:center;
  padding:12px;
  border:1px solid #bae6fd;
  border-radius:14px;
  background:rgba(255,255,255,.88);
}
.cod-stage-summary small{
  grid-row:1/3;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:#e0f2fe;
  color:#0369a1;
  font-weight:950;
}
.cod-stage-summary b{color:#0f172a;font-size:.86rem}
.cod-stage-summary strong{justify-self:end;color:#075985;font-size:1.1rem}
.cod-stage-summary span{grid-column:2/4;color:#64748b;font-size:.75rem}
.cod-stage-summary .collected{border-color:#fde68a;background:#fffbeb}
.cod-stage-summary .collected small{background:#fef3c7;color:#a16207}
.cod-stage-summary .remitted{border-color:#a7f3d0;background:#f0fdf4}
.cod-stage-summary .remitted small{background:#d1fae5;color:#047857}
.cod-control-list{
  display:grid;
  gap:8px;
  margin-top:12px;
}
.cod-control-row{
  display:grid;
  grid-template-columns:auto minmax(180px,1.4fr) minmax(180px,1fr) auto minmax(160px,auto);
  gap:12px;
  align-items:center;
  padding:12px;
  border:1px solid #bae6fd;
  border-radius:14px;
  background:#fff;
}
.cod-control-row.collected{border-color:#fbbf24;box-shadow:inset 4px 0 #f59e0b}
.cod-step{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#0284c7;
  color:#fff;
  font-weight:950;
}
.cod-control-row.collected .cod-step{background:#d97706}
.cod-job,.cod-state{display:flex;min-width:0;flex-direction:column}
.cod-job b,.cod-state b{overflow:hidden;color:#0f172a;text-overflow:ellipsis;white-space:nowrap}
.cod-job small,.cod-state small{overflow:hidden;color:#64748b;font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}
.cod-amount{color:#0c4a6e;white-space:nowrap}
.cod-action{min-height:40px;white-space:nowrap}
.cod-action.collected{background:linear-gradient(135deg,#0369a1,#0891b2)}
.cod-action.remitted{background:linear-gradient(135deg,#047857,#10b981)}
.cod-waiting-action{
  max-width:190px;
  padding:8px 10px;
  border-radius:10px;
  background:#f1f5f9;
  color:#64748b;
  font-size:.75rem;
  line-height:1.35;
  text-align:center;
}
html[data-dark="true"] .cod-control-board{
  border-color:#0e7490;
  background:linear-gradient(145deg,#082f49,#083344);
}
html[data-dark="true"] .cod-control-head h3,
html[data-dark="true"] .cod-control-head p{color:#e0f2fe}
html[data-dark="true"] .cod-stage-summary article,
html[data-dark="true"] .cod-control-row{
  border-color:#155e75;
  background:#0f172a;
}
html[data-dark="true"] .cod-stage-summary b,
html[data-dark="true"] .cod-job b,
html[data-dark="true"] .cod-state b{color:#f8fafc}
@media(max-width:980px){
  .cod-stage-summary{grid-template-columns:1fr}
  .cod-control-row{grid-template-columns:auto 1fr auto}
  .cod-state{grid-column:2/3}
  .cod-amount{grid-column:3;grid-row:1}
  .cod-control-row .cod-action,
  .cod-control-row .cod-waiting-action{grid-column:2/4;width:100%;max-width:none}
}
@media(max-width:640px){
  .cod-control-board{padding:13px}
  .cod-control-head{flex-direction:column}
  .cod-control-head>strong{width:100%;text-align:center}
  .cod-control-row{grid-template-columns:auto 1fr}
  .cod-amount{grid-column:2;grid-row:auto}
  .cod-control-row .cod-action,
  .cod-control-row .cod-waiting-action{grid-column:1/3}
}