.scc{ --bg:#fff; --text:#0f172a; --muted:#475569; --line:#e2e8f0; --accent:#0ea5e9; --ring: 0 0 0 3px rgba(14,165,233,.25); }
.scc-card{ background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow: 0 6px 24px rgba(2,8,23,.06); max-width: 860px; margin: 0 auto; }
.scc-form{ display:grid; gap:16px; }
.scc-row{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; align-items:end; }
.scc-row .scc-wide{ grid-column: span 3; }
.scc label{ display:flex; flex-direction:column; gap:6px; font-size:14px; }
.scc input, .scc select{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:14px; background:#fff; outline:none; }
.scc input:focus, .scc select:focus{ border-color:var(--accent); box-shadow: var(--ring); }
.scc .scc-split{ display:flex; gap:8px; }
.scc .scc-actions{ display:flex; justify-content:flex-end; align-items:center; }
.scc .scc-button{ background:var(--accent); color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; }
.scc .scc-button:hover{ filter:brightness(0.95); }
.scc-results{ margin-top:10px; }
.scc-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.scc-stat{ border:1px solid var(--line); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:2px; align-items:flex-start; }
.scc-stat-label{ font-size:12px; color:var(--muted); }
.scc-stat-value{ font-size:22px; font-weight:700; line-height:1.1; }
.scc .scc-unit{ font-size:12px; color:var(--muted); }
.scc-note{ margin-top:10px; font-size:12px; color:var(--muted); }
@media (max-width: 720px){
  .scc-row{ grid-template-columns: 1fr; }
  .scc-grid{ grid-template-columns: 1fr 1fr; }
}