/* 集装箱装柜计算器 —— 深海蓝 · 柜体楞条 */
.c60{
  --a:#1e3a8a;
  --a2:#60a5fa;
  --a-soft:rgba(30,58,138,.10);
  --a-line:rgba(30,58,138,.28);
}
.c60-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}

.c60-hero{
  background:
    radial-gradient(700px 320px at 10% 0%, rgba(255,255,255,.82), transparent 60%),
    repeating-linear-gradient(90deg, rgba(30,58,138,.055) 0 2px, transparent 2px 22px),
    linear-gradient(135deg,#eff6ff 0%,#dbeafe 46%,#f8fbff 100%);
}
:root[data-theme="dark"] .c60-hero{
  background:
    radial-gradient(700px 320px at 10% 0%, rgba(30,58,138,.24), transparent 60%),
    repeating-linear-gradient(90deg, rgba(96,165,250,.06) 0 2px, transparent 2px 22px),
    linear-gradient(135deg,#071022 0%,#0a1733 48%,#0b1322 100%);
}

.cl-art{min-height:190px;}
.cl-container{
  position:relative;
  width:236px;
  height:126px;
  border-radius:4px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 3px, transparent 3px 26px),
    linear-gradient(160deg,#1d4ed8,#1e3a8a 72%);
  border:2px solid #0f2461;
  box-shadow:0 22px 38px rgba(15,36,97,.32);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:0 10px 8px;
  box-sizing:border-box;
  transform:rotate(-1.5deg);
}
.cl-container::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:8px;
  background:#0f2461;
}
.cl-container i{
  display:block;
  width:10px;
  height:86px;
  border-radius:2px;
  background:rgba(148,197,255,.18);
  border:1px solid rgba(148,197,255,.28);
}
.cl-container span{
  position:absolute;
  right:12px;
  top:18px;
  font-size:15px;
  font-weight:900;
  letter-spacing:2px;
  color:#dbeafe;
}
.cl-art .chip{white-space:nowrap;}
.cl-art .chip.c1{top:-2px;right:-8px;left:auto;}
.cl-art .chip.c2{bottom:-2px;left:-6px;}
.cl-art .chip b{color:#1e3a8a;}

.c60-metric.is-hero{
  background:linear-gradient(135deg,#2563eb,#172554 78%);
  box-shadow:0 16px 34px rgba(30,58,138,.32);
}
.c60-chip.on{background:rgba(30,58,138,.12);border-color:#1e3a8a;color:#1e3a8a;}
.c60-bar-row .bf{background:linear-gradient(90deg,#60a5fa,#1e3a8a);}

/* 柜内俯视 SVG */
.cl-svg{margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--soft);overflow-x:auto;}
.cl-svg svg{display:block;width:100%;height:auto;min-width:300px;}
.cl-svg .cl-cap{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:12px;font-weight:800;color:var(--muted);}
.cl-svg .cl-cap span:last-child{color:var(--ink2);}
.cl-svg .cl-body{fill:#dbeafe;stroke:#1e3a8a;stroke-width:1.6;}
.cl-svg .cl-box{fill:#60a5fa;stroke:#1e3a8a;stroke-width:.5;opacity:.82;}
.cl-svg .cl-dim{stroke:#93c5fd;stroke-width:1.2;}
.cl-svg .cl-dimtext{font-size:11px;fill:#64748b;font-weight:700;}
.cl-svg .cl-axis{font-size:11px;font-weight:800;fill:#1e3a8a;}

/* 利用率环图 */
.cl-ring-wrap{display:flex;align-items:center;gap:18px;margin-top:16px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--soft);}
.cl-ring{width:128px;height:128px;flex:0 0 auto;}
.cl-ring svg{display:block;width:100%;height:100%;}
.cl-ring .cl-ring-bg{fill:none;stroke:rgba(30,58,138,.13);stroke-width:14;}
.cl-ring .cl-ring-fg{fill:none;stroke:#2563eb;stroke-width:14;stroke-linecap:round;transform:rotate(-90deg);transform-origin:64px 64px;transition:stroke-dasharray .4s ease;}
.cl-ring .cl-ring-t{font-size:22px;font-weight:900;fill:#1e3a8a;}
.cl-ring .cl-ring-s{font-size:10px;fill:#64748b;font-weight:700;}
.cl-ring-note{font-size:12px;line-height:1.8;color:var(--muted);font-weight:700;}
.cl-ring-note b{display:block;font-size:13px;color:var(--ink);margin-bottom:2px;}

#clTypeTable tbody tr:nth-child(even) td{background:rgba(30,58,138,.035);}
#clTypeTable td:first-child{font-weight:800;color:var(--ink);}
#clTypeTable td{font-variant-numeric:tabular-nums;}
#clTypeTable tr.is-current td{background:rgba(37,99,235,.09);}

@media (max-width:640px){
  .c60-grid3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cl-svg{padding:10px;}
  .cl-svg .cl-cap{flex-direction:column;gap:2px;}
  .cl-ring-wrap{flex-direction:column;align-items:flex-start;}
  .cl-art{display:none;}
}