:root{
  --ecep-bg:#f6f8fb;
  --ecep-card:#ffffff;
  --ecep-text:#172033;
  --ecep-muted:#667085;
  --ecep-border:#dfe5ec;
  --ecep-primary:#2563eb;
  --ecep-primary-hover:#1d4ed8;
  --ecep-success:#15803d;
  --ecep-danger:#b42318;
  --ecep-shadow:0 8px 24px rgba(16,24,40,.07);
  --ecep-radius:16px;
}
.ecep-calculator{
  width:100%;max-width:760px;margin:20px auto;padding:22px;
  box-sizing:border-box;background:var(--ecep-card);color:var(--ecep-text);
  border:1px solid var(--ecep-border);border-radius:var(--ecep-radius);
  box-shadow:var(--ecep-shadow);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.ecep-fields{display:block}
.ecep-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ecep-grid label{display:block;color:var(--ecep-text);font-size:14px;font-weight:650;line-height:1.35}
.ecep-input{
  display:block;width:100%;min-height:48px;box-sizing:border-box;margin-top:7px;
  padding:11px 13px;border:1px solid #cbd5e1;border-radius:11px;background:#fff;color:var(--ecep-text);
  font:inherit;font-size:16px;outline:none;transition:border-color .15s ease,box-shadow .15s ease;
}
.ecep-input:focus{border-color:var(--ecep-primary);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.ecep-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.ecep-calculate,.ecep-reset{
  min-height:48px;border:0;border-radius:11px;padding:11px 20px;font:inherit;font-weight:700;
  cursor:pointer;touch-action:manipulation;transition:transform .08s ease,background .15s ease;
}
.ecep-calculate{background:var(--ecep-primary);color:#fff}
.ecep-calculate:hover{background:var(--ecep-primary-hover)}
.ecep-reset{background:#eef2f6;color:#344054}
.ecep-calculate:active,.ecep-reset:active{transform:translateY(1px)}
.ecep-error{margin-top:14px;padding:12px 14px;border-radius:11px;background:#fff0ee;color:var(--ecep-danger);border:1px solid #ffd5d0}
.ecep-results{margin-top:18px;display:grid;gap:10px}
.ecep-result-row{
  display:flex;justify-content:space-between;align-items:center;gap:15px;
  padding:14px;border-radius:11px;background:#f8fafc;border:1px solid var(--ecep-border)
}
.ecep-result-row span{color:var(--ecep-muted)}
.ecep-result-row strong{font-size:17px;color:var(--ecep-text);word-break:break-word;text-align:right}
@media(max-width:600px){
  .ecep-calculator{padding:16px;margin:14px auto;border-radius:14px}
  .ecep-grid{grid-template-columns:1fr;gap:13px}
  .ecep-actions{display:grid;grid-template-columns:1fr 1fr}
  .ecep-calculate,.ecep-reset{width:100%;padding-left:12px;padding-right:12px}
}
@media(prefers-reduced-motion:reduce){
  .ecep-input,.ecep-calculate,.ecep-reset{transition:none}
}