:root{
  --trr-primary:#111827;
  --trr-card-bg:#ffffff;
  --trr-muted-bg:#f9fafb;
  --trr-border:#e5e7eb;
  --trr-text:#111827;
  --trr-radius:16px;
}
.trr-wrap{max-width:720px;margin:1rem auto;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;color:var(--trr-text)}
.trr-card{background:var(--trr-card-bg);border:1px solid var(--trr-border);border-radius:var(--trr-radius);box-shadow:0 4px 18px rgba(0,0,0,.06);padding:16px}
.trr-title{margin:0 0 8px;font-size:1.25rem;line-height:1.3}
.trr-method{display:flex;gap:16px;margin:8px 0 12px}
.trr-method label{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--trr-border);cursor:pointer}
.trr-inputs{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:center;margin:12px 0}
.trr-label{display:flex;flex-direction:column;font-size:.9rem;gap:6px}
.trr-label input[type=number]{padding:8px 10px;border-radius:10px;border:1px solid var(--trr-border);width:100%;background:#fff;color:var(--trr-text)}
.trr-range{width:100%}
.trr-results{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0}
.trr-result{background:var(--trr-muted-bg);border:1px solid var(--trr-border);border-radius:12px;padding:10px;text-align:center}
.trr-result span{display:block;font-size:.8rem;color:#6b7280}
.trr-result strong{font-size:1.1rem}
.trr-actions{display:flex;gap:12px;align-items:center;margin-top:10px}
.trr-copy{border:none;border-radius:999px;padding:10px 14px;background:var(--trr-primary);color:#fff;cursor:pointer}
.trr-copy:hover{opacity:.92}
.trr-tips{margin-top:10px}
@media (max-width:640px){
  .trr-inputs{grid-template-columns:1fr}
  .trr-results{grid-template-columns:repeat(2,1fr)}
}