/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Scoped Variables ── */
.cpc-wrapper {
  --ink: #12111A;
  --ink-muted: #5A5875;
  --surface: #FFFFFF;
  --border: #E4E2F0;
  --accent: #5B4BF5;
  --accent-lt: #EAE7FF;
  --accent-dk: #3D2FD6;
  --danger: #F53B57;
  --danger-lt: #FFF0F3;
  --radius: 14px;
  --shadow: 0 8px 32px rgba(91,75,245,.10), 0 2px 8px rgba(0,0,0,.06);
  font-family: 'DM Sans', sans-serif;
  color: var(--ink);
}

/* CARD */
.cpc-wrapper .calculator-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 24px;
  animation: cpc-slideUp .5s ease both;
}

@keyframes cpc-slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cpc-wrapper .card-header { padding: 28px 32px 22px; border-bottom: 1px solid var(--border); }
.cpc-wrapper .card-header h2 { font-family: 'DM Serif Display', serif; font-size: 1.35rem; font-weight: 400; margin-bottom: 4px; }
.cpc-wrapper .card-header p  { font-size: .88rem; color: var(--ink-muted); }

/* FORM */
.cpc-wrapper .form-body { padding: 28px 32px; display: flex; flex-direction: column; gap: 22px; }

.cpc-wrapper .field-group  { display: flex; flex-direction: column; gap: 8px; }
.cpc-wrapper .field-label  { font-size: .8rem; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-muted); }

.cpc-wrapper .select-wrap { position: relative; }
.cpc-wrapper .field-select {
  width: 100%; padding: 13px 40px 13px 16px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: .95rem; color: var(--ink);
  background: #FAFAFA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5875' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center / 17px;
  appearance: none; outline: none; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.cpc-wrapper .field-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-lt); background-color: #fff; }

.cpc-wrapper .input-wrap  { position: relative; display: flex; align-items: center; }
.cpc-wrapper .field-input {
  width: 100%; padding: 13px 60px 13px 16px;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: .95rem; color: var(--ink);
  background: #FAFAFA; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.cpc-wrapper .field-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-lt); background: #fff; }
.cpc-wrapper .field-input::placeholder { color: #BDB9D4; }
.cpc-wrapper .input-unit { position: absolute; right: 14px; font-size: .82rem; color: var(--ink-muted); font-weight: 500; pointer-events: none; }
.cpc-wrapper .field-input.error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-lt); }

/* BUTTON */
.cpc-wrapper .btn-convert {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 15px 24px; border-radius: 12px;
  background: var(--accent); color: #fff; border: none;
  font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 600;
  cursor: pointer; transition: all .2s;
  box-shadow: 0 4px 20px rgba(91,75,245,.3);
  margin-top: 4px;
}
.cpc-wrapper .btn-convert svg     { width: 18px; height: 18px; }
.cpc-wrapper .btn-convert:hover   { background: var(--accent-dk); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(91,75,245,.4); }
.cpc-wrapper .btn-convert:active  { transform: translateY(0); }

/* RESULT */
.cpc-wrapper .result-panel { display: none; background: linear-gradient(135deg, var(--accent) 0%, #7C6BFF 100%); color: #fff; padding: 28px 32px; animation: cpc-slideUp .4s ease both; }
.cpc-wrapper .result-panel.visible { display: block; }

.cpc-wrapper .result-inner  { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; }
.cpc-wrapper .result-left   { display: flex; align-items: baseline; gap: 6px; }
.cpc-wrapper .result-value  { font-family: 'DM Serif Display', serif; font-size: 3.8rem; line-height: 1; letter-spacing: -.03em; }
.cpc-wrapper .result-unit   { font-size: 1.4rem; font-weight: 600; opacity: .7; }
.cpc-wrapper .result-right  { flex: 1; }
.cpc-wrapper .result-label  { font-size: .82rem; opacity: .75; margin-bottom: 8px; }
.cpc-wrapper .result-badge  { display: inline-block; padding: 4px 14px; border-radius: 20px; background: rgba(255,255,255,.2); font-size: .85rem; font-weight: 600; backdrop-filter: blur(4px); margin-bottom: 10px; }
.cpc-wrapper .result-formula { font-size: .78rem; opacity: .65; font-family: 'DM Mono', 'Courier New', monospace; }

.cpc-wrapper .scale-bar  { height: 6px; background: rgba(255,255,255,.2); border-radius: 3px; overflow: hidden; }
.cpc-wrapper .scale-fill { height: 100%; background: rgba(255,255,255,.8); border-radius: 3px; width: 0; transition: width .8s cubic-bezier(.34,1.56,.64,1); }

/* SHAKE */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(8px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .cpc-wrapper .card-header,
  .cpc-wrapper .form-body { padding-left: 20px; padding-right: 20px; }
  .cpc-wrapper .result-panel  { padding: 22px 20px; }
  .cpc-wrapper .result-value  { font-size: 3rem; }
}