:root {
    --pink: #ec4899;
    --pink-hover: #db2777;
    --blue: #3b82f6;
    --blue-hover: #2563eb;
    --bg: #f3f4f6;
    --card-bg: #ffffff;
}
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg); margin: 0; color: #1f2937; }
.header { display: flex; align-items: center; padding: 15px 30px; background: var(--card-bg); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.logo-placeholder { width: 50px; height: 50px; background: #e5e7eb; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #9ca3af; margin-right: 20px; font-size: 12px; text-align: center; line-height: 1.1; border: 2px dashed #cbd5e1;}
.container { max-width: 800px; margin: 40px auto; padding: 30px; background: var(--card-bg); border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
h1 { margin: 0; font-size: 1.8rem; color: #111827; }
h2 { border-bottom: 2px solid #f3f4f6; padding-bottom: 10px; margin-bottom: 20px; }
.form-group { margin-bottom: 20px; }
label { font-weight: 600; display: block; margin-bottom: 8px; }
select, input[type="text"] { width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; box-sizing: border-box; }
.btn { display: inline-block; padding: 12px 24px; font-size: 1rem; font-weight: 600; text-align: center; border: none; border-radius: 8px; cursor: pointer; transition: 0.2s; color: white; width: 100%; }
.btn-blue { background-color: var(--blue); }
.btn-blue:hover { background-color: var(--blue-hover); }
.btn-pink { background-color: var(--pink); margin-top: 15px; }
.btn-pink:hover { background-color: var(--pink-hover); }
.question-card { background: #f9fafb; border: 1px solid #e5e7eb; padding: 20px; border-radius: 12px; margin-bottom: 15px; }
.radio-group { display: flex; gap: 15px; margin-top: 10px; }
.radio-group label { font-weight: normal; display: flex; align-items: center; gap: 5px; cursor: pointer; }
.weight-group { margin-top: 15px; padding-top: 10px; border-top: 1px solid #e5e7eb; }
.step-counter { font-size: 0.85rem; color: #6b7280; margin-bottom: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.result-card { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-radius: 8px; border: 1px solid #e5e7eb; margin-bottom: 10px; background: #fff;}
.progress-bar { height: 10px; background: #e5e7eb; border-radius: 5px; margin-top: 5px; overflow: hidden; width: 100px; }
.progress-fill { height: 100%; background: var(--pink); }
.logo {
    width: 250px;      /* nastav si podle potřeby */
    height: 75px;
    object-fit: contain; /* udrží poměr stran, aby se logo nedeformovalo */
    margin-right: 20px;
    border-radius: 8px;  /* pokud chceš zakulacené rohy */
}