.dp-diamond{max-width:400px;margin:0 auto 20px;display:flex;flex-direction:column;align-items:center;gap:8px}
.dp-row{display:flex;gap:12px;width:100%;justify-content:center}
.dp-middle{gap:30px}
.dp-cell{flex:1;max-width:140px;display:flex;flex-direction:column;align-items:center;gap:4px}
.dp-cell.dp-side-cell{max-width:120px}
.dp-label{font-size:.72rem;font-weight:700;color:var(--subtext);text-transform:uppercase;letter-spacing:.04em}
.dp-input{text-align:center;font-size:1.1rem!important;font-weight:700!important;padding:10px 8px!important}
.dp-input::placeholder{color:var(--border);font-weight:400}
.dp-diamond-result{margin-top:15px}
.dp-result-cell{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 10px;text-align:center;transition:border-color var(--transition)}
.dp-result-cell:hover{border-color:var(--primary)}
.dp-val{font-size:1.5rem;font-weight:800;color:var(--text);line-height:1.2}
.dp-val.dp-product{color:var(--accent)}
.dp-val.dp-sum{color:var(--primary)}
.dp-val.dp-side{color:var(--success)}
.dp-val.dp-known{text-decoration:underline;text-underline-offset:2px}


/* ============================================================
   OTHER CALCULATOR COMPONENTS (unchanged from original)
   ============================================================ */

.dp-btn-flex1{flex:1}


/* ============================================================
   DIAMOND PROBLEM SOLVER — Enhanced Styles
   ============================================================ */

.dp-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* Presets */
.dp-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.dp-preset-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--subtext);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 4px;
}

.dp-preset {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
  background: var(--bg);
  color: var(--subtext);
  border: 1.5px solid var(--border);
  font-family: var(--system-fonts);
}

.dp-preset:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-1px);
}

.dp-preset:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}


/* Input fields */
.dp-input {
  width: 100%;
  padding: 10px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  background: var(--card);
  transition: border-color .2s ease, box-shadow .2s ease;
  text-align: center;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

.dp-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.dp-input::placeholder {
  color: var(--border);
  font-weight: 400;
}


/* Result card */
.dp-result {
  padding: 22px 20px;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1.5px solid var(--border);
  transition: all .35s cubic-bezier(.4,0,.2,1);
  transform-origin: top center;
}

.dp-result.hidden { display: none; }

.dp-result.dp-result--visible {
  animation: pctSlideDown .35s cubic-bezier(.4,0,.2,1);
}


.dp-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 8px;
  flex-wrap: wrap;
}

.dp-result-badge {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(37,99,235,.1);
  color: var(--primary);
  border: 1px solid rgba(37,99,235,.15);
}

.dp-result-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}


.dp-copy-btn {
  font-size: .68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--card);
  color: var(--subtext);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all .2s ease;
  font-family: var(--system-fonts);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.dp-copy-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.dp-copy-btn--copied {
  background: var(--success) !important;
  color: #fff !important;
  border-color: var(--success) !important;
}


/* Result diamond */
.dp-diamond-result { margin-top: 0; }


/* Equation */
.dp-eq {
  font-size: .85rem;
  color: var(--subtext);
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  background: var(--card);
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
  text-align: center;
  word-break: break-word;
}


/* Steps */
.dp-steps { }

.dp-steps-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.dp-steps-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dp-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  color: var(--subtext);
  line-height: 1.5;
}

.dp-step-num {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.dp-step strong { color: var(--text); }

.dp-step-sub {
  font-size: .82rem;
  color: var(--subtext);
  padding: 4px 12px 4px 44px;
  line-height: 1.5;
}

.dp-step-sub strong { color: var(--primary); }


/* Enhance existing diamond classes */
.dp-val.dp-known {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--primary);
  text-decoration-style: dotted;
}


.dp-result-cell {
  transition: border-color .2s ease, transform .2s ease;
}

.dp-result-cell:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}


.dp-lbl {
  font-size: .62rem;
  font-weight: 700;
  color: var(--subtext);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 4px;
}


/* Dark mode */
[data-theme="dark"] .dp-result { background: var(--card); }

[data-theme="dark"] .dp-eq { background: var(--bg); }

[data-theme="dark"] .dp-step { background: var(--bg); }

[data-theme="dark"] .dp-input { background: var(--bg); }

[data-theme="dark"] .dp-preset { background: var(--card); }

[data-theme="dark"] .dp-copy-btn { background: var(--bg); }


/* Mobile */
@media (max-width: 480px) {
  .dp-result { padding: 14px 12px; }
  .dp-preset-label { display: none; }
  .dp-eq { font-size: .78rem; padding: 8px 10px; }
  .dp-step { font-size: .8rem; padding: 6px 10px; }
  .dp-step-sub { padding: 3px 10px 3px 36px; font-size: .78rem; }
  .dp-step-num { width: 20px; height: 20px; min-width: 20px; font-size: .65rem; }
  .dp-input { font-size: .95rem; padding: 8px 6px; }
  .dp-cell { max-width: 110px; }
  .dp-side-cell { max-width: 100px; }
}