:root {
  --primary:#007bff;
  --success:#28a745;
  --warning:#ffc107;
  --danger:#dc3545;
}

body {
  font-family:'Segoe UI',Arial,sans-serif;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  margin:0;
  padding:20px;
  color:#333;
}

.containerfibroproduct { max-width:720px; margin:auto; }
.card {
  background:#fff;
  border-radius:20px;
  box-shadow:0 12px 35px rgba(0,0,0,.25);
  overflow:hidden;
  margin-bottom:25px;
}
.headerfibroproduct {
  background:linear-gradient(90deg,#007bff,#00d4ff);
  color:#fff;
  padding:28px;
  text-align:center;
  font-size:1.9rem;
  font-weight:bold;
}
.logo-img { height:55px; margin-bottom:12px; }
.content { padding:32px; }

.input-group { margin-bottom:20px; }
label {
  font-weight:600;
  color:#333;
  display:block;
  margin-bottom:7px;
  font-size:.96rem;
}
input {
  width:100%;
  padding:14px;
  border:1px solid #ddd;
  border-radius:10px;
  font-size:1rem;
}
input:focus {
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,123,255,.2);
}
small { color:#666; font-size:.82rem; display:block; margin-top:5px; }

.btn {
  background:#fd7e14;
  color:#fff;
  border:none;
  padding:15px 34px;
  border-radius:12px;
  font-weight:bold;
  cursor:pointer;
  display:block;
  margin:28px auto 16px;
  font-size:1.12rem;
  width:100%;
}
.btn:hover { background:#e66a0d; }

#result { margin-top:22px; padding:22px; border-radius:18px; text-align:center; animation:fadeIn .7s; }
.score-big { font-size:3.2rem; font-weight:bold; margin:12px 0; }
.chart-container { width:100%; height:22px; background:#eee; border-radius:12px; overflow:hidden; margin:16px 0; }
.chart-bar { height:100%; width:0; transition:width 1.2s ease; border-radius:12px; }

.btn-pdf {
  background:#007bff;
  padding:13px 26px;
  font-size:1rem;
  width:auto;
  display:block;
  margin:18px auto;
  color:#fff;
  border:none;
  border-radius:10px;
  cursor:pointer;
}
.btn-pdf:hover { background:#0056b3; }

@keyframes fadeIn { from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:translateY(0);} }

@media(max-width:480px) {
  .content { padding:22px; }
  .header { font-size:1.55rem; padding:22px; }
  .score-big { font-size:2.4rem; }
}