/* =========================================================
   Dream (Analytics) Style v2
   - méně "ezo", více med/tech
   - modrá + břidlice, čisté chips, progress bar pro emoce
   ========================================================= */

:root{
  --bg1:#f6f9ff;
  --bg2:#eef4ff;
  --card:#ffffff;

  --ink:#1f2b46;         /* čitelná břidlice */
  --muted:#51607b;       /* sekundární text */

  --accent:#2f5bff;      /* korporátní modrá */
  --accentSoft:#dbe6ff;  /* jemný akcent */
  --border:#e3eaf7;

  --soft:#f3f6ff;
  --soft2:#f7f9fc;

  --radius:18px;
  --shadow:0 10px 28px rgba(25,50,120,.10), 0 2px 10px rgba(25,50,120,.06);
  --shadowHover:0 14px 38px rgba(25,50,120,.14), 0 8px 18px rgba(25,50,120,.08);
}

html, body{
  font-family:'DejaVu Sans','Noto Sans','Liberation Sans','Segoe UI',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;

  background:
    radial-gradient(1100px 520px at 12% -6%, #ffffff, transparent 62%),
    linear-gradient(120deg, var(--bg1) 0%, var(--bg2) 100%);
  color:var(--ink);
  margin:0;
  padding:0 0 2em 0;
}

*,
*::before,
*::after{ box-sizing:border-box; }

.container{
  max-width:760px;
  margin:2.2em auto;
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  padding:2.1em 1.6em 1.2em 1.6em;
}

/* Headings */
h1, h2{
  text-align:center;
  margin:0;
}

h1{
  color:var(--ink);
  font-weight:900;
  font-size:clamp(1.65rem, 4.8vw, 2.05rem);
  letter-spacing:.2px;
}

h2{
  margin-top:.55em;
  color:var(--muted);
  font-weight:800;
  font-size:clamp(1rem, 2.8vw, 1.06rem);
  word-break:break-word;
  hyphens:auto;
}

/* Badges */
.badges{
  display:flex;
  flex-wrap:wrap;
  gap:.5em;
  justify-content:center;
  margin:.9em 0 0;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  padding:.36em .72em;
  border-radius:999px;
  background:linear-gradient(180deg, #fff 0%, #f6f8ff 100%);
  border:1px solid var(--border);
  color:#2a3a5f;
  font-size:clamp(.92rem, 2.5vw, .98rem);
  font-weight:800;
}

/* Sections as clean cards */
section{
  margin:1.25em 0;
  padding:1.05em 1.15em .95em 1.15em;
  border-radius:var(--radius);
  background:linear-gradient(120deg, #fff 70%, var(--soft) 100%);
  border:1px solid var(--border);
  box-shadow:0 2px 14px rgba(25,50,120,.08);
  transition: box-shadow .18s ease, transform .18s ease;
}

section:hover{
  box-shadow:var(--shadowHover);
  transform:translateY(-1px);
}

/* Modern chips (Revolut/Notion vibe) */
h3{
  margin:.05em 0 .55em 0;
  color:var(--ink);
  font-weight:900;
  font-size:clamp(1.08rem, 3vw, 1.18rem);
  display:flex;
  align-items:center;
  gap:.6em;
}

h3 .chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:clamp(28px, 5.5vw, 34px);
  height:clamp(28px, 5.5vw, 34px);
  border-radius:999px;

  background:#fff;
  border:1px solid rgba(31,43,70,.14);      /* tenká linka */
  color:#223053;
  font-weight:900;
  letter-spacing:.2px;

  box-shadow:0 1px 0 rgba(31,43,70,.04);
}

/* Text blocks */
p, .para{
  line-height:1.7;
  margin:.55em 0;
  font-size:clamp(.97rem, 2.6vw, 1.02rem);
  color:var(--ink);
}

.sub{
  margin:.25em 0 .35em 0;
  font-weight:900;
  color:#2a3a5f;
  font-size:clamp(1rem, 2.7vw, 1.04rem);
}

.para b, .para strong,
.kv b, .kv strong{
  font-weight:900;
}

.kv{
  margin:.35em 0;
  padding-left:1.05em;
}

.kv li{
  margin:.28em 0;
}

/* Dream description highlight (analytické, bez fialové) */
.dream-desc{
  background:linear-gradient(180deg, #ffffff 0%, #f3f6ff 100%);
  border:1px solid var(--border);
  border-left:6px solid rgba(47,91,255,.22);
  padding:.9em 1em;
  border-radius:14px;
  margin:.55em 0 .2em 0;
  color:#223053;
}

/* Quote + affirmations (bez zlaté) */
.quote{
  font-style:italic;
  color:#223053;
  background:linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%);
  border-left:5px solid rgba(47,91,255,.35);
  margin:.9em 0;
  padding:.9em 1em;
  border-radius:12px;
}

.affirmations{
  background:linear-gradient(180deg, #f3f7ff 0%, #ffffff 100%);
  border:1px solid var(--border);
  border-left:6px solid rgba(47,91,255,.35);
  padding:.9em 1em;
  border-radius:14px;
  margin:.75em 0 0 0;
}

/* Alert (red flag) – pořád jasné, ale méně "křiklavé" */
.alert-box,
section[style*="border: 2px solid red"]{
  border:1px solid #ffd6d6 !important;
  border-left:6px solid #e35f5f !important;
  background:#fff5f5 !important;
  border-radius:14px !important;
}

.hr, hr{
  border:none;
  border-top:2px dashed #cfd7fb;
  margin:1.6em 0;
}

/* =========================================================
   Emotion progress bar (lineární ukazatel)
   Připraveno pro HTML blok .emotion-meter (viz níže)
   ========================================================= */

.emotion-meter{
  margin:.9em auto 0;
  max-width:560px;
  padding:.7em .9em;
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(180deg, #fff 0%, #f6f8ff 100%);
}

.emotion-meter .label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.6em;
  margin-bottom:.55em;
  color:#2a3a5f;
  font-weight:900;
}

.emotion-meter .scale{
  font-weight:800;
  color:var(--muted);
}

.emotion-meter .track{
  height:10px;
  border-radius:999px;
  background:#e9efff;
  border:1px solid rgba(31,43,70,.10);
  overflow:hidden;
}

.emotion-meter .bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(47,91,255,.55), rgba(47,91,255,.95));
}

/* Mapování hodnot 1–5 bez JS (data-level) */
.emotion-meter[data-level="1"] .bar{ width:20%; }
.emotion-meter[data-level="2"] .bar{ width:40%; }
.emotion-meter[data-level="3"] .bar{ width:60%; }
.emotion-meter[data-level="4"] .bar{ width:80%; }
.emotion-meter[data-level="5"] .bar{ width:100%; }

/* Jemná změna barev u vysoké zátěže (stále "tech" vibe) */
.emotion-meter[data-level="4"] .bar{ background:linear-gradient(90deg, #2f5bff, #2a3a5f); }
.emotion-meter[data-level="5"] .bar{ background:linear-gradient(90deg, #2a3a5f, #e35f5f); }

/* Responsive */
.container{ padding: clamp(1.2em, 3.2vw, 2.1em) clamp(1em, 3vw, 1.6em); }
body{ padding-bottom: max(2em, env(safe-area-inset-bottom)); }

@media (max-width: 640px){
  .container{ margin:1.2em .8em; }
}

/* Accessibility + motion */
:focus-visible{
  outline:2px solid var(--accentSoft);
  outline-offset:2px;
  border-radius:8px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  section:hover{ transform:none !important; }
}

/* Print */
@media print{
  html, body{ background:#fff !important; }
  .container{ box-shadow:none !important; border:1px solid #ddd; }
  section{ box-shadow:none !important; background:#fff !important; }
}