/* HTML [hidden] attribute — enforce hiding (theme/CSS can override UA) */
[hidden] {
  display: none !important;
}



/* =========================================================
   BYF Izazov — CLEAN, CONSISTENT CSS (NO DUPLICATES)
   (Merged rules: last value per property wins, but earlier
   non-overridden properties are preserved to keep output identical)
   ========================================================= */

/* -------------------------
   Design tokens
-------------------------- */
:root{
  --byf-font: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --byf-ls: -0.7px;

  --w-300: 300;
  --w-400: 400;
  --w-600: 600;
  --w-700: 700;
  --w-800: 800;

  --ink: #15222b;
  --muted: #6b7280;
  --muted2: #51606b;

  --card: #ffffff;
  --card-soft: #fbfcfe;

  --border: rgba(210,220,235,.85);
  --border-soft: rgba(210,220,235,.60);

  --shadow: 0 14px 30px rgba(30,60,90,.08);
  --shadow2: 0 18px 45px rgba(30,60,90,.10);
  --shadow-soft: 0 10px 22px rgba(20,35,55,.08);

  --r-xl: 28px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 16px;

  /* Pastel washes */
  --hero-grad: linear-gradient(135deg, #E6E9FF 0%, #F0E6FF 100%);
  --hero-grad-soft: linear-gradient(135deg, #F6F7FB 0%, #FDF7FA 100%);

  /* Primary button (SOLID) */
  --btn-bg: #B9A3FF;               /* pastel lilac */
  --btn-ink: #0d2436;
  --btn-shadow: rgba(185,163,255,.28);

  /* Hearts */
  --heart-fill: #d3bafe;
  --heart-muted: rgba(124,58,237,.28);
	
	  --byf-dark-text: #0f172a; /* tamno siva, skoro crna */

}

/* -------------------------
   Base wrappers
-------------------------- */
.byf-app,
.byf-wrap{
  font-family: var(--byf-font);
  letter-spacing: var(--byf-ls);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.byf-app{
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px;
}

/* (merged: last max-width wins) */
.byf-wrap{
  max-width: 1120px;
  margin: 0 auto;
}

a:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
 {
  background-color: rgba(185, 163, 255, 0.10) !important;
}

button,
input[type="button"],
input[type="submit"],
.byf-submit {
  color: var(--byf-dark-text) !important;
}
/* -------------------------
   Layout helpers
-------------------------- */
.byf-grid{ display:grid; grid-template-columns: 360px 1fr; gap: 18px; }
@media(max-width:980px){ .byf-grid{ grid-template-columns:1fr; } }

.byf-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:760px){ .byf-grid2{ grid-template-columns:1fr; } }

.grid2{ display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:860px){ .grid2{ grid-template-columns:1fr 1fr; } }

.row4{ display:grid; grid-template-columns:1fr; gap:10px; }
@media(min-width:520px){ .row4{ grid-template-columns:1fr 1fr; } }

/* -------------------------
   Generic card
-------------------------- */
.byf-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--shadow);
  margin: 10px 0px 10px 0px;
}

/* keep (not duplicated later) */
.byf-err{ background: rgba(255,228,228,.35); border-color: rgba(240,160,160,.60); }

/* -------------------------
   HERO (weekly + other headers)
-------------------------- */
.byf-hero{
  display:grid;
  align-items: stretch;
  background: var(--hero-grad);
  border: 1px solid rgba(210,220,235,.85);
  border-radius: var(--r-xl);
  padding: 18px;
  box-shadow: var(--shadow2);
	margin-bottom:10px !important;
}

.byf-hero-left{ min-width:0; }
.byf-hero-right{ flex: 0 0 340px; }

@media(max-width:860px){
  .byf-hero{ flex-direction: column; }
  .byf-hero-right{ flex: 1; }
	margin-top: 10px;
}

.byf-kicker{
  font-size: 14px;
  color: var(--muted2);
  font-weight: 500;
}

.byf-title{
  font-weight: var(--w-800);
  font-size: 28px;
  margin-top: 6px;
  color: var(--ink);
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  letter-spacing: var(--byf-ls);
  line-height: 1.12;
}

/* ===== KV pills (Trajanje / Početak / Kraj / Kilaza unos) ===== */
.byf-kv{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

.pill{
  width:100%;
  display:flex;                 /* bitno: NE inline-flex */
  flex-direction:column;        /* label gore, vrednost dole */
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(210,220,235,.85);
  background: rgba(255,255,255,.78);
  box-shadow:none;              /* kao ranije */
}

.pill .byf-sub{
  margin:0 0 4px;
  font-size:12px;
  color: var(--muted);
  font-weight: var(--w-600);
  line-height:1.15;
}

.pill strong{
  display:block;
  font-weight: var(--w-800);
  font-size:13px;
  color: var(--ink);
  line-height:1.15;
}

/* boje ostaju iste */
.pill--lav{ background: rgba(185,163,255,.16); border-color: rgba(185,163,255,.22); }
.pill--blue{ background: rgba(134,197,255,.16); border-color: rgba(134,197,255,.22); }

/* mobilni: 1 kolona */
@media (max-width:520px){
  .byf-kv{ grid-template-columns:1fr; }
}

/* ===== Chips (mali tagovi) ostaju inline-flex ===== */
.byf-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(210,220,235,.85);
  font-size:12px;
  font-weight: var(--w-700);
  color:#33414c;
  letter-spacing: var(--byf-ls);
  box-shadow: 0 6px 14px rgba(20,35,55,.06);
  margin-top: 5px;
}

.byf-range{
  margin-top: 6px;
  color:#2b3a44;
  font-weight: var(--w-700);
  font-size: 13px;
}

.byf-note{
  color:#5b6974;
  font-size: 12px;
  max-width: 560px;
  line-height: 1.35;
  font-weight: var(--w-400);
}

.byf-sub{
  color:#7a8796;
  font-size:12px;
  margin: 0 0 14px;
  font-weight: var(--w-600);
  line-height: 1.35;
}

/* Week selector box (weekly hero right) */
.byf-weekbox{
  height:100%;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(210,220,235,.9);
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--shadow-soft);
  margin-top:5px;
}
.byf-weekbox-label{
  font-size: 16px;
  font-weight: var(--w-700);
  color:#2f3f49;
  margin-bottom: 8px;
}
.byf-weekbox-sub{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  font-weight: var(--w-400);
}
.byf-sel{
  width:100%;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(210,220,235,.95);
  background:#fff;
  font-weight: var(--w-700);
  color:#1e2b34;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
  letter-spacing: var(--byf-ls);
}

/* -------------------------
   Avatar / preview
-------------------------- */
.byf-avatar{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.byf-avatar img{
  width:56px;height:56px;border-radius:16px;
  object-fit:cover;
  border:1px solid rgba(210,220,235,.75);
  background:#f6f7fb;
}
.byf-mini{ color:#64748b; font-size:12px; }

.byf-pre{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#f6f7fb;
  border:1px solid rgba(210,220,235,.85);
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.byf-pre img{ width:100%; height:auto; display:block; }
.byf-pre .lock{
  position:absolute;
  top:10px; right:10px;
  font-size:11px;
  background:rgba(17,17,17,.92);
  color:#fff;
  padding:6px 8px;
  border-radius:10px;
  opacity:.9;
}

/* -------------------------
   Lists / chips
-------------------------- */
.byf-list{ list-style:none; padding:0; margin:0; }
.byf-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  margin-bottom:8px;
  background: rgba(255,255,255,.72);
  border:1px solid var(--border-soft);
  font-size:15px;
  flex-wrap: wrap;
}

.byf-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.byf-chip,
.byf-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(210,220,235,.75);
  color:#44525d;
  font-size:12px;
  font-weight: var(--w-600);
  box-shadow: 0 8px 16px rgba(20,35,55,.05);
  letter-spacing: var(--byf-ls);
}

/* -------------------------
   Inputs
-------------------------- */
.byf-label, .lbl{
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
  letter-spacing: var(--byf-ls);
  font-size: 14px;
}

.byf-help{
  color: var(--muted);
  font-size:12px;
  margin-top:6px;
  line-height:1.35;
}

.byf-input,.byf-select,.byf-textarea,
.byf-inp,.byf-sel,.byf-txt,
.inp,.txt,.byf-date{
  width:100%;
  border:1px solid rgba(210,220,235,.95);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background:#fff;
  font-weight: 300 !important;
  font-size: 14px;
  color:#1f2a33;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
  transition: border-color .15s, box-shadow .15s;
  letter-spacing: var(--byf-ls);
}

.byf-textarea,.txt,.byf-txt{ min-height:96px; resize:vertical; line-height:1.35; }

.byf-input:focus,.byf-select:focus,.byf-textarea:focus,
.byf-inp:focus,.byf-sel:focus,.byf-txt:focus,
.inp:focus,.txt:focus,.byf-date:focus{
  outline:none;
  border-color: rgba(134,197,255,.95);
  box-shadow: 0 0 0 4px rgba(134,197,255,.22);
}

.byf-date{ cursor:pointer; }

/* Upload UI */
.up{
  background: linear-gradient(180deg,#fbfcfe, #fff);
  border: 1px dashed rgba(210,220,235,.95);
  border-radius: var(--r-xl);
  padding: 14px;
}
.up-sub{
  color:var(--muted);
  font-size:12px;
  font-weight: var(--w-400);
  margin-bottom:10px;
  line-height:1.35;
}
.file{ position:absolute; left:-9999px; }

.btn-up{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 12px;
  border-radius:16px;
  background: rgba(134,197,255,.22);
  color:#23313a;
  font-weight: 400;
  border:1px solid rgba(134,197,255,.35);
  cursor:pointer;
  letter-spacing: var(--byf-ls);
  transition: transform .12s ease, filter .12s ease;
  font-size: 14px;
}
.btn-up:hover{ transform: translateY(-1px); }
.btn-up:active{ transform: translateY(0) scale(.99); filter:saturate(.98); }

.thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.thumbs img{
  width:74px;height:74px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(210,220,235,.75);
  box-shadow: 0 10px 18px rgba(20,35,55,.08);
}

/* Checks */
.byf-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border:1px solid rgba(210,220,235,.95);
  background:#fff;
  border-radius: var(--r-md);
  margin-bottom:10px;
  font-size: 14px;
}
.byf-check input{ margin-top:3px; }
.byf-check .t{ font-size:13px; color: var(--ink); line-height:1.35; }
.byf-check .s{ font-size:12px; color:#64748b; line-height:1.35; margin-top:2px; }

.byf-check a{ text-decoration: underline; }
.byf-check a:hover{ opacity: 0.85; }

/* -------------------------
   Alerts (merged .byf-ok last wins)
-------------------------- */
.byf-error{
  background: rgba(255,228,228,.45);
  border:1px solid rgba(240,160,160,.65);
  color:#8a1f1f;
  border-radius: var(--r-md);
  padding:12px;
  margin-bottom:12px;
}
.byf-ok{
  background: rgba(214,248,226,.45);
  border:1px solid rgba(120,210,155,.65);
  color:#0f5132;
  border-radius: var(--r-md);
  padding:12px;
  margin-bottom:12px;
}

/* -------------------------
   Buttons (SOLID)
-------------------------- */
.byf-submit,
input[type="submit"],
button[type="submit"],
.btn{
  width:100%;
  background: #f1edff;
  color: var(--btn-ink);
  font-family: var(--byf-font);
  font-weight: var(--w-800);
  font-size: 15px;
  padding: 14px 18px;
  border: 0;
  border-radius: var(--r-md);
  cursor:pointer;
  box-shadow: 0 5px 3px rgba(30,60,90,.10), 0 2px 0px var(--btn-shadow);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
  letter-spacing: var(--byf-ls);
}
.byf-submit:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.btn:hover{
  transform: translateY(-1px);
  filter: saturate(1.05);
  background: #ded5ff;
  color: var(--btn-ink);
  box-shadow: 0 5px 3px rgba(30,60,90,.10), 0 2px 0px var(--btn-shadow);
}
.byf-submit:active,
input[type="submit"]:active,
button[type="submit"]:active,
.btn:active{
  transform: translateY(0);
  filter: saturate(.99);
}
.byf-submit:disabled,.btn:disabled{ opacity:.75; cursor:not-allowed; }

/* -------------------------
   Daily log cards (.kartica)
-------------------------- */
.kartica{
  background: var(--card-soft);
  border-radius: var(--r-md);
  padding:14px 16px;
  margin:12px 0;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  border:1px solid var(--border-soft);
}
.kartica-ok{ background: rgba(214,248,226,.38) !important; border-color: rgba(120,210,155,.55) !important; }
.kartica-miss{ background: rgba(255,228,228,.32) !important; border-color: rgba(240,160,160,.55) !important; }

.kartica .byf-title{
  font-size: 16px;
  font-weight: var(--w-800);
  margin: 0;
}

.byf-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.byf-left{ display:flex; align-items:center; gap:12px; min-width:0; }

.byf-ico{
  width:52px;height:52px;
  border-radius:18px;
  background: rgba(134,197,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  flex:0 0 52px;
  border:1px solid var(--border-soft);
}

.byf-meta{ font-size:12px; color:#78838a; margin-top: 2px;}
.is-done .byf-title{ text-decoration: line-through; opacity:.72; }

.byf-inp{ max-width:200px; }
@media (max-width:768px){
  .byf-row{ flex-wrap:wrap; }
  .byf-inp{ max-width:100%; }
}

/* -------------------------
   Weekly summary
-------------------------- */
.byf-summary{
  border-radius: var(--r-xl);
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,1));
  border: 1px solid rgba(210,220,235,.75);
  box-shadow: var(--shadow);
  margin: 10px 0px 10px 0px;
}

.byf-summary-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.byf-summary-title{
  font-weight: var(--w-800);
  font-size:18px;
  margin:0;
}

.byf-summary-sub{
  margin:2px 0 0;
  font-size:12px;
  color: var(--muted);
  font-weight: var(--w-400);
  line-height:1.35;
}

.byf-srows{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }

.byf-srow{
  background: rgba(185,163,255,.10);
  border: 1px solid rgba(210,220,235,.55);
  border-radius: 20px;
  padding: 12px;
}

.byf-srow-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.byf-srow-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.byf-sico{
  width:38px;height:38px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.75);
  border:1px solid rgba(210,220,235,.65);
  box-shadow: 0 10px 18px rgba(0,0,0,.05);
  font-size:16px;
  flex:0 0 auto;
}

.byf-smeta{ min-width:0; }
.byf-slabel{
  font-size:13px;
  font-weight: var(--w-800);
  margin:0;
  color: var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.byf-ssub{
  font-size:12px;
  color: var(--muted);
  font-weight: var(--w-400);
  margin-top:2px;
  line-height:1.25;
}

.byf-srow-right{ text-align:right; white-space:nowrap; }
.byf-sval{ font-weight: var(--w-800); font-size:14px; color: var(--ink); }
.byf-sgoal{ display:block; margin-top:2px; font-size:12px; color: var(--muted); font-weight: var(--w-400); }

.byf-sbar{
  height:10px;
  border-radius:999px;
  background: rgba(230,233,255,.65);
  border:1px solid rgba(210,220,235,.6);
  overflow:hidden;
}
.byf-sbar > i{
  display:block;
  height:100%;
  width:0;
  border-radius:999px;
  background: linear-gradient(90deg, #E6E9FF 0%, rgba(134,197,255,.9) 55%, #F0E6FF 100%);
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}

/* -------------------------
   Rating hearts (SVG)
-------------------------- */
.byf-rating{ display:flex; flex-direction:column; gap:10px; }
.byf-hearts{ display:flex; justify-content:center; gap:14px; padding:6px 0; align-items:center; }

.byf-heart{
  -webkit-tap-highlight-color: transparent;
  appearance:none;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer;
  line-height:0;
  border-radius:999px;
  outline:none !important;
  box-shadow:none !important;
  position:relative;
}

.byf-heart-svg{
  width:38px;
  height:38px;
  display:block;
  fill: var(--heart-muted);
  transition: transform .12s ease, fill .12s ease;
}

.byf-heart::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(124,58,237,.22) 0%, rgba(124,58,237,0) 60%);
  opacity:0;
  transition: opacity .12s ease;
  pointer-events:none;
}
.byf-heart.is-active .byf-heart-svg{ fill: var(--heart-fill); }
.byf-heart.is-active::after{ opacity:1; }
.byf-heart:hover .byf-heart-svg{ transform: scale(1.06); }
.byf-heart:active .byf-heart-svg{ transform: scale(0.96); }

.byf-rating-label{
  text-align:center;
  font-weight: var(--w-800);
  font-size:15px;
  color:#374151;
  min-height:22px;
}
.byf-rating-label small{
  display:block;
  font-weight: var(--w-400);
  color: var(--muted);
  font-size:12px;
  margin-top:3px;
  line-height:1.25;
}

/* -------------------------
   Accordion
-------------------------- */
.byf-acc{
  background: var(--card);
  border: 1px solid rgba(210,220,235,.75);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  margin: 14px 0;
  overflow:hidden;
}

.byf-acc-sum{
  list-style:none;
  display:flex;
  gap:12px;
  align-items:center;
  padding: 14px 16px;
  cursor:pointer;
  user-select:none;
  background: linear-gradient(180deg, rgba(185,163,255,.10), rgba(255,255,255,1));
}
.byf-acc-sum::-webkit-details-marker{ display:none; }

.byf-acc-ico{
  width:42px;height:42px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(210,220,235,.8);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  font-size:18px;
  flex:0 0 auto;
}
.byf-acc-title{
  display:block;
  font-weight: var(--w-800);
  font-size: 16px;
  color: var(--ink);
}
.byf-acc-sub{
  display:block;
  margin-top:2px;
  font-size: 12px;
  font-weight: var(--w-400);
  color: var(--muted);
}
.byf-acc-body{ padding: 0 16px 16px 16px; }
.byf-acc[open] .byf-acc-sum{ border-bottom: 1px solid rgba(210,220,235,.55); }

/* -------------------------
   Overlay / loader / confetti
-------------------------- */
#byf-confetti{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:99998;
}

/* merged: keeps earlier backdrop-filter + color + text-align, last layout/background wins */
#byf-overlay,
#byf-overlay-prijava{
  position: fixed;
  inset: 0;
  display: none;            /* JS pali */
  align-items: center;
  justify-content: center;
  background: rgb(16 16 16 / 37%);
  z-index: 99999;
  padding: 18px;

  /* from earlier #byf-overlay */
  backdrop-filter: blur(2px);
  color:#000;
  text-align:center;
}

#byf-overlay .box,
#byf-overlay-prijava .box{
  width: min(520px, 92vw);
  background: #fff;
  border-radius: 18px;
  padding: 18px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);

  /* from earlier #byf-overlay .box */
  max-width:560px;
  border:1px solid rgba(255,255,255,.2);
}

#byf-overlay .loader,
#byf-overlay-prijava .loader{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 4px solid rgba(0,0,0,.12);
  border-top-color: rgba(0,0,0,.55);
  margin: 0 auto 12px;
  animation: byfspin 0.9s linear infinite;
}

@keyframes byfspin { to { transform: rotate(360deg); } }

/* Celebration in-page */
.byf-celebrate{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  padding:16px;
  margin:12px 0;
  border:1px solid rgba(210,220,235,.85);
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  background:
    radial-gradient(600px 180px at 20% 20%, rgba(247,198,217,.45), transparent 60%),
    radial-gradient(600px 180px at 80% 30%, rgba(167,199,231,.45), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.76));
  animation:byfPop .45s ease-out both;
}
@keyframes byfPop{
  from{ transform:translateY(10px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
.byf-celebrate:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(135deg, rgba(167,199,231,.45), rgba(247,198,217,.45));
  filter:blur(18px);
  opacity:.45;
  z-index:0;
}
.byf-celebrate-left{ position:relative; z-index:1; padding-right:52px; }
.byf-badge{
  display:inline-block;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(36,49,58,.10);
  background:rgba(255,255,255,.75);
  font-weight: var(--w-800);
  letter-spacing:.2px;
  font-size:12px;
  margin-bottom:8px;
}
.byf-celebrate-title{
  font-weight: var(--w-800);
  font-size:18px;
  margin-bottom:4px;
}
.byf-celebrate-meta{
  font-size:12px;
  color:#4b5563;
}
.byf-celebrate-close{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(36,49,58,.12);
  background:rgba(255,255,255,.7);
  cursor:pointer;
  z-index:2;
}
.byf-celebrate-close:hover{ transform:translateY(-1px); }

/* -------------------------
   Mobile tweaks
-------------------------- */
@media(max-width:520px){
  .byf-title{ font-size:26px; }
  .byf-card{ border-radius:22px; }
  .thumbs img{ width:66px;height:66px; }

  /* sticky submit on small screens */
  .btn, .byf-submit{
    position: sticky;
    bottom: 10px;
    z-index: 10;
  }
}

/* =========================
   CILJEVI — FIX
   ========================= */
.byf-wrap > .byf-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  align-items: start !important;
}

@media (max-width: 1100px){
  .byf-wrap > .byf-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 720px){
  .byf-wrap > .byf-grid{
    grid-template-columns: 1fr !important;
  }
}

.byf-wrap > .byf-grid > *{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(210,220,235,.75) !important;
  border-radius: 22px !important;
  padding: 18px !important;
  box-shadow: 0 14px 30px rgba(30,60,90,.08) !important;
}

.byf-wrap > .byf-grid > * h3,
.byf-wrap > .byf-grid > * .phase-title{
  margin: 0 0 6px !important;
  font-weight: 800 !important;
}

.byf-wrap > .byf-grid > * .btn,
.byf-wrap > .byf-grid > * button,
.byf-wrap > .byf-grid > * input[type="submit"]{
  width: 100% !important;
}

/* Titles */
.byf-h2{
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: #15222b;
  margin: 0px;
}

.sec-title{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.7px;
  color: #15222b;
}

.sec-sub{
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.7px;
  color: #15222b;
  margin: 0px 0px 4px 0px;
}

.byf-hero-glavni{
  display:grid;
  align-items: stretch;
  background: linear-gradient(135deg, #e4eaf6 0%, #ffffff 100%);
  border: 1px solid rgba(210,220,235,.85);
  border-radius: var(--r-xl);
  padding: 18px;
  box-shadow: var(--shadow2);
}

.pill-faza{
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 14px;
  border: 1px solid rgba(210, 220, 235, .85);
  background: rgba(255, 255, 255, .78);
  box-shadow: none;
}

/* Fullscreen celebrate overlay */
#byf-celebrate{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 100000;
  pointer-events: none;
}
#byf-celebrate #byf-confetti{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
#byf-celebrate .msg{
  position:absolute;
  left:50%;
  top:18%;
  transform:translateX(-50%);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(210,220,235,.85);
  border-radius:20px;
  padding:14px 16px;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
  color:#15222b;
  text-align:center;
  min-width:280px;
  max-width:min(560px, 92vw);
}

/* =========================
   COMMUNITY
   ========================= */
.byf-community .byf-community-bar{
  display:flex; gap:8px; align-items:center; margin-top:10px;
}
.byf-community .byf-community-date{
  display:flex; gap:10px; align-items:center; width:100%;
}
.byf-community .byf-community-date .byf-date{ flex:1; }

.byf-mini-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 8px; border-radius:12px;
  border:1px solid rgba(210,220,235,.85);
  background: rgba(255,255,255,.75);
  cursor:pointer; text-decoration:none; color: var(--ink);
  font-weight: 700;
	font-size: 13px !important;
}
.byf-mini-btn.is-disabled, .byf-mini-btn[aria-disabled="true"]{
  opacity:.5; pointer-events:none;
}


.byf-mini-btn:hover{
  display:inline-flex; align-items:center; justify-content:center;
  padding:6px 8px; border-radius:12px;
  border:1px solid rgba(210,220,235,.85);
  background: rgba(255,255,255,.75);
  cursor:pointer; text-decoration:none; color: var(--ink);
  font-weight: 700;
	font-size: 13px !important;
}

.byf-community-tabs{
  display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;
}
.byf-tab{
  display:inline-flex; align-items:center; justify-content:center;
  padding:7px 10px; border-radius:999px;
  border:1px solid rgba(210,220,235,.75);
  background: rgba(255,255,255,.75);
  color: #33414c; text-decoration:none;
  font-size:12px; font-weight: var(--w-700);
}
.byf-tab.is-active{
  background: rgba(185,163,255,.18);
  border-color: rgba(185,163,255,.28);
}

.byf-community-feed{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
}

.byf-moment{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 15px 12px 15px 12px;
}

.byf-moment-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom: 10px;
}

.byf-moment-open{
  display:flex; align-items:center; gap:10px;
  border:0; background:transparent; padding:0; cursor:pointer;
  text-align:left; width:100%;
}
.byf-moment-open .byf-ava{
  width:56px; height:56px; border-radius:16px; object-fit:cover;
  border: 1px solid rgba(210,220,235,.75);
  background:#f6f7fb;
}
.byf-moment-meta{ min-width:0; }
.byf-moment-name{
  font-weight: var(--w-800);
  font-size: 15px;
  display:flex; gap:6px; align-items:baseline; flex-wrap:wrap;
}
.byf-moment-sub{
  color: var(--muted);
  font-size: 12px;
  margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width: 220px;
}
.byf-mini-dot{ opacity:.45; }
.byf-badge-sm{
  display:inline-flex; align-items:center;
  padding:4px 8px; border-radius:999px;
  background: rgba(134,197,255,.16);
  border:1px solid rgba(134,197,255,.24);
  font-size:12px; font-weight: var(--w-800);
}

.byf-follow{
  flex: 0 0 auto;
  border:1px solid rgba(210,220,235,.85);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: var(--w-800);
  font-size: 12px;
  cursor:pointer;
  white-space:nowrap;
  color: #2e2e2e;
}
.byf-follow--big{ padding:10px 12px; font-size:13px; }

.byf-moment-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border-soft);
  font-size: 13px;
  color: #2b3a44;
  line-height: 1.35;
}

.byf-chip-ok{ background: rgba(214,248,226,.5); border-color: rgba(120,210,155,.55); }
.byf-chip-bad{ background: rgba(255,228,228,.38); border-color: rgba(240,160,160,.55); }


.byf-chip.byf-chip-ok{ background: rgba(214,248,226,.5); border-color: rgba(120,210,155,.55); }
.byf-chip.byf-chip-bad{ background: rgba(255,228,228,.38); border-color: rgba(240,160,160,.55); }

.byf-reacts{
  display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;
}
.byf-react{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(210,220,235,.75);
  background: rgba(255,255,255,.75);
  font-weight: var(--w-800);
  font-size: 12px;
  cursor:pointer;
}
.byf-react.is-on{
  background: rgba(185,163,255,.18);
  border-color: rgba(185,163,255,.28);
}
.byf-react:disabled{ opacity:.55; cursor:not-allowed; }

/* -------------------------
   Modal profile
-------------------------- */
.byf-modal{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 100001;
}
.byf-modal.is-open{ display:block; }
.byf-modal-backdrop{
  position:absolute; inset:0;
  background: rgba(36,49,58,.72);
  backdrop-filter: blur(2px);
}
.byf-modal-card{
  position:absolute;
  left:50%; top:6%;
  transform: translateX(-50%);
  width: min(920px, 92vw);
  max-height: 88vh;
  overflow: auto;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(210,220,235,.85);
  border-radius: var(--r-xl);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  padding: 16px;
}
.byf-modal-x{
  position: sticky;
  top: 8px;
  margin-left:auto;
  display:block;
  width: 50px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(210,220,235,.85);
  background: rgba(255,255,255,.75);
  cursor:pointer;
}
.byf-profile-head{
  display:flex; gap:12px; align-items:center;
  margin-top:10px;
}
.byf-profile-head .byf-ava{
  width:72px; height:72px; border-radius: 20px; object-fit:cover;
  border: 1px solid rgba(210,220,235,.75);
  background:#f6f7fb;
}
.byf-profile-title{ flex:1; min-width:0; }
.byf-profile-name{ font-weight: var(--w-800); font-size: 18px; }
.byf-profile-sub{
  color: var(--muted);
  font-size: 12px;
  margin-top:2px;
  display:flex; gap:8px; flex-wrap:wrap;
}
.byf-profile-links{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }

.byf-profile-box{
  margin-top:14px;
  border: 1px solid rgba(210,220,235,.75);
  border-radius: var(--r-xl);
  padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,1));
}
.byf-profile-kicker{
  font-size: 18px;
  color: var(--muted2);
  font-weight: var(--w-800);
  margin-bottom: 10px;
}

.byf-profile-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 860px){
  .byf-profile-grid{ grid-template-columns: 1fr 1fr; }
}

.byf-week{
  border: 1px solid rgba(210,220,235,.7);
  border-radius: 22px;
  padding: 12px;
  background: rgba(185,163,255,.08);
}
.byf-week-top{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  margin-bottom: 8px;
}
.byf-week-title{ font-weight: var(--w-800); font-size: 13px; }
.byf-week-mini{ font-size: 12px; color: var(--muted); }
.byf-week-texts{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.byf-week-text{ font-size: 13px; color:#2b3a44; line-height:1.35; }

/* COMMUNITY: ne razvlači submit na 100% u navigaciji dana */
.byf-community .byf-community-date,
.byf-community .byf-community-date button[type="submit"]{
  width: auto !important;
}
.byf-community .byf-mini-btn{
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 10px 14px;
  border-radius: 14px;
}

/* COMMUNITY: izoluj od Hello/Elementor tema boja */
.byf-community a,
.byf-community a:visited{
  color: #33414c !important;
  text-decoration: none !important;
}
.byf-community a:hover,
.byf-community a:focus{
  color: #111827 !important;
  text-decoration: none !important;
}
.byf-community .byf-moment-open{ color: inherit !important; }
.byf-community .byf-moment-open:hover .byf-moment-name{ color: #111827 !important; }

.byf-community button:focus,
.byf-community button:focus-visible,
.byf-community a:focus,
.byf-community a:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(185,163,255,.20) !important;
  border-radius: 14px;
}
.byf-community .byf-moment-open *{ color: inherit !important; }

.byf-community .byf-moment{
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.byf-community .byf-moment:hover{
  transform: translateY(-1px);
  border-color: rgba(185,163,255,.35);
  box-shadow: 0 14px 30px rgba(17,24,39,.08);
}

.byf-community .byf-moment-name{
  color: #2b3a44;
  transition: color .12s ease;
}

.byf-community .byf-follow{ border-color: rgba(185,163,255,.28); }
.byf-community .byf-follow[aria-pressed="true"]{
  background: rgba(185,163,255,.18);
  border-color: rgba(185,163,255,.35);
}

/* kill Hello/Elementor pink hover */
.byf-community .byf-moment-open{
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  box-shadow: none !important;
}
.byf-community .byf-moment-open:hover,
.byf-community .byf-moment-open:focus,
.byf-community .byf-moment-open:focus-visible{
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  outline: none !important;
}
.byf-community .byf-moment-open:hover *,
.byf-community .byf-moment-open:focus *,
.byf-community .byf-moment-open:focus-visible *{
  color: inherit !important;
}
.byf-community .byf-moment-open:focus-visible{
  box-shadow: 0 0 0 4px rgba(185,163,255,.22) !important;
  border-radius: 18px;
}

.byf-community .byf-follow:hover,
.byf-community .byf-follow:focus,
.byf-community .byf-follow:focus-visible{
  background: rgba(240,242,255,.9) !important;
  border-color: rgba(185,163,255,.45) !important;
  color: #2e2e2e !important;
  box-shadow: none !important;
  outline: none !important;
}
.byf-community .byf-follow[aria-pressed="true"]{
  background: rgba(185,163,255,.18) !important;
  border-color: rgba(185,163,255,.45) !important;
  color: #2e2e2e !important;
}
.byf-community .byf-follow[aria-pressed="true"]:hover{
  background: rgba(185,163,255,.25) !important;
  border-color: rgba(185,163,255,.55) !important;
}

/* BYF REACTIONS – NO HOVER (kill theme styles) */
.byf-community .byf-react{
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(210,220,235,.85);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  color: #2e2e2e;
  transition: none !important;
  position: relative; /* tooltip anchor */
}

.byf-community .byf-react:hover,
.byf-community .byf-react:focus,
.byf-community .byf-react:focus-visible{
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(210,220,235,.85) !important;
  color: #2e2e2e !important;
  box-shadow: none !important;
  outline: none !important;
}
.byf-community .byf-react:hover *,
.byf-community .byf-react:focus *,
.byf-community .byf-react:focus-visible *{
  color: inherit !important;
}
.byf-community .byf-react.is-on{
  background: rgba(185,163,255,.22) !important;
  border-color: rgba(185,163,255,.45) !important;
  color: #2e2e2e !important;
}
.byf-community .byf-react.is-on:hover{
  background: rgba(185,163,255,.22) !important;
  border-color: rgba(185,163,255,.45) !important;
}

/* Reactions tooltip */
.byf-community .byf-react::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(17,24,39,.92);
  color: #fff;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 50;
  max-width: 240px;
}
.byf-community .byf-react:hover::after{ opacity: 1; }
@media (hover:none){
  .byf-community .byf-react:hover::after{ opacity: 0; }
}

.byf-community .byf-react::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(17,24,39,.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.byf-community .byf-react:hover::before{ opacity: 1; }

@media (hover:none){
  .byf-community .byf-react.byf-tip-on::after,
  .byf-community .byf-react.byf-tip-on::before{
    opacity: 1;
  }
}

.byf-community .byf-emo-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background: rgba(185,163,255,.14);
  border:1px solid rgba(185,163,255,.25);
  color:#2b3a44;
  width: fit-content;
}

/* Divider between profile and day content (last version) */
.byf-divider{
  height:1px;
  background: linear-gradient(90deg, rgba(231,236,245,0), rgba(231,236,245,1), rgba(231,236,245,0));
  margin: 6px 14px 10px;
}

/* Day box (last version) */
.byf-daybox{
  margin: 0 8px 12px;
  padding: 12px;
  border:1px solid #eef2f7;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(99,102,241,.05), rgba(255,255,255,1));
}

.byf-day-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:10px;
}
.byf-day-title{
  font-weight:900;
  font-size:13px;
  letter-spacing:-.2px;
  color:#111827;
}
.byf-day-sub{
  font-size:12px;
  color:#6b7280;
}

/* Metrics (last version) */
.byf-metrics{
  display:block;
  gap:10px;
  margin-bottom:10px;
}

.byf-metric{
  padding: 8px 10px 10px;     /* last override */
  border-radius: 12px;         /* last override */
  border: 1px solid #e8edf6;
  background: #fff;
  margin: 5px 0px 5px 0px;
}
.byf-metric-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:#374151;
  margin-bottom:8px;
}
.byf-metric-top strong{
  font-weight:900;
  color:#111827;
  white-space:nowrap;
}

/* Progress bar (last version) */
.byf-bar{
  height:6px;                 /* last override */
  border-radius:999px;
  background:#eef2f7;
  overflow:hidden;
}
.byf-bar > span{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background: rgb(235 235 235 / 91%); /* last */
}

/* Color states (merged: last background tint wins) */
.byf-metric.byf-chip-ok{
  border-color:#86efac;
  background: rgba(34,197,94,.08);
}
.byf-metric.byf-chip-bad{
  border-color:#fca5a5;
  background: rgba(239,68,68,.08);
}

/* Task line */
.byf-taskline{
  border-top:1px dashed #e9eef7;
  padding-top:10px;
}
.byf-task-title{
  font-size:12px;
  font-weight:900;
  color:#111827;
  margin-bottom:8px;
}

/* Notes section (merged: last wins) */
.byf-notes{
  margin:0 14px 12px;
  padding:12px;
  border-radius:16px;
  border:1px solid #eef2f7;
  background: linear-gradient(180deg, rgba(99,102,241,.06), rgba(255,255,255,1));
}
.byf-notes-title{
  font-weight:900;            /* from later block */
  font-size:12px;
  color:#111827;
  margin-bottom:6px;
  display:flex; align-items:center; gap:8px;
}
.byf-notes-title:before{ content:"📝"; }
.byf-notes-body{
  font-size:13px;
  line-height:1.35;
  color:#374151;
}

.byf-day-stats{
  margin:14px 0 22px;
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(180deg, #f8f7ff, #ffffff);
  border:1px solid #e6e4f5;
}

.byf-day-stats-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-weight:800;
}

.byf-day-stats-row span{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:6px 10px;
}

.byf-day-emotion{
  margin-top:10px;
  font-size:14px;
  opacity:.85;
}

@media (max-width: 520px) {
  .byf-card,
  .byf-moment {
    box-shadow: 0 6px 14px rgba(20,35,55,.08);
  }
}

#byf-confetti,
.byf-modal-card {
  will-change: transform, opacity;
}

/* =========================
   COMMUNITY — Day stats block
   ========================= */
.byf-community-daystats {
  margin-top: 14px;
}

.byf-day-stats-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.byf-day-stats-title {
  font-weight: 900;
  font-size: 18px;
  color: #111827;
  margin-bottom: 2px;
}

.byf-day-stats-i {
  width: 28px;
  height: 28px;
  border-radius: 12px;
  border: 1px solid rgba(210, 220, 235, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: rgba(255,255,255,0.7);
  opacity: 0.8;
}

.byf-community-metrics .byf-metric {
  margin: 6px 0;
}

.byf-community-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (min-width: 860px) {
  .byf-community-split {
    grid-template-columns: 1fr 1fr;
  }
}

.byf-community-box {
  border: 1px solid #eef2f7;
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.7);
}

.byf-community-box-title {
  font-weight: 900;
  font-size: 15px;
  color: #111827;
  margin-bottom: 8px;
}

.byf-community-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.byf-community-pills span {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 12px;
}

.byf-community-highlight {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #e6e4f5;
  background: linear-gradient(180deg, rgba(185,163,255,0.10), rgba(255,255,255,1));
  font-size: 13px;
  color: #374151;
  line-height: 1.35;
}

/* Skeleton (dok se učitava) */
.byf-day-skel .l1,
.byf-day-skel .l2,
.byf-day-skel .l3 {
  height: 12px;
  border-radius: 999px;
  background: #eef2f7;
  margin: 10px 0;
  overflow: hidden;
  position: relative;
}
.byf-day-skel .l1 { width: 62%; height: 14px; }
.byf-day-skel .l2 { width: 86%; }
.byf-day-skel .l3 { width: 72%; }

.byf-day-skel .l1::after,
.byf-day-skel .l2::after,
.byf-day-skel .l3::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-60%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  animation: byfShimmer 1.1s infinite;
}
@keyframes byfShimmer {
  to { transform: translateX(60%); }
}

/* Progress bar (za statistiku dnevnu) */
.byf-bar-drugi{
  height:6px;
  border-radius:999px;
  background:#cedef2;
  overflow:hidden;
}
.byf-bar-drugi > span{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background:#9bbbe6; /* ili bilo koja tamnija od pozadine */
}


.byf-emo-message{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(160, 140, 255, 0.10);
  color:#2a2a3a;
  font-size:13px;
  line-height:1.35;
}

.byf-user-emotion {
  margin-top:6px;
  font-size:13px;
  color:#6b6f85;
  display:flex;
  align-items:center;
  gap:6px;
}

.byf-emoline{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(160, 140, 255, 0.08);
  display:flex;
  align-items:center;
  gap:8px;
}

.byf-emo-label{
  font-size:13px;
  color:#5e5f78;
  white-space:nowrap;
}

.byf-emo-chip{
  font-size:13px;
  padding:4px 10px;
  border-radius:999px;
  background:#efeaff;
  color:#5b3fd6;
  font-weight:500;
}

.byf-avatar img {
  width:80px;
  height:80px;
  border-radius:50%;
  object-fit:cover;
  background:#f2f3f7;
}

.byf-checkgrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:8px;
}
@media (max-width: 680px){
  .byf-checkgrid{ grid-template-columns: 1fr; }
}
.byf-check.mini{
  margin:0;
  align-items:flex-start;
}
.byf-check.mini span{
  font-size:14px;
  line-height:1.25;
}
.byf-sekcija{
  margin-top:12px;
  padding:12px;
  border:1px solid #e6e9f5;
  border-radius:14px;
  background:#fbfcff;
}

.byf-sekcija-title{
  font-weight:800;
  color:#0f172a;
  margin-bottom:10px;
  font-size:14px;
}

.byf-limit-note{
  margin-top:8px;
  color:#b42318;
  font-weight:600;
}

/* Profil header unutar kartice (iznad dnevnog rezimea) */
.byf-moment-top--profile{
  padding:12px;
  border-radius:14px;
      background: #eaf0fbb3 !important;
    border: 1px solid #e7ecff !important;
  margin-bottom:12px;
}

.byf-moment-top--profile .byf-moment-open{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.byf-moment-top--profile .byf-moment-meta{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.byf-moment-goal{
  font-size:13px;
  font-weight:600;
  color:#5b21b6;
  line-height:1.2;
}

.byf-moment-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.byf-chip--soft{
  background:#ede9fe;
  color:#5b21b6;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:500;
  border:1px solid #e4d9ff;
}

/* mali red za trajanje */
.byf-moment-sub{
  margin-top:2px;
  opacity:.9;
}

.byf-profile-card{
  background:#fff;
  border:1px solid #e6eefc;
  border-radius:16px;
  padding:12px 14px;
}
.byf-profile-card-title{
  font-weight:800;
  margin-bottom:6px;
  color:#0f172a;
  font-size: 15px;
}
.byf-profile-text{
  color:#334155;
  line-height:1.35;
  white-space:pre-wrap;
  font-size: 13px;
}

/* chips 3 + jos */
.byf-profile-chips{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.byf-chip--soft{
  background:#f3f6ff;
  border:1px solid #e0e7ff;
  color:#1f2a37;
}

.byf-chip--more{
  background:#fff !important;
  border:1px dashed #c7d2fe;
  color:#4f46e5;
  cursor:pointer;
}

.byf-morechips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* accordion */
.byf-acc{ display:grid; gap:10px; margin-top:10px; }

.byf-acc-item{
  border:1px solid #e6eefc;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}

.byf-acc-head{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:#f7f8ff;
  border:0;
  cursor:pointer;
  text-align:left;
}

.byf-acc-title{
  font-weight:900;
  color:#0f172a;
  font-size:14px;
}

.byf-acc-sub{
  margin-top:2px;
  font-size:12px;
  color:#64748b;
}

.byf-acc-right{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.byf-mini-pill{
  background:#fff;
  border:1px solid #e6eefc;
  border-radius:999px;
  padding:6px 10px;
  font-weight:700;
  color:#0f172a;
  font-size:12px;
  white-space:nowrap;
}

.byf-acc-body{
  padding:12px 14px 14px;
}

.byf-acc-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width: 720px){
  .byf-acc-grid{ grid-template-columns:1fr; }
}

.byf-acc-box{
  border:1px solid #eef2ff;
  background:#fff;
  border-radius:14px;
  padding:12px;
}

.byf-acc-k{
  font-weight:900;
  font-size:12px;
  color:#64748b;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.byf-acc-list{
  margin:0;
  color:#1f2a37;
	padding-left: 0px !important;
}

.byf-acc-list li{ margin:6px 0; }

/* ===== Profile modal v2 layout ===== */
.byf-profile-head--v2{
  display:grid;
  grid-template-columns: 72px 1fr auto;
  gap:12px;
  align-items:center;
  padding-bottom:10px;
}

.byf-profile-mid{ min-width:0; }
.byf-profile-name{
  font-weight:900;
  font-size:20px;
  line-height:1.1;
  color:#0f172a;
}
.byf-profile-sub--wrap{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  color:#64748b;
  font-size:14px;
  margin-top:4px;
}
.byf-profile-links--v2{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.byf-pilllink{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #e6eefc;
  background:#fff;
  color:#0f172a;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
}
.byf-pilllink:hover{ filter:brightness(.98); }

.byf-profile-right{ justify-self:end; }

/* Chips row */
.byf-profile-chips-wrap{
  margin-top:10px;
}
.byf-profile-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.byf-chip--soft{
  background:#f2efff;
  border:1px solid #e8e2ff;
  color:#4c1d95;
  font-weight:800;
}
.byf-chip--more{
  cursor:pointer;
  background:#fff;
  border:1px dashed #d6d3ff;
  color:#4c1d95;
  font-weight:900;
}

/* Box sections */
.byf-profile-box--v2{
  margin-top:12px;
  display:grid;
  gap:14px;
}
.byf-profile-section{
  border:1px solid #e6eefc;
  background:#fbfdff;
  border-radius:18px;
  padding:10px;
	margin: 12px 5px;
}
.byf-profile-kicker{
  font-weight:900;
  color:#0f172a;
  margin-bottom:10px;
}

/* Your cards inside section */
.byf-profile-card{
  background:#fff;
  border:1px solid #e6eefc;
  border-radius:16px;
  padding:12px 14px;
  margin-top:10px;
}

/* Accordion */
.byf-acc-list{ display:flex; flex-direction:column; gap:10px; }
.byf-acc{
  border:1px solid #e6eefc;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
}
.byf-acc-sum{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.byf-acc-sum::-webkit-details-marker{ display:none; }

.byf-acc-left{ min-width:0; }
.byf-acc-title{
  font-weight:900;
  color:#0f172a;
}
.byf-acc-sub{
  margin-top:2px;
  color:#64748b;
  font-size:13px;
}
.byf-acc-kpis{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.byf-kpi-profil{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgb(163 197 255 / 18%);
  background:rgb(216 236 255 / 38%);
  font-weight:800;
  color:#0f172a;
  font-size:13px;
}

.byf-acc-body{
  padding:12px 14px 14px;
  border-top:1px solid #eef2ff;
  background:#fbfdff;
}
.byf-acc-block + .byf-acc-block{ margin-top:10px; }
.byf-acc-h{
  font-weight:900;
  color:#0f172a;
  margin-bottom:6px;
}


.byf-profile-muted{
  color:#64748b;
  background:#fff;
  border:1px dashed #e6eefc;
  border-radius:14px;
  padding:10px 12px;
}

/* Mobile */
@media (max-width: 720px){
  .byf-profile-head--v2{
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "av meta"
      "btn btn";
    align-items:start;
  }
  .byf-profile-left{ grid-area:av; }
  .byf-profile-mid{ grid-area:meta; }
  .byf-profile-right{ grid-area:btn; justify-self:start; margin-top:8px; }
}

.byf-acc-ul{
  list-style: none;      /* uklanja tačke */
  padding-left: 0;       /* uklanja uvlačenje */
  margin: 0;
  font-size: 14px;
}

.byf-acc-ul li{
  margin: 6px 0;         /* razmak između redova */
}

.byf-profile-progress{
  margin-top:10px;
}
.byf-profile-progress-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.byf-chip--soft{
  background:#f6f3ff;
  border:1px solid #e7ddff;
  color:#2b1b5a;
}
.byf-profile-progress-sub{
  margin-top:8px;
  color:#64748b;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.byf-profile-progress-sub .byf-mini{
  font-size:13px;
}

.byf-avatar img {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
    background: #f2f3f7;
}

/* =========================
   PROFIL – visual polish
========================= */

.byf-profile{
  max-width: 720px;
  margin: 0 auto;
}

/* kartice */
.byf-profile .byf-card{
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(220,230,245,0.9);
  box-shadow: 0 10px 30px rgba(16,24,40,0.06);
}

/* header profila */
.byf-profile .byf-card:first-child{
  background: linear-gradient(
    135deg,
    rgba(185,163,255,0.14),
    rgba(236,230,255,0.45)
  );
  border: 1px solid rgba(185,163,255,0.35);
}

/* ime / nadimak */
.byf-profile-name{
  font-family: Manrope, system-ui;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #19232d;
}

/* email ispod imena */
.byf-profile .byf-card:first-child div + div{
  font-size: 13px;
  color: rgba(25,35,45,0.6);
}

/* sekcioni naslovi */
.byf-profile h3{
  font-family: Manrope, system-ui;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-bottom: 12px;
  color: #19232d;
}

/* label */
.byf-profile label{
  font-size: 13px;
  font-weight: 700;
  color: rgba(25,35,45,0.75);
}

/* input */
.byf-profile input[type="text"],
.byf-profile input[type="email"],
.byf-profile input[type="password"]{
  border-radius: 14px;
  border: 1px solid rgba(210,220,235,0.9);
  padding: 12px 14px;
  font-size: 14px;
  background: #fff;
}

.byf-profile input:focus{
  outline: none;
  border-color: rgba(185,163,255,0.9);
  box-shadow: 0 0 0 3px rgba(185,163,255,0.18);
}

/* dugme */
.byf-btn-primary{
  background: linear-gradient(
    135deg,
    #b9a3ff,
    #9b8cff
  );
  border-radius: 16px;
  padding: 12px 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  box-shadow: 0 12px 30px rgba(185,163,255,0.35);
}

.byf-btn-primary:active{
  transform: scale(0.98);
}

/* mobilni spacing */
@media (max-width: 820px){
  .byf-profile .byf-card{
    padding: 16px;
  }
}


/* =========================
   MOJ IZAZOV — DASHBOARD
   ========================= */

.byf-dash-hero .byf-dash-actions{
  display:flex;
  gap:10x;
  flex-wrap:wrap;
  margin-top:12px;
}
.byf-dash-hero .byf-mini-btn{
  width:auto;
  flex:0 0 auto;
  padding:8px 10px;
  border-radius:14px;
}

.byf-dash-prog{
  margin-top:14px;
  padding:12px;
  border:1px solid #eef2f7;
  border-radius:16px;
  background: rgba(255,255,255,0.7);
}
.byf-dash-prog-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
  font-size:13px;
  color:#111827;
}
.byf-dash-prog-sub{
  margin-top:8px;
  font-size:12px;
  color:#6b7280;
  line-height:1.35;
}

.byf-dash-qs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width:520px){
  .byf-dash-qs{ grid-template-columns:1fr; }
}
.byf-dash-q{
  border:1px solid #eef2f7;
  border-radius:14px;
  background:#fff;
  padding:10px 12px;
}
.byf-dash-q .t{
  font-size:12px;
  color:#6b7280;
  font-weight:500;
}
.byf-dash-q .v{
  font-size:16px;
  color:#0f172a;
  font-weight:900;
  margin-top:4px;
}

/* Milestones */
.byf-ms{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}
@media (max-width:860px){
  .byf-ms{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:520px){
  .byf-ms{ grid-template-columns:1fr; }
}
.byf-ms-item{
  border:1px solid #e6eefc;
  border-radius:16px;
  background:#fff;
  padding:12px;
}
.byf-ms-item.is-done{
  background: rgba(34,197,94,0.08);
  border-color:#86efac;
}
.byf-ms-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
}
.byf-ms-top strong{
  font-weight:900;
  color:#0f172a;
}


/* Weekly grid */
.byf-weekgrid{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width:980px){
  .byf-weekgrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:620px){
  .byf-weekgrid{ grid-template-columns: 1fr; }
}

.byf-weekcard{
  border:1px solid #e6eefc;
  background:#fff;
  border-radius:18px;
  padding:12px;
  box-shadow: 0 10px 22px rgba(16,24,40,0.06);
}
.byf-weekcard-top{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.byf-weekcard-top strong{
  font-weight:900;
  color:#0f172a;
  font-size:14px;
}
.byf-weekkpis{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.byf-weekkpis .k{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #eef2ff;
  background:#f8fbff;
  font-weight:900;
  color:#0f172a;
  font-size:12px;
}

/* Notes */
.byf-notelist{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.byf-noteitem{
  border:1px solid #eef2f7;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(185,163,255,0.08), #fff);
  padding:12px;
}
.byf-noteitem-text{
  margin-top:8px;
  font-size:13px;
  line-height:1.35;
  color:#334155;
  white-space:pre-wrap;
}

/* Footer */
.byf-dash-footer{
  background: linear-gradient(135deg, rgba(185,163,255,0.16), rgba(134,197,255,0.14));
  border:1px solid rgba(185,163,255,0.28);
}
.byf-dash-footer-big{
  font-weight:900;
  font-size:18px;
  color:#0f172a;
}
.byf-dash-footer-sub{
  margin-top:6px;
  font-size:13px;
  color:#374151;
  font-weight:700;
  line-height:1.35;
}

/* Progress bar width helper (reuse your .byf-bar) */
.byf-bar > span{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  transition: width .6s cubic-bezier(0.2,0.8,0.2,1);
}


/* =========================
   DASH — WEIGHT CARD
   ========================= */
.byf-weight-kpis{
  margin-top:12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}
@media (max-width:860px){
  .byf-weight-kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.byf-weight-kpi{
  border:1px solid #eef2f7;
  border-radius:14px;
  background:#fff;
  padding:10px 12px;
}
.byf-weight-kpi .t{
  font-size:12px;
  color:#6b7280;
  font-weight:800;
}
.byf-weight-kpi .v{
  font-size:16px;
  color:#0f172a;
  font-weight:900;
  margin-top:4px;
}

.byf-weight-progress{ margin-top:12px; }

.byf-weight-trend{
  margin-top:12px;
  border-top:1px solid #eef2f7;
  padding-top:12px;
}

.byf-spark{
  margin-top:8px;
  display:flex;
  gap:6px;
  align-items:flex-end;
  height:54px;
  border:1px solid #eef2f7;
  border-radius:14px;
  padding:10px;
  background:#fff;
}
.byf-spark .b{
  flex:1;
  height: calc(var(--h) * 0.44);
  min-height:6px;
  border-radius:999px;
  background: rgba(185,163,255,0.55);
}

/* =========================
   WEIGHT — LINE CHART (merged duplicates, keep last effective values)
   ========================= */
.byf-weight-chart{
  margin-top:10px;
  border:1px solid #eef2f7;
  border-radius:16px;
  background:#fff;
  padding:10px 12px;
  overflow:hidden;
}

.byf-weight-chart svg{
  width:100%;
  height:120px;
  display:block;
  background:
    linear-gradient(to bottom, rgba(15,23,42,0.04) 1px, transparent 1px);
  background-size: 100% 26px;
  border-radius:12px;
}

/* fill area */
.byf-weight-chart .area{
  fill: url(#byfWeightFill);
  stroke: none;
}

/* main line - tanja i “app” */
.byf-weight-chart .line{
  fill:none;
  stroke: rgba(185,163,255,0.95);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* points */
.byf-weight-chart .pt{
  fill:#fff;
  stroke: rgba(185,163,255,0.85);
  stroke-width: 2;
  opacity: .7;
}
.byf-weight-chart .pt.is-last{
  opacity: 1;
  stroke-width: 3;
}

/* Reference lines */
.byf-weight-chart .ref{
  stroke-width: 1.8;
  stroke-dasharray: 7 7;
  opacity: .55;
}
.byf-weight-chart .ref.start{ stroke: rgba(59,130,246,0.60); }
.byf-weight-chart .ref.goal { stroke: rgba(34,197,94,0.60); }

.byf-weight-chart .ref-label{
  font-size: 11px;
  fill: rgba(15,23,42,0.75);
  font-weight: 800;
}

/* Legend (chips) */
.byf-weight-legend{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.byf-weight-legend .chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid #eef2f7;
  background:#fff;
  color:#0sb172a;
}
.byf-weight-legend .chip.start{ border-color: rgba(59,130,246,.25); background: rgba(59,130,246,.06); }
.byf-weight-legend .chip.goal { border-color: rgba(34,197,94,.25);  background: rgba(34,197,94,.06);  }
.byf-weight-legend .chip.now  { border-color: rgba(185,163,255,.30); background: rgba(185,163,255,.10); }

/* Umesto 4 polja: mini row chips */
.byf-weight-minirow{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Promena chip boje */
.byf-weight-legend .chip.delta-down,
.byf-weight-minirow .chip.delta-down{
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.07);
}
.byf-weight-legend .chip.delta-up,
.byf-weight-minirow .chip.delta-up{
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.07);
}
.byf-weight-legend .chip.delta-flat,
.byf-weight-minirow .chip.delta-flat{
  border-color: rgba(148,163,184,.35);
  background: rgba(148,163,184,.10);
}

/* Ref tag labels inside svg */
.byf-weight-chart .ref-tag{
  font-size: 11px;
  font-weight: 900;
  opacity: .85;
}
.byf-weight-chart .ref-tag.start{ fill: rgba(59,130,246,0.75); }
.byf-weight-chart .ref-tag.goal { fill: rgba(34,197,94,0.75); }

/* Desktop: chart da ne bude razvučen */
@media (min-width: 861px){
  .byf-weight-chart{
    max-width: 680px;   /* probaj 680–820 */
    margin-left: 0;     /* ako želiš levo poravnanje */
    /* ili centriraj: */
    /* margin-left: auto;
       margin-right: auto; */
  }
}
@media (min-width: 861px){
  .byf-weight-trend{
    max-width: 760px;
  }
}

.byf-modal-x{
  color: var(--byf-dark-text);
}
.byf-modal-x:hover{
  background: #eaf0fbb3 !important;
}

.byf-lightbox{
  position:fixed; inset:0;
  background:rgba(0,0,0,.7);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:110000;
  padding:20px;
}
.byf-lightbox.is-open{ display:flex; }
.byf-lightbox-inner{
  max-width: 900px;
  width: 100%;
}
.byf-lightbox img{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
}

/* =========================
   Phase extras (mini stats + gallery) — NO horizontal scroll
   ========================= */
.byf-phase-extras-wrap{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, .08);
}

/* Cards grid */
.byf-mini-stats{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 1100px){
  .byf-mini-stats{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .byf-mini-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .byf-mini-stats{ grid-template-columns: 1fr; }
}

.byf-mini-card{
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  padding: 12px 12px 10px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
  min-width: 0; /* IMPORTANT: prevents pushing layout sideways */
}

.byf-mini-k{
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 23, 42, .60);
  letter-spacing: .2px;
}
.byf-mini-v{
  margin-top: 6px;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 800;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.byf-mini-s{
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(15, 23, 42, .60);
}

/* Gallery container */
.byf-phase-gallery{
  margin-top: 12px;
  background: rgba(15, 23, 42, .02);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  padding: 12px;
}
.byf-phase-gallery .byf-acc-h{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

/* Gallery grid */
.byf-gal-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 900px){
  .byf-gal-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .byf-gal-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.byf-gal-item{
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
  min-width: 0;
}
.byf-gal-item img{
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transform: scale(1);
  transition: transform .18s ease;
}
.byf-gal-item:hover img{ transform: scale(1.03); }

/* Muted info box */
.byf-phase-gallery .byf-profile-muted{
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed rgba(15, 23, 42, .18);
  color: rgba(15, 23, 42, .62);
  font-size: 13px;
}

/* Make sure nothing inside forces horizontal overflow */
.byf-acc-body,
.byf-phase-extras-wrap,
.byf-phase-gallery{
  max-width: 100%;
  overflow-x: hidden;
}

/* Upload previews */
.byf-up-item .img img{
  width:100%;
  height:auto;
  aspect-ratio: 1/1;
  object-fit:cover;
  display:block;
}
.byf-up-item .meta{
  font-size:12px;
  padding:8px 10px;
  color: rgba(15,23,42,.70);
}
.byf-up-item .x{
  position:absolute;
  top:6px; right:6px;
  width:28px; height:28px;
  border:0;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:28px;
}
.byf-up-one{ margin-top:10px; }
.byf-up-one .byf-up-item{ max-width:220px; }

.byf-pv-meta{
  font-size:12px;
  opacity:.75;
  margin-top:8px;
}
.byf-pv-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
@media (max-width: 700px){
  .byf-pv-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.byf-pv-item{
  position:relative;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.byf-pv-item img{
  width:100%;
  height:auto;
  aspect-ratio: 1/1;
  object-fit:cover;
  display:block;
}
.byf-pv-item button{
  position:absolute;
  top:6px; right:6px;
  width:28px; height:28px;
  border:0;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  color:#fff;
  cursor:pointer;
  font-size:18px;
  line-height:28px;
}
.byf-pv-one .byf-pv-item{ max-width:220px; }

/* ---- Weekly upload progress + list ---- */
/* (merged duplicate selectors: keep final behavior, preserve earlier essentials) */
.byf-up-row{ margin-top: 10px; }
.byf-up-text{ font-weight: 800; color: #111; font-size: 16px; }
.byf-up-sub{ margin-top: 4px; color: rgba(17,17,17,.7); font-size: 13px; }

.byf-up-bar{
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.10);
  overflow: hidden;
}
.byf-up-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(15,23,42,.75);
  transition: width .15s linear;
}
.byf-up-meta{
  margin-top: 8px;
  color: rgba(17,17,17,.65);
  font-size: 12px;
}

/* Final (wins) */
.byf-up-list{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.byf-up-item{
  position:relative;
  overflow:hidden;

  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.7);
  border-radius: 12px;
  padding: 10px 12px;

  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 10px;
}

.byf-up-name{ font-weight: 700; color:#111; font-size: 13px; word-break: break-word; }
.byf-up-state{ grid-column: 1 / 2; color: rgba(17,17,17,.65); font-size: 12px; }
.byf-up-size{
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  color: rgba(17,17,17,.55);
  font-size: 12px;
}

/* ---- Phase gallery polish ---- */
.byf-phase-gallery .byf-acc-h{
  margin: 0 0 6px;
}
.byf-profile-muted--note{
  margin-top: 10px !important;
}

/* thumb as real card */
.byf-gal-item{
  position: relative;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
}
.byf-gal-item:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(185,163,255,.22), 0 8px 18px rgba(15,23,42,.08);
}

/* hover hint */
.byf-gal-item::after{
  content: "Uvećaj";
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17,24,39,.72);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(2px);
  transition: .15s ease;
  pointer-events: none;
}
@media (hover:hover){
  .byf-gal-item:hover::after{ opacity: 1; transform: translateY(0); }
}



/* ================================
   LIGHTBOX OVERLAY & LOCK
================================ */
.byf-lb-lock{
  overflow: hidden !important;
}

.byf-lightbox{
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* iznad profila, modala, svega */
  background: rgba(15, 23, 42, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.byf-lightbox.is-open{
  display: flex;
}

/* ================================
   LIGHTBOX INNER
================================ */
.byf-lightbox-inner{
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ================================
   IMAGE STAGE
================================ */
.byf-lb-stage{
  width: 100%;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}

.byf-lb-img{
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ================================
   CLOSE BUTTON
================================ */
.byf-lb-close{
  position: absolute;
  top: -12px;
  right: -12px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* ================================
   NAVIGATION
================================ */
.byf-lb-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,.95);
  color: #0f172a;
  font-size: 28px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.byf-lb-prev{ left: -12px; padding: 2px 0px 5px 03px;}
.byf-lb-next{ right: -12px; padding: 2px 0px 5px 03px;}

.byf-lb-nav:disabled{
  opacity: .4;
  cursor: default;
}

/* ================================
   META / COUNTER
================================ */
.byf-lb-meta{
  margin-top: 12px;
  text-align: center;
}

.byf-lb-count{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}

/* ================================
   MOBILE TWEAKS
================================ */
@media (max-width: 640px){
  .byf-lightbox{
    padding: 16px;
  }
  .byf-lb-prev{ left: 6px; padding: 0px; }
  .byf-lb-next{ right: 6px; padding: 0px; }
  .byf-lb-close{
    top: 6px;
    right: 6px;
  }
}


/* mini summary variant (phase extras modal) */
.byf-summary--mini .byf-summary-title{ font-size: 18px; }
.byf-summary--mini .byf-summary-sub{ margin-top: 2px; }

.byf-srows--mini .byf-srow{
  padding: 10px 12px;
}

.byf-srows--mini .byf-sico{
  width: 30px;
  height: 30px;
  font-size: 15px;
}

.byf-srows--mini .byf-slabel{ font-size: 13px; }
.byf-srows--mini .byf-ssub{ font-size: 11px; }

.byf-srows--mini .byf-sval{ font-size: 15px; }

.byf-srows--mini .byf-sbar{
  height: 6px;
}
.byf-srows--mini .byf-sbar i{
  height: 6px;
}

/* ============================
   FIX: iOS modal horizontal drift
   ============================ */
@media (max-width: 520px){

  /* Modal wrapper: centriranje + safe padding */
  .byf-modal{
    overflow-x: hidden; /* da nema nikakvog X pomeranja pozadine */
  }

  .byf-modal-card{
    /* umesto left:50% + translate */
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    transform: none;
	  padding: 12px;

    top: max(8px, env(safe-area-inset-top));
    max-height: calc(100vh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));

    box-sizing: border-box;
    overflow-x: hidden; /* ok je sada, jer više ne “beži” */
  }

  /* Safety: ništa unutra ne sme da gura širinu */
  .byf-modal-card *{
    box-sizing: border-box;
    max-width: 100%;
  }
}
/* =========================
   FIX: mini stats rows causing modal horizontal overflow (mobile)
   ========================= */
@media (max-width: 520px){

  /* Najvažnije: desna strana ne sme da bude nowrap na telefonu */
  .byf-summary--mini .byf-srow-right{
    white-space: normal;
    min-width: 0;
    max-width: 48%;
  }

  .byf-summary--mini .byf-sgoal{
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }



  /* Kada se prelama, nek desni blok ode u novi red i zauzme punu širinu */
  .byf-summary--mini .byf-srow-right{
    flex: 1 1 100%;
    max-width: 100%;
    text-align: left;
    margin-left: 48px; /* da se poravna ispod teksta, pored ikonice */
    margin-top: 4px;
  }
}


/* Mini summary: value on the right */
.byf-summary--mini .byf-srow-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap; /* drzi u jednom redu */
}

.byf-summary--mini .byf-srow-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* omoguci skraćivanje teksta */
}

.byf-summary--mini .byf-smeta{
  min-width: 0;
}

.byf-summary--mini .byf-slabel{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.byf-summary--mini .byf-srow-right{
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  flex: 0 0 auto;
}

.byf-summary--mini .byf-sval{
  font-weight: 900;
}

.byf-kpi-row{ margin: 6px 0 14px; }

@media (max-width: 680px){
.byf-kpi--weight{
	font-size:14px;
	
	}}
.byf-kpi--weight{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.18);
  color:#0f172a;
  font-weight: 500;
}

.byf-kpi--weight.is-down{ background: rgba(59,130,246,.12); }
.byf-kpi--weight.is-up{ background: rgba(59,130,246,.12); }
.byf-kpi--weight.is-flat{ background: rgba(59,130,246,.08); }


/* HERO KPIs */
.byf-hero-kpis{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:stretch;
}

.byf-kpi{
  flex:1 1 110px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgb(163 197 255 / 18%);
  background:rgb(245 243 255);
}

.byf-kpi-val{
  font-size:19px;
  font-weight:700;
  line-height:1.1;
}

.byf-kpi-lbl{
  font-size:13px;
  opacity:.75;
  margin-top:4px;
	font-weight:400;
}

@media (max-width: 680px){
.byf-kpi-val{
  font-size:15px;
  font-weight:700;
  line-height:1.1;
}

.byf-kpi-lbl{
  font-size:12px;
  opacity:.75;
  margin-top:4px;
	font-weight:400;
}
	}

/* Primary/ghost buttons */
.byf-mini-btn.is-primary{
  background: rgba(185,163,255,.28) !important;
  border: 1px solid rgba(185,163,255,.35) !important;
  font-weight:800;
}

.byf-mini-btn.is-ghost{
  background: transparent !important;
  border: 1px solid rgba(185,163,255,.25) !important;
  opacity:.9;
	letter-spacing: -0.7px;
}

.byf-mini-btn.is-ghost:hover{
  background: #f2f0fe !important;
  border: 1px solid rgba(185,163,255,.25) !important;
  opacity:.9;
	letter-spacing: -0.7px;
}

/* Details wrapper */
.byf-details{
  margin-top:14px;
  border-radius:18px;
  border:1px solid rgba(185,163,255,.18);
  background: rgba(185,163,255,.06);
  padding:10px 12px;
}

.byf-details-sum{
  cursor:pointer;
  font-weight:800;
  list-style:none;
}

.byf-details[open] .byf-details-sum{
  margin-bottom:10px;
}

.byf-details-body{
  padding-top:4px;
}

/* =========================
   BRZE STATISTIKE (KPI tiles)
   ========================= */

/* wrapper kartice */
.byf-weekbox,
.byf-card:has(.byf-dash-qs),
.byf-card:has(.byf-dash-q) {
  /* ništa agresivno, samo kompatibilnost */
}

/* grid */
.byf-dash-qs{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:10px;
}

/* tile */
.byf-dash-q{
  position:relative;
  padding:14px 14px;
  border-radius:16px;
  border:1px solid rgba(185,163,255,.18);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  overflow:hidden;
}

/* suptilan glow “u ćošku” */
.byf-dash-q::before{
  content:"";
  position:absolute;
  inset:-40px -40px auto auto;
  width:120px;
  height:120px;
  background: radial-gradient(circle, rgba(185,163,255,.22), rgba(185,163,255,0) 60%);
  pointer-events:none;
}

/* hover */
@media (hover:hover){
  .byf-dash-q:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(30, 20, 60, .08);
    border-color: rgba(185,163,255,.32);
  }
}

/* label (t) */
.byf-dash-q .t{
  font-size:12px;
  line-height:1.25;
  opacity:.78;
  margin-bottom:8px;

  /* clamp za dugačke naslove */
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}

/* value (v) */
.byf-dash-q .v{
  font-size:22px;
  font-weight:850;
  letter-spacing:-.2px;
  line-height:1.05;
}

/* “jedinice” tipa čaša da budu lepše */
.byf-dash-q .v small,
.byf-dash-q .v span.unit{
  font-size:13px;
  font-weight:700;
  opacity:.75;
  margin-left:6px;
}

/* layout na mobilnom */
@media (max-width: 680px){
  .byf-dash-qs{
    grid-template-columns: 1fr;
  }
  .byf-dash-q{
    padding:14px 14px;
  }
  .byf-dash-q .v{
    font-size:20px;
  }
}

/* =========================
   MILESTONES – FUN MODE
   ========================= */

.byf-milestones{
  background: linear-gradient(180deg, rgba(185,163,255,.12), rgba(185,163,255,.04));
}

.byf-ms-next{
  padding:18px;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(185,163,255,.35), rgba(185,163,255,.15));
  border:1px solid rgba(185,163,255,.40);
  margin-bottom:14px;
}

.byf-ms-next-badge{
  font-size:12px;
  font-weight:850;
  opacity:.9;
  margin-bottom:6px;
}

.byf-ms-next-title{
  font-size:20px;
  font-weight:900;
  margin-bottom:4px;
}

.byf-ms-next-sub{
  font-size:14px;
  opacity:.85;
  line-height:1.25;
}

.byf-ms-next-hint{
  margin-top:10px;
  font-size:13px;
  font-weight:750;
  color:#5b4db3;
}

.byf-ms-done-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.byf-ms-done-item{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.7);
  border:1px solid rgba(185,163,255,.25);
  font-size:13px;
  font-weight:750;
}


/* =========================
   MILESTONES – DONE BADGES
   ========================= */

.byf-ms-done-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.byf-ms-badge{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border:1px solid rgba(185,163,255,.28);
  box-shadow: 0 6px 14px rgba(30,20,60,.08);
  font-size:13px;
  font-weight:800;
  color:#3f356b;
}

.byf-ms-badge-icon{
  font-size:16px;
  line-height:1;
}

.byf-ms-badge-text{
  white-space:nowrap;
}

.byf-ms-badge:first-child{
  background: #d8ecff61;
  border-color: 1px solid rgb(163 197 255 / 18%)
}



/* =========================================
   BYF: kill Hello/Elementor hover/focus styles
   (scoped inside .byf-wrap)
========================================= */
.byf-wrap a,
.byf-wrap button {
  -webkit-tap-highlight-color: transparent;
}

.byf-wrap a:focus,
.byf-wrap a:focus-visible,
.byf-wrap button:focus,
.byf-wrap button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(185, 163, 255, 0.25) !important; /* nasa blaga boja */
}

.byf-wrap a:hover,
.byf-wrap button:hover {
  background: transparent; /* NE bojimo sve */
}

/* -------------------------
   BYF: stop ugly theme hover/focus
-------------------------- */
.byf-wrap a,
.byf-wrap button { -webkit-tap-highlight-color: transparent; }

.byf-wrap a:focus,
.byf-wrap a:focus-visible,
.byf-wrap button:focus,
.byf-wrap button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(185,163,255,0.25) !important;
}

.byf-wrap a:hover,
.byf-wrap button:hover { background: transparent; }


/* ---------- Tabs (Napred / Bočno) ---------- */
.byf-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(120, 90, 255, 0.08);
  align-items: center;
}

.byf-tabbtn {
  appearance: none;
  border: 1px solid rgba(120, 90, 255, 0.18);
  background: #fff;
  color: #222;
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: 300;
	font-size: 14px;
  line-height: 1;
  min-width: 92px;           /* <- ključ: isti “blok” */
  display: inline-flex;      /* <- poravnanje teksta */
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}

.byf-tabbtn:active { transform: scale(0.98); }

.byf-tabbtn.is-active {
  background: rgba(120, 90, 255, 0.12);
  border-color: rgba(120, 90, 255, 0.35);
}

/* ---------- Progress head ---------- */
.byf-photos-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.byf-photos-progress-title {
  font-weight: 800;
  font-size: 16px;
}

/* ---------- 2-up Compare ---------- */
.byf-compare-2up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.byf-compare-tile {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  background: #fff;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}

.byf-compare-tile:hover {
  border-color: rgba(120, 90, 255, 0.25);
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

.byf-compare-tile:active { transform: scale(0.99); }

.byf-compare-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px !important;
  letter-spacing: -0,7px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  margin-bottom: 8px;
}

@media(min-width:520px){
.byf-compare-badge {
  font-size: 15px !important;
  letter-spacing: -0,7px;
  margin-bottom: 8px;
}}

.byf-compare-badge.is-now {
  background: rgb(233 237 248);
}

.byf-compare-cap {
  margin-bottom: 8px;
  color: rgba(0,0,0,0.62);
  font-size: 12px;
}

.byf-cap-strong {
  color: rgba(0,0,0,0.82);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.7px;
}

/* Frame keeps both images same visual size */
.byf-compare-frame {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.03);
  aspect-ratio: 3 / 4; /* stabilno i lepo za body fotke */
}

.byf-compare-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* uniform look */
  object-position: center;
  display: block;
}

/* Hint */
.byf-hint {
  margin-top: 10px;
  opacity: .7;
}

/* ---------- Weeks strip ---------- */
.byf-photos-subtitle {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* WEEKS STRIP: jedan red + scroll (default) */
.byf-weekstrip{
  margin-top: 10px;
  display: grid;
  grid-auto-flow: column;
  gap: 10px;

  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;

  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-gutter: stable;

  /* lepo skrolovanje */
  scroll-padding-left: 12px;
}

/* svaki chip se "lepi" */
.byf-weekchip{
  scroll-snap-align: start;
}

/* TELEFON: ~2 u prikazu */
@media (max-width: 520px){
  .byf-weekstrip{
    grid-auto-columns: calc((100% - 10px) / 2); /* 2 kolone u viewportu */
  }
}

/* DESKTOP: ~4 u prikazu */
@media (min-width: 900px){
  .byf-weekstrip{
    grid-auto-columns: calc((100% - (10px * 3)) / 4); /* 4 kolone u viewportu */
  }
}


.byf-weekchip {
  scroll-snap-align: start;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  border-radius: 16px;
  padding: 8px;
  cursor: pointer;
  transition: border-color .15s ease, transform .08s ease, box-shadow .15s ease;
}

.byf-weekchip:active { transform: scale(0.98); }

.byf-weekchip img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  background: rgba(0,0,0,0.03);
}

.byf-weekchip .t {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(0,0,0,0.70);
  letter-spacing: -0.7px;
}

/* Active selected week */
.byf-weekchip.is-active {
  border-color: rgba(120, 90, 255, 0.45);
  box-shadow: 0 10px 24px rgba(120, 90, 255, 0.12);
}

/* ---------- Modal ---------- */
.byf-modal[aria-hidden="true"] { display: none; }
.byf-modal[aria-hidden="false"] {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.byf-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.byf-photo-modal-card {
  position: absolute;
  width: min(92vw, 720px);
  max-height: 86vh;
  margin: 6vh auto 0;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
}

.byf-modal-x {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  z-index: 2;
}

.byf-photo-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.byf-photo-modal-body {
  padding: 12px;
  overflow: auto;
}

#byf-photo-modal-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}

/* Gallery inside modal */
.byf-photo-gallery {
  padding: 14px;
  overflow: auto;
}

.byf-photo-gallery-toprow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.byf-photo-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.byf-photo-thumb {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  background: #fff;
  padding: 8px;
  text-align: left;
  cursor: pointer;
}

.byf-photo-thumb img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.byf-photo-thumb span {
  display: block;
  margin-top: 6px;
  font-weight: 800;
  font-size: 12px;
  color: rgba(0,0,0,0.72);
}

/* body scroll lock when modal open */
body.byf-modal-open { overflow: hidden; }


/* Card layout */
.byf-cal-card { position: relative; }

.byf-cal-head{
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.byf-cal-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

/* Mobile: actions below */
@media (max-width: 520px){
  .byf-cal-head{ flex-direction: column; }
  .byf-cal-actions{ width: 100%; }
  .byf-cal-actions .byf-mini-btn{ width: 100%; justify-content:center; }
}

/* Calendar grid */
.byf-cal-grid{
  margin-top: 12px;
  display: grid;
  gap: 8px;
  /* auto responsive: 5 on mobile-ish, 10 on desktop-ish */
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

@media (max-width: 900px){
  .byf-cal-grid{ grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .byf-cal-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Day tile */
.byf-cal-day{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;

  height: 44px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);

  text-decoration:none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;

  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.byf-cal-day:hover{
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.byf-cal-label{
  font-weight: 800;
  font-size: 13px;
  color: rgba(0,0,0,0.78);
}

/* Status dot (corner) */
.byf-cal-dot{
  position:absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.10);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.03);
}

/* Status styles: subtle background + dot */
.byf-cal-day.is-ok{
  border-color: rgba(40, 200, 120, 0.28);
  background: rgba(40, 200, 120, 0.06);
}
.byf-cal-day.is-ok .byf-cal-dot{ background: rgba(40, 200, 120, 0.95); }

.byf-cal-day.is-partial{
  border-color: rgba(255, 185, 60, 0.30);
  background: rgba(255, 185, 60, 0.10);
}
.byf-cal-day.is-partial .byf-cal-dot{ background: rgba(255, 185, 60, 0.95); }

.byf-cal-day.is-miss{
  border-color: rgba(245, 80, 90, 0.30);
  background: rgba(245, 80, 90, 0.08);
}
.byf-cal-day.is-miss .byf-cal-dot{ background: rgba(245, 80, 90, 0.95); }

.byf-cal-day.is-none{
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
}
.byf-cal-day.is-none .byf-cal-dot{ background: rgba(0,0,0,0.18); }

/* Today highlight (JS will add .is-today) */
.byf-cal-day.is-today{
  box-shadow: 0 0 0 3px rgba(120, 90, 255, 0.20);
  border-color: rgba(120, 90, 255, 0.35);
}

/* Legend chips */
.byf-cal-legend{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.byf-legend-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  font-weight: 800;
  color: rgba(0,0,0,0.74);
	font-size: 13px;
}

.byf-legend-chip i{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
  background: rgba(0,0,0,0.15);
}

.byf-legend-chip.is-ok i{ background: rgba(40, 200, 120, 0.95); }
.byf-legend-chip.is-partial i{ background: rgba(255, 185, 60, 0.95); }
.byf-legend-chip.is-miss i{ background: rgba(245, 80, 90, 0.95); }
.byf-legend-chip.is-none i{ background: rgba(0,0,0,0.20); }

/* Tooltip */
.byf-cal-tooltip{
  position: fixed;
  z-index: 99999;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.82);
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease;
}

.byf-cal-tooltip.is-on{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   WEIGHT CARD V4
   Blend: Story + Coach + Minimal
========================= */

.byf-weightV4{ padding:18px; }

.byf-mini{ font-size:12px; opacity:.84; }
.byf-muted{ opacity:.72; }
.byf-dot{ display:inline-block; width:6px; height:6px; border-radius:99px; background:rgba(120,120,160,.35); margin:0 8px; transform:translateY(-1px); }
.byf-arrow{ display:inline-block; margin:0 8px; opacity:.65; }

/* Head */
.byf-weightV4__head{ margin-bottom:12px; }
.byf-weightV4__titleRow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.byf-weightV4__title{ font-size:18px; font-weight:950; letter-spacing:-0.2px; }
.byf-weightV4__chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-left:auto; }
.byf-weightV4__sub{ margin-top:6px; opacity:.78; }

/* Pills */
.byf-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:900;
  border:1px solid rgba(185,163,255,.28);
  background: rgba(255,255,255,.45);
}
.byf-pill--soft{ background:rgba(185,163,255,.10); }
.byf-pill--mini{ padding:5px 9px; }
.byf-pill--rel{ cursor:pointer; }

/* Empty */
.byf-empty--v4{
  border:1px dashed rgba(185,163,255,.45);
  background:rgba(185,163,255,.06);
  border-radius:16px; padding:16px;
}
.byf-empty__title{ font-weight:950; font-size:14px; margin-bottom:6px; }
.byf-empty__text{ opacity:.92; line-height:1.35; }
.byf-empty__hint{ margin-top:10px; }

/* Snapshot (main story) */
.byf-snapshot{
  border:1px solid rgba(185,163,255,.18);
  background: rgba(255,255,255,.56);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 10px 26px rgba(20,20,40,.06);
  margin-bottom:12px;
}

.byf-snapshot__main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.byf-snapshot__kpi{ min-width: 220px; }
.byf-snapshot__label{ font-size:14px; font-weight:400; opacity:.78; }
.byf-snapshot__value{ font-size:30px; font-weight:980; letter-spacing:-0.6px; margin-top:4px; }
.byf-snapshot__meta{ margin-top:0px; }

.byf-snapshot__status{
  flex: 1;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:2px;
}
.byf-status{
  display:inline-flex; width:max-content;
  padding:7px 10px; border-radius:999px;
  border:1px solid rgba(185,163,255,.22);
  background: rgba(255,255,255,.72);
  font-weight:950; font-size:12px;
}
.byf-status--good{ color:#1f7a4f; }
.byf-status--warn{ color:#b64b4b; }
.byf-status--neutral{ color:rgba(30,30,45,.86); }

.byf-nudge{
  margin-top:12px;
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(185,163,255,.10);
  border:1px solid rgba(185,163,255,.22);
}
.byf-nudge__icon{ line-height:1; }
.byf-nudge__txt{ font-size:13px; line-height:1.25; opacity:.92; }

/* Goal strip */
.byf-goalStrip{
  margin-top:12px;
  border:1px solid rgba(185,163,255,.16);
  border-radius:16px;
  padding:12px;
  background: rgba(255,255,255,.50);
}
.byf-goalStrip__top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.byf-goalStrip__pct{ font-weight:980; font-size:14px; }
.byf-goalStrip__nums{ margin-top:4px; }

.byf-bar{
  position:relative;
  margin-top:10px;
  height:12px; border-radius:999px;
  background: rgba(185,163,255,.16);
  overflow:hidden;
}
.byf-bar--v4{ height:12px; }
.byf-bar__fill{
  display:block; height:100%;
  background: rgba(185,163,255,.92);
  border-radius:999px;
  width:0%;
  transition: width .45s ease;
}
.byf-bar__tick{
  position:absolute; top:2px; bottom:2px;
  width:2px; border-radius:2px;
  background: rgba(255,255,255,.55);
  opacity:.6;
}
.byf-bar__badge{
  position:absolute; top:-26px;
  transform: translateX(-50%);
  padding:5px 8px;
  border-radius:999px;
  font-size:11px; font-weight:950;
  background: rgba(20,20,35,.92);
  color:#fff;
  white-space:nowrap;
}
.byf-goalStrip__route{ margin-top:10px; }

/* Mini grid */
.byf-miniGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}
.byf-miniCard{
  border:1px solid rgba(185,163,255,.16);
  background: rgba(255,255,255,.52);
  border-radius:16px;
  padding:12px;
  box-shadow: 0 6px 16px rgba(20,20,40,.05);
}
.byf-miniCard__label{ font-size:13px; font-weight:400; opacity:.8; letter-spacing:-0.6px }
.byf-miniCard__value{ margin-top:6px; font-size:18px; font-weight:980; letter-spacing:-0.3px; }

/* Goal-aware delta colors */
.byf-delta{ display:inline-flex; align-items:center; gap:8px; }
.byf-delta--good{ color:#1f7a4f; }
.byf-delta--bad{ color:#b64b4b; }
.byf-delta--flat{ color:rgba(30,30,45,.88); }
.byf-delta--down{ color:#1f7a4f; }
.byf-delta--up{ color:#b64b4b; }

/* Chart */
.byf-chartV4{
  border:1px solid rgba(185,163,255,.20);
  background: rgba(255,255,255,.55);
  border-radius:18px;
  padding:14px;
  box-shadow: 0 6px 18px rgba(20,20,40,.06);
}
.byf-chartV4__top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:10px;
}
.byf-seg{
  display:inline-flex; gap:6px;
  background: rgba(185,163,255,.12);
  border:1px solid rgba(185,163,255,.22);
  border-radius:999px;
  padding:4px;
}
.byf-seg__btn{
  border:0; background:transparent;
  padding:7px 10px; border-radius:999px;
  font-weight:950; font-size:12px;
  cursor:pointer; opacity:.86;
}
.byf-seg__btn.is-active{
  background: rgba(255,255,255,.88);
  box-shadow: 0 6px 14px rgba(20,20,40,.10);
  opacity:1;
}

.byf-chartWrap{ position:relative; }
.byf-svg{
  width:100%; height:170px; display:block;
  border-radius:14px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(185,163,255,.12);
}

/* Tooltip */
.byf-tooltip{
  position:absolute; z-index:5;
  min-width: 150px;
  padding:10px 10px;
  border-radius:14px;
  background: rgba(20,20,35,.92);
  color:#fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  pointer-events:none;
  transform: translate(-50%, -110%);
  opacity:0;
  transition: opacity .12s ease;
}
.byf-tooltip.is-show{ opacity:1; }
.byf-tooltip__date{ font-size:12px; opacity:.9; }
.byf-tooltip__kg{ font-size:16px; font-weight:980; margin-top:2px; }
.byf-tooltip__delta{ opacity:.92; margin-top:4px; }
.byf-tooltip__hint{ opacity:.72; margin-top:8px; }

/* SVG */
.byf-svg [data-byf-line]{
  fill:none;
  stroke: rgba(185,163,255,.95);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 8px 18px rgba(185,163,255,.25));
}
.byf-svg .byf-pt{
  fill: rgba(185,163,255,.95);
  stroke: rgba(255,255,255,.9);
  stroke-width: 1;
}
.byf-svg .byf-pt.is-last{
  filter: drop-shadow(0 10px 18px rgba(185,163,255,.35));
}
.byf-svg .byf-ref{
  stroke: rgba(120,120,160,.35);
  stroke-width: 1.2;
  stroke-dasharray: 5 5;
}
.byf-svg .byf-refPill{
  fill: rgba(255,255,255,.80);
  stroke: rgba(185,163,255,.18);
}
.byf-svg .byf-refText{
  fill: rgba(70,70,100,.92);
  font-size: 10px;
  font-weight: 980;
}
.byf-svg .byf-hit{ cursor:pointer; }

/* Details with chevron */
.byf-details{ margin-top:12px; }
.byf-details__sum{
  cursor:pointer;
  font-weight:980;
  font-size:13px;
  opacity:.92;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(185,163,255,.08);
  border:1px solid rgba(185,163,255,.16);
}
.byf-details__sum::-webkit-details-marker{ display:none; }
.byf-details[open] .byf-details__chev{ transform: rotate(180deg); }
.byf-details__chev{ transition: transform .18s ease; opacity:.75; }
.byf-details__body{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(185,163,255,.16); }

/* Reliability popover */
.byf-pop{
  position:fixed; inset:0;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:16px;
  z-index:9999;
}
.byf-pop.is-open{ display:flex; }
.byf-pop__card{
  width:min(520px, 100%);
  border-radius:18px;
  background: rgba(255,255,255,.96);
  border:1px solid rgba(185,163,255,.22);
  box-shadow: 0 20px 60px rgba(0,0,0,.18);
  padding:14px;
}
.byf-pop__title{ font-weight:980; margin-bottom:8px; }
.byf-pop__close{
  margin-top:12px;
  border:0;
  background: rgba(185,163,255,.16);
  border:1px solid rgba(185,163,255,.22);
  border-radius:14px;
  padding:10px 12px;
  font-weight:950;
  cursor:pointer;
}

/* Responsive */
@media (max-width: 860px){
  .byf-weightV4__chips{ margin-left:0; }
  .byf-snapshot__main{ flex-direction:column; }
  .byf-snapshot__kpi{ min-width: unset; }
  .byf-miniGrid{ grid-template-columns:1fr; }
}

/* ===== Premium chips (no emojis) ===== */
.byf-weightV4__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-left:auto;
}

.byf-chipX{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(120,160,255,.22);
  background: rgba(120,160,255,.10);
  box-shadow: 0 6px 18px rgba(20,20,40,.04);
  font-weight:800;
  font-size:12px;
  color: rgba(30,30,55,.88);
  line-height:1;
}

.byf-chipX__txt{ white-space:nowrap; }

/* icons via CSS (no emoji) */
.byf-chipX__icon{
  width:16px; height:16px;
  border-radius:6px;
  background: rgba(120,160,255,.18);
  border:1px solid rgba(120,160,255,.22);
  position:relative;
  flex:0 0 auto;
}

/* Calendar icon */
.byf-chipX--date .byf-chipX__icon:before{
  content:"";
  position:absolute; inset:3px 3px 5px 3px;
  border:1.6px solid rgba(60,80,130,.75);
  border-radius:3px;
}
.byf-chipX--date .byf-chipX__icon:after{
  content:"";
  position:absolute; left:4px; right:4px; top:5px;
  height:1.6px;
  background: rgba(60,80,130,.75);
  border-radius:2px;
}

/* Counter icon */
.byf-chipX--count .byf-chipX__icon:before{
  content:"";
  position:absolute; left:4px; right:4px; top:4px;
  height:2px; border-radius:2px;
  background: rgba(60,80,130,.75);
  box-shadow: 0 4px 0 rgba(60,80,130,.55), 0 8px 0 rgba(60,80,130,.35);
}

/* Reliability chip as button */
.byf-chipX--rel{
  cursor:pointer;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.byf-chipX--rel:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(20,20,40,.07);
  background: rgba(120,160,255,.14);
}
.byf-chipX--rel:active{ transform: translateY(0px); }

.byf-chipX__dot{
  width:10px; height:10px;
  border-radius:99px;
  background: rgba(120,120,140,.35);
  box-shadow: 0 0 0 3px rgba(120,160,255,.10);
}

/* reliability levels */
.byf-chipX--rel-high .byf-chipX__dot{ background: #2bb673; }
.byf-chipX--rel-med  .byf-chipX__dot{ background: #f2b01e; }
.byf-chipX--rel-low  .byf-chipX__dot{ background: rgba(130,130,150,.45); }

/* Mobile spacing */
@media (max-width: 860px){
  .byf-weightV4__chips{ margin-left:0; }
  .byf-chipX{ padding:7px 10px; }
}

/* ===== Goal box (clean packaging) ===== */
.byf-goalBox{
  border:1px solid rgba(185,163,255,.18);
  background: rgba(255,255,255,.50);
  border-radius:16px;
  padding:14px;
}

@media (max-width: 560px){
.byf-goalBox{
    margin-top: 10px;
}}

@media (max-width: 560px){
.byf-goalBox__top{
    margin-bottom: -18px;
}}

.byf-goalBox__top{
  display:flex !important;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
}

.byf-goalBox__title{
  font-weight:900;
  font-size:14px;
  color: rgba(25,25,45,.92);
}

.byf-goalBox__pct{
  font-weight:950;
  font-size:14px;
  color: rgba(25,25,45,.92);
}

.byf-goalBox__meta{
  margin-top:6px;
  opacity:.82;
}

/* re-use your bar; make it a bit nicer here */
.byf-bar--v4{
  margin-top:10px;
  height:10px;
  border-radius:999px;
  background: rgba(185,163,255,.14);
  overflow:hidden;
}
.byf-bar--v4 .byf-bar__fill{
  background: rgba(185,163,255,.92);
}

/* ===== Route (Start — Now — Goal) ===== */
.byf-route{
  display:grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr;
  align-items:center;
  gap:10px;
  margin-top:12px;
}

.byf-route__item{
  border:1px solid rgba(185,163,255,.16);
  background: rgba(255,255,255,.62);
  border-radius:14px;
  padding:10px 10px;
  text-align:left;
}

.byf-route__label{
  font-size:11px;
  font-weight:850;
  opacity:.65;
  margin-bottom:4px;
}

.byf-route__value{
  font-size:13px;
  font-weight:950;
  letter-spacing:-0.1px;
  color: rgba(25,25,45,.92);
}

/* highlight current */
.byf-route__item--now{
  border-color: rgba(120,160,255,.28);
  background: rgba(120,160,255,.10);
  box-shadow: 0 8px 18px rgba(20,20,40,.06);
}

/* connector */
.byf-route__mid{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.byf-route__line{
  display:block;
  width:100%;
  height:2px;
  border-radius:2px;
  background: rgba(185,163,255,.22);
}

.byf-route__pin{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top:50%;
  width:16px;
  height:16px;
  border-radius:99px;
  background: rgba(255,255,255,.95);
  border:1px solid rgba(185,163,255,.22);
  display:flex;
  align-items:center;
  justify-content:center;
}

.byf-route__pinDot{
  width:8px;
  height:8px;
  border-radius:99px;
  background: rgba(185,163,255,.92);
}

/* mobile: stack route nicely */
@media (max-width: 860px){
  .byf-route{
    grid-template-columns: 1fr;
    gap:8px;
  }
  .byf-route__mid{ display:none; }
  .byf-route__item{ text-align:left; }
}

@media (max-width: 860px){
.byf-nudge{
  margin-top:-5px;
}}

/* ===== Goal timeline (Start — Now — Goal) ===== */
.byf-goalTimeline{
  margin-top:25px;
}

.byf-goalTimeline__bar{
  position:relative;
  height:18px;
  padding:4px 0;
}

.byf-goalTimeline__track{
  position:absolute;
  left:0; right:0;
  top:50%;
  transform:translateY(-50%);
  height:10px;
  border-radius:999px;
  background: rgba(185,163,255,.14);
  border: 1px solid rgba(185,163,255,.12);
}

.byf-goalTimeline__fill{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  height:10px;
  border-radius:999px;
  background: rgba(185,163,255,.92);
  box-shadow: 0 8px 18px rgba(185,163,255,.20);
}

/* end dots */
.byf-goalTimeline__dot{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  border-radius:99px;
  background: rgba(120,120,160,.50);
  box-shadow: 0 0 0 4px rgba(185,163,255,.10);
}
.byf-goalTimeline__dot--start{ left:2px; }
.byf-goalTimeline__dot--goal{ right:2px; }

/* current marker */
.byf-goalTimeline__now{
  position:absolute;
  top:50%;
  transform:translate(-50%, -50%);
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:none;
}

.byf-goalTimeline__nowRing{
  width:14px;
  height:14px;
  border-radius:99px;
  background: rgba(255,255,255,.95);
  border: 2px solid rgba(120,160,255,.55);
  box-shadow: 0 10px 22px rgba(20,20,40,.10);
  position:relative;
}
.byf-goalTimeline__nowRing:after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:99px;
  background: rgba(185,163,255,.92);
}

.byf-goalTimeline__nowTag{
  font-size:11px;
  font-weight:900;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(120,160,255,.22);
  background: rgba(120,160,255,.10);
  color: rgba(40,50,95,.92);
  transform: translateY(-18px);
}

/* labels under */
.byf-goalTimeline__labels{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
  margin-top:8px;
}

.byf-goalTimeline__cap{
  font-size:11px;
  font-weight:500;
  opacity:.65;
  margin-bottom:4px;
}

.byf-goalTimeline__val{
  font-size:14px;
  font-weight:950;
  letter-spacing:-0.7px;
  color: rgba(25,25,45,.92);
}

.byf-goalTimeline__item--center{ text-align:center; }
.byf-goalTimeline__item--right{ text-align:right; }

@media (max-width: 860px){
  .byf-goalTimeline__nowTag{ display:none; }
  .byf-goalTimeline__labels{ gap:6px; }
}

.byf-chartWrap {
  width: 100%;
}

@media (min-width: 1024px) {
  .byf-chartWrap {
    max-width: 580px;
    margin-left: 0;
    margin-right: auto;
  }
}

.byf-refText{
  font-size: 10.5px;
  font-weight: 500;
  fill: rgba(120,120,160,.55);
}





/* DETAILS – stronger selectors (theme-safe) */
.byf-weightV2 .byf-details{
  border: 1px solid rgba(185,163,255,.18);
  background: rgba(255,255,255,.55);
  border-radius: 16px;
  padding: 10px 12px;
  margin-top: 12px;
  box-shadow: 0 6px 18px rgba(20,20,40,.05);
}

.byf-weightV2 .byf-details__sum{
  list-style: none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  cursor: pointer;
  font-weight: 900;
  padding: 8px 8px;
  border-radius: 12px;
}
.byf-weightV2 .byf-details__sum::-webkit-details-marker{ display:none; }

.byf-weightV2 .byf-details[open] .byf-details__sum{
  background: rgba(185,163,255,.08);
}

.byf-weightV2 .byf-details__title{ font-size: 14px; }

.byf-weightV2 .byf-details__chev{
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(185,163,255,.22);
  background: rgba(185,163,255,.10);
  display:grid;
  place-items:center;
}
.byf-weightV2 .byf-details__chev:before{
  content:"";
  width: 8px; height: 8px;
  border-right: 2px solid rgba(40,50,95,.65);
  border-bottom: 2px solid rgba(40,50,95,.65);
  transform: rotate(45deg);
  transition: transform .18s ease;
  margin-top: -2px;
}
.byf-weightV2 .byf-details[open] .byf-details__chev:before{
  transform: rotate(-135deg);
  margin-top: 2px;
}

.byf-weightV2 .byf-details__body{
  padding: 10px 6px 6px;
}

.byf-weightV2 .byf-detailsGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 860px){
  .byf-weightV2 .byf-detailsGrid{ grid-template-columns: 1fr; }
}

.byf-stat{
  border: 1px solid rgba(185,163,255,.14);
  background: rgba(255,255,255,.62);
  border-radius: 14px;
  padding: 12px;
}

.byf-stat__label{
  font-size: 12px;
  font-weight: 800;
  opacity: .72;
  margin-bottom: 6px;
}

.byf-stat__value{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.2px;
}

.byf-stat__sub{
  margin-top: 6px;
  opacity: .80;
}

/* reliability pill */
.byf-weightV2 .byf-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(185,163,255,.22);
  background: rgba(185,163,255,.10);
}
.byf-weightV2 .byf-pill--high{ border-color: rgba(60,170,120,.25); background: rgba(60,170,120,.10); }
.byf-weightV2 .byf-pill--med { border-color: rgba(230,170,70,.25);  background: rgba(230,170,70,.12); }
.byf-weightV2 .byf-pill--low { border-color: rgba(140,140,160,.22); background: rgba(140,140,160,.10); }



/* PLAN ISHRANE */

/* =========================
   PLANOVI ISHRANE (premium)
   ========================= */
/* =========================
   PLANOVI ISHRANE (premium)
   ========================= */
.byf-mealPage {
  display: block;
}

.byf-mealHero {
  position: relative;
  overflow: hidden;
}

.byf-mealHero::before {
  content: "";
  position: absolute;
  inset: -40px -60px auto -60px;
  height: 180px;
  background:
    radial-gradient(circle at 30% 30%, rgba(185, 163, 255, 0.22), transparent 60%),
    radial-gradient(circle at 70% 10%, rgba(120, 160, 255, 0.18), transparent 55%),
    radial-gradient(circle at 60% 70%, rgba(247, 198, 217, 0.18), transparent 55%);
  pointer-events: none;
}

.byf-mealHero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
}

.byf-mealHero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(185, 163, 255, 0.22);
  background: rgba(255, 255, 255, 0.55);
  color: rgba(25, 25, 45, 0.92);
}

.byf-mealHero__spark {
  font-size: 18px;
  opacity: 0.9;
}

.byf-mealHero__title {
  margin-top: 10px;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.6px;
  color: rgba(25, 25, 45, 0.94);
  position: relative;
}

.byf-mealHero__sub {
  margin: 8px 0 0 0;
  line-height: 1.55;
  color: rgba(25, 25, 45, 0.82);
  position: relative;
}

.byf-mealHero__tips {
  margin-top: 12px;
  display: grid;
  gap: 8px;
  position: relative;
}

.byf-mealTip {
  border: 1px solid rgba(185, 163, 255, 0.16);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  color: rgba(25, 25, 45, 0.86);
}

/* grid tiles */
.byf-mealGrid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 700px) {
  .byf-mealGrid { grid-template-columns: 1fr; }
}

.byf-pdfTile {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none !important;
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(185, 163, 255, 0.18);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 10px 22px rgba(20, 20, 40, 0.06);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.byf-pdfTile__ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 18px;
  border: 1px solid rgba(185, 163, 255, 0.18);
  background: rgba(185, 163, 255, 0.10);
  flex: 0 0 auto;
}

.byf-pdfTile__body {
  min-width: 0;
  flex: 1 1 auto;
}

.byf-pdfTile__title {
  font-weight: 950;
  font-size: 14px;
  letter-spacing: -0.2px;
  color: rgba(25, 25, 45, 0.92);
}

.byf-pdfTile__meta {
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.72;
  color: rgba(25, 25, 45, 0.85);
}

.byf-pdfTile__go {
  font-weight: 900;
  opacity: 0.7;
}

/* phase header */
.byf-phaseHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.byf-phaseTitle {
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.3px;
  color: rgba(25, 25, 45, 0.92);
}

.byf-phaseMeta {
  margin-top: 2px;
  font-size: 12px;
  opacity: 0.7;
}

.byf-phaseChip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(185, 163, 255, 0.18);
  background: rgba(255, 255, 255, 0.55);
}

/* locked style */
.byf-phase.is-locked {
  position: relative;
}

.byf-phase.is-locked .byf-pdfTile {
  opacity: 0.55;
  filter: grayscale(0.25);
  transform: none !important;
  cursor: not-allowed;
}

.byf-lockedNote {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(25, 25, 45, 0.76);
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px dashed rgba(185, 163, 255, 0.22);
  background: rgba(185, 163, 255, 0.08);
}

/* toast */
.byf-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;

  max-width: min(520px, calc(100vw - 24px));
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(185, 163, 255, 0.22);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 34px rgba(20, 20, 40, 0.16);
  color: rgba(25, 25, 45, 0.92);
  font-weight: 850;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.byf-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* =========================
   PDF.js VIEWER (page: /pdf)
   ========================= */
.byf-pdfViewer {
  position: relative;
  background: #fff;
  border: 1px solid rgba(210, 220, 235, 0.9);
  border-radius: 18px;
  overflow: hidden;
}

.byf-pdfTopbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(210, 220, 235, 0.9);
}

.byf-pdfTopbar__mid {
  flex: 1;
  min-width: 0;
}

.byf-pdfDocTitle {
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.byf-pdfMeta {
  font-size: 12px;
  color: rgba(16, 24, 40, 0.6);
  margin-top: 2px;
}

.byf-pdfControls {
  position: sticky;
  top: 54px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(210, 220, 235, 0.9);
}

.byf-pdfSpacer { flex: 1; }

.byf-pdfBtn {
  appearance: none;
  border: 1px solid rgba(210, 220, 235, 0.9);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  line-height: 1;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.byf-pdfBtn.is-x {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}

.byf-pdfBtn.is-link {
  white-space: nowrap;
  font-size: 13px;
  padding: 10px 12px;
}

.byf-pdfStage {
  padding: 14px;
  display: flex;
  justify-content: center;
  background: #f7f8fb;
  min-height: 70vh;
}

.byf-pdfCanvas {
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(16, 24, 40, 0.08);
}

/* =========================
   HOVER OVERRIDE (soft premium)
   ========================= */
.byf-mealPage a:hover,
.byf-mealPage button:hover {
  text-decoration: none !important;
}

/* tiles hover (soft) */
.byf-pdfTile:hover {
  transform: translateY(-2px);
  border-color: rgba(185, 163, 255, 0.35);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.75),
    rgba(245, 242, 255, 0.85)
  );
  box-shadow: 0 18px 40px rgba(25, 25, 60, 0.12);
}

/* pdf buttons hover (soft) */
.byf-pdfBtn:hover {
  background: linear-gradient(
    180deg,
    rgba(245, 242, 255, 0.90),
    rgba(255, 255, 255, 0.95)
  );
  border-color: rgba(185, 163, 255, 0.40);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(25, 25, 60, 0.12);
}

.byf-pdfBtn.is-x:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 235, 240, 0.90),
    rgba(255, 255, 255, 0.95)
  );
  border-color: rgba(247, 198, 217, 0.55);
}

/* locked hover stays locked */
.byf-phase.is-locked .byf-pdfTile:hover {
  transform: none;
  box-shadow: 0 10px 22px rgba(20, 20, 40, 0.06);
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(185, 163, 255, 0.18);
}


/* =========================
   BYF HOVER OVERRIDES (soft & premium)
   ========================= */

/* ukloni Elementor agresivan hover */
.byf-mealPage a:hover,
.byf-mealPage button:hover {
  text-decoration: none !important;
}

/* PDF tiles hover */
.byf-pdfTile {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}

.byf-pdfTile:hover {
  transform: translateY(-2px);
  border-color: rgba(185,163,255,0.35);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.75),
      rgba(245,242,255,0.85)
    );
  box-shadow:
    0 18px 40px rgba(25,25,60,0.12);
}

/* dugmad u PDF vieweru */
.byf-pdfBtn {
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.byf-pdfBtn:hover {
  background:
    linear-gradient(
      180deg,
      rgba(245,242,255,0.9),
      rgba(255,255,255,0.95)
    );
  border-color: rgba(185,163,255,0.4);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(25,25,60,0.12);
}

/* X dugme – malo drugačiji hover */
.byf-pdfBtn.is-x:hover {
  background:
    linear-gradient(
      180deg,
      rgba(255,235,240,0.9),
      rgba(255,255,255,0.95)
    );
  border-color: rgba(247,198,217,0.55);
}

/* disabled stanje (npr. locked faze) */
.byf-phase.is-locked .byf-pdfTile:hover {
  transform: none;
  box-shadow: 0 10px 22px rgba(20,20,40,0.06);
  background: rgba(255,255,255,0.55);
  border-color: rgba(185,163,255,0.18);
}


/* TRENINZI */

.byf-workouts-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.byf-workout-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.byf-workout-thumb {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* ovo pomaže browseru da koristi bolju interpolaciju */
    image-rendering: -webkit-optimize-contrast;
}

@media (max-width: 640px){
.byf-workout-thumb {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* ovo pomaže browseru da koristi bolju interpolaciju */
    image-rendering: -webkit-optimize-contrast;
}
}

.byf-workout-content{ padding:14px; }

.byf-workout-meta{
  font-size:12px;
  opacity:.7;
  margin-bottom:6px;
}

.byf-workout-title{
  font-size:16px;
  font-weight:700;
  margin-bottom:6px;
}

.byf-workout-sub{
  font-size:13px;
  opacity:.8;
  margin-bottom:10px;
}

.byf-workout-intro{
  font-size:13px;
  opacity:.85;
  margin-bottom:10px;
  line-height:1.35;
}

.byf-workout-eq{
  font-size:12px;
  opacity:.75;
  margin-bottom:12px;
}

.byf-workout-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.byf-modal[hidden]{ display:none; }
.byf-modal{
  position:fixed; inset:0;
  z-index:99999;
}
.byf-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
}
.byf-modal__panel{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(920px, calc(100vw - 24px));
  max-height:calc(100vh - 24px);
  overflow:auto;
  background:#fff;
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.byf-modal__close{
  position:sticky;
  top:0;
  float:right;
  margin:10px;
  width:40px;
  height:40px;
  border-radius:12px;
  border:0;
  background:#f2f2f2;
  cursor:pointer;
}
html.byf-modal-open, body.byf-modal-open { overflow:hidden; }

.byf-video{
  margin: 0 16px;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}

/* desktop/tablet default: 16:9 */
.byf-video iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
}

/* mobile: 9:16 (portrait) */
@media (max-width: 640px){
  .byf-video iframe{
    aspect-ratio: 9 / 16;
  }
}

.byf-log-grid{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;      /* desktop: jedan red */
}

.byf-log-col{
  flex:1 1 0;
  min-width:120px;
}

.byf-log-label{
  font-size:12px;
  opacity:.75;
  margin-bottom:4px;
}

/* MOBILE: prelom da ništa ne ide van ekrana */
@media (max-width: 640px){
  .byf-log-grid{
    flex-wrap:wrap;      /* ✅ telefon: prelomi u novi red */
  }
  .byf-log-col{
    min-width:0;         /* ✅ da ne gura van */
    flex:1 1 48%;        /* 2 u redu (setovi + reps), pa kg dole */
  }
}

.byf-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  color: #000;
}

/* =========================
   TRENINZI — WORKOUT PLAYER (renderExercise)
   ========================= */

.byf-workout-player{
  max-width: 920px;
  margin: 0 auto;
}

.byf-player-top{
  background: linear-gradient(135deg, rgba(185,163,255,.14), rgba(236,230,255,.45));
  border: 1px solid rgba(185,163,255,.28);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow2);
        margin-bottom: 10px;
        margin-left: 15px;
        margin-right: 15px;
}

/* Title row: naziv + badge u istom redu */
.byf-ex-titleRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Badge (superset / label) — premium, kao chip */
.byf-ex-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(185,163,255,.28);
  background: rgba(255,255,255,.70);
  box-shadow: 0 8px 16px rgba(20,35,55,.06);
  font-size: 12px;
  font-weight: 800;
  color: #2b3a44;
  letter-spacing: var(--byf-ls);
}

/* Small helper line */
#byfLastInfo{
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px dashed rgba(185,163,255,.28);
  background: rgba(185,163,255,.08);
	font-size: 15px;
}

/* Resume banner u istom fazonu kao kartice */
#byfResumeBanner{
  border-radius: 16px !important;
  border: 1px solid rgba(185,163,255,.28) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 10px 22px rgba(20,35,55,.08) !important;
}

/* Inputs u log delu */
.byf-log-grid input{
  width: 100%;
  border: 1px solid rgba(210,220,235,.95);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: #fff;
  font-size: 14px;
  color: #1f2a33;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
  letter-spacing: var(--byf-ls);
}

.byf-log-grid input:focus{
  outline: none;
  border-color: rgba(134,197,255,.95);
  box-shadow: 0 0 0 4px rgba(134,197,255,.22);
}

/* Buttons (primary + ghost) */
.byf-btn{
  appearance:none;
  border: 1px solid rgba(210,220,235,.95);
  background: rgba(255,255,255,.78);
  color: var(--byf-dark-text);
  font-family: var(--byf-font);
  font-weight: 800;
  letter-spacing: var(--byf-ls);
  border-radius: 16px;
  padding: 12px 14px;
  cursor: pointer;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(20,35,55,.06);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.byf-btn:active{
  transform: translateY(0) scale(.99);
  filter: saturate(.98);
}

.byf-btn:disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

.byf-btn--primary{
  background: #f1edff;
  border-color: rgba(185,163,255,.35);
  box-shadow: 0 5px 3px rgba(30,60,90,.10), 0 2px 0px var(--btn-shadow);
}

.byf-btn--primary:hover{
  background: #ded5ff;
  border-color: rgba(185,163,255,.45);
  transform: translateY(-1px);
}

.byf-btn--ghost{
  background: transparent;
  border-color: rgba(185,163,255,.25);
  box-shadow: none;
}

.byf-btn--ghost:hover{
  background: rgba(185,163,255,.10);
  border-color: rgba(185,163,255,.35);
  transform: translateY(-1px);
}

/* Timer display */
#byfWorkTimerDisplay{
  font-variant-numeric: tabular-nums;
}

/* Mobile polish */
@media (max-width: 640px){
  .byf-player-top{
    border-radius: 22px;
	  border-radius: 22px;
        margin-bottom: 10px;
        margin-left: 15px;
        margin-right: 15px;
  }

  .byf-btn{
    padding: 12px 12px;
    border-radius: 14px;
  }
}

/* =========================
   TRENINZI – polish v2
   (override existing)
   ========================= */

/* Grid: 1 -> 2 -> 3 kolone */
.byf-workouts-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1100px){
  .byf-workouts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px){
  .byf-workouts-grid{ grid-template-columns: 1fr; }
}

/* Card */
.byf-workout-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(210,220,235,.85);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(16,24,40,.08);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
@media (hover:hover){
  .byf-workout-card:hover{
    transform: translateY(-2px);
    border-color: rgba(185,163,255,.40);
    box-shadow: 0 18px 45px rgba(16,24,40,.12);
  }
}

/* Thumb: umesto fiksne visine (stabilnije, lepše) */
.byf-workout-thumb{
  width:100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
/* suptilan “fade” da tekstualni deo izgleda skuplje */
.byf-workout-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.12) 100%
  );
  pointer-events:none;
}


/* Content spacing */
.byf-workout-content{
  padding: 14px 14px 16px;
}

/* Meta (Faza • Trening) kao pill */
.byf-workout-meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(210,220,235,.75);
  background: rgba(185,163,255,.10);
  color: #2b3a44;
  font-size: 12px;
  font-weight: 800;
  opacity: 1; /* override postojećeg */
  margin-bottom: 10px;
}

/* Title */
.byf-workout-title{
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.4px;
  line-height: 1.15;
  margin-bottom: 8px;
  color: #0f172a;
}

/* Sub (trajanje • nivo • type • struktura) */
.byf-workout-sub{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  opacity: 1;
  color: rgba(15,23,42,.72);
}
.byf-workout-sub::before{ content:"⏱️"; margin-right: 2px; opacity:.9; }

/* Intro clamp da kartice budu ujednačene */
.byf-workout-intro{
  font-size: 13px;
  line-height: 1.4;
  color: rgba(15,23,42,.75);
  opacity: 1;
  margin-bottom: 10px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;  /* 2 ili 3, po ukusu */
  overflow: hidden;
}
@media (max-width: 680px){
  .byf-workout-intro{ -webkit-line-clamp: 4; }
}

/* Oprema kao “chip row” feel */
.byf-workout-eq{
  font-size: 12px;
  color: rgba(15,23,42,.70);
  opacity: 1;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(185,163,255,.28);
  background: rgba(185,163,255,.06);
}

/* Actions: lepši raspored */
.byf-workout-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* PDF kao kompaktan sekundarni */
.byf-workout-actions .byf-btn--ghost{
  width:auto;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
}

/* Primarni CTA nek “uzima” širinu */
.byf-workout-actions .byf-btn--primary{
  flex: 1;
  width:auto;
  justify-content:center;
  border-radius: 14px;
  font-weight: 900;
}

/* Mobile: dugmad jedno ispod drugog */
@media (max-width: 420px){
  .byf-workout-actions{ flex-direction: column; align-items: stretch; }
  .byf-workout-actions .byf-btn--ghost,
  .byf-workout-actions .byf-btn--primary{ width:100%; }
}


/* =========================
   WORKOUT MODAL – FIX TOP CROP + safe areas
   ========================= */

/* Umesto centriranja translate, radimo flex layout */
.byf-modal{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 16px 12px;
  /* notch/safe-area */
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* Na manjim ekranima modal ide od vrha (ne u sredinu) */
@media (max-width: 820px){
  .byf-modal{
    align-items:flex-start;
  }
}

/* Panel više nije absolute centriran */
.byf-modal__panel{
  position: relative;
  left:auto; top:auto;
  transform:none;

  width: min(920px, 100%);
  max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow:auto;

  border-radius: 22px;
}

/* Close dugme bolje: uvek vidljivo, ali ne “gura/prekrije” sadržaj */
.byf-modal__close{
  position: sticky;
  top: 10px;
  float: none;
  margin: 10px 10px 0 auto;
  z-index: 5;

  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(210,220,235,.9);
  box-shadow: 0 10px 22px rgba(20,35,55,.10);
  backdrop-filter: blur(6px);
}

/* Malo prostora na vrhu da header ne izgleda “zbijeno” */
#byfWorkoutModalBody{
  padding-top: 2px;
}

/* =========================
   EXERCISE BADGE (A) (1/1) – lepše i preglednije
   ========================= */

/* ciljano samo u naslovnom redu vežbe */
.byf-ex-titleRow .byf-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;

  padding: 7px 11px;
  border-radius: 999px;

  background: rgba(185,163,255,.14);
  border: 1px solid rgba(185,163,255,.30);
  color: #1f2a33;

  font-weight: 900;
  font-size: 12px;
  letter-spacing: var(--byf-ls);
  line-height: 1;
  box-shadow: 0 10px 20px rgba(20,35,55,.08);
}

/* Telefon: badge ide ispod naslova i bude krupniji/čitljiviji */
@media (max-width: 520px){
  .byf-ex-titleRow{
    align-items:flex-start;
  }
  .byf-ex-titleRow .byf-badge{
    flex: 0 0 auto;
    margin-top: 0px;
    font-size: 13px;
    padding: 8px 12px;
  }
}


/* =========================
   FIX: workout modal da NE bude stalno prikazan
   ========================= */

/* default: sakrij dok je aria-hidden=true */
#byfWorkoutModal[aria-hidden="true"]{
  display:none !important;
}

/* kad se otvori (JS postavi aria-hidden=false) */
#byfWorkoutModal[aria-hidden="false"]{
  display:flex !important;
  position: fixed;
  inset: 0;
  z-index: 99999;

  justify-content: center;
  align-items: flex-start;

  padding: 16px 12px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

/* panel kao flex item (ne absolute centar) */
#byfWorkoutModal[aria-hidden="false"] .byf-modal__panel{
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
	

  width: min(920px, calc(100vw - 24px));
  max-height: calc(100vh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow: auto;

  border-radius: 18px;
}

/* X desno i “sticky” */
#byfWorkoutModal[aria-hidden="false"] .byf-modal__close{
  position: sticky;
  top: 10px;
  float: none;
  margin: 10px 10px 0 auto;
  display: block;
  z-index: 5;
}

/* =========================
   Exercise how-to accordion
   ========================= */

.byf-acc{
  margin: 0 16px 12px 16px;
  border-radius: 18px;
  border: 1px solid rgba(210,220,235,.9);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(16,24,40,.08);
  overflow: hidden;
}

.byf-acc__sum{
  list-style: none;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  font-weight: 700;
  color: #0f172a;
	letter-spacing: -0.7px;
}
.byf-acc__sum::-webkit-details-marker{ display:none; }

.byf-acc__title{
  font-size: 14px;
  margin-top: 5px;
}

.byf-acc__chev{
  font-size: 16px;
  opacity: .7;
  transition: transform .15s ease;
}

.byf-acc[open] .byf-acc__chev{
  transform: rotate(180deg);
}

.byf-acc__body{
  padding: 0 14px 14px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15,23,42,.78);
}

.byf-acc-novo {
    margin: 10px 16px 12px 16px;
    border-radius: 18px;
    border: 1px solid rgba(210, 220, 235, .9);
    background: rgba(185,163,255,.16);
    box-shadow: 0 12px 30px rgba(16, 24, 40, .08);
    overflow: hidden;
}


/* =========================
   Workouts switch (Home | Gym)
   ========================= */

.byf-workouts-switch{
  display:flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(210,220,235,.9);
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 24px rgba(16,24,40,.08);
  width: fit-content;
  margin: 0 0 14px 0;
}

.byf-switch-btn{
  border: 0;
  background: transparent;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  color: rgba(15,23,42,.72);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
}

.byf-switch-btn.is-active{
  background: rgba(185,163,255,.18);
  color: #0f172a;
  box-shadow: 0 10px 20px rgba(16,24,40,.08);
}

@media (max-width: 520px){
  .byf-workouts-switch{ width: 100%; justify-content: space-between; }
  .byf-switch-btn{ flex: 1; text-align: center; }
}

/* =========================
   Filter logic (hide cards)
   ========================= */

html[data-byf-workouts-location="home"] .byf-workout-card[data-location="gym"]{ display:none !important; }
html[data-byf-workouts-location="gym"]  .byf-workout-card[data-location="home"]{ display:none !important; }

/* =========================
   Locked phases UX
   ========================= */

.byf-phase.is-locked > summary{
  opacity: .65;
  cursor: not-allowed;
}

.byf-phase.is-locked > summary .byf-phase__lock{
  filter: grayscale(1);
}

/* =========================
   PHASES TIMELINE
   ========================= */

.byf-phases{
  display: grid;
  gap: 14px;
}

/* svaka faza kao "timeline card" */
.byf-phase{
  border: 1px solid rgba(210,220,235,.9);
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(16,24,40,.08);
  overflow: hidden;
  position: relative;
  padding-left: 18px; /* prostor za liniju */
}

/* vertikalna timeline linija */
.byf-phase::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: rgba(185,163,255,.22);
}

/* timeline "dot" */
.byf-phase > summary::before{
  content:"";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(185,163,255,.55);
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 8px 18px rgba(16,24,40,.12);
  position: absolute;
  left: 5px;
  top: 22px;
}

/* header */
.byf-phase__head{
  list-style:none;
  cursor:pointer;
  padding: 14px 14px 12px 20px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}
.byf-phase__head::-webkit-details-marker{ display:none; }

.byf-phase__title{
  font-weight: 950;
  letter-spacing: -0.3px;
  color: #0f172a;
}

.byf-phase__meta{
  font-size: 12px;
  font-weight: 700;
  color: rgba(15,23,42,.65);
  margin-top: 4px;
}

/* status pill */
.byf-phase__lock{
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid rgba(210,220,235,.9);
  background: rgba(15,23,42,.04);
  color: rgba(15,23,42,.70);
  white-space: nowrap;
}
.byf-phase__lock.is-open{
  background: rgba(46,213,115,.10);
  border-color: rgba(46,213,115,.22);
  color: rgba(15,120,70,.95);
}

/* body */
.byf-phase__body{
  padding: 0 14px 14px 20px;
}

/* LOCKED timeline styling (kad JS doda .is-locked) */
.byf-phase.is-locked{
  opacity: .85;
}
.byf-phase.is-locked > summary{
  cursor: not-allowed;
}
.byf-phase.is-locked > summary::before{
  background: rgba(148,163,184,.55); /* sivi dot */
}

/* overlay u zaključanim fazama (deluje kao "coming soon") */
.byf-phase.is-locked::after{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.72));
  pointer-events:none;
}

/* ali nek header ostane čitljiv iznad overlaya */
.byf-phase.is-locked > summary,
.byf-phase.is-locked .byf-phase__body{
  position: relative;
  z-index: 1;
}

/* mobile spacing */
@media (max-width: 520px){
  .byf-phase{ padding-left: 14px; border-radius: 18px; }
  .byf-phase::before{ left: 8px; }
  .byf-phase > summary::before{ left: 3px; top: 20px; }
  .byf-phase__head{ padding: 12px 12px 10px 18px; }
  .byf-phase__body{ padding: 0 12px 12px 18px; }
}

/* =========================
   WORKOUT MODAL – app polish
   ========================= */

/* 1) Header (deo gde piše Trening..., naziv vežbe, cilj...) kao sticky */
#byfWorkoutModalBody{
  padding-bottom: 86px; /* prostor za sticky bottom bar */
}

#byfWorkoutModalBody > div:first-child{
  position: sticky;
  top: 0;
  z-index: 4;
  background: linear-gradient(180deg, rgba(248,247,255,.96), rgba(248,247,255,.88));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(210,220,235,.75);
  border-radius: 18px;
  margin-bottom: 12px;
}

/* malo bolje tipografije u tom headeru */
.byf-ex-titleRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

.byf-ex-titleRow h2, .byf-ex-titleRow .byf-ex-title{
  font-weight: 950;
  letter-spacing: -0.4px;
}

/* 2) Video blok kao "hero card" */
#byfWorkoutModalBody iframe,
#byfWorkoutModalBody .byf-vimeo,
#byfWorkoutModalBody .byf-video,
#byfWorkoutModalBody .byf-ex-video{
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(16,24,40,.14);
}

/* ako ti je video u wrapperu (često jeste), da wrapper dobije frame */
.byf-videoWrap, .byf-ex-videoWrap, .byf-workout-video{
  border-radius: 22px;
  border: 1px solid rgba(210,220,235,.9);
  background: rgba(255,255,255,.90);
  padding: 10px;
  box-shadow: 0 14px 40px rgba(16,24,40,.10);
}

/* 3) Accordion "Kako se izvodi vežba" – više app feeling */
.byf-acc{
  margin: 12px 0 10px;
  border-radius: 18px;
  border: 1px solid rgba(210,220,235,.85);
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 28px rgba(16,24,40,.08);
}

.byf-acc__sum{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  font-weight: 950;
  color: #0f172a;
}

.byf-acc__sum .byf-acc__title::before{
  content: none;
}

.byf-acc__body{
  padding: 0 14px 14px 14px;
  color: rgba(15,23,42,.78);
}

/* 4) "Poslednji put" da izgleda kao info pill (ne kao input) */
#byfWorkoutModalBody input[readonly],
#byfWorkoutModalBody .byf-last,
#byfWorkoutModalBody .byf-lastRow{
  border-radius: 16px;
}

.byf-lastRow,
.byf-last{
  padding: 12px 14px;
  border: 1px dashed rgba(185,163,255,.30);
  background: rgba(185,163,255,.08);
  color: rgba(15,23,42,.72);
  font-weight: 800;
}

/* 5) Forma "Upiši šta si uradila" kao card */
.byf-logCard,
#byfWorkoutModalBody .byf-card,
#byfWorkoutModalBody form{
  border-radius: 20px;
}

/* naslov */
#byfWorkoutModalBody h3{
  font-weight: 950;
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}

/* input grid – na desktopu 3 u redu, na telefonu 2 + 1 */
.byf-grid3, .byf-logGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}

@media (max-width: 640px){
  .byf-grid3, .byf-logGrid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .byf-grid3 > :nth-child(3),
  .byf-logGrid > :nth-child(3){
    grid-column: 1 / -1; /* kg pun red */
  }
}

/* input estetika */
#byfWorkoutModalBody input[type="number"],
#byfWorkoutModalBody input[type="text"]{
  border-radius: 14px;
  border: 1px solid rgba(210,220,235,.9);
  padding: 12px 12px;
  box-shadow: 0 8px 18px rgba(16,24,40,.06);
}

/* 6) Sticky bottom action bar (Nazad / Sledeća) */
.byf-workout-nav,
#byfWorkoutModalBody .byf-navRow{
  position: sticky;
  bottom: 0;
  z-index: 5;

  background: rgba(248,247,255,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(210,220,235,.75);

  padding: 12px;
  margin-top: 14px;
  border-radius: 18px;
}

/* dugmad malo "app" */
#byfWorkoutModalBody .byf-btn{
  border-radius: 16px;
  font-weight: 950;
}

#byfWorkoutModalBody .byf-btn-novo {
    border-radius: 16px;
    font-weight: 500;
    font-size: 12px;
    color: black !important;
    background: rgba(210, 220, 235, .85);
    padding: 5px 15px;
}


/* =========================
   Workout player – APP feel polish
   koristi tvoje realne klase:
   .byf-workout-player .byf-player-top .byf-video .byf-acc-novo .byf-log-grid .byf-player-nav
   ========================= */

/* telo modala – malo finiji background */
#byfWorkoutModalBody{
  background: radial-gradient(1200px 500px at 10% 0%, rgba(185,163,255,.22), transparent 60%),
              radial-gradient(900px 450px at 90% 10%, rgba(185,163,255,.14), transparent 55%);
  border-radius: 18px;
}

/* header sticky (da uvek vidiš naziv vežbe + cilj) */
.byf-workout-player .byf-player-top{
  position: sticky;
  top: 0;
  z-index: 6;
  background: rgba(248,247,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(210,220,235,.8);
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(16,24,40,.08);
	margin-top: 10px;
}

/* title row (DB Thruster + badge) */
.byf-ex-titleRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.byf-ex-titleRow > div{
  font-weight: 950 !important;
  letter-spacing: -0.3px;
}

/* badge koji već koristiš: .byf-badge */
.byf-badge{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(185,163,255,.35);
  background: rgba(185,163,255,.14);
  font-weight: 900;
  font-size: 12px;
}


/* how-to accordion (tvoj: details.byf-acc-novo) */
.byf-acc-novo{
  margin: 0 16px 12px 16px;
  border-radius: 18px;
  border: 1px solid rgba(210,220,235,.85);
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 28px rgba(16,24,40,.08);
  overflow: hidden;
}
.byf-acc__sum{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  font-weight: 950;
  color: #0f172a;
}
.byf-acc__sum::-webkit-details-marker{ display:none; }

.byf-acc__title{
  font-size: 13px;
}
.byf-acc__title::before{
  content:"ℹ️";
  margin-right: 8px;
}

.byf-acc__chev{
  opacity:.7;
  transition: transform .15s ease;
}
.byf-acc-novo[open] .byf-acc__chev{ transform: rotate(180deg); }

.byf-acc__body{
  padding: 0 14px 14px 14px;
  color: rgba(15,23,42,.78);
  font-size: 13px;
  line-height: 1.45;
}

/* content wrapper (umesto inline style padding/grid) */
.byf-player-content{
  padding: 0px 16px;
  display: grid;
  gap: 12px;
}

/* last info (id je realan) */
#byfLastInfo{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px dashed rgba(185,163,255,.35);
  background: rgba(185,163,255,.10);
  color: rgba(15,23,42,.72);
  font-weight: 700;
  margin-top: 10px;
	letter-spacing:-0.5px;
}

/* log card + grid */
.byf-card{
  border-radius: 20px;
  border: 1px solid rgba(210,220,235,.9);
  background: rgba(255,255,255,.90);
  box-shadow: 0 12px 28px rgba(16,24,40,.08);
}

.byf-log-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.byf-log-label{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.68);
  margin-bottom: 6px;
}
.byf-log-col input{
  border-radius: 14px !important;
  border: 1px solid rgba(210,220,235,.92) !important;
  padding: 12px 12px !important;
  box-shadow: 0 8px 18px rgba(16,24,40,.06);
}

/* na telefonu: 2 + 1 */
@media (max-width: 640px){
  .byf-log-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .byf-log-grid > :nth-child(3){ grid-column: 1 / -1; }
}

/* sticky bottom nav (app feel) */
.byf-player-nav{
  position: sticky;
  bottom: 0;
  z-index: 7;
  display:flex;
  gap:10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(248,247,255,.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(210,220,235,.85);
  box-shadow: 0 -12px 30px rgba(16,24,40,.10);
	margin-top: 10px;
}

/* dugmad */
.byf-btn{
  border-radius: 16px;
  font-weight: 950;
}
.byf-player-nav .byf-btn{
  flex: 1;
  justify-content: center;
}


/* =========================
   Workout header – app UI
   ========================= */

.byf-workout-player .byf-player-top{
  padding: 14px 16px 12px 16px;
  background: rgba(248,247,255,.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(210,220,235,.8);
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(16,24,40,.08);
}

/* top row */
.byf-player-kicker{
  display:flex;
  align-items:baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.byf-player-trainTitle{
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,.70);
	letter-spacing: -0.7px;
}
.byf-player-exCount{
  font-size: 12px;
  font-weight: 700;
  color: rgba(15,23,42,.55);
	letter-spacing: -0.5px;
}

/* progress bar */
.byf-progress{
  height: 8px;
  border-radius: 999px;
  background: rgba(185,163,255,.18);
  border: 1px solid rgba(185,163,255,.22);
  overflow: hidden;
  margin-bottom: 12px;
}
.byf-progress__bar{
  height: 100%;
  border-radius: 999px;
  background: rgba(185,163,255,.70);
}

/* title + chip row */
.byf-player-headRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.byf-player-exTitle{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.3px;
  color: #0f172a;
}

/* chip */
.byf-chip{
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(210,220,235,.85);
  background: rgba(15,23,42,.04);
  font-weight: 950;
  font-size: 12px;
  color: rgba(15,23,42,.75);
  white-space: nowrap;
}

/* goal line */
.byf-goal{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(185,163,255,.25);
  background: rgba(185,163,255,.10);
}
.byf-goal__label{
  font-size: 12px;
  font-weight: 950;
  color: rgba(15,23,42,.70);
}
.byf-goal__value{
  font-size: 13px;
  font-weight: 950;
  color: #0f172a;
}

/* mobile fine-tuning */
@media (max-width: 520px){
  .byf-player-exTitle{ font-size: 16px; }
  .byf-player-top{ padding: 12px 12px 10px 12px; border-radius: 16px; }
}


.byf-round-indicator{
  font-size:12px;
  font-weight:700;
  opacity:.7;
  margin-top:4px;
	letter-spacing: -0.5px;
}

/* =======================================================
   BYF – Premium “Pre-training” UI (App feel)
   Add this at the END of byf-izazov.css
   ======================================================= */

/* ---------- Intro card tweaks (no inline dependency) ---------- */
.byf-treninzi-intro {
  margin-bottom: 14px;
  padding: 16px 18px;
}


.byf-treninzi-intro__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.byf-treninzi-intro__sub {
  margin: 0;
  opacity: 0.85;
  line-height: 1.5;
}

/* ---------- Chips / checklist ---------- */
.byf-prep-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.byf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(120, 120, 170, 0.15);
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.04);
  font-size: 13px;
  font-weight: 600;
  opacity: 0.9;
}

.byf-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(120, 80, 255, 0.8);
  box-shadow: 0 0 0 4px rgba(120, 80, 255, 0.12);
}

/* ---------- Premium wrapper zone ---------- */
.byf-prep-zone {
  margin: 12px 0 26px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(247, 245, 255, 0.95), rgba(255, 255, 255, 0.92));
  border: 1px solid rgba(120, 120, 170, 0.14);
  box-shadow: 0 14px 45px rgba(17, 24, 39, 0.06);
  backdrop-filter: blur(8px);
}

.byf-prep-zone__head {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
}

.byf-prep-zone__kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
}

.byf-prep-zone__title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.byf-prep-zone__desc {
  font-size: 13px;
  opacity: 0.72;
  line-height: 1.45;
}

/* ---------- Layout grid ---------- */
.byf-prep-grid {
  display: grid;
  gap: 12px;
}

@media (min-width: 960px) {
  .byf-prep-grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }
}

/* ---------- Cards inside zone ---------- */
.byf-prep-card {
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(120, 120, 170, 0.14);
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.05);
}

.byf-prep-card__head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.byf-prep-card__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(120, 80, 255, 0.10);
  border: 1px solid rgba(120, 80, 255, 0.18);
  box-shadow: 0 10px 24px rgba(120, 80, 255, 0.10);
  font-size: 18px;
}

.byf-prep-card__title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.byf-prep-card__sub {
  margin-top: 2px;
  font-size: 13px;
  opacity: 0.7;
  line-height: 1.3;
}

/* ---------- FAQ items ---------- */
.byf-faq-item {
  margin: 0 0 12px 0;
  line-height: 1.45;
}

.byf-faq-item strong {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.byf-faq-item:last-child {
  margin-bottom: 0;
}

/* ---------- Callout “ready” ---------- */
.byf-prep-cta {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  opacity: 0.65;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(120, 80, 255, 0.06);
  border: 1px dashed rgba(120, 80, 255, 0.20);
}

/* ---------- Accordion polish (keeps your existing .byf-acc styles) ---------- */
.byf-prep-zone .byf-acc {
  margin: 10px 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(120, 120, 170, 0.14);
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.04);
}

.byf-prep-zone .byf-acc:first-child {
  margin-top: 0;
}

.byf-prep-zone .byf-acc:last-child {
  margin-bottom: 0;
}

.byf-prep-zone .byf-acc__sum {
  padding: 12px 12px;
  cursor: pointer;
}

.byf-prep-zone .byf-acc__sum:hover {
  background: rgba(120, 80, 255, 0.05);
}

.byf-prep-zone .byf-acc__title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.byf-prep-zone .byf-acc__chev {
  opacity: 0.7;
}

.byf-prep-zone .byf-acc__body {
  padding: 12px 12px 14px;
  background: rgba(255, 255, 255, 0.55);
}

/* Focus ring for accessibility (keyboard navigation) */
.byf-prep-zone summary:focus-visible {
  outline: 2px solid rgba(120, 80, 255, 0.55);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ---------- Video area polish ---------- */
.byf-prep-note {
  margin: 0 0 10px 0;
  opacity: 0.78;
  line-height: 1.45;
  font-size: 13px;
}

.byf-video {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.12);
  border: 1px solid rgba(120, 120, 170, 0.14);
}

/* Reduce visual weight of nested accordions inside FAQ card */
.byf-prep-card--faq .byf-acc__body {
  background: transparent;
}

/* Make nested accordions feel “stacked” */
.byf-prep-card--faq .byf-acc {
  background: rgba(255, 255, 255, 0.72);
}

/* ---------- Small screens spacing ---------- */
@media (max-width: 420px) {
  .byf-prep-zone { padding: 14px; }
  .byf-prep-card { padding: 12px; }
  .byf-treninzi-intro { padding: 14px 14px; }
}

/* -------------------------------------------------------
   FORCE LANDSCAPE for prep videos (warm-up & stretching)
   ------------------------------------------------------- */

/* uvek 16:9 – i na mobilnom */
.byf-video--landscape iframe{
  aspect-ratio: 16 / 9 !important;
}

.byf-video--landscape{
  border-radius: 22px;
  border: 1px solid rgba(210,220,235,.9);
  background: rgba(255,255,255,.88);
  padding: 10px;
  box-shadow: 0 18px 45px rgba(16,24,40,.14);
}
.byf-video--landscape iframe{
  width: 100%;
  border: 0;
  border-radius: 18px;
  display:block;
}


/* ===== Phase progress (intro) ===== */
.byf-phase-progress{
  margin-top: 14px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(120,120,170,.14);
  box-shadow: 0 10px 26px rgba(17,24,39,.05);
}

.byf-phase-progress__top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.byf-phase-progress__label{
  font-size: 13px;
  line-height: 1.35;
  opacity: .9;
}

.byf-phase-progress__label strong{
  font-weight: 900;
}

.byf-phase-progress__pct{
  font-size: 12px;
  font-weight: 900;
  opacity: .75;
}

.byf-phase-progress__bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(17,24,39,.08);
  overflow: hidden;
  position: relative;
}

.byf-phase-progress__fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(120,80,255,.75), rgba(255,120,200,.55));
  box-shadow: 0 10px 24px rgba(120,80,255,.18);
}

.byf-phase-progress__meta{
  margin-top: 8px;
  font-size: 12px;
  opacity: .65;
}



.byf-title-plan
{
  font-weight: var(--w-800);
    font-size: 28px;
    margin-top: 6px;
    color: var(--ink);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    letter-spacing: var(--byf-ls);
    line-height: 1.12;
	margin-bottom: 0px;
}


/* da tekst/lista imaju normalan razmak */
.byf-expired-card p { margin: 0 0 10px; }
.byf-expired-card ul { margin: 8px 0 12px; padding-left: 18px; }

/* dugmad uvek ispod teksta, lepo složena */
.byf-expired-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  align-items: center;
}

/* ako ti <a> negde “glumi inline” */
.byf-expired-actions .byf-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
}

/* safety: ako ti je negde ostao float */
.byf-expired-actions::after{
  content:"";
  display:block;
  clear: both;
}

.byf-expired-actions { position: relative; z-index: 5; }
.byf-expired-actions a { position: relative; z-index: 6; }
.byf-expired::before,
.byf-expired::after { pointer-events: none; }

.byf-expired__date {
  margin-top: 6px;
  font-size: 14px;
  color: #6b6f76;
}

.byf-membership-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  background: rgba(139,92,246,.10);
  border: 1px solid rgba(139,92,246,.18);
  color: rgba(16,24,40,.78);
}

.byf-membership-pill strong{
  color: rgba(16,24,40,.92);
}

.byf-membership-pill.is-muted{
  background: rgba(16,24,40,.05);
  border-color: rgba(16,24,40,.10);
  color: rgba(16,24,40,.65);
}


.byf-acc-howto
  {
    border-radius: 18px;
    border: 1px solid rgba(210, 220, 235, .85);
    background: #e6eefc;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .08);
    overflow: hidden;
    margin: 20px 12px 0px 12px;
}


/* Confetti canvases must not push layout */
#byf-confetti-dash,
#byf-confetti-daily,
#byf-confetti-weekly {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  display: block;
}

/* =========================
   Milestones — Premium soft
   ========================= */

.byf-card.byf-milestones {
  border: 1px solid rgba(185, 163, 255, 0.25);
}

.byf-ms-next {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(185, 163, 255, 0.22);
  background: radial-gradient(1200px 280px at 10% 0%, rgba(203, 180, 255, 0.28), transparent 55%),
              radial-gradient(900px 240px at 80% 30%, rgba(170, 205, 255, 0.18), transparent 60%),
              rgba(245, 244, 255, 0.65);
  box-shadow: 0 18px 45px rgba(30, 20, 60, 0.06);
}

.byf-ms-next-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(185, 163, 255, 0.22);
}

.byf-ms-next-title {
  letter-spacing: -0.02em;
}

.byf-ms-next-sub {
  color: rgba(30, 20, 60, 0.72);
}

.byf-ms-next-hint {
  color: rgba(74, 58, 170, 0.85);
  font-weight: 600;
}

.byf-ms-done-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Base badge (neutral glass) */
.byf-ms-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(185, 163, 255, 0.22);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 25px rgba(30, 20, 60, 0.06);
  color: rgba(30, 20, 60, 0.82);
}

.byf-ms-badge-icon {
  line-height: 1;
  font-size: 14px;
}

.byf-ms-badge-text {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* Link badge — subtle hover */
.byf-ms-badge--link {
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.byf-ms-badge--link:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(30, 20, 60, 0.09);
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(185, 163, 255, 0.35);
}

.byf-ms-badge--link:active {
  transform: translateY(0);
}

/* Type accents — very soft (no “rainbow”) */
.byf-ms-badge--streak {
  border-color: rgba(255, 170, 120, 0.26);
}

.byf-ms-badge--nutrition {
  border-color: rgba(120, 220, 160, 0.22);
}

.byf-ms-badge--mindset {
  border-color: rgba(140, 160, 255, 0.26);
}

.byf-ms-badge--gift {
  border-color: rgba(245, 160, 220, 0.22);
}

.byf-ms-badge--legendary {
  border-color: rgba(255, 205, 120, 0.28);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 250, 235, 0.88));
}

/* Toast message (milestone unlocked) — clean + sticky */
.byf-ms-toast {
  position: sticky;
  top: 12px;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(185, 163, 255, 0.22);
  box-shadow: 0 18px 45px rgba(30, 60, 90, 0.10);
}

.byf-ms-gifts {
  padding-top: 6px;
  border-top: 1px dashed rgba(185,163,255,.25);
}

/* Gifts separator (suptilno) */
.byf-ms-gifts{
  padding-top: 6px;
  border-top: 1px dashed rgba(185,163,255,.25);
}

/* Tooltip */
.byf-tooltip{
  position: relative;
  padding-right: 14px; /* mesta za ⓘ */
}

.byf-tooltip-i{
  margin-left: 8px;
  font-size: 12px;
  opacity: .55;
}

.byf-tooltip::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: min(320px, 78vw);
  padding: 10px 12px;
  border-radius: 12px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(185,163,255,.28);
  box-shadow: 0 18px 45px rgba(30,20,60,.10);
  color: rgba(30,20,60,.88);
  font-size: 12px;
  line-height: 1.35;

  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  transform: translateX(-50%) translateY(2px);
  z-index: 50;
}

.byf-tooltip::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: rgba(255,255,255,.92);
  border-left: 1px solid rgba(185,163,255,.28);
  border-top: 1px solid rgba(185,163,255,.28);
  transform: translateX(-50%) rotate(45deg);

  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 49;
}

.byf-tooltip:hover::after,
.byf-tooltip:hover::before{
  opacity: 1;
}

.byf-tooltip:hover::after{
  transform: translateX(-50%) translateY(0);
}

/* Mobile: pokaži tooltip i na fokus (tap) */
.byf-tooltip:focus::after,
.byf-tooltip:focus::before{
  opacity: 1;
}


.byf-ms-label{
  margin: 8px 0 6px;
  color: rgba(70,70,100,.75);
}

.byf-ms-gifts{
  margin-top: 14px;
  padding-top: 5px;
  border-top: 1px dashed rgba(185,163,255,.25);
}

.byf-ms-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.byf-ms-badge--gift{
  background: rgba(185,163,255,.10);
  border: 1px solid rgba(185,163,255,.22);
  color: rgba(40,40,70,.95);
}

.byf-ms-badge-i{
  font-size: 12px;
  opacity: .6;
  margin-left: 2px;
}

/* Tooltip (samo za gift badge) */
.byf-gift-tip{
  position: relative;
}

.byf-gift-tip::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  white-space: normal;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 50;
}

.byf-gift-tip::before{
  content:"";
  position:absolute;
  left:50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(17, 24, 39, 0.92);
  opacity: 0;
  transition: opacity .12s ease;
}

.byf-gift-tip:hover::after,
.byf-gift-tip:hover::before{
  opacity: 1;
}

.byf-weekcard { position: relative; }
.byf-weekbadge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(185,163,255,.22);
  font-size:12px; font-weight:700; color: rgba(30,20,60,.78);
}

.byf-weekmain{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
  margin-top:10px;
}

.byf-weekmain .m{
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(185,163,255,.18);
}

.byf-weekmain .t{ font-size:12px; color: rgba(30,20,60,.62); }
.byf-weekmain .v{ margin-top:4px; font-size:14px; color: rgba(30,20,60,.88); }

.byf-weekdetails{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:10px;
  color: rgba(30,20,60,.68);
  font-size:12px;
}
.byf-weekdetails .d{
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(185,163,255,.14);
}

.byf-weeknote{
  margin-top:10px;
  font-size:12px;
  color: rgba(74,58,170,.85);
  font-weight:600;
}

/* suptilan “status” akcenat */
.byf-weekcard.is-good  { box-shadow: 0 14px 35px rgba(30,20,60,.06); }
.byf-weekcard.is-mixed { box-shadow: 0 14px 35px rgba(30,20,60,.06); }
.byf-weekcard.is-short { box-shadow: 0 14px 35px rgba(30,20,60,.06); }


/* =========================================
   INFO PAGE
   ========================================= */

.byf-info .sec-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.byf-info .sec-sub {
  font-size: 14px;
  opacity: 0.85;
}

/* Liste (Zoom datumi, info stavke) */
.byf-info .byf-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.byf-info .byf-list li {
  padding: 8px 4;
  border-bottom: 1px dashed rgba(0,0,0,0.08);
  font-size: 14px;
}

.byf-info .byf-list li:last-child {
  border-bottom: none;
}

/* Zoom box (Meeting ID / Passcode) */
.byf-info .byf-card .byf-card {
  background: rgba(0,0,0,0.03);
  box-shadow: none;
  border-radius: 14px;
}

/* Vimeo video wrapper */
.byf-info .byf-videoWrap iframe {
  border-radius: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.byf-info .byf-videoWrap iframe:hover {
  transform: scale(1.01);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* Responsive sitnica */
@media (max-width: 768px) {
  .byf-info .sec-title {
    font-size: 16px;
  }
}

/* INFO – link lista */
.byf-info-links li a {
  display: inline-block;
  width: 100%;
  color: inherit;
  text-decoration: none;
  padding: 6px 4px;
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.15s ease;
}

.byf-info-links li a:hover {
  background: rgba(0,0,0,0.05);
  transform: translateX(2px);
}

/* Privremeno neaktivan link */
.byf-info-links .byf-disabled-link {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}


.byf-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;

  color: #b42318;
  background: transparent;
  border: 1px solid rgba(180, 35, 24, 0.25);
  border-radius: 8px;

  cursor: pointer;
  transition: all 0.15s ease;
}

.byf-delete-btn:hover {
  background: rgba(180, 35, 24, 0.06);
  border-color: rgba(180, 35, 24, 0.5);
}

.byf-delete-btn:active {
  transform: scale(0.97);
}

.byf-delete-btn:focus-visible {
  outline: 2px solid rgba(180, 35, 24, 0.4);
  outline-offset: 2px;
}

<button
  id="byfDeleteSession"
  class="byf-delete-btn"
  title="Trajno briše trening iz istorije">
  🗑️ Obriši
</button>

.byf-prep-grid{
  display:grid;
  gap:24px;
}

@media (min-width: 900px){
  .byf-prep-grid{
    grid-template-columns: 1fr 1fr;
    align-items:start;
  }
}

.byf-prep-col{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.byf-link {
  color: inherit;
  text-decoration: underline;
}
.byf-link:hover {
  opacity: 0.8;
}

.byf-btn-procitaj {
	
	border: 1px solid rgb(196 188 233) !important;
    font-size: 13px;
    padding: 6px 14px !important;
    margin-top: 10px;
    font-weight: 400 !important;
    background: rgb(247 246 255) !important;
	    font-family: var(--byf-font);
	letter-spacing: var(--byf-ls);
	line-height: 1;
	    transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;

	}

/* Blink animacija za countdown */
@keyframes byf-blink {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.25; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

.byf-blink {
  animation: byf-blink 0.35s ease-in-out;
}

.byf-blink-strong {
  animation: byf-blink 0.6s ease-in-out;
}

/* Tamnija ljubičasta za zadnje sekunde */
.byf-countdown-urgent {
  color: #4b2a7b; /* tamnija ljubičasta */
}

/* Hint toast (silent mode) */
.byf-sound-hint {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 99999;
  background: rgba(20, 12, 30, 0.92);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.25;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  max-width: min(92vw, 420px);
}