/* ============================================================
   Coswaa Calc Engine — UI Styles v2.0
   All classes prefixed .cce- to prevent conflicts
   ============================================================ */

:root {
  --cce-primary:      #6c47ff;
  --cce-primary-dk:   #5736d9;
  --cce-primary-bg:   #f0ebff;
  --cce-success:      #22c55e;
  --cce-success-bg:   #dcfce7;
  --cce-error:        #ef4444;
  --cce-error-bg:     #fef2f2;
  --cce-warning:      #f59e0b;
  --cce-text:         #111827;
  --cce-muted:        #6b7280;
  --cce-border:       #e5e7eb;
  --cce-bg:           #f9fafb;
  --cce-white:        #ffffff;
  --cce-radius:       12px;
  --cce-radius-sm:    8px;
  --cce-shadow:       0 4px 24px rgba(108,71,255,.10);
  --cce-transition:   .18s ease;
}

/* ── Card wrapper ── */
.cce-wrap {
  background: var(--cce-white);
  border-radius: var(--cce-radius);
  box-shadow: var(--cce-shadow);
  overflow: hidden;
  margin: 0 auto 28px;
  max-width: 820px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--cce-text);
}

/* ── How-to accordion ── */
.cce-howto {
  background: var(--cce-primary-bg);
  border-bottom: 1px solid #ddd5ff;
}
.cce-howto summary {
  list-style: none;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cce-primary);
  cursor: pointer;
  user-select: none;
}
.cce-howto summary::-webkit-details-marker { display: none; }
.cce-howto__body {
  padding: 10px 18px 14px;
  font-size: 13px;
  color: #374151;
  line-height: 1.7;
}
.cce-howto__body ol { padding-left: 18px; }
.cce-howto__body li { margin: 3px 0; }
.cce-howto__body p  { margin-top: 8px; font-size: 12px; color: var(--cce-muted); }

/* ── Form area ── */
.cce-form { padding: 22px 22px 6px; }

.cce-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.cce-row--full { grid-template-columns: 1fr; }

.cce-field { display: flex; flex-direction: column; gap: 5px; }

.cce-field__label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.cce-field__label .req { color: var(--cce-error); margin-left: 2px; }

.cce-field__input,
.cce-field__select {
  padding: 10px 13px;
  font-size: 15px;
  border: 1.5px solid var(--cce-border);
  border-radius: var(--cce-radius-sm);
  background: var(--cce-white);
  color: var(--cce-text);
  transition: var(--cce-transition);
  width: 100%;
  -moz-appearance: textfield;
}
.cce-field__input::-webkit-outer-spin-button,
.cce-field__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cce-field__input:focus,
.cce-field__select:focus {
  outline: none;
  border-color: var(--cce-primary);
  box-shadow: 0 0 0 3px rgba(108,71,255,.12);
}
.cce-field__select { cursor: pointer; }
.cce-field__hint { font-size: 11px; color: var(--cce-muted); }

/* ── Submit button ── */
.cce-submit {
  display: block;
  width: calc(100% - 44px);
  margin: 4px 22px 18px;
  padding: 13px 20px;
  background: var(--cce-primary);
  color: var(--cce-white);
  border: none;
  border-radius: var(--cce-radius-sm);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--cce-transition);
  letter-spacing: .01em;
}
.cce-submit:hover { background: var(--cce-primary-dk); transform: translateY(-1px); }
.cce-submit:active { transform: translateY(0); }

/* ── Error ── */
[data-cce-error] {
  margin: 0 22px 14px;
  background: var(--cce-error-bg);
  border: 1px solid #fca5a5;
  border-radius: var(--cce-radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  color: #b91c1c;
  line-height: 1.5;
}

/* ── Result ── */
[data-cce-result] {
  margin: 4px 22px 22px;
  animation: cceFadeUp .24s ease-out;
}
@keyframes cceFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Result Grid ── */
.cce-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.cce-stat {
  background: var(--cce-bg);
  border: 1px solid var(--cce-border);
  border-radius: var(--cce-radius-sm);
  padding: 14px 12px;
  text-align: center;
}
.cce-stat--primary {
  background: linear-gradient(135deg, var(--cce-primary) 0%, var(--cce-primary-dk) 100%);
  border: none;
  color: var(--cce-white);
}
.cce-stat__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cce-muted);
  margin-bottom: 4px;
}
.cce-stat--primary .cce-stat__label { color: rgba(255,255,255,.8); }
.cce-stat__value {
  font-size: 20px;
  font-weight: 800;
  color: var(--cce-text);
  font-variant-numeric: tabular-nums;
}
.cce-stat--primary .cce-stat__value { font-size: 26px; color: var(--cce-white); }
.cce-stat--positive .cce-stat__value { color: var(--cce-success); }
.cce-stat--negative .cce-stat__value { color: var(--cce-error); }

/* ── Formula block ── */
.cce-formula {
  background: #f8faff;
  border: 1px solid #dde5ff;
  border-radius: var(--cce-radius-sm);
  padding: 11px 14px;
  font-size: 13px;
  color: #374151;
  line-height: 1.8;
  margin-bottom: 12px;
}
.cce-formula strong { color: var(--cce-primary); }

/* ── Table ── */
.cce-table-wrap { overflow-x: auto; border-radius: var(--cce-radius-sm); border: 1px solid var(--cce-border); }
.cce-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cce-table thead tr { background: var(--cce-primary); color: var(--cce-white); }
.cce-table th, .cce-table td { padding: 8px 12px; text-align: right; }
.cce-table th:first-child, .cce-table td:first-child { text-align: center; }
.cce-table tbody tr:nth-child(even) td { background: #fafbff; }
.cce-table tbody tr:hover td { background: var(--cce-primary-bg); }

/* ── Error page ── */
.cce-error {
  background: var(--cce-error-bg);
  border: 1px solid #fca5a5;
  border-radius: var(--cce-radius-sm);
  padding: 12px 16px;
  font-size: 14px;
  color: #b91c1c;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .cce-form  { padding: 16px 14px 4px; }
  .cce-row   { grid-template-columns: 1fr; gap: 12px; }
  .cce-submit { width: calc(100% - 28px); margin-left: 14px; margin-right: 14px; }
  [data-cce-error], [data-cce-result] { margin-left: 14px; margin-right: 14px; }
  .cce-stat--primary .cce-stat__value { font-size: 22px; }
}