:root{
  --wh-dark:#111;
  --wh-text:#222;
  --wh-body:#333;
  --wh-muted:#555;
  --wh-light-muted:#777;
  --wh-border:#e2e2e2;
  --wh-panel:#f3f3f5;
  --wh-bg:#fff;
  --wh-accent:#7a1f2b;
  --wh-accent-hover:#611723;
  --wh-ok:#3d7a4d;
  --radius:10px;
}
.wh-tester{
  max-width:760px;
  margin:0 auto;
  padding:24px 16px 64px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--wh-body);
  line-height:1.5;
  box-sizing:border-box;
}
.wh-tester *{box-sizing:border-box;}
.wh-tester h1{
  font-size:1.6rem;
  color:var(--wh-dark);
  margin:0 0 6px;
}
.wh-tester .wh-lead{
  color:var(--wh-muted);
  margin:0 0 28px;
  font-size:0.95rem;
}
.wh-steps-nav{
  display:flex;
  gap:8px;
  margin-bottom:24px;
}
.wh-steps-nav span{
  flex:1;
  text-align:center;
  padding:8px 4px;
  font-size:0.8rem;
  border-radius:999px;
  background:var(--wh-panel);
  color:var(--wh-light-muted);
  border:1px solid var(--wh-border);
  cursor:pointer;
}
.wh-steps-nav span.active{
  background:var(--wh-dark);
  color:#fff;
  border-color:var(--wh-dark);
}
.wh-steps-nav span.done{
  background:#eaeaea;
  color:var(--wh-dark);
}
.wh-step{display:none;}
.wh-step.active{display:block;}
.wh-card{
  background:var(--wh-panel);
  border:1px solid var(--wh-border);
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:20px;
}
.wh-field{margin-bottom:18px;}
.wh-field label{
  display:block;
  font-weight:600;
  font-size:0.85rem;
  color:var(--wh-dark);
  margin-bottom:6px;
}
.wh-gender-toggle{
  display:flex;
  gap:8px;
}
.wh-gender-toggle button{
  flex:1;
  padding:10px;
  border-radius:8px;
  border:1px solid var(--wh-border);
  background:#fff;
  cursor:pointer;
  font-size:0.9rem;
  color:var(--wh-body);
}
.wh-gender-toggle button.active{
  background:var(--wh-dark);
  color:#fff;
  border-color:var(--wh-dark);
}
.wh-field input[type="number"],
.wh-field input[type="time"]{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--wh-border);
  font-size:0.95rem;
  background:#fff;
  color:var(--wh-body);
}
.wh-error{
  color:#a83232;
  font-size:0.82rem;
  margin-top:6px;
  display:none;
}
.wh-error.show{display:block;}

/* Rozsahový posuvník doby pití */
.wh-time-range{
  position:relative;
  height:36px;
  margin:8px 0 6px;
}
.wh-time-track{
  position:absolute;
  top:50%; left:0; right:0;
  height:6px;
  transform:translateY(-50%);
  background:var(--wh-border);
  border-radius:999px;
}
.wh-time-fill{
  position:absolute;
  top:0; bottom:0;
  background:var(--wh-accent);
  border-radius:999px;
}
.wh-time-input{
  -webkit-appearance:none;
  appearance:none;
  position:absolute;
  top:0; left:0;
  width:100%;
  height:36px;
  margin:0;
  background:transparent;
  pointer-events:none;
}
.wh-time-input::-webkit-slider-runnable-track{
  -webkit-appearance:none;
  height:6px;
  background:transparent;
}
.wh-time-input::-webkit-slider-thumb{
  -webkit-appearance:none;
  pointer-events:auto;
  width:20px;
  height:20px;
  margin-top:-7px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--wh-accent);
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,0.25);
  position:relative;
  z-index:2;
}
.wh-time-input::-moz-range-track{
  height:6px;
  background:transparent;
  border:none;
}
.wh-time-input::-moz-range-thumb{
  pointer-events:auto;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--wh-accent);
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,0.25);
}
.wh-time-label{
  font-size:0.82rem;
  color:var(--wh-muted);
  text-align:center;
}
.wh-midnight-marker{
  position:absolute;
  top:2px;
  bottom:2px;
  width:0;
  border-left:1px dashed var(--wh-light-muted);
  z-index:1;
  pointer-events:none;
}
.wh-midnight-marker span{
  position:absolute;
  top:-16px;
  left:50%;
  transform:translateX(-50%);
  font-size:0.62rem;
  color:var(--wh-light-muted);
  white-space:nowrap;
}
.wh-time-scale{
  display:flex;
  justify-content:space-between;
  font-size:0.66rem;
  color:var(--wh-light-muted);
  margin:0 0 6px;
}

/* Tabs krok 2 */
.wh-tabs{
  display:flex;
  gap:6px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.wh-tabs button{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid var(--wh-border);
  background:#fff;
  cursor:pointer;
  font-size:0.85rem;
  color:var(--wh-body);
}
.wh-tabs button.active{
  background:var(--wh-accent);
  color:#fff;
  border-color:var(--wh-accent);
}
.wh-drink-panel{display:none;}
.wh-drink-panel.active{display:grid; gap:14px;}
.wh-tile-grid{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
}
.wh-tile-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
}
.wh-tile-row .wh-tile{padding:8px 4px;}
.wh-tile-row .wh-tile-emoji.sm{font-size:1.3rem;}
.wh-tile-row .wh-tile-emoji.lg{font-size:2rem;}
.wh-tile-row .wh-tile-label{font-size:0.72rem; margin-bottom:0;}
.wh-tile-row .wh-tile-vol{font-size:0.62rem; margin-bottom:4px;}
.wh-tile-row .wh-tile-abv-row{font-size:0.66rem; gap:2px; margin-bottom:0;}
.wh-tile-row .wh-tile-abv-row input{width:32px; padding:2px; font-size:0.68rem;}
.wh-tile-row .wh-tile-abv-hint{display:none;}
.wh-tile-row .wh-tile-stepper{gap:4px;}
.wh-tile-row .wh-tile-stepper button{width:22px; height:22px; font-size:0.85rem;}
.wh-tile-row .wh-tile-stepper .wh-tile-count{min-width:14px; font-size:0.85rem;}
.wh-tile{
  background:#fff;
  border:1px solid var(--wh-border);
  border-radius:10px;
  padding:14px 12px;
  text-align:center;
  transition:border-color .15s, background .15s;
}
.wh-tile.active{
  border-color:var(--wh-accent);
  background:#fdf6f6;
}
.wh-tile-emoji{
  display:block;
  line-height:1;
  margin-bottom:6px;
}
.wh-tile-emoji.sm{font-size:1.7rem;}
.wh-tile-emoji.lg{font-size:2.8rem;}
.wh-tile-label{
  font-weight:600;
  color:var(--wh-dark);
  font-size:0.86rem;
  margin-bottom:2px;
}
.wh-tile-vol{
  color:var(--wh-light-muted);
  font-size:0.74rem;
  margin-bottom:8px;
}
.wh-tile-abv-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  margin-bottom:2px;
  font-size:0.76rem;
  color:var(--wh-muted);
}
.wh-tile-abv-row input{
  width:44px;
  padding:4px;
  border-radius:6px;
  border:1px solid var(--wh-border);
  text-align:center;
  font-size:0.78rem;
}
.wh-tile-abv-hint{
  font-size:0.66rem;
  color:var(--wh-light-muted);
  margin-bottom:10px;
  min-height:0.9em;
}
.wh-tile-stepper{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.wh-tile-stepper button{
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid var(--wh-border);
  background:var(--wh-panel);
  color:var(--wh-dark);
  font-size:1.05rem;
  cursor:pointer;
  line-height:1;
}
.wh-tile-stepper button:hover{border-color:var(--wh-accent);}
.wh-tile-stepper .wh-tile-count{
  min-width:22px;
  font-weight:700;
  color:var(--wh-dark);
  font-size:1rem;
}

/* Sticky lišta */
.wh-sticky-bar{
  position:sticky;
  top:0;
  z-index:10;
  background:#fff;
  border:1px solid var(--wh-border);
  border-radius:var(--radius);
  padding:10px 14px;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}
.wh-sticky-chips{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  flex:1;
  min-width:120px;
}
.wh-chip{
  background:var(--wh-panel);
  border:1px solid var(--wh-border);
  border-radius:999px;
  padding:4px 10px;
  font-size:0.8rem;
  color:var(--wh-dark);
  white-space:nowrap;
}
.wh-chip-empty{
  color:var(--wh-light-muted);
  font-size:0.8rem;
}
.wh-eat-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:0.8rem;
  color:var(--wh-body);
  cursor:pointer;
  white-space:nowrap;
}
.wh-eat-toggle input{width:16px;height:16px;cursor:pointer;}
.wh-clear-btn{
  background:none;
  border:1px solid var(--wh-border);
  border-radius:8px;
  padding:6px 10px;
  font-size:0.76rem;
  color:var(--wh-muted);
  cursor:pointer;
  white-space:nowrap;
}
.wh-clear-btn:hover{border-color:#a83232; color:#a83232;}

.wh-actions{
  display:flex;
  justify-content:space-between;
  margin-top:20px;
  gap:10px;
}
.wh-btn{
  padding:12px 20px;
  border-radius:8px;
  border:none;
  font-size:0.95rem;
  cursor:pointer;
  background:var(--wh-dark);
  color:#fff;
}
.wh-btn:hover{background:var(--wh-accent-hover);}
.wh-btn.wh-secondary{
  background:#fff;
  color:var(--wh-dark);
  border:1px solid var(--wh-border);
}
.wh-btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

/* Krok 3 */
.wh-results-summary{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.wh-result-tile{
  flex:1;
  min-width:150px;
  background:var(--wh-panel);
  border:1px solid var(--wh-border);
  border-radius:var(--radius);
  padding:16px;
  text-align:center;
}
.wh-result-tile .wh-result-value{
  font-size:1.6rem;
  font-weight:700;
  color:var(--wh-dark);
  display:block;
}
.wh-result-tile .wh-result-label{
  font-size:0.78rem;
  color:var(--wh-light-muted);
}
.wh-chart-wrap{
  background:var(--wh-panel);
  border:1px solid var(--wh-border);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:24px;
}
.wh-chart-wrap svg{width:100%;height:auto;display:block;}
.wh-disclaimer{
  font-size:0.78rem;
  color:var(--wh-light-muted);
  background:#fafafa;
  border-left:3px solid var(--wh-accent);
  padding:10px 14px;
  margin-bottom:24px;
}

.wh-faq{margin-top:8px;}
.wh-faq details{
  background:var(--wh-panel);
  border:1px solid var(--wh-border);
  border-radius:8px;
  padding:12px 16px;
  margin-bottom:8px;
}
.wh-faq summary{
  cursor:pointer;
  font-weight:600;
  color:var(--wh-dark);
  font-size:0.92rem;
}
.wh-faq p{
  margin:10px 0 0;
  font-size:0.88rem;
  color:var(--wh-body);
}

@media (max-width:480px){
  .wh-results-summary{flex-direction:column;}
}

/* SEO obsah pod kalkulačkou */
.wh-seo-content{
  margin-top:40px;
  padding-top:32px;
  border-top:1px solid var(--wh-border);
  color:var(--wh-body);
}
.wh-seo-content h2{
  font-size:1.25rem;
  color:var(--wh-dark);
  margin:28px 0 12px;
}
.wh-seo-content h2:first-child{margin-top:0;}
.wh-seo-content h3{
  font-size:1.02rem;
  color:var(--wh-dark);
  margin:20px 0 8px;
}
.wh-seo-content p{
  font-size:0.92rem;
  line-height:1.65;
  margin:0 0 14px;
}

/* Sdílení */
.wh-share{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:24px 0 8px;
  margin-top:8px;
  border-top:1px solid var(--wh-border);
}
.wh-share-label{
  font-size:0.82rem;
  color:var(--wh-muted);
  margin-right:2px;
}
.wh-share-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--wh-panel);
  border:1px solid var(--wh-border);
  color:var(--wh-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:background .15s, border-color .15s, color .15s;
}
.wh-share-icon:hover{
  background:var(--wh-accent);
  border-color:var(--wh-accent);
  color:#fff;
}