:root {
  /* Tweak these to perfectly match your theme */
  --oc-cc-primary: #1697bf;
  --oc-cc-primary-600: #0264cc;
  --oc-cc-bg: #efefef;
  /* dark hero vibe */
  --oc-cc-panel: #fff;
  --oc-cc-text: #e5e7eb;
  --oc-cc-muted: #9ca3af;
  --oc-cc-accent: #55bde5;
  --oc-cc-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}

.oc-cc-body {
  margin: 0;
  color: var(--oc-cc-text);
  box-shadow: 0 5px 15px 0 rgba(110, 110, 110, .1);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.oc-cc-wrap {
  max-width: 1100px;
  margin: 48px auto;
  padding: 0 20px 40px;
}

.oc-cc-header h1 {
  margin: 0 0 6px;
  font-size: 1.9rem;
  letter-spacing: .2px;
  color: #fff;
}

.oc-cc-sub {
  margin: 0 0 22px;
  color: var(--oc-cc-muted);
}

.oc-cc-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.oc-cc-card {
  grid-column: span 4;
  background: var(--oc-cc-panel);
  border: 1px solid var(--oc-cc-border);
  border-radius: 16px;
  padding: 16px 16px 12px;
  box-shadow: var(--oc-cc-shadow);
}

.oc-cc-card-full {
  grid-column: span 12;
  background: var(--oc-cc-panel);
  border: 1px solid var(--oc-cc-border);
  border-radius: 16px;
  padding: 16px 16px 12px;
  box-shadow: var(--oc-cc-shadow);
}

.oc-cc-summary {
  grid-column: span 12;
}

.oc-cc-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}

.oc-cc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.oc-cc-help {
  font-size: .85rem;
  color: var(--oc-cc-muted);
}

.oc-cc-item {
  display: flex;
}

.oc-cc-item span {
  align-self: center;
  font-size: large;
}

.oc-cc-result {
  color: #55bde5;
  margin-left: auto;
}

input[type="range"] {
  width: 100%;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--oc-cc-primary), var(--oc-cc-accent));
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--oc-cc-primary);
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--oc-cc-primary);
  cursor: pointer;
}

select,
output {
  background: #0b1220;
  color: var(--oc-cc-text);
  border: 1px solid var(--oc-cc-border);
  border-radius: 10px;
  padding: 8px 10px;
}

.oc-cc-lines {
  display: grid;
  gap: 8px;
}

.oc-cc-lines>div {
  display: flex;
  justify-content: space-between;
}

.oc-cc-divider {
  height: 1px;
  background: var(--oc-cc-border);
  margin: 8px 0;
}

.oc-cc-total span:last-child {
  font-weight: 600;
}

.oc-cc-grand {
  font-size: 1.325rem;
  font-weight: 800;
  color: #fff;
}

.oc-cc-btn {
  margin-top: 14px;
  background: var(--oc-cc-primary);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
}

.oc-cc-btn:hover {
  background: var(--oc-cc-primary-600);
}

.oc-cc-footer {
  margin-top: 18px;
  color: var(--oc-cc-muted);
  font-size: .9rem;
}

.oc-cc-footer a {
  color: var(--oc-cc-accent);
  text-decoration: underline;
}

@media (max-width: 860px) {
  .oc-cc-card {
    grid-column: span 12;
  }
}