@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400;1,500&display=swap");

[hidden] {
  display: none !important;
}
: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, 0.85);
  --border-soft: rgba(210, 220, 235, 0.6);
  --shadow: 0 14px 30px rgba(30, 60, 90, 0.08);
  --shadow2: 0 18px 45px rgba(30, 60, 90, 0.1);
  --shadow-soft: 0 10px 22px rgba(20, 35, 55, 0.08);
  --r-xl: 28px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 16px;
  --hero-grad: linear-gradient(135deg, #e6e9ff 0%, #f0e6ff 100%);
  --hero-grad-soft: linear-gradient(135deg, #f6f7fb 0%, #fdf7fa 100%);
  --btn-bg: #b9a3ff;
  --btn-ink: #0d2436;
  --btn-shadow: rgba(185, 163, 255, 0.28);
  --heart-fill: #d3bafe;
  --heart-muted: rgba(124, 58, 237, 0.28);
  --byf-dark-text: #0f172a;
}
.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: 1200px;
  margin: 0 auto;
  padding: 12px 0px;
}
.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.1) !important;
}
button,
input[type="button"],
input[type="submit"],
.byf-submit {
  color: var(--byf-dark-text) !important;
}
.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;
  }
}
.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;
}
.byf-err {
  background: rgba(255, 228, 228, 0.35);
  border-color: rgba(240, 160, 160, 0.6);
}
.byf-hero {
  display: grid;
  align-items: stretch;
  background: var(--hero-grad);
  border: 1px solid rgba(210, 220, 235, 0.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;
}
.byf-kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pill {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(210, 220, 235, 0.85);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: none;
}
.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;
}
.pill--lav {
  background: rgba(185, 163, 255, 0.16);
  border-color: rgba(185, 163, 255, 0.22);
}
.pill--blue {
  background: rgba(134, 197, 255, 0.16);
  border-color: rgba(134, 197, 255, 0.22);
}
@media (max-width: 520px) {
  .byf-kv {
    grid-template-columns: 1fr;
  }
}
.byf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(210, 220, 235, 0.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, 0.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;
}
.byf-weekbox {
  height: 100%;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(210, 220, 235, 0.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, 0.95);
  background: #fff;
  font-weight: var(--w-700);
  color: #1e2b34;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02) inset;
  letter-spacing: var(--byf-ls);
}
.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, 0.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, 0.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, 0.92);
  color: #fff;
  padding: 6px 8px;
  border-radius: 10px;
  opacity: 0.9;
}
.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, 0.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, 0.78);
  border: 1px solid rgba(210, 220, 235, 0.75);
  color: #44525d;
  font-size: 12px;
  font-weight: var(--w-600);
  box-shadow: 0 8px 16px rgba(20, 35, 55, 0.05);
  letter-spacing: var(--byf-ls);
}
.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(120, 112, 168, 0.15) !important;
  border-radius: var(--r-md) !important;
  padding: 6px 14px !important;
  background: #fafafc;
  font-weight: 300 !important;
  font-size: 14px !important;
  color: #1a1a2e;
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
  letter-spacing: var(--byf-ls);
  cursor: pointer;
}
/* Flatpickr alt input nasledjuje isti stil */
.byf-community-date .flatpickr-input {
  border: 1px solid rgba(120, 112, 168, 0.15) !important;
  border-radius: var(--r-md) !important;
  padding: 6px 14px !important;
  background: #fafafc;
  font-weight: 300 !important;
  font-size: 14px;
  color: #1a1a2e;
  cursor: pointer;
  width: 100%;
}
.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;
  background: #fff;
  border-color: rgba(185, 163, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(185, 163, 255, 0.15);
}
.byf-date {
  cursor: pointer;
}
.up {
  background: linear-gradient(180deg, #fbfcfe, #fff);
  border: 1px dashed rgba(210, 220, 235, 0.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, 0.22);
  color: #23313a;
  font-weight: 400;
  border: 1px solid rgba(134, 197, 255, 0.35);
  cursor: pointer;
  letter-spacing: var(--byf-ls);
  transition: transform 0.12s ease, filter 0.12s ease;
  font-size: 14px;
}
.btn-up:hover {
  transform: translateY(-1px);
}
.btn-up:active {
  transform: translateY(0) scale(0.99);
  filter: saturate(0.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, 0.75);
  box-shadow: 0 10px 18px rgba(20, 35, 55, 0.08);
}
.byf-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid rgba(120, 112, 168, 0.12);
  background: #fafafc;
  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;
}
.byf-error {
  background: rgba(255, 228, 228, 0.45);
  border: 1px solid rgba(240, 160, 160, 0.65);
  color: #8a1f1f;
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 12px;
}
.byf-ok {
  background: rgba(214, 248, 226, 0.45);
  border: 1px solid rgba(120, 210, 155, 0.65);
  color: #0f5132;
  border-radius: var(--r-md);
  padding: 12px;
  margin-bottom: 12px;
}
.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, 0.1), 0 2px 0px var(--btn-shadow);
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.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, 0.1), 0 2px 0px var(--btn-shadow);
}
.byf-submit:active,
input[type="submit"]:active,
button[type="submit"]:active,
.btn:active {
  transform: translateY(0);
  filter: saturate(0.99);
}
.byf-submit:disabled,
.btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}
.kartica {
  background: #fff;
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 12px 0;
  box-shadow: 0 2px 12px rgba(20, 19, 26, 0.05);
  border: 1px solid rgba(120, 112, 168, 0.1);
  transition: box-shadow 0.18s ease;
}

.kartica-cilj s {
  background: #f2f2fc;
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 12px 0;
  box-shadow: 0 2px 12px rgba(20, 19, 26, 0.05);
  border: 1px solid rgba(120, 112, 168, 0.1);
  transition: box-shadow 0.18s ease;
}
.kartica-ok {
  background: rgba(237, 247, 241, 0.7) !important;
  border-color: rgba(61, 138, 92, 0.18) !important;
}
.kartica-miss {
  background: rgba(255, 234, 240, 0.5) !important;
  border-color: rgba(255, 77, 109, 0.15) !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: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(185, 163, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: 0 0 48px;
  border: 1px solid rgba(185, 163, 255, 0.15);
}
.byf-meta {
  font-size: 12px;
  color: #8b8fa3;
  margin-top: 2px;
}
.is-done .byf-title {
  text-decoration: line-through;
  opacity: 0.72;
}
.byf-inp {
  max-width: 200px;
}
@media (max-width: 768px) {
  .byf-row {
    flex-wrap: wrap;
  }
  .byf-inp {
    max-width: 100%;
  }
}
.byf-summary {
  border-radius: var(--r-xl);
  padding: 18px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.92),
    rgba(255, 255, 255, 1)
  );
  border: 1px solid rgba(210, 220, 235, 0.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, 0.1);
  border: 1px solid rgba(210, 220, 235, 0.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, 0.75);
  border: 1px solid rgba(210, 220, 235, 0.65);
  box-shadow: 0 10px 18px rgba(0, 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, 0.65);
  border: 1px solid rgba(210, 220, 235, 0.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, 0.9) 55%,
    #f0e6ff 100%
  );
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ── Compact weekly summary grid ── */
.byf-summary--compact {
  padding: 16px;
}
.byf-summary--compact .byf-summary-top {
  margin-bottom: 10px;
}
.byf-summary--compact .byf-summary-title {
  font-size: 16px;
}

.byf-sgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.byf-scard {
  background: rgba(185, 163, 255, 0.06);
  border: 1px solid rgba(210, 220, 235, 0.45);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.byf-scard__top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.byf-scard__ico {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(210, 220, 235, 0.5);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  flex: 0 0 auto;
}
.byf-scard__ico--steps svg {
  color: #6366f1;
}
.byf-scard__ico--water svg {
  color: #0ea5e9;
}
.byf-scard__ico--food svg {
  color: #10b981;
}
.byf-scard__ico--challenge svg {
  color: #8b5cf6;
}
.byf-scard__ico--kcal svg {
  color: #f59e0b;
}
.byf-scard__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: rgba(20, 19, 26, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.byf-scard__val {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.15;
}
.byf-scard__goal {
  font-size: 11px;
  color: rgba(20, 19, 26, 0.38);
  font-weight: 400;
}
.byf-scard__bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(230, 233, 255, 0.5);
  overflow: hidden;
  margin-top: 6px;
}
.byf-scard__bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #a5b4fc, #6366f1);
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.byf-scard__bar--water > i {
  background: linear-gradient(90deg, #7dd3fc, #0ea5e9);
}
.byf-scard__bar--food > i {
  background: linear-gradient(90deg, #6ee7b7, #10b981);
}
.byf-scard__bar--challenge > i {
  background: linear-gradient(90deg, #c4b5fd, #8b5cf6);
}
.byf-scard__bar--kcal > i {
  background: linear-gradient(90deg, #fcd34d, #f59e0b);
}

@media (max-width: 600px) {
  .byf-sgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .byf-scard {
    padding: 10px;
  }
  .byf-scard__val {
    font-size: 16px;
  }
  .byf-scard__ico {
    width: 22px;
    height: 22px;
    border-radius: 8px;
  }
  .byf-scard__label {
    font-size: 10px;
  }
}

.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 0.12s ease, fill 0.12s ease;
}
.byf-heart::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(124, 58, 237, 0.22) 0%,
    rgba(124, 58, 237, 0) 60%
  );
  opacity: 0;
  transition: opacity 0.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;
}
.byf-acc {
  background: var(--card);
  border: 1px solid rgba(210, 220, 235, 0.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, 0.1),
    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, 0.78);
  border: 1px solid rgba(210, 220, 235, 0.8);
  box-shadow: 0 10px 18px rgba(0, 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, 0.55);
}
#byf-confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99998;
}
#byf-overlay,
#byf-overlay-prijava {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgb(16 16 16 / 37%);
  z-index: 99999;
  padding: 18px;
  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, 0.25);
  max-width: 560px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
#byf-overlay .loader,
#byf-overlay-prijava .loader {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 4px solid rgba(0, 0, 0, 0.12);
  border-top-color: rgba(0, 0, 0, 0.55);
  margin: 0 auto 12px;
  animation: byfspin 0.9s linear infinite;
}
@keyframes byfspin {
  to {
    transform: rotate(360deg);
  }
}
.byf-celebrate {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 16px;
  margin: 12px 0;
  border: 1px solid rgba(210, 220, 235, 0.85);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  background: radial-gradient(
      600px 180px at 20% 20%,
      rgba(247, 198, 217, 0.45),
      transparent 60%
    ),
    radial-gradient(
      600px 180px at 80% 30%,
      rgba(167, 199, 231, 0.45),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.88),
      rgba(255, 255, 255, 0.76)
    );
  animation: byfPop 0.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, 0.45),
    rgba(247, 198, 217, 0.45)
  );
  filter: blur(18px);
  opacity: 0.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, 0.1);
  background: rgba(255, 255, 255, 0.75);
  font-weight: var(--w-800);
  letter-spacing: 0.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, 0.12);
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  z-index: 2;
}
.byf-celebrate-close:hover {
  transform: translateY(-1px);
}
@media (max-width: 520px) {
  .byf-title {
    font-size: 26px;
  }
  .byf-card {
    border-radius: 22px;
  }
  .thumbs img {
    width: 66px;
    height: 66px;
  }
  .btn,
  .byf-submit {
    position: sticky;
    bottom: 10px;
    z-index: 10;
  }
}
.byf-goals-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-goals-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 720px) {
  .byf-goals-grid {
    grid-template-columns: 1fr !important;
  }
}
.byf-wrap > .byf-grid > * {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(210, 220, 235, 0.75) !important;
  border-radius: 22px !important;
  padding: 18px !important;
  box-shadow: 0 14px 30px rgba(30, 60, 90, 0.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;
}
.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-title svg,
.sec-title .byf-ico-wrap svg {
  color: #b9a3ff;
}
.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, 0.85);
  border-radius: var(--r-xl);
  padding: 18px;
  box-shadow: var(--shadow2);
}
.pill-faza {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  border: 1px solid rgba(210, 220, 235, 0.85);
  background: rgba(246, 248, 252, 0.85);
  color: rgba(16, 24, 40, 0.5);
  white-space: nowrap;
}
.pill-faza--next {
  background: rgba(111, 99, 246, 0.08);
  border-color: rgba(111, 99, 246, 0.2);
  color: #6f63f6;
}

/* Goals list in read-only phases */
.byf-goals-list {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}
.byf-goals-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(16, 24, 40, 0.75);
}
.byf-goals-item strong {
  color: var(--ink, #14131a);
}
.byf-goals-item svg {
  color: #6f63f6;
  flex-shrink: 0;
}
#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, 0.92);
  border: 1px solid rgba(210, 220, 235, 0.85);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  color: #15222b;
  text-align: center;
  min-width: 280px;
  max-width: min(560px, 92vw);
}
.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, 0.85);
  background: rgba(255, 255, 255, 0.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: 0.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, 0.85);
  background: rgba(255, 255, 255, 0.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, 0.75);
  background: rgba(255, 255, 255, 0.75);
  color: #33414c;
  text-decoration: none;
  font-size: 12px;
  font-weight: var(--w-700);
}
.byf-tab.is-active {
  background: rgba(185, 163, 255, 0.18);
  border-color: rgba(185, 163, 255, 0.28);
}
.byf-feed-header {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(20, 19, 26, 0.08);
  margin-bottom: 14px;
  padding-left: 10px;
}
.byf-feed-header-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 800;
  color: #1f2937;
  letter-spacing: -0.02em;
}
.byf-feed-header-sub {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
  font-weight: 500;
}
/* ===== Učesnica nedelje (Member of the Week) ===== */
.byf-motw {
  background: linear-gradient(135deg, #faf5ff 0%, #eef2ff 50%, #fef3f2 100%);
  border: 1px solid rgba(111, 99, 246, 0.12);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.byf-motw-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.byf-motw-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e6e9ff, #f0e6ff);
  border: 1px solid #e7c7e2;
  flex-shrink: 0;
}
.byf-motw-icon svg {
  color: #6f63f6;
}
.byf-motw-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #1f2937;
  letter-spacing: -0.02em;
}
.byf-motw-sub {
  font-size: 12.5px;
  color: #9ca3af;
  font-weight: 500;
  margin-top: 1px;
}
.byf-motw-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.byf-motw-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(20, 19, 26, 0.06);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.byf-motw-card:hover {
  border-color: rgba(111, 99, 246, 0.2);
  box-shadow: 0 4px 16px rgba(111, 99, 246, 0.08);
  transform: translateY(-1px);
}
.byf-motw-rank {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.byf-motw-rank--1 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.byf-motw-rank--2 {
  background: linear-gradient(135deg, #94a3b8, #64748b);
}
.byf-motw-rank--3 {
  background: linear-gradient(135deg, #d97706, #b45309);
}
.byf-motw-ava {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #6f63f6, #e7c7e2) border-box;
  flex-shrink: 0;
}
.byf-motw-info {
  min-width: 0;
  flex: 1;
}
.byf-motw-name {
  font-weight: 700;
  font-size: 14px;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.byf-motw-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.byf-motw-streak {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: #e8457e;
  background: rgba(232, 69, 126, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
}
.byf-motw-streak svg {
  color: #e8457e;
}
.byf-motw-logs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 700;
  color: #059669;
  background: rgba(5, 150, 105, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
}
.byf-motw-logs svg {
  color: #059669;
}
@media (max-width: 720px) {
  .byf-motw-cards {
    grid-template-columns: 1fr;
  }
}

/* ===== Stories bar — slike dana ===== */
.byf-stories {
  margin-bottom: 16px;
}
.byf-stories-header {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #1f2937;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.byf-stories-header svg {
  color: #6f63f6;
}
.byf-stories-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.byf-stories-scroll::-webkit-scrollbar {
  display: none;
}
.byf-story {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 110px;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  text-align: center;
  position: relative;
}
.byf-story-img-wrap {
  position: relative;
  width: 110px;
  height: 130px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(20, 19, 26, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.byf-story:hover .byf-story-img-wrap {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(111, 99, 246, 0.15);
}
.byf-story-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.byf-story-ava {
  position: absolute;
  bottom: 24px;
  left: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.byf-story-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.byf-story-count {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.byf-story-name {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #4b5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Unseen = gradient border, Seen = sivi border */
.byf-story--unseen .byf-story-img-wrap {
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #6f63f6, #e7c7e2, #6f63f6) border-box;
}
.byf-story--seen .byf-story-img-wrap {
  border: 2px solid rgba(20, 19, 26, 0.1);
  background: #fff;
}

/* Daily photo upload in form */
.byf-daily-photos-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.byf-daily-photo-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
}
.byf-daily-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.byf-daily-photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  cursor: pointer;
}
.byf-daily-photo-remove input {
  display: none;
}
.byf-daily-photo-remove span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: background 0.15s ease;
}
.byf-daily-photo-remove input:checked + span {
  background: #dc2626;
}
.byf-file-input {
  font-size: 13px;
  color: #4b5563;
}

/* ── Profile Avatar Upload ── */
.byf-avatar-upload {
  display: flex;
  align-items: center;
  gap: 16px;
}
.byf-avatar-preview {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(111, 99, 246, 0.15);
  flex-shrink: 0;
}
.byf-file-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1.5px solid rgba(111, 99, 246, 0.2);
  border-radius: 10px;
  background: rgba(111, 99, 246, 0.04);
  color: #6f63f6;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.byf-file-label:hover {
  border-color: rgba(111, 99, 246, 0.4);
  background: rgba(111, 99, 246, 0.08);
}
.byf-file-label svg {
  width: 18px;
  height: 18px;
}
.byf-file-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ── Upload Zone (daily log) ── */
.byf-upload-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-direction: column;
  padding: 20px 16px;
  border: 2px dashed rgba(111, 99, 246, 0.15);
  border-radius: 14px;
  background: rgba(111, 99, 246, 0.02);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.byf-upload-zone:hover,
.byf-upload-zone.is-dragover {
  border-color: rgba(111, 99, 246, 0.3);
  background: rgba(111, 99, 246, 0.04);
}
.byf-upload-zone__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.byf-upload-zone__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.byf-upload-zone__content svg {
  color: rgba(111, 99, 246, 0.35);
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}
.byf-upload-zone__text {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(111, 99, 246, 0.6);
}
.byf-upload-zone__sub {
  font-size: 0.6rem;
  color: rgba(20, 19, 26, 0.35);
}

/* Preview thumbnails */
.byf-upload-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.byf-upload-preview:empty {
  display: none;
}
.byf-upload-preview__thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.byf-upload-preview__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 600px) {
  .byf-upload-zone {
    padding: 16px 12px;
  }
  .byf-upload-zone__content svg {
    width: 20px;
    height: 20px;
  }
}

.byf-community-feed {
  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: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(210, 220, 235, 0.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: 0.45;
}
.byf-badge-sm {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(134, 197, 255, 0.16);
  border: 1px solid rgba(134, 197, 255, 0.24);
  font-size: 12px;
  font-weight: var(--w-800);
}
.byf-follow {
  flex: 0 0 auto;
  border: 1px solid rgba(111, 99, 246, 0.15);
  background: rgba(111, 99, 246, 0.04);
  border-radius: 10px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
  color: #6f63f6;
  letter-spacing: -0.01em;
  transition: all 0.15s ease;
}
.byf-follow:hover {
  background: rgba(111, 99, 246, 0.1);
  border-color: rgba(111, 99, 246, 0.25);
}
.byf-follow[aria-pressed="true"] {
  background: rgba(111, 99, 246, 0.1);
  border-color: rgba(111, 99, 246, 0.2);
  color: #5b21b6;
}
.byf-follow--big {
  padding: 10px 12px;
  font-size: 13px;
}
.byf-moment-note {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(20, 19, 26, 0.02);
  border: 1px solid rgba(20, 19, 26, 0.05);
  font-size: 12.5px;
  color: #4b5563;
  line-height: 1.45;
  font-style: italic;
}
.byf-chip-ok {
  background: rgba(214, 248, 226, 0.5);
  border-color: rgba(120, 210, 155, 0.55);
}
.byf-chip-bad {
  background: rgba(255, 228, 228, 0.38);
  border-color: rgba(240, 160, 160, 0.55);
}
.byf-chip.byf-chip-ok {
  background: rgba(214, 248, 226, 0.5);
  border-color: rgba(120, 210, 155, 0.55);
}
.byf-chip.byf-chip-bad {
  background: rgba(255, 228, 228, 0.38);
  border-color: rgba(240, 160, 160, 0.55);
}
.byf-reacts {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.byf-react {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  border-radius: 10px;
  border: 1px solid rgba(20, 19, 26, 0.06);
  background: rgba(20, 19, 26, 0.02);
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  color: #9ca3af;
  transition: all 0.15s ease;
}
.byf-react:hover {
  background: rgba(20, 19, 26, 0.05);
  color: #6b7280;
}
.byf-react.is-on {
  background: rgba(111, 99, 246, 0.08);
  border-color: rgba(111, 99, 246, 0.2);
  color: #6f63f6;
}
.byf-react:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.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, 0.78);
}
.byf-modal-card {
  position: absolute;
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
  width: min(920px, 92vw);
  max-height: 88vh;
  overflow: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid rgba(210, 220, 235, 0.85);
  border-radius: var(--r-xl);
  box-shadow: 0 18px 45px rgba(0, 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, 0.85);
  background: rgba(255, 255, 255, 0.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, 0.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, 0.75);
  border-radius: var(--r-xl);
  padding: 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.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, 0.7);
  border-radius: 22px;
  padding: 12px;
  background: rgba(185, 163, 255, 0.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;
}
.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;
}
.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, 0.2) !important;
  border-radius: 14px;
}
.byf-community .byf-moment-open * {
  color: inherit !important;
}
.byf-community .byf-moment {
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    border-color 0.12s ease;
}
.byf-community .byf-moment:hover {
  transform: translateY(-1px);
  border-color: rgba(185, 163, 255, 0.35);
  box-shadow: 0 14px 30px rgba(17, 24, 39, 0.08);
}
.byf-community .byf-moment-name {
  color: #2b3a44;
  transition: color 0.12s ease;
}
.byf-community .byf-follow {
  border-color: rgba(185, 163, 255, 0.28);
}
.byf-community .byf-follow[aria-pressed="true"] {
  background: rgba(185, 163, 255, 0.18);
  border-color: rgba(185, 163, 255, 0.35);
}
.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, 0.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, 0.9) !important;
  border-color: rgba(185, 163, 255, 0.45) !important;
  color: #2e2e2e !important;
  box-shadow: none !important;
  outline: none !important;
}
.byf-community .byf-follow[aria-pressed="true"] {
  background: rgba(185, 163, 255, 0.18) !important;
  border-color: rgba(185, 163, 255, 0.45) !important;
  color: #2e2e2e !important;
}
.byf-community .byf-follow[aria-pressed="true"]:hover {
  background: rgba(185, 163, 255, 0.25) !important;
  border-color: rgba(185, 163, 255, 0.55) !important;
}
.byf-community .byf-react {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(210, 220, 235, 0.85);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  color: #2e2e2e;
  transition: none !important;
  position: relative;
}
.byf-community .byf-react:hover,
.byf-community .byf-react:focus,
.byf-community .byf-react:focus-visible {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(210, 220, 235, 0.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, 0.22) !important;
  border-color: rgba(185, 163, 255, 0.45) !important;
  color: #2e2e2e !important;
}
.byf-community .byf-react.is-on:hover {
  background: rgba(185, 163, 255, 0.22) !important;
  border-color: rgba(185, 163, 255, 0.45) !important;
}
.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, 0.92);
  color: #fff;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.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, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.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, 0.14);
  border: 1px solid rgba(185, 163, 255, 0.25);
  color: #2b3a44;
  width: fit-content;
}
.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;
}
.byf-daybox {
  margin: 0;
  padding: 12px;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.05),
    rgba(255, 255, 255, 1)
  );
}
/* ---------- Compact card layout ---------- */
.byf-daybox--compact {
  padding: 10px 12px;
}
.byf-compact-emo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(185, 163, 255, 0.05);
  margin-bottom: 8px;
  font-size: 12.5px;
  color: #6b7280;
  line-height: 1.4;
}
.byf-compact-emo strong {
  color: #1f2937;
}
.byf-compact-emo-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.byf-compact-tasks {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.byf-mini-task {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(20, 19, 26, 0.08);
  background: #fff;
  color: #9ca3af;
  transition: all 0.15s ease;
  cursor: default;
}
.byf-mini-task.is-ok {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.25);
  color: #16a34a;
}
.byf-mini-task.is-miss {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.byf-details-expand {
  margin-top: 4px;
}
.byf-details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #6f63f6;
  cursor: pointer;
  padding: 4px 0;
  list-style: none;
  letter-spacing: -0.01em;
}
.byf-details-toggle::-webkit-details-marker {
  display: none;
}
.byf-details-toggle svg {
  transition: transform 0.2s ease;
}
.byf-details-expand[open] .byf-details-toggle svg {
  transform: rotate(90deg);
}
.byf-details-body {
  padding-top: 8px;
}

/* Detail rows (compact list) */
.byf-detail-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.byf-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
  color: #374151;
  border-bottom: 1px solid rgba(20, 19, 26, 0.04);
}
.byf-detail-row:last-child {
  border-bottom: 0;
}
.byf-detail-icon {
  flex-shrink: 0;
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}
.byf-detail-row.is-ok .byf-detail-icon {
  color: #16a34a;
}
.byf-detail-row.is-miss .byf-detail-icon {
  color: #ef4444;
}
.byf-detail-label {
  flex: 1;
  font-weight: 600;
  color: #1f2937;
  letter-spacing: -0.01em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.byf-detail-val {
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
  font-size: 11px;
}
.byf-detail-status {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
}
.byf-detail-row.is-ok .byf-detail-status {
  color: #16a34a;
}
.byf-detail-row.is-miss .byf-detail-status {
  color: #ef4444;
}

/* Mini task tooltip */
.byf-mini-task {
  position: relative;
}
.byf-mini-task::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 50;
}
.byf-mini-task:hover::after,
.byf-mini-task:active::after {
  opacity: 1;
}

/* ---------- Hidden cards separator ---------- */
.byf-hidden-separator {
  grid-column: 1 / -1;
  text-align: center;
  padding: 8px 0;
}
.byf-show-hidden-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(20, 19, 26, 0.03);
  border: 1px dashed rgba(20, 19, 26, 0.12);
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: -0.01em;
}
.byf-show-hidden-btn:hover {
  background: rgba(20, 19, 26, 0.06);
  border-color: rgba(20, 19, 26, 0.2);
  color: #374151;
}
.byf-hidden-cards {
  display: contents;
}
.byf-moment--muted {
  opacity: 0.6;
  padding: 10px 12px;
}
.byf-moment--muted:hover {
  opacity: 1;
}
.byf-moment--muted .byf-moment-open .byf-ava {
  width: 36px;
  height: 36px;
}

/* ---------- Empty feed ---------- */
.byf-empty-feed {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  background: #fff;
  border: 1px solid rgba(20, 19, 26, 0.08);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(20, 19, 26, 0.06);
}
.byf-empty-feed-icon {
  color: #d1d5db;
  margin-bottom: 12px;
}
.byf-empty-feed-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.byf-empty-feed-sub {
  font-size: 13px;
  color: #9ca3af;
  margin-bottom: 16px;
}
.byf-empty-feed-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.byf-empty-feed-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #6f63f626;
  color: #fff;
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}
.byf-empty-feed-btn:hover {
  background: #5b4fdb;
  color: #fff;
}
.byf-empty-feed-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #6f63f6;
  text-decoration: none;
}
.byf-empty-feed-link:hover {
  text-decoration: underline;
}

.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: -0.2px;
  color: #111827;
}
.byf-day-sub {
  font-size: 12px;
  color: #6b7280;
}
.byf-metrics {
  display: block;
  gap: 10px;
  margin-bottom: 10px;
}
.byf-metric {
  padding: 8px 10px 10px;
  border-radius: 12px;
  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;
}
.byf-bar {
  height: 6px;
  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%);
}
.byf-metric.byf-chip-ok {
  border-color: #86efac;
  background: rgba(34, 197, 94, 0.08);
}
.byf-metric.byf-chip-bad {
  border-color: #fca5a5;
  background: rgba(239, 68, 68, 0.08);
}
.byf-taskline {
  border-top: 1px dashed #e9eef7;
  padding-top: 10px;
}
.byf-task-title {
  font-size: 12px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 8px;
}
.byf-notes {
  margin: 0 14px 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid #eef2f7;
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.06),
    rgba(255, 255, 255, 1)
  );
}
.byf-notes-title {
  font-weight: 900;
  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: 8px;
  font-weight: 700;
  font-size: 13px;
}
.byf-day-stats-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(20, 19, 26, 0.08);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: 0 1px 3px rgba(20, 19, 26, 0.04);
  color: #374151;
}
.byf-day-emotion {
  margin-top: 10px;
  font-size: 14px;
  opacity: 0.85;
}
@media (max-width: 520px) {
  .byf-card,
  .byf-moment {
    box-shadow: 0 6px 14px rgba(20, 35, 55, 0.08);
  }
}
#byf-confetti,
.byf-modal-card {
  will-change: transform, opacity;
}
.byf-community-daystats {
  margin-top: 0;
}

/* Daystats collapsible wrapper */
.byf-daystats-wrap {
  background: #fff;
  border: 1px solid rgba(20, 19, 26, 0.08);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(20, 19, 26, 0.06);
  margin-bottom: 14px;
  overflow: hidden;
}
.byf-daystats-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  letter-spacing: -0.02em;
}
.byf-daystats-toggle::-webkit-details-marker {
  display: none;
}
.byf-daystats-toggle span {
  flex: 1;
}
.byf-daystats-toggle svg:last-child {
  transition: transform 0.2s ease;
  color: #9ca3af;
}
.byf-daystats-wrap[open] .byf-daystats-toggle svg:last-child {
  transform: rotate(90deg);
}
.byf-daystats-wrap[open] .byf-daystats-toggle {
  border-bottom: 1px solid rgba(20, 19, 26, 0.06);
}
.byf-daystats-wrap .byf-day-stats {
  padding: 14px 16px;
  border: 0;
  box-shadow: none;
  margin: 0;
  border-radius: 0;
}
.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 {
  background: #fff;
  border: 1px solid rgba(20, 19, 26, 0.08);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(20, 19, 26, 0.06);
}
.byf-community-box-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.byf-community-box-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e6e9ff 0%, #f0e6ff 100%);
  border: 1px solid #e7c7e2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #6f63f6;
}
.byf-community-box-title {
  font-weight: 900;
  font-size: 15px;
  color: #111827;
  letter-spacing: -0.02em;
}
.byf-community-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.byf-community-pills span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(20, 19, 26, 0.08);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 12px;
  color: #374151;
  box-shadow: 0 1px 3px rgba(20, 19, 26, 0.04);
}
.byf-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.byf-community-highlight {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid #e6e4f5;
  background: linear-gradient(
    135deg,
    rgba(230, 233, 255, 0.5) 0%,
    rgba(240, 230, 255, 0.4) 100%
  );
  box-shadow: 0 2px 12px rgba(20, 19, 26, 0.06);
  font-size: 13.5px;
  font-weight: 500;
  color: #2a2a3a;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  letter-spacing: -0.01em;
}
/* ---------- Streak badge ---------- */
.byf-streak {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #e8457e;
  background: rgba(232, 69, 126, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 4px;
  letter-spacing: -0.01em;
}
.byf-streak svg {
  color: #e8457e;
}

/* ---------- Treba mi podrska ---------- */
.byf-chip-support {
  background: rgba(185, 163, 255, 0.12) !important;
  border-color: rgba(185, 163, 255, 0.35) !important;
  color: #5b21b6 !important;
  font-weight: 700 !important;
}
.byf-moment--support {
  border-color: rgba(185, 163, 255, 0.35);
  box-shadow: 0 0 0 2px rgba(185, 163, 255, 0.08),
    0 2px 12px rgba(20, 19, 26, 0.06);
}
.byf-support-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin: -15px -12px 12px -12px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(
    135deg,
    rgba(230, 233, 255, 0.6) 0%,
    rgba(240, 230, 255, 0.5) 100%
  );
  border-bottom: 1px solid rgba(185, 163, 255, 0.2);
  font-size: 12px;
  font-weight: 600;
  color: #5b21b6;
  letter-spacing: -0.01em;
}

/* ---------- Reakcije sa porukom ---------- */
.byf-reacts {
  position: relative;
}
.byf-react-popup {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid rgba(20, 19, 26, 0.08);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(20, 19, 26, 0.18);
  padding: 14px;
  width: 280px;
  z-index: 100;
  display: none;
}
.byf-react-popup-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #6f63f6;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.byf-react-popup.is-open {
  display: block;
}
.byf-react-popup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 24px;
  border: 6px solid transparent;
  border-top-color: #fff;
}
.byf-react-popup input {
  width: 100%;
  border: 1px solid rgba(120, 112, 168, 0.15);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  margin-bottom: 8px;
  outline: none;
}
.byf-react-popup input:focus {
  border-color: rgba(185, 163, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(185, 163, 255, 0.15);
}
.byf-react-popup-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.byf-react-popup-send {
  background: #6f63f6;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.byf-react-popup-skip {
  background: none;
  border: 0;
  color: #9ca3af;
  font-size: 12px;
  cursor: pointer;
  padding: 6px;
}
.byf-react-popup-skip:hover {
  color: #6b7280;
}

.byf-react-messages {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(20, 19, 26, 0.06);
}
.byf-react-messages-toggle {
  background: none;
  border: 0;
  color: #6f63f6;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}
.byf-react-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  color: #374151;
  line-height: 1.4;
}
.byf-react-msg img {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.byf-react-msg strong {
  font-weight: 700;
  color: #111827;
}

/* ---------- Ko te prati (followers u profilu) ---------- */
.byf-followers-section {
  margin-top: 12px;
  padding: 12px 0;
}
.byf-followers-label {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 8px;
}
.byf-followers-avatars {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.byf-followers-avatars img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(210, 220, 235, 0.75);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.byf-followers-avatars img:hover {
  transform: scale(1.1);
}

/* ---------- Treba podrska toggle (dnevni log) ---------- */
.byf-support-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(185, 163, 255, 0.25);
  border-radius: 14px;
  background: rgba(185, 163, 255, 0.06);
  margin-top: 10px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.byf-support-toggle:hover {
  background: rgba(185, 163, 255, 0.12);
  border-color: rgba(185, 163, 255, 0.4);
}
.byf-support-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #6f63f6;
  flex-shrink: 0;
}
.byf-support-toggle-text {
  font-size: 13px;
  font-weight: 600;
  color: #5b21b6;
}
.byf-support-toggle-sub {
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
  margin-top: 2px !important;
  margin-left: 15px !important;
}

.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%);
  }
}
.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;
}
.byf-emo-message {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(160, 140, 255, 0.1);
  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;
}
.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-sub {
  font-size: 11.5px;
  font-weight: 500;
  color: #9ca3af;
  letter-spacing: -0.01em;
  margin-top: -3px;
}
.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;
}
.byf-moment-sub {
  margin-top: 2px;
  opacity: 0.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;
}
.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;
}
.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: 0.04em;
}
.byf-acc-list {
  margin: 0;
  color: #1f2a37;
  padding-left: 0px !important;
}
.byf-acc-list li {
  margin: 6px 0;
}
/* ===== Profil Modal V3 — Premium redesign ===== */

.byf-profile-head--v3 {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 14px;
  align-items: start;
  padding-bottom: 14px;
}
.byf-profile-ava-wrap {
  position: relative;
}
.byf-profile-ava-wrap .byf-ava {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50% !important;
  object-fit: cover;
  border: 3px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #6f63f6, #e7c7e2) border-box;
  box-shadow: 0 4px 16px rgba(111, 99, 246, 0.12);
}
/* Avatar sa story — klikabilan, animirani ring */
.byf-profile-ava--story {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.byf-profile-ava--story .byf-ava {
  border: 3px solid transparent !important;
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #6f63f6, #e7c7e2, #f472b6, #6f63f6) border-box !important;
  animation: byf-story-ring 3s linear infinite;
}
@keyframes byf-story-ring {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
.byf-profile-ava--story:hover .byf-ava {
  box-shadow: 0 4px 20px rgba(111, 99, 246, 0.25);
}
.byf-profile-story-ring {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6f63f6, #e7c7e2);
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.byf-profile-story-ring::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid #fff;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  margin-left: 1px;
}
.byf-profile-mid {
  min-width: 0;
  padding-top: 4px;
}
.byf-profile-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.byf-profile-name {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #1f2937;
}
.byf-streak--profile {
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 999px;
}
.byf-profile-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.byf-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f2efff;
  border: 1px solid rgba(111, 99, 246, 0.1);
  color: #4c1d95;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.byf-meta-chip svg {
  color: #6f63f6;
  opacity: 0.7;
}

/* Social pills */
.byf-profile-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.byf-social-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(20, 19, 26, 0.08);
  background: #fff;
  color: #1f2937;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.byf-social-pill svg {
  flex-shrink: 0;
}
.byf-social-pill--ig:hover {
  background: linear-gradient(135deg, #f9ce34, #ee2a7b, #6228d7);
  color: #fff;
  border-color: transparent;
}
.byf-social-pill--ig:hover svg {
  stroke: #fff;
}
.byf-social-pill--tt:hover {
  background: #010101;
  color: #fff;
  border-color: transparent;
}
.byf-social-pill--tt:hover svg {
  stroke: #fff;
}

/* Follow button v3 */
.byf-profile-right {
  justify-self: end;
  padding-top: 4px;
}
.byf-profile-head--v3 .byf-follow--big {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 13px;
  border-radius: 12px;
  transition: all 0.2s ease;
}
.byf-profile-head--v3 .byf-follow--big svg {
  flex-shrink: 0;
}
.byf-profile-head--v3 .byf-follow[aria-pressed="true"] {
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.12),
    rgba(231, 199, 226, 0.18)
  );
  border-color: rgba(111, 99, 246, 0.25);
  color: #5b21b6;
}

/* Followers V3 — overlapping stack */
.byf-followers-section--v3 {
  margin-top: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(20, 19, 26, 0.06);
}
.byf-followers-section--v3 .byf-followers-label {
  font-size: 13px;
  font-weight: 600;
  color: #9ca3af;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.byf-followers-section--v3 .byf-followers-label strong {
  color: #1f2937;
  font-weight: 800;
}
.byf-followers-stack {
  display: flex;
  align-items: center;
}
.byf-followers-stack-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(20, 19, 26, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease, z-index 0s;
  position: relative;
}
.byf-followers-stack-img + .byf-followers-stack-img {
  margin-left: -8px;
}
.byf-followers-stack-img:hover {
  transform: scale(1.15);
  z-index: 2;
}
.byf-followers-more {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #9ca3af;
  background: rgba(20, 19, 26, 0.04);
  padding: 4px 10px;
  border-radius: 999px;
}

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

/* Saznaj vise — warm cards */
.byf-profile-section {
  border: 1px solid rgba(20, 19, 26, 0.08);
  background: #fafbfd;
  border-radius: 18px;
  padding: 14px 16px;
  margin: 14px 0;
}
.byf-profile-section--warm {
  background: linear-gradient(135deg, #faf5ff, #fef3f2);
  border: 1px solid rgba(167, 139, 250, 0.15);
}
.byf-profile-kicker {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #1f2937;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.01em;
}
.byf-profile-kicker svg {
  color: #6f63f6;
}
.byf-profile-card {
  background: #fff;
  border: 1px solid rgba(20, 19, 26, 0.06);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 10px;
}
.byf-profile-card--warm {
  border: 1px solid rgba(167, 139, 250, 0.12);
  box-shadow: 0 2px 8px rgba(167, 139, 250, 0.06);
}
.byf-profile-card-title {
  font-weight: 700;
  font-size: 13.5px;
  color: #1f2937;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.byf-profile-card-title svg {
  color: #6f63f6;
  flex-shrink: 0;
}
.byf-profile-text {
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
  font-style: italic;
  white-space: pre-wrap;
}

/* Accordion phases V3 */
.byf-acc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.byf-acc {
  border: 1px solid rgba(20, 19, 26, 0.08);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.byf-acc--current {
  border-left: 4px solid #6f63f6;
}
.byf-acc-sum {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.byf-acc-sum::-webkit-details-marker {
  display: none;
}
.byf-acc-left {
  min-width: 0;
  flex: 1;
}
.byf-acc-title {
  font-weight: 800;
  color: #1f2937;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.byf-acc-now {
  font-size: 11px;
  font-weight: 700;
  color: #6f63f6;
  background: rgba(111, 99, 246, 0.08);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.byf-acc-sub {
  margin-top: 2px;
  color: #9ca3af;
  font-size: 13px;
}
.byf-acc-kpis {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.byf-kpi-profil {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 700;
  color: #1f2937;
  font-size: 12.5px;
  border: 1px solid transparent;
}
.byf-kpi--steps {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.12);
}
.byf-kpi--steps svg {
  color: #6366f1;
}
.byf-kpi--water {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.12);
}
.byf-kpi--water svg {
  color: #38bdf8;
}
.byf-kpi--kcal {
  background: rgba(251, 146, 60, 0.08);
  border-color: rgba(251, 146, 60, 0.12);
}
.byf-kpi--kcal svg {
  color: #fb923c;
}

/* Chevron rotation */
.byf-acc-chevron {
  display: flex;
  align-items: center;
  color: #9ca3af;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.byf-acc[open] .byf-acc-chevron {
  transform: rotate(90deg);
}

.byf-acc-body {
  padding: 14px 16px;
  border-top: 1px solid rgba(20, 19, 26, 0.06);
  background: #fafbfd;
}
.byf-acc-block + .byf-acc-block {
  margin-top: 10px;
}
.byf-acc-h {
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 8px;
  font-size: 14px;
}
.byf-acc-ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: 14px;
}
.byf-acc-ul li {
  margin: 6px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #4b5563;
}
.byf-acc-ul li svg {
  color: #6f63f6;
  flex-shrink: 0;
}
.byf-acc-ul li strong {
  color: #1f2937;
}
.byf-profile-muted {
  color: #9ca3af;
  background: #fff;
  border: 1px dashed rgba(20, 19, 26, 0.08);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
}

/* Mobile responsive V3 */
@media (max-width: 720px) {
  .byf-profile-head--v3 {
    grid-template-columns: 72px 1fr;
    grid-template-areas: "av meta" "btn btn";
    align-items: start;
    gap: 12px;
  }
  .byf-profile-ava-wrap {
    grid-area: av;
  }
  .byf-profile-ava-wrap .byf-ava {
    width: 72px !important;
    height: 72px !important;
  }
  .byf-profile-mid {
    grid-area: meta;
  }
  .byf-profile-name {
    font-size: 19px;
  }
  .byf-profile-right {
    grid-area: btn;
    justify-self: start;
    margin-top: 4px;
  }
  .byf-acc-kpis {
    gap: 4px;
  }
  .byf-kpi-profil {
    padding: 4px 8px;
    font-size: 11.5px;
  }
}

/* ===== Followers expand panel ===== */
.byf-followers-more {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #6f63f6;
  background: rgba(111, 99, 246, 0.06);
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(111, 99, 246, 0.12);
  cursor: pointer;
  transition: all 0.2s ease;
}
.byf-followers-more:hover {
  background: rgba(111, 99, 246, 0.12);
}
.byf-followers-all {
  margin-top: 12px;
  padding: 12px;
  background: #fafbfd;
  border: 1px solid rgba(20, 19, 26, 0.06);
  border-radius: 14px;
}
.byf-followers-all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.byf-follower-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid rgba(20, 19, 26, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.byf-follower-item:hover {
  border-color: rgba(111, 99, 246, 0.2);
  background: rgba(111, 99, 246, 0.03);
}
.byf-follower-item img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.byf-follower-item span {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ===== Phase Extras V3 — Premium ===== */
.byf-phase-extras--v3 {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(20, 19, 26, 0.06);
}

/* Weight pill */
.byf-weight-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.06),
    rgba(231, 199, 226, 0.08)
  );
  border: 1px solid rgba(111, 99, 246, 0.12);
  color: #1f2937;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
}
.byf-weight-pill-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e6e9ff, #f0e6ff);
  border: 1px solid #e7c7e2;
  flex-shrink: 0;
}
.byf-weight-pill-ico svg {
  color: #6f63f6;
}
.byf-weight-pill strong {
  font-weight: 800;
  color: #1f2937;
}
.byf-weight-pill.is-down strong {
  color: #059669;
}
.byf-weight-pill.is-up strong {
  color: #dc2626;
}
.byf-weight-pill.is-flat strong {
  color: #9ca3af;
}

/* Progress header */
.byf-progress-header {
  margin-bottom: 14px;
}
.byf-progress-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: #1f2937;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.byf-progress-title svg {
  color: #6f63f6;
}
.byf-progress-sub {
  margin: 3px 0 0;
  font-size: 13px;
  color: #9ca3af;
  font-weight: 400;
}

/* Stat rows V3 */
.byf-srows--v3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.byf-srow--v3 {
  background: #fff;
  border: 1px solid rgba(20, 19, 26, 0.06);
  border-radius: 16px;
  padding: 12px 14px;
  transition: border-color 0.2s ease;
}
.byf-srow--v3:hover {
  border-color: rgba(20, 19, 26, 0.12);
}
.byf-srow--v3 .byf-srow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.byf-srow--v3 .byf-srow-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Stat icons — gradient backgrounds per type */
.byf-srow--v3 .byf-sico {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0;
  border: none;
  box-shadow: none;
}
.byf-sico--activity {
  background: linear-gradient(135deg, #fce7f3, #fdf2f8);
  border: 1px solid rgba(236, 72, 153, 0.15) !important;
}
.byf-sico--activity svg {
  color: #ec4899;
}
.byf-sico--steps {
  background: linear-gradient(135deg, #e6e9ff, #eef2ff);
  border: 1px solid rgba(99, 102, 241, 0.15) !important;
}
.byf-sico--steps svg {
  color: #6366f1;
}
.byf-sico--water {
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
}
.byf-sico--water svg {
  color: #0ea5e9;
}
.byf-sico--train {
  background: linear-gradient(135deg, #d1fae5, #ecfdf5);
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
}
.byf-sico--train svg {
  color: #10b981;
}
.byf-sico--challenge {
  background: linear-gradient(135deg, #e6e9ff, #f0e6ff);
  border: 1px solid #e7c7e2 !important;
}
.byf-sico--challenge svg {
  color: #6f63f6;
}

.byf-srow--v3 .byf-smeta {
  min-width: 0;
}
.byf-srow--v3 .byf-slabel {
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
}
.byf-srow--v3 .byf-ssub {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 1px;
}
.byf-srow--v3 .byf-srow-right {
  text-align: right;
  white-space: nowrap;
}
.byf-srow--v3 .byf-sval {
  font-weight: 800;
  font-size: 18px;
  color: #1f2937;
  letter-spacing: -0.02em;
}
.byf-srow--v3 .byf-sgoal {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #9ca3af;
}

/* Progress bars V3 — colored per metric */
.byf-srow--v3 .byf-sbar {
  height: 6px;
  border-radius: 999px;
  background: rgba(20, 19, 26, 0.04);
  border: none;
  overflow: hidden;
}
.byf-srow--v3 .byf-sbar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}
.byf-sbar--activity > i {
  background: linear-gradient(90deg, #f9a8d4, #ec4899);
}
.byf-sbar--steps > i {
  background: linear-gradient(90deg, #a5b4fc, #6366f1);
}
.byf-sbar--water > i {
  background: linear-gradient(90deg, #7dd3fc, #0ea5e9);
}
.byf-sbar--train > i {
  background: linear-gradient(90deg, #6ee7b7, #10b981);
}
.byf-sbar--challenge > i {
  background: linear-gradient(90deg, #c4b5fd, #6f63f6);
}

/* Gallery V3 */
.byf-phase-gallery--v3 {
  margin-top: 16px;
  background: #fafbfd;
  border: 1px solid rgba(20, 19, 26, 0.06);
  border-radius: 16px;
  padding: 14px;
}
.byf-gallery-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #1f2937;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.01em;
}
.byf-gallery-title svg {
  color: #6f63f6;
}
.byf-phase-gallery--v3 .byf-gal-grid {
  gap: 8px;
}
.byf-phase-gallery--v3 .byf-gal-item {
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(20, 19, 26, 0.06);
}
.byf-phase-gallery--v3 .byf-gal-item img {
  border-radius: 14px;
}

/* Phase extras mobile — smanjeni padding na celom lancu da ništa ne ispada */
@media (max-width: 520px) {
  /* Smanjujemo padding na svakom nivou ugnježđavanja */
  .byf-profile-section {
    padding: 8px;
    margin: 10px 0;
  }
  .byf-acc {
    border-radius: 12px;
  }
  .byf-acc-body {
    padding: 8px;
  }
  .byf-phase-extras--v3 {
    margin-top: 8px;
    padding-top: 8px;
  }
  .byf-weight-pill {
    font-size: 12px;
    padding: 7px 10px;
    gap: 6px;
  }
  .byf-weight-pill-ico {
    width: 24px;
    height: 24px;
    border-radius: 8px;
  }
  .byf-progress-title {
    font-size: 14px;
  }
  .byf-progress-sub {
    font-size: 12px;
  }
  .byf-srows--v3 {
    gap: 6px;
  }
  .byf-srow--v3 {
    padding: 8px;
    border-radius: 12px;
  }
  .byf-srow--v3 .byf-srow-head {
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 5px;
  }
  .byf-srow--v3 .byf-sico {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
  .byf-srow--v3 .byf-sico svg {
    width: 13px;
    height: 13px;
  }
  .byf-srow--v3 .byf-smeta {
    min-width: 0;
    flex: 1 1 0%;
    overflow: hidden;
  }
  .byf-srow--v3 .byf-slabel {
    font-size: 12.5px;
  }
  .byf-srow--v3 .byf-ssub {
    font-size: 10px;
  }
  .byf-srow--v3 .byf-srow-right {
    text-align: right;
    flex-shrink: 0;
    margin-left: auto;
  }
  .byf-srow--v3 .byf-sval {
    font-size: 15px;
  }
  .byf-srow--v3 .byf-sgoal {
    font-size: 10px;
  }
  .byf-srow--v3 .byf-sbar {
    height: 4px;
  }
  .byf-phase-gallery--v3 {
    padding: 8px;
    margin-top: 10px;
  }
  .byf-gallery-title {
    font-size: 13px;
  }
  .byf-followers-all-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

.byf-acc-ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: 14px;
}
.byf-acc-ul li {
  margin: 6px 0;
}
.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;
}
.byf-profile {
  max-width: 720px;
  margin: 0 auto;
}
.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);
}
.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);
}
.byf-profile-name {
  font-family: Manrope, system-ui;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #19232d;
}
.byf-profile .byf-card:first-child div + div {
  font-size: 13px;
  color: rgba(25, 35, 45, 0.6);
}
.byf-profile h3 {
  font-family: Manrope, system-ui;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin-bottom: 12px;
  color: #19232d;
}
.byf-profile label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(25, 35, 45, 0.75);
}
.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);
}
.byf-btn-primary {
  background: linear-gradient(135deg, #b9a3ff, #9b8cff);
  border-radius: 16px;
  padding: 10px 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  box-shadow: 0 12px 30px rgba(185, 163, 255, 0.35);
  color: white !important;
}
.byf-btn-primary:active {
  transform: scale(0.98);
}
@media (max-width: 820px) {
  .byf-profile .byf-card {
    padding: 16px;
  }
}
.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;
}
.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;
}
.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;
}
.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;
}
.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;
}
.byf-bar > span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.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);
}
.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;
}
.byf-weight-chart .area {
  fill: url(#byfWeightFill);
  stroke: none;
}
.byf-weight-chart .line {
  fill: none;
  stroke: rgba(185, 163, 255, 0.95);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.byf-weight-chart .pt {
  fill: #fff;
  stroke: rgba(185, 163, 255, 0.85);
  stroke-width: 2;
  opacity: 0.7;
}
.byf-weight-chart .pt.is-last {
  opacity: 1;
  stroke-width: 3;
}
.byf-weight-chart .ref {
  stroke-width: 1.8;
  stroke-dasharray: 7 7;
  opacity: 0.55;
}
.byf-weight-chart .ref.start {
  stroke: rgba(59, 130, 246, 0.6);
}
.byf-weight-chart .ref.goal {
  stroke: rgba(34, 197, 94, 0.6);
}
.byf-weight-chart .ref-label {
  font-size: 11px;
  fill: rgba(15, 23, 42, 0.75);
  font-weight: 800;
}
.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, 0.25);
  background: rgba(59, 130, 246, 0.06);
}
.byf-weight-legend .chip.goal {
  border-color: rgba(34, 197, 94, 0.25);
  background: rgba(34, 197, 94, 0.06);
}
.byf-weight-legend .chip.now {
  border-color: rgba(185, 163, 255, 0.3);
  background: rgba(185, 163, 255, 0.1);
}
.byf-weight-minirow {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.byf-weight-legend .chip.delta-down,
.byf-weight-minirow .chip.delta-down {
  border-color: rgba(34, 197, 94, 0.25);
  background: rgba(34, 197, 94, 0.07);
}
.byf-weight-legend .chip.delta-up,
.byf-weight-minirow .chip.delta-up {
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.07);
}
.byf-weight-legend .chip.delta-flat,
.byf-weight-minirow .chip.delta-flat {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.1);
}
.byf-weight-chart .ref-tag {
  font-size: 11px;
  font-weight: 900;
  opacity: 0.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);
}
@media (min-width: 861px) {
  .byf-weight-chart {
    max-width: 680px;
    margin-left: 0;
  }
}
@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, 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;
}
.byf-phase-extras-wrap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.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, 0.08);
  border-radius: 14px;
  padding: 12px 12px 10px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  min-width: 0;
}
.byf-mini-k {
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.6);
  letter-spacing: 0.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, 0.6);
}
.byf-phase-gallery {
  margin-top: 12px;
  background: rgba(15, 23, 42, 0.02);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  padding: 12px;
}
.byf-phase-gallery .byf-acc-h {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}
.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, 0.1);
  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 0.18s ease;
}
.byf-gal-item:hover img {
  transform: scale(1.03);
}
.byf-phase-gallery .byf-profile-muted {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px dashed rgba(15, 23, 42, 0.18);
  color: rgba(15, 23, 42, 0.62);
  font-size: 13px;
}
.byf-acc-body,
.byf-phase-extras-wrap,
.byf-phase-gallery {
  max-width: 100%;
  overflow-x: hidden;
}
.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, 0.7);
}
.byf-up-item .x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 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: 0.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, 0.1);
  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, 0.55);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  line-height: 28px;
}
.byf-pv-one .byf-pv-item {
  max-width: 220px;
}
.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, 0.7);
  font-size: 13px;
}
.byf-up-bar {
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.1);
  overflow: hidden;
}
.byf-up-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.75);
  transition: width 0.15s linear;
}
.byf-up-meta {
  margin-top: 8px;
  color: rgba(17, 17, 17, 0.65);
  font-size: 12px;
}
.byf-up-list {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.byf-up-item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.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, 0.65);
  font-size: 12px;
}
.byf-up-size {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  color: rgba(17, 17, 17, 0.55);
  font-size: 12px;
}
.byf-phase-gallery .byf-acc-h {
  margin: 0 0 6px;
}
.byf-profile-muted--note {
  margin-top: 10px !important;
}
.byf-gal-item {
  position: relative;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}
.byf-gal-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(185, 163, 255, 0.22),
    0 8px 18px rgba(15, 23, 42, 0.08);
}
.byf-gal-item::after {
  content: "Uvećaj";
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(2px);
  transition: 0.15s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .byf-gal-item:hover::after {
    opacity: 1;
    transform: translateY(0);
  }
}
.byf-lb-lock {
  overflow: hidden !important;
}
/* ===== Lightbox — Premium Gallery Viewer ===== */
.byf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.byf-lightbox.is-open {
  display: flex;
  animation: byf-lb-fadein 0.2s ease;
}
@keyframes byf-lb-fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.byf-lightbox-inner {
  position: relative;
  width: 100%;
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.byf-lb-stage {
  position: relative;
  width: 100%;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(15, 15, 15, 0.6);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.byf-lb-img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  animation: byf-lb-imgin 0.25s ease;
}
@keyframes byf-lb-imgin {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.byf-lb-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  color: #1f2937;
  font-size: 18px;
  font-weight: 900;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 2;
}
.byf-lb-close:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
.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, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 10;
}
.byf-lb-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-50%) scale(1.08);
}
.byf-lb-prev {
  left: -12px;
  padding: 0;
}
.byf-lb-next {
  right: -12px;
  padding: 0;
}
.byf-lb-nav:disabled {
  opacity: 0.25;
  cursor: default;
}
.byf-lb-meta {
  margin-top: 16px;
  text-align: center;
}
.byf-lb-author-wrap {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 3;
  pointer-events: none;
}
.byf-lb-author {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
  max-width: 200px;
  pointer-events: none;
}
.byf-lb-author[hidden] {
  display: none !important;
}
.byf-lb-author-ava {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  min-height: 26px !important;
  max-height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  display: block !important;
  flex-shrink: 0;
}
.byf-lb-author-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.byf-lb-count {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .byf-lightbox {
    padding: 12px;
  }
  .byf-lb-stage {
    border-radius: 14px;
  }
  .byf-lb-prev {
    left: 8px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .byf-lb-next {
    right: 8px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  .byf-lb-close {
    top: 8px;
    right: 8px;
    width: 42px;
    font-size: 13px;
  }
}
.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;
}
@media (max-width: 520px) {
  .byf-modal {
    overflow-x: hidden;
  }
  .byf-modal-card {
    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;
  }
  .byf-modal-card * {
    box-sizing: border-box;
    max-width: 100%;
  }
}
@media (max-width: 520px) {
  .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;
  }
  .byf-summary--mini .byf-srow-right {
    flex: 1 1 100%;
    max-width: 100%;
    text-align: left;
    margin-left: 48px;
    margin-top: 4px;
  }
}
.byf-summary--mini .byf-srow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
.byf-summary--mini .byf-srow-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.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, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.18);
  color: #0f172a;
  font-weight: 500;
}
.byf-kpi--weight.is-down {
  background: rgba(59, 130, 246, 0.12);
}
.byf-kpi--weight.is-up {
  background: rgba(59, 130, 246, 0.12);
}
.byf-kpi--weight.is-flat {
  background: rgba(59, 130, 246, 0.08);
}
.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: 0.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: 0.75;
    margin-top: 4px;
    font-weight: 400;
  }
}
.byf-mini-btn.is-primary {
  background: rgba(185, 163, 255, 0.28) !important;
  border: 1px solid rgba(185, 163, 255, 0.35) !important;
  font-weight: 800;
}
.byf-mini-btn.is-ghost {
  background: transparent !important;
  border: 1px solid rgba(185, 163, 255, 0.25) !important;
  opacity: 0.9;
  letter-spacing: -0.7px;
}
.byf-mini-btn.is-ghost:hover {
  background: #f2f0fe !important;
  border: 1px solid rgba(185, 163, 255, 0.25) !important;
  opacity: 0.9;
  letter-spacing: -0.7px;
}
.byf-details {
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(185, 163, 255, 0.18);
  background: rgba(185, 163, 255, 0.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;
}
.byf-weekbox,
.byf-card:has(.byf-dash-qs),
.byf-card:has(.byf-dash-q) {
}
.byf-dash-qs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.byf-dash-q {
  position: relative;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(185, 163, 255, 0.18);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    border-color 0.12s ease;
  overflow: hidden;
}
.byf-dash-q::before {
  content: "";
  position: absolute;
  inset: -40px -40px auto auto;
  width: 120px;
  height: 120px;
  background: radial-gradient(
    circle,
    rgba(185, 163, 255, 0.22),
    rgba(185, 163, 255, 0) 60%
  );
  pointer-events: none;
}
@media (hover: hover) {
  .byf-dash-q:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(30, 20, 60, 0.08);
    border-color: rgba(185, 163, 255, 0.32);
  }
}
.byf-dash-q .t {
  font-size: 12px;
  line-height: 1.25;
  opacity: 0.78;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.byf-dash-q .v {
  font-size: 22px;
  font-weight: 850;
  letter-spacing: -0.2px;
  line-height: 1.05;
}
.byf-dash-q .v small,
.byf-dash-q .v span.unit {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.75;
  margin-left: 6px;
}
@media (max-width: 680px) {
  .byf-dash-qs {
    grid-template-columns: 1fr;
  }
  .byf-dash-q {
    padding: 14px 14px;
  }
  .byf-dash-q .v {
    font-size: 20px;
  }
}
.byf-milestones {
  background: linear-gradient(
    180deg,
    rgba(185, 163, 255, 0.12),
    rgba(185, 163, 255, 0.04)
  );
}
.byf-ms-next {
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    rgba(185, 163, 255, 0.35),
    rgba(185, 163, 255, 0.15)
  );
  border: 1px solid rgba(185, 163, 255, 0.4);
  margin-bottom: 14px;
}
.byf-ms-next-badge {
  font-size: 12px;
  font-weight: 850;
  opacity: 0.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: 0.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, 0.7);
  border: 1px solid rgba(185, 163, 255, 0.25);
  font-size: 13px;
  font-weight: 750;
}
.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, 0.85),
    rgba(255, 255, 255, 0.65)
  );
  border: 1px solid rgba(185, 163, 255, 0.28);
  box-shadow: 0 6px 14px rgba(30, 20, 60, 0.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-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;
}
.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;
}
.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;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease,
    border-color 0.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);
}
.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;
}
.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 0.08s ease, box-shadow 0.15s ease,
    border-color 0.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;
}
.byf-compare-frame {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.03);
  aspect-ratio: 3 / 4;
}
.byf-compare-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.byf-hint {
  margin-top: 10px;
  opacity: 0.7;
}
.byf-photos-subtitle {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.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;
  scroll-padding-left: 12px;
}
.byf-weekchip {
  scroll-snap-align: start;
}
@media (max-width: 520px) {
  .byf-weekstrip {
    grid-auto-columns: calc((100% - 10px) / 2);
  }
}
@media (min-width: 900px) {
  .byf-weekstrip {
    grid-auto-columns: calc((100% - (10px * 3)) / 4);
  }
}
.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 0.15s ease, transform 0.08s ease,
    box-shadow 0.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.7);
  letter-spacing: -0.7px;
}
.byf-weekchip.is-active {
  border-color: rgba(120, 90, 255, 0.45);
  box-shadow: 0 10px 24px rgba(120, 90, 255, 0.12);
}
.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;
}
.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.byf-modal-open {
  overflow: hidden;
}
.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;
}
@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;
  }
}
.byf-cal-grid {
  margin-top: 12px;
  display: grid;
  gap: 8px;
  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));
  }
}
.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.1);
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, box-shadow 0.15s ease,
    border-color 0.15s ease, background 0.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);
}
.byf-cal-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03);
}
.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.3);
  background: rgba(255, 185, 60, 0.1);
}
.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.3);
  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.1);
  background: rgba(0, 0, 0, 0.02);
}
.byf-cal-day.is-none .byf-cal-dot {
  background: rgba(0, 0, 0, 0.18);
}
.byf-cal-day.is-today {
  box-shadow: 0 0 0 3px rgba(120, 90, 255, 0.2);
  border-color: rgba(120, 90, 255, 0.35);
}
.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.1);
  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.2);
}
.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 0.12s ease, transform 0.12s ease;
}
.byf-cal-tooltip.is-on {
  opacity: 1;
  transform: translateY(0);
}
.byf-weightV4 {
  padding: 18px;
}
.byf-mini {
  font-size: 12px;
  opacity: 0.84;
}
.byf-muted {
  opacity: 0.72;
}
.byf-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(120, 120, 160, 0.35);
  margin: 0 8px;
  transform: translateY(-1px);
}
.byf-arrow {
  display: inline-block;
  margin: 0 8px;
  opacity: 0.65;
}
.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: 0.78;
}
.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, 0.28);
  background: rgba(255, 255, 255, 0.45);
}
.byf-pill--soft {
  background: rgba(185, 163, 255, 0.1);
}
.byf-pill--mini {
  padding: 5px 9px;
}
.byf-pill--rel {
  cursor: pointer;
}
.byf-empty--v4 {
  border: 1px dashed rgba(185, 163, 255, 0.45);
  background: rgba(185, 163, 255, 0.06);
  border-radius: 16px;
  padding: 16px;
}
.byf-empty__title {
  font-weight: 950;
  font-size: 14px;
  margin-bottom: 6px;
}
.byf-empty__text {
  opacity: 0.92;
  line-height: 1.35;
}
.byf-empty__hint {
  margin-top: 10px;
}
.byf-snapshot {
  border: 1px solid rgba(185, 163, 255, 0.18);
  background: rgba(255, 255, 255, 0.56);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 26px rgba(20, 20, 40, 0.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: 0.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, 0.22);
  background: rgba(255, 255, 255, 0.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, 0.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, 0.1);
  border: 1px solid rgba(185, 163, 255, 0.22);
}
.byf-nudge__icon {
  line-height: 1;
}
.byf-nudge__txt {
  font-size: 13px;
  line-height: 1.25;
  opacity: 0.92;
}
.byf-goalStrip {
  margin-top: 12px;
  border: 1px solid rgba(185, 163, 255, 0.16);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.5);
}
.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, 0.16);
  overflow: hidden;
}
.byf-bar--v4 {
  height: 12px;
}
.byf-bar__fill {
  display: block;
  height: 100%;
  background: rgba(185, 163, 255, 0.92);
  border-radius: 999px;
  width: 0%;
  transition: width 0.45s ease;
}
.byf-bar__tick {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0.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, 0.92);
  color: #fff;
  white-space: nowrap;
}
.byf-goalStrip__route {
  margin-top: 10px;
}
.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, 0.16);
  background: rgba(255, 255, 255, 0.52);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 6px 16px rgba(20, 20, 40, 0.05);
}
.byf-miniCard__label {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.8;
  letter-spacing: -0.6px;
}
.byf-miniCard__value {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 980;
  letter-spacing: -0.3px;
}
.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, 0.88);
}
.byf-delta--down {
  color: #1f7a4f;
}
.byf-delta--up {
  color: #b64b4b;
}
.byf-chartV4 {
  border: 1px solid rgba(185, 163, 255, 0.2);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(20, 20, 40, 0.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, 0.12);
  border: 1px solid rgba(185, 163, 255, 0.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: 0.86;
}
.byf-seg__btn.is-active {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 14px rgba(20, 20, 40, 0.1);
  opacity: 1;
}
.byf-chartWrap {
  position: relative;
}
.byf-svg {
  width: 100%;
  height: 170px;
  display: block;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(185, 163, 255, 0.12);
}
.byf-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 150px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(20, 20, 35, 0.92);
  color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  transform: translate(-50%, -110%);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.byf-tooltip.is-show {
  opacity: 1;
}
.byf-tooltip__date {
  font-size: 12px;
  opacity: 0.9;
}
.byf-tooltip__kg {
  font-size: 16px;
  font-weight: 980;
  margin-top: 2px;
}
.byf-tooltip__delta {
  opacity: 0.92;
  margin-top: 4px;
}
.byf-tooltip__hint {
  opacity: 0.72;
  margin-top: 8px;
}
.byf-svg [data-byf-line] {
  fill: none;
  stroke: rgba(111, 99, 246, 0.45);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none;
}
.byf-svg .byf-pt {
  fill: rgba(111, 99, 246, 0.25);
  stroke: #fff;
  stroke-width: 1;
}
.byf-svg .byf-pt.is-last {
  filter: none;
}
.byf-svg .byf-ref {
  stroke: rgba(120, 112, 168, 0.06);
  stroke-width: 0.5;
}
.byf-svg .byf-refPill {
  fill: none;
  stroke: none;
}
.byf-svg .byf-refText {
  fill: rgba(20, 19, 26, 0.15);
  font-size: 7.5px;
  font-weight: 400;
  font-family: "Manrope", system-ui, sans-serif;
}
.byf-svg .byf-hit {
  cursor: pointer;
}
.byf-details {
  margin-top: 12px;
}
.byf-details__sum {
  cursor: pointer;
  font-weight: 980;
  font-size: 13px;
  opacity: 0.92;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(185, 163, 255, 0.08);
  border: 1px solid rgba(185, 163, 255, 0.16);
}
.byf-details__sum::-webkit-details-marker {
  display: none;
}
.byf-details[open] .byf-details__chev {
  transform: rotate(180deg);
}
.byf-details__chev {
  transition: transform 0.18s ease;
  opacity: 0.75;
}
.byf-details__body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(185, 163, 255, 0.16);
}
.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, 0.96);
  border: 1px solid rgba(185, 163, 255, 0.22);
  box-shadow: 0 20px 60px rgba(0, 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, 0.16);
  border: 1px solid rgba(185, 163, 255, 0.22);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 950;
  cursor: pointer;
}
@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;
  }
}
.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, 0.22);
  background: rgba(120, 160, 255, 0.1);
  box-shadow: 0 6px 18px rgba(20, 20, 40, 0.04);
  font-weight: 800;
  font-size: 12px;
  color: rgba(30, 30, 55, 0.88);
  line-height: 1;
}
.byf-chipX__txt {
  white-space: nowrap;
}
.byf-chipX__icon {
  width: 16px;
  height: 16px;
  border-radius: 6px;
  background: rgba(120, 160, 255, 0.18);
  border: 1px solid rgba(120, 160, 255, 0.22);
  position: relative;
  flex: 0 0 auto;
}
.byf-chipX--date .byf-chipX__icon:before {
  content: "";
  position: absolute;
  inset: 3px 3px 5px 3px;
  border: 1.6px solid rgba(60, 80, 130, 0.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, 0.75);
  border-radius: 2px;
}
.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, 0.75);
  box-shadow: 0 4px 0 rgba(60, 80, 130, 0.55), 0 8px 0 rgba(60, 80, 130, 0.35);
}
.byf-chipX--rel {
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.byf-chipX--rel:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(20, 20, 40, 0.07);
  background: rgba(120, 160, 255, 0.14);
}
.byf-chipX--rel:active {
  transform: translateY(0px);
}
.byf-chipX__dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: rgba(120, 120, 140, 0.35);
  box-shadow: 0 0 0 3px rgba(120, 160, 255, 0.1);
}
.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, 0.45);
}
@media (max-width: 860px) {
  .byf-weightV4__chips {
    margin-left: 0;
  }
  .byf-chipX {
    padding: 7px 10px;
  }
}
.byf-goalBox {
  border: 1px solid rgba(185, 163, 255, 0.18);
  background: rgba(255, 255, 255, 0.5);
  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, 0.92);
}
.byf-goalBox__pct {
  font-weight: 950;
  font-size: 14px;
  color: rgba(25, 25, 45, 0.92);
}
.byf-goalBox__meta {
  margin-top: 6px;
  opacity: 0.82;
}
.byf-bar--v4 {
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(185, 163, 255, 0.14);
  overflow: hidden;
}
.byf-bar--v4 .byf-bar__fill {
  background: rgba(185, 163, 255, 0.92);
}
.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, 0.16);
  background: rgba(255, 255, 255, 0.62);
  border-radius: 14px;
  padding: 10px 10px;
  text-align: left;
}
.byf-route__label {
  font-size: 11px;
  font-weight: 850;
  opacity: 0.65;
  margin-bottom: 4px;
}
.byf-route__value {
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -0.1px;
  color: rgba(25, 25, 45, 0.92);
}
.byf-route__item--now {
  border-color: rgba(120, 160, 255, 0.28);
  background: rgba(120, 160, 255, 0.1);
  box-shadow: 0 8px 18px rgba(20, 20, 40, 0.06);
}
.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, 0.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, 0.95);
  border: 1px solid rgba(185, 163, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.byf-route__pinDot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(185, 163, 255, 0.92);
}
@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;
  }
}
.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, 0.14);
  border: 1px solid rgba(185, 163, 255, 0.12);
}
.byf-goalTimeline__fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 10px;
  border-radius: 999px;
  background: rgba(185, 163, 255, 0.92);
  box-shadow: 0 8px 18px rgba(185, 163, 255, 0.2);
}
.byf-goalTimeline__dot {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(120, 120, 160, 0.5);
  box-shadow: 0 0 0 4px rgba(185, 163, 255, 0.1);
}
.byf-goalTimeline__dot--start {
  left: 2px;
}
.byf-goalTimeline__dot--goal {
  right: 2px;
}
.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, 0.95);
  border: 2px solid rgba(120, 160, 255, 0.55);
  box-shadow: 0 10px 22px rgba(20, 20, 40, 0.1);
  position: relative;
}
.byf-goalTimeline__nowRing:after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 99px;
  background: rgba(185, 163, 255, 0.92);
}
.byf-goalTimeline__nowTag {
  font-size: 11px;
  font-weight: 900;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(120, 160, 255, 0.22);
  background: rgba(120, 160, 255, 0.1);
  color: rgba(40, 50, 95, 0.92);
  transform: translateY(-18px);
}
.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: 0.65;
  margin-bottom: 4px;
}
.byf-goalTimeline__val {
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -0.7px;
  color: rgba(25, 25, 45, 0.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: 7.5px;
  font-weight: 400;
  fill: rgba(20, 19, 26, 0.15);
}
.byf-weightV2 .byf-details {
  border: 1px solid rgba(185, 163, 255, 0.18);
  background: rgba(255, 255, 255, 0.55);
  border-radius: 16px;
  padding: 10px 12px;
  margin-top: 12px;
  box-shadow: 0 6px 18px rgba(20, 20, 40, 0.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, 0.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, 0.22);
  background: rgba(185, 163, 255, 0.1);
  display: grid;
  place-items: center;
}
.byf-weightV2 .byf-details__chev:before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(40, 50, 95, 0.65);
  border-bottom: 2px solid rgba(40, 50, 95, 0.65);
  transform: rotate(45deg);
  transition: transform 0.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, 0.14);
  background: rgba(255, 255, 255, 0.62);
  border-radius: 14px;
  padding: 12px;
}
.byf-stat__label {
  font-size: 12px;
  font-weight: 800;
  opacity: 0.72;
  margin-bottom: 6px;
}
.byf-stat__value {
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.2px;
}
.byf-stat__sub {
  margin-top: 6px;
  opacity: 0.8;
}
.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, 0.22);
  background: rgba(185, 163, 255, 0.1);
}
.byf-weightV2 .byf-pill--high {
  border-color: rgba(60, 170, 120, 0.25);
  background: rgba(60, 170, 120, 0.1);
}
.byf-weightV2 .byf-pill--med {
  border-color: rgba(230, 170, 70, 0.25);
  background: rgba(230, 170, 70, 0.12);
}
.byf-weightV2 .byf-pill--low {
  border-color: rgba(140, 140, 160, 0.22);
  background: rgba(140, 140, 160, 0.1);
}
.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: 300;
  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);
}
.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;
  color: #7c5cfc;
  border: 1px solid rgba(185, 163, 255, 0.18);
  background: rgba(185, 163, 255, 0.1);
  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;
}
.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);
}
.byf-phaseChip.is-open {
  color: #16a34a;
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.2);
}
.byf-phaseChip.is-locked {
  color: #9ca3af;
  background: rgba(156, 163, 175, 0.08);
  border-color: rgba(156, 163, 175, 0.18);
}
.byf-pdfTile__go svg {
  display: block;
}
.byf-mealTip__ico {
  flex-shrink: 0;
  color: rgba(124, 58, 237, 0.7);
  margin-right: 2px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.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);
}
.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: 999px;
  padding: 11px 22px;
  border: none;
  background: rgba(26, 22, 40, 0.94);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.byf-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.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);
}
.byf-mealPage a:hover,
.byf-mealPage button:hover {
  text-decoration: none !important;
}
.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);
}
.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);
}
.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);
}
.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-mealPage a:hover,
.byf-mealPage button:hover {
  text-decoration: none !important;
}
.byf-pdfTile {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease,
    border-color 0.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);
}
.byf-pdfBtn {
  transition: background 0.18s ease, border-color 0.18s ease,
    transform 0.15s ease, box-shadow 0.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);
}
.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);
}
.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);
}
.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, 0.08);
}
.byf-workout-thumb {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: -webkit-optimize-contrast;
}
@media (max-width: 640px) {
  .byf-workout-thumb {
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: -webkit-optimize-contrast;
  }
}
.byf-workout-content {
  padding: 14px;
}
.byf-workout-meta {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 6px;
}
.byf-workout-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}
.byf-workout-sub {
  font-size: 13px;
  opacity: 0.8;
  margin-bottom: 10px;
}
.byf-workout-intro {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 10px;
  line-height: 1.35;
}
.byf-workout-eq {
  font-size: 12px;
  opacity: 0.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, 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, 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;
}
.byf-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
}
@media (max-width: 640px) {
  .byf-video iframe {
    aspect-ratio: 9 / 16;
  }
}
.byf-log-grid {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
}
.byf-log-col {
  flex: 1 1 0;
  min-width: 120px;
}
.byf-log-label {
  font-size: 12px;
  opacity: 0.75;
  margin-bottom: 4px;
}
@media (max-width: 640px) {
  .byf-log-grid {
    flex-wrap: wrap;
  }
  .byf-log-col {
    min-width: 0;
    flex: 1 1 48%;
  }
}
.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, 0.08);
  color: #000;
}
.byf-workout-player {
  max-width: 920px;
  margin: 0 auto;
}
.byf-player-top {
  background: linear-gradient(
    135deg,
    rgba(185, 163, 255, 0.14),
    rgba(236, 230, 255, 0.45)
  );
  border: 1px solid rgba(185, 163, 255, 0.28);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow2);
  margin-bottom: 10px;
  margin-left: 15px;
  margin-right: 15px;
}
.byf-ex-titleRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.byf-ex-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(185, 163, 255, 0.28);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 16px rgba(20, 35, 55, 0.06);
  font-size: 12px;
  font-weight: 800;
  color: #2b3a44;
  letter-spacing: var(--byf-ls);
}
#byfLastInfo {
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px dashed rgba(185, 163, 255, 0.28);
  background: rgba(185, 163, 255, 0.08);
  font-size: 15px;
}
#byfResumeBanner {
  border-radius: 16px !important;
  border: 1px solid rgba(185, 163, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 10px 22px rgba(20, 35, 55, 0.08) !important;
}
.byf-log-grid input {
  width: 100%;
  border: 1px solid rgba(210, 220, 235, 0.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, 0.02) inset;
  letter-spacing: var(--byf-ls);
}
.byf-log-grid input:focus {
  outline: none;
  border-color: rgba(134, 197, 255, 0.95);
  box-shadow: 0 0 0 3px rgba(185, 163, 255, 0.15);
}
.byf-btn {
  appearance: none;
  border: 1px solid rgba(210, 220, 235, 0.95);
  background: rgba(255, 255, 255, 0.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, 0.06);
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease,
    background 0.12s ease, border-color 0.12s ease;
}
.byf-btn:active {
  transform: translateY(0) scale(0.99);
  filter: saturate(0.98);
}
.byf-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.byf-btn--primary {
  background: #f1edff;
  border-color: rgba(185, 163, 255, 0.35);
  box-shadow: 0 5px 3px rgba(30, 60, 90, 0.1), 0 2px 0px var(--btn-shadow);
}
.byf-btn--primary:hover {
  background: #ded5ff;
  border-color: rgba(185, 163, 255, 0.45);
  transform: translateY(-1px);
}
.byf-btn--ghost {
  background: transparent;
  border-color: rgba(185, 163, 255, 0.25);
  box-shadow: none;
}
.byf-btn--ghost:hover {
  background: rgba(185, 163, 255, 0.1);
  border-color: rgba(185, 163, 255, 0.35);
  transform: translateY(-1px);
}
#byfWorkTimerDisplay {
  font-variant-numeric: tabular-nums;
}
@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;
  }
}
.byf-workouts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 680px) {
  .byf-workouts-grid {
    grid-template-columns: 1fr;
  }
}
.byf-workout-card {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(210, 220, 235, 0.85);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
  transition: transform 0.14s ease, box-shadow 0.14s ease,
    border-color 0.14s ease;
}
@media (hover: hover) {
  .byf-workout-card:hover {
    transform: translateY(-2px);
    border-color: rgba(185, 163, 255, 0.4);
    box-shadow: 0 18px 45px rgba(16, 24, 40, 0.12);
  }
}
.byf-workout-thumb {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.byf-workout-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, 0.12) 100%
  );
  pointer-events: none;
}
.byf-workout-content {
  padding: 14px 14px 16px;
}
.byf-workout-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(210, 220, 235, 0.75);
  background: rgba(185, 163, 255, 0.1);
  color: #2b3a44;
  font-size: 12px;
  font-weight: 600;
  opacity: 1;
  margin-bottom: 10px;
}
.byf-workout-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.2;
  margin-bottom: 8px;
  color: #0f172a;
}
.byf-workout-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 500;
  opacity: 1;
  color: rgba(15, 23, 42, 0.65);
}
.byf-workout-sub::before {
  content: none;
}
.byf-workout-intro {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(15, 23, 42, 0.75);
  opacity: 1;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
@media (max-width: 680px) {
  .byf-workout-intro {
    -webkit-line-clamp: 4;
  }
}
.byf-workout-eq {
  font-size: 12px;
  color: rgba(15, 23, 42, 0.7);
  opacity: 1;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(185, 163, 255, 0.28);
  background: rgba(185, 163, 255, 0.06);
}
.byf-workout-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.byf-workout-actions .byf-btn--ghost {
  width: auto;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 700;
}
.byf-workout-actions .byf-btn--primary {
  flex: 1;
  width: auto;
  justify-content: center;
  border-radius: 14px;
  font-weight: 700;
}
@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%;
  }
}
.byf-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 12px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
@media (max-width: 820px) {
  .byf-modal {
    align-items: flex-start;
  }
}
.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;
}
.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, 0.85);
  border: 1px solid rgba(210, 220, 235, 0.9);
  box-shadow: 0 10px 22px rgba(20, 35, 55, 0.1);
  backdrop-filter: blur(6px);
}
#byfWorkoutModalBody {
  padding-top: 2px;
}
.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, 0.14);
  border: 1px solid rgba(185, 163, 255, 0.3);
  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, 0.08);
}
@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;
  }
}
#byfWorkoutModal[aria-hidden="true"] {
  display: none !important;
}
#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));
}
#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;
}
#byfWorkoutModal[aria-hidden="false"] .byf-modal__close {
  position: sticky;
  top: 10px;
  float: none;
  margin: 10px 10px 0 auto;
  display: block;
  z-index: 5;
}
.byf-acc {
  margin: 0 16px 12px 16px;
  border-radius: 18px;
  border: 1px solid rgba(210, 220, 235, 0.9);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.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: 0.7;
  transition: transform 0.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, 0.78);
}
.byf-acc-novo {
  margin: 10px 16px 12px 16px;
  border-radius: 18px;
  border: 1px solid rgba(210, 220, 235, 0.9);
  background: rgba(185, 163, 255, 0.16);
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
  overflow: hidden;
}
.byf-workouts-switch {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(210, 220, 235, 0.9);
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.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, 0.72);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.byf-switch-btn.is-active {
  background: rgba(185, 163, 255, 0.18);
  color: #0f172a;
  box-shadow: 0 10px 20px rgba(16, 24, 40, 0.08);
}
@media (max-width: 520px) {
  .byf-workouts-switch {
    width: 100%;
    justify-content: space-between;
  }
  .byf-switch-btn {
    flex: 1;
    text-align: center;
  }
}
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;
}
.byf-phase.is-locked > summary {
  opacity: 0.65;
  cursor: not-allowed;
}
.byf-phase.is-locked > summary .byf-phase__lock {
  filter: grayscale(1);
}
.byf-phases {
  display: grid;
  gap: 14px;
}
.byf-phase {
  border: 1px solid rgba(210, 220, 235, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
  overflow: hidden;
  position: relative;
  padding-left: 18px;
}
.byf-phase::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: rgba(185, 163, 255, 0.22);
}
.byf-phase > summary::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(185, 163, 255, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.12);
  position: absolute;
  left: 5px;
  top: 22px;
}
.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: 700;
  letter-spacing: -0.3px;
  color: #0f172a;
}
.byf-phase__meta {
  font-size: 12px;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.65);
  margin-top: 4px;
}
.byf-phase__lock {
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 12px;
  border: 1px solid rgba(210, 220, 235, 0.9);
  background: rgba(15, 23, 42, 0.04);
  color: rgba(15, 23, 42, 0.7);
  white-space: nowrap;
}
.byf-phase__lock.is-open {
  background: rgba(46, 213, 115, 0.1);
  border-color: rgba(46, 213, 115, 0.22);
  color: rgba(15, 120, 70, 0.95);
}
.byf-phase__body {
  padding: 0 14px 14px 20px;
}
.byf-phase.is-locked {
  opacity: 0.85;
}
.byf-phase.is-locked > summary {
  cursor: not-allowed;
}
.byf-phase.is-locked > summary::before {
  background: rgba(148, 163, 184, 0.55);
}
.byf-phase.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.72)
  );
  pointer-events: none;
}
.byf-phase.is-locked > summary,
.byf-phase.is-locked .byf-phase__body {
  position: relative;
  z-index: 1;
}
@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;
  }
}
#byfWorkoutModalBody {
  padding-bottom: 86px;
}
#byfWorkoutModalBody > div:first-child {
  position: sticky;
  top: 0;
  z-index: 4;
  background: linear-gradient(
    180deg,
    rgba(248, 247, 255, 0.96),
    rgba(248, 247, 255, 0.88)
  );
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(210, 220, 235, 0.75);
  border-radius: 18px;
  margin-bottom: 12px;
}
.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;
}
#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, 0.14);
}
.byf-videoWrap,
.byf-ex-videoWrap,
.byf-workout-video {
  border-radius: 22px;
  border: 1px solid rgba(210, 220, 235, 0.9);
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  box-shadow: 0 14px 40px rgba(16, 24, 40, 0.1);
}
.byf-acc {
  margin: 12px 0 10px;
  border-radius: 18px;
  border: 1px solid rgba(210, 220, 235, 0.85);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.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, 0.78);
}
#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, 0.3);
  background: rgba(185, 163, 255, 0.08);
  color: rgba(15, 23, 42, 0.72);
  font-weight: 800;
}
.byf-logCard,
#byfWorkoutModalBody .byf-card,
#byfWorkoutModalBody form {
  border-radius: 20px;
}
#byfWorkoutModalBody h3 {
  font-weight: 950;
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}
.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;
  }
}
#byfWorkoutModalBody input[type="number"],
#byfWorkoutModalBody input[type="text"] {
  border-radius: 14px;
  border: 1px solid rgba(210, 220, 235, 0.9);
  padding: 12px 12px;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.06);
}
.byf-workout-nav,
#byfWorkoutModalBody .byf-navRow {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: rgba(248, 247, 255, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(210, 220, 235, 0.75);
  padding: 12px;
  margin-top: 14px;
  border-radius: 18px;
}
#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, 0.85);
  padding: 5px 15px;
}
#byfWorkoutModalBody {
  background: radial-gradient(
      1200px 500px at 10% 0%,
      rgba(185, 163, 255, 0.22),
      transparent 60%
    ),
    radial-gradient(
      900px 450px at 90% 10%,
      rgba(185, 163, 255, 0.14),
      transparent 55%
    );
  border-radius: 18px;
}
.byf-workout-player .byf-player-top {
  position: sticky;
  top: 0;
  z-index: 6;
  background: rgba(248, 247, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(210, 220, 235, 0.8);
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(16, 24, 40, 0.08);
  margin-top: 10px;
}
.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;
}
.byf-badge {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(185, 163, 255, 0.35);
  background: rgba(185, 163, 255, 0.14);
  font-weight: 900;
  font-size: 12px;
}
.byf-acc-novo {
  margin: 0 16px 12px 16px;
  border-radius: 18px;
  border: 1px solid rgba(210, 220, 235, 0.85);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.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: 0.7;
  transition: transform 0.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, 0.78);
  font-size: 13px;
  line-height: 1.45;
}
.byf-player-content {
  padding: 0px 16px;
  display: grid;
  gap: 12px;
}
#byfLastInfo {
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px dashed rgba(185, 163, 255, 0.35);
  background: rgba(185, 163, 255, 0.1);
  color: rgba(15, 23, 42, 0.72);
  font-weight: 700;
  margin-top: 10px;
  letter-spacing: -0.5px;
}
.byf-card {
  border-radius: 20px;
  border: 1px solid rgba(210, 220, 235, 0.9);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.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, 0.68);
  margin-bottom: 6px;
}
.byf-log-col input {
  border-radius: 14px !important;
  border: 1px solid rgba(210, 220, 235, 0.92) !important;
  padding: 12px 12px !important;
  box-shadow: 0 8px 18px rgba(16, 24, 40, 0.06);
}
@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;
  }
}
.byf-player-nav {
  position: sticky;
  bottom: 0;
  z-index: 7;
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(248, 247, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(210, 220, 235, 0.85);
  box-shadow: 0 -12px 30px rgba(16, 24, 40, 0.1);
  margin-top: 10px;
}
.byf-btn {
  border-radius: 16px;
  font-weight: 950;
}
.byf-player-nav .byf-btn {
  flex: 1;
  justify-content: center;
}
.byf-workout-player .byf-player-top {
  padding: 14px 16px 12px 16px;
  background: rgba(248, 247, 255, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(210, 220, 235, 0.8);
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(16, 24, 40, 0.08);
}
.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, 0.7);
  letter-spacing: -0.7px;
}
.byf-player-exCount {
  font-size: 12px;
  font-weight: 700;
  color: rgba(15, 23, 42, 0.55);
  letter-spacing: -0.5px;
}
.byf-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(185, 163, 255, 0.18);
  border: 1px solid rgba(185, 163, 255, 0.22);
  overflow: hidden;
  margin-bottom: 12px;
}
.byf-progress__bar {
  height: 100%;
  border-radius: 999px;
  background: rgba(185, 163, 255, 0.7);
}
.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;
}
.byf-chip {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(210, 220, 235, 0.85);
  background: rgba(15, 23, 42, 0.04);
  font-weight: 950;
  font-size: 12px;
  color: rgba(15, 23, 42, 0.75);
  white-space: nowrap;
}
.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, 0.25);
  background: rgba(185, 163, 255, 0.1);
}
.byf-goal__label {
  font-size: 12px;
  font-weight: 950;
  color: rgba(15, 23, 42, 0.7);
}
.byf-goal__value {
  font-size: 13px;
  font-weight: 950;
  color: #0f172a;
}
@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: 0.7;
  margin-top: 4px;
  letter-spacing: -0.5px;
}
.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;
}
.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);
}
.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;
}
.byf-prep-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 960px) {
  .byf-prep-grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }
}
.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.1);
  border: 1px solid rgba(120, 80, 255, 0.18);
  box-shadow: 0 10px 24px rgba(120, 80, 255, 0.1);
  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;
}
.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;
}
.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.2);
}
.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);
}
.byf-prep-zone summary:focus-visible {
  outline: 2px solid rgba(120, 80, 255, 0.55);
  outline-offset: 2px;
  border-radius: 12px;
}
.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);
}
.byf-prep-card--faq .byf-acc__body {
  background: transparent;
}
.byf-prep-card--faq .byf-acc {
  background: rgba(255, 255, 255, 0.72);
}
@media (max-width: 420px) {
  .byf-prep-zone {
    padding: 14px;
  }
  .byf-prep-card {
    padding: 12px;
  }
  .byf-treninzi-intro {
    padding: 14px 14px;
  }
}
.byf-video--landscape iframe {
  aspect-ratio: 16 / 9 !important;
}
.byf-video--landscape {
  border-radius: 22px;
  border: 1px solid rgba(210, 220, 235, 0.9);
  background: rgba(255, 255, 255, 0.88);
  padding: 10px;
  box-shadow: 0 18px 45px rgba(16, 24, 40, 0.14);
}
.byf-video--landscape iframe {
  width: 100%;
  border: 0;
  border-radius: 18px;
  display: block;
}
.byf-phase-progress {
  margin-top: 14px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(120, 120, 170, 0.14);
  box-shadow: 0 10px 26px rgba(17, 24, 39, 0.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: 0.9;
}
.byf-phase-progress__label strong {
  font-weight: 900;
}
.byf-phase-progress__pct {
  font-size: 12px;
  font-weight: 900;
  opacity: 0.75;
}
.byf-phase-progress__bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.08);
  overflow: hidden;
  position: relative;
}
.byf-phase-progress__fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgb(120 80 255 / 37%),
    rgb(157 153 211 / 55%)
  );
  box-shadow: 0 10px 24px rgba(120, 80, 255, 0.18);
}
.byf-phase-progress__meta {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.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;
}
.byf-expired-card p {
  margin: 0 0 10px;
}
.byf-expired-card ul {
  margin: 8px 0 12px;
  padding-left: 18px;
}
.byf-expired-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  align-items: center;
}
.byf-expired-actions .byf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  line-height: 1;
}
.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, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.18);
  color: rgba(16, 24, 40, 0.78);
}
.byf-membership-pill strong {
  color: rgba(16, 24, 40, 0.92);
}
.byf-membership-pill.is-muted {
  background: rgba(16, 24, 40, 0.05);
  border-color: rgba(16, 24, 40, 0.1);
  color: rgba(16, 24, 40, 0.65);
}

/* Push notification spinner */
.byf-push-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(16, 24, 40, 0.12);
  border-top-color: rgba(16, 24, 40, 0.5);
  border-radius: 50%;
  animation: byf-push-spin 0.6s linear infinite;
}
@keyframes byf-push-spin {
  to {
    transform: rotate(360deg);
  }
}

.byf-acc-howto {
  border-radius: 18px;
  border: 1px solid rgba(210, 220, 235, 0.85);
  background: #e6eefc;
  box-shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
  overflow: hidden;
  margin: 20px 12px 0px 12px;
}
#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;
}
.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;
}
.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;
}
.byf-ms-badge--link {
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease,
    border-color 0.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);
}
.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)
  );
}
.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.1);
}
.byf-ms-gifts {
  padding-top: 6px;
  border-top: 1px dashed rgba(185, 163, 255, 0.25);
}
.byf-ms-gifts {
  padding-top: 6px;
  border-top: 1px dashed rgba(185, 163, 255, 0.25);
}
.byf-tooltip {
  position: relative;
  padding-right: 14px;
}
.byf-tooltip-i {
  margin-left: 8px;
  font-size: 12px;
  opacity: 0.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, 0.92);
  border: 1px solid rgba(185, 163, 255, 0.28);
  box-shadow: 0 18px 45px rgba(30, 20, 60, 0.1);
  color: rgba(30, 20, 60, 0.88);
  font-size: 12px;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.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, 0.92);
  border-left: 1px solid rgba(185, 163, 255, 0.28);
  border-top: 1px solid rgba(185, 163, 255, 0.28);
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 49;
}
.byf-tooltip:hover::after,
.byf-tooltip:hover::before {
  opacity: 1;
}
.byf-tooltip:hover::after {
  transform: translateX(-50%) translateY(0);
}
.byf-tooltip:focus::after,
.byf-tooltip:focus::before {
  opacity: 1;
}
.byf-ms-label {
  margin: 8px 0 6px;
  color: rgba(70, 70, 100, 0.75);
}
.byf-ms-gifts {
  margin-top: 14px;
  padding-top: 5px;
  border-top: 1px dashed rgba(185, 163, 255, 0.25);
}
.byf-ms-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.byf-ms-badge--gift {
  background: rgba(185, 163, 255, 0.1);
  border: 1px solid rgba(185, 163, 255, 0.22);
  color: rgba(40, 40, 70, 0.95);
}
.byf-ms-badge-i {
  font-size: 12px;
  opacity: 0.6;
  margin-left: 2px;
}
.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 0.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 0.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, 0.7);
  border: 1px solid rgba(185, 163, 255, 0.22);
  font-size: 12px;
  font-weight: 700;
  color: rgba(30, 20, 60, 0.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, 0.65);
  border: 1px solid rgba(185, 163, 255, 0.18);
}
.byf-weekmain .t {
  font-size: 12px;
  color: rgba(30, 20, 60, 0.62);
}
.byf-weekmain .v {
  margin-top: 4px;
  font-size: 14px;
  color: rgba(30, 20, 60, 0.88);
}
.byf-weekdetails {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  color: rgba(30, 20, 60, 0.68);
  font-size: 12px;
}
.byf-weekdetails .d {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(185, 163, 255, 0.14);
}
.byf-weeknote {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(74, 58, 170, 0.85);
  font-weight: 600;
}
.byf-weekcard.is-good {
  box-shadow: 0 14px 35px rgba(30, 20, 60, 0.06);
}
.byf-weekcard.is-mixed {
  box-shadow: 0 14px 35px rgba(30, 20, 60, 0.06);
}
.byf-weekcard.is-short {
  box-shadow: 0 14px 35px rgba(30, 20, 60, 0.06);
}
.byf-info .sec-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}
.byf-info .sec-sub {
  font-size: 14px;
  opacity: 0.85;
}
.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;
}
.byf-info .byf-card .byf-card {
  background: rgba(0, 0, 0, 0.03);
  box-shadow: none;
  border-radius: 14px;
}
.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);
}
@media (max-width: 768px) {
  .byf-info .sec-title {
    font-size: 16px;
  }
}
.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);
}
.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 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease,
    background 0.12s ease, border-color 0.12s ease;
}
@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;
}
.byf-countdown-urgent {
  color: #4b2a7b;
}
.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, 0.28);
  max-width: min(92vw, 420px);
}

/* =========================================================
   DNEVNI LOG — Premium header + checkbox + calendar
   ========================================================= */

/* Header */
.byf-dailyHeader {
  background: #f2f2fc;
  border-radius: 20px;
  padding: 20px 22px 18px;
  margin-bottom: 16px;
  margin-top: 15px;
  box-shadow: 0 2px 12px rgba(20, 19, 26, 0.05);
  border: 1px solid rgba(120, 112, 168, 0.1);
}
.byf-dailyHeader__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.byf-dailyHeader__title {
  font-size: 22px;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.3px;
}
.byf-dailyHeader__sub {
  font-size: 13px;
  color: #8b8fa3;
  margin-top: 3px;
  line-height: 1.4;
}
.byf-dailyHeader__phaseBadge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #6d28d9;
  background: rgba(185, 163, 255, 0.12);
  border: 1px solid rgba(185, 163, 255, 0.2);
  white-space: nowrap;
}
.byf-dailyHeader__dateRow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.byf-dailyHeader__dateWrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 200px;
}
.byf-dailyHeader__calIco {
  position: absolute;
  left: 14px;
  color: #8b8fa3;
  pointer-events: none;
  z-index: 1;
}
.byf-dailyHeader__dateInput {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(120, 112, 168, 0.15);
  border-radius: 14px;
  background: #fafafc;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a2e;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.byf-dailyHeader__dateInput:focus {
  outline: none;
  background: #fff;
  border-color: rgba(185, 163, 255, 0.6);
  box-shadow: 0 0 0 3px rgba(185, 163, 255, 0.15);
}
.byf-dailyHeader__hint {
  font-size: 12px;
  color: #8b8fa3;
  white-space: nowrap;
}
.byf-dailyHeader__existing {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(185, 163, 255, 0.06);
  border: 1px solid rgba(185, 163, 255, 0.12);
  font-size: 12px;
  color: #6d28d9;
}

/* Custom checkboxes */
.byf-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid rgba(120, 112, 168, 0.25);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  margin: 0;
}
.byf-check input[type="checkbox"]:checked {
  background: #7c3aed;
  border-color: #7c3aed;
}
.byf-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.byf-check input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(185, 163, 255, 0.2);
}

/* Custom radio buttons */
.byf-check input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid rgba(120, 112, 168, 0.25);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
  margin: 0;
}
.byf-check input[type="radio"]:checked {
  border-color: #7c3aed;
  background: #fff;
}
.byf-check input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7c3aed;
}
.byf-check input[type="radio"]:focus {
  box-shadow: 0 0 0 3px rgba(185, 163, 255, 0.2);
}

/* Kartice: neutralan (value=0) = bela, bez zelene/crvene */
.kartica.kartica-zero {
  background: #fff !important;
  border-color: rgba(120, 112, 168, 0.1) !important;
}

/* Date input: klik bilo gde otvara picker, bez ikone */
.byf-dailyHeader__dateInput::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  color: transparent;
  background: transparent;
  cursor: pointer;
}
.byf-dailyHeader__dateInput::-webkit-date-and-time-value {
  text-align: left;
}

/* Desktop right columns */
.byf-right-compact {
  flex: 0 0 260px;
  display: flex;
  justify-content: flex-end;
}
.byf-right-expand {
  flex: 0 0 260px;
}

/* Strikethrough efekat: kartica ispunjena */
.kartica.kartica-ok .byf-title {
  text-decoration: line-through;
  text-decoration-color: rgb(0 0 0);
  text-decoration-thickness: 1px;
  font-weight: 600 !important;
  opacity: 0.6;
}

/* Mobile layout */
@media (max-width: 600px) {
  .byf-dailyHeader__top {
    flex-direction: column;
    gap: 8px;
  }
  .byf-dailyHeader__dateRow {
    flex-direction: column;
    align-items: stretch;
  }
  .byf-dailyHeader__hint {
    white-space: normal;
  }

  /* Compact kartice: jedan red sa inputom desno */
  .byf-card-compact .byf-row {
    flex-wrap: nowrap !important;
  }
  .byf-card-compact .byf-right-compact {
    flex: 0 0 100px;
  }
  .byf-card-compact .byf-inp {
    max-width: 100px;
    text-align: center;
    padding: 10px 8px;
  }
  .byf-card-compact .byf-ico {
    width: 40px;
    height: 40px;
    min-width: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    font-size: 17px;
  }

  /* Expand kartice: content ide na full width ispod */
  .byf-card-expand .byf-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .byf-card-expand .byf-right-expand {
    flex: none;
    width: 100%;
  }
  .byf-card-expand .byf-sel {
    max-width: 100%;
    width: 100%;
  }
  .byf-card-expand .byf-txt {
    max-width: 100%;
    width: 100%;
  }
}

/* Flatpickr — full premium override */
.flatpickr-calendar {
  border-radius: 20px !important;
  box-shadow: 0 16px 48px rgba(20, 19, 26, 0.16) !important;
  border: 1px solid rgba(120, 112, 168, 0.08) !important;
  font-family: var(--byf-font) !important;
  padding: 14px 16px 12px !important;
  background: #fff !important;
  width: 340px !important;
}
.flatpickr-calendar::before,
.flatpickr-calendar::after {
  display: none !important;
}
.flatpickr-calendar.open {
  animation: byfCalOpen 0.2s ease-out both !important;
}
@keyframes byfCalOpen {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.flatpickr-innerContainer {
  padding: 0 !important;
}
/* Month header — sve u istom redu */
.flatpickr-months {
  padding: 0 0 8px !important;
  display: flex !important;
  align-items: center !important;
  height: 40px !important;
}
.flatpickr-months .flatpickr-month {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
  flex: 1 !important;
}
.flatpickr-current-month {
  padding: 0 !important;
  height: auto !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  position: static !important;
  transform: none !important;
  left: auto !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #1a1a2e !important;
  background: transparent !important;
  border: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 0 16px 0 0 !important;
  margin: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b8fa3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 2px center !important;
  cursor: pointer !important;
}
.flatpickr-current-month .numInputWrapper {
  width: 52px !important;
}
.flatpickr-current-month .numInput.cur-year {
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #1a1a2e !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: default !important;
}
.flatpickr-current-month .numInputWrapper .arrowUp,
.flatpickr-current-month .numInputWrapper .arrowDown {
  display: none !important;
}
/* Nav arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  position: static !important;
  padding: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  transition: background 0.15s ease !important;
  flex-shrink: 0 !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: rgba(185, 163, 255, 0.12) !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 12px !important;
  height: 12px !important;
  fill: #8b8fa3 !important;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #7c3aed !important;
}
.flatpickr-months .flatpickr-disabled {
  opacity: 0.3 !important;
}
/* Weekday headers */
.flatpickr-weekdays {
  padding: 4px 0 !important;
  border-bottom: 1px solid rgba(120, 112, 168, 0.08) !important;
  margin-bottom: 4px !important;
}
span.flatpickr-weekday {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #b9a3ff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}
.flatpickr-days {
  width: 100% !important;
}
.dayContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}
/* Day cells */
.flatpickr-day {
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1a1a2e !important;
  max-width: 38px !important;
  height: 38px !important;
  line-height: 38px !important;
  margin: 1.5px !important;
  border: 2px solid transparent !important;
  transition: all 0.12s ease !important;
}
.flatpickr-day:hover {
  background: rgba(185, 163, 255, 0.1) !important;
  border-color: transparent !important;
}
.flatpickr-day.today {
  border-color: #7c3aed !important;
  background: transparent !important;
  font-weight: 700 !important;
  color: #7c3aed !important;
}
.flatpickr-day.today:hover {
  background: rgba(185, 163, 255, 0.1) !important;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: rgba(124, 58, 237, 0.2) !important;
  border-color: rgba(124, 58, 237, 0.21) !important;
  color: #151515 !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.15) !important;
}
.flatpickr-day.today.selected {
  color: #151515 !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #d4d4dc !important;
  background: transparent !important;
  border-color: transparent !important;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #cdcdd8 !important;
}
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
  background: rgba(185, 163, 255, 0.06) !important;
}
/* Alt input styling */
.byf-dailyHeader__dateInput.flatpickr-input + .flatpickr-input {
  padding: 11px 14px !important;
  border: 1px solid rgba(120, 112, 168, 0.15) !important;
  border-radius: 14px !important;
  background: #fafafc !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1a1a2e !important;
  cursor: pointer !important;
  width: 100% !important;
  font-family: var(--byf-font) !important;
}
.byf-dailyHeader__dateInput.flatpickr-input + .flatpickr-input:focus {
  outline: none !important;
  background: #fff !important;
  border-color: rgba(185, 163, 255, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(185, 163, 255, 0.15) !important;
}

.byf-hero-weekly {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: stretch;
  background: #f2f2fc;
  border: 1px solid rgba(210, 220, 235, 0.85);
  border-radius: var(--r-xl);
  padding: 18px;
  box-shadow: var(--shadow2);
  margin-bottom: 10px !important;
  margin-top: 15px;
}
@media (max-width: 860px) {
  .byf-hero-weekly {
    grid-template-columns: 1fr;
  }
}

/* ========== ZID ZAJEDNICE — Premium V2 ========== */

.byf-wall {
  margin-top: 16px;
  position: relative;
}

/* --- Compose box --- */
.byf-wall-compose {
  padding: 18px;
  margin-bottom: 16px;
}
.byf-wall-compose-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.byf-wall-compose-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.byf-wall-compose-title {
  width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--byf-font);
  letter-spacing: var(--byf-ls);
  color: var(--ink);
  outline: none;
  background: var(--card-soft);
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}
.byf-wall-compose-title:focus {
  border-color: rgba(111, 99, 246, 0.35);
  background: #fff;
}
.byf-wall-compose-title::placeholder {
  color: var(--muted);
  font-weight: 400;
}
.byf-wall-compose-input {
  width: 100%;
  min-height: 120px;
  padding: 12px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.6;
  font-family: var(--byf-font);
  letter-spacing: var(--byf-ls);
  color: var(--ink);
  outline: none;
  background: var(--card-soft);
  transition: border-color 0.2s ease, background 0.2s ease;
  word-break: break-word;
  box-sizing: border-box;
}
.byf-wall-compose-input:focus {
  border-color: rgba(111, 99, 246, 0.35);
  background: #fff;
}
.byf-wall-compose-input:empty:before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}

/* Image preview */
.byf-wall-compose-images {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.byf-wall-compose-img-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(20, 35, 55, 0.08);
}
.byf-wall-compose-img-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.byf-wall-compose-img-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 0;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}

/* Compose actions row */
.byf-wall-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.byf-wall-compose-left {
  display: flex;
  gap: 6px;
  align-items: center;
}
.byf-wall-action-pill {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  padding: 5px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--byf-font);
  letter-spacing: var(--byf-ls);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}
.byf-wall-action-pill:hover {
  border-color: rgba(111, 99, 246, 0.3);
  color: #6f63f6;
}
.byf-wall-action-pill.is-on {
  border-color: rgba(111, 99, 246, 0.3);
  color: #6f63f6;
  background: rgba(111, 99, 246, 0.05);
}
.byf-wall-submit {
  padding: 8px 22px;
  font-size: 13px;
  width: auto;
  border-radius: 12px;
}
.byf-wall-submit:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Emoji picker */
.byf-wall-emoji-picker {
  margin-top: 12px;
  padding-top: 10px;
}
.byf-wall-emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.byf-wall-emoji-btn {
  appearance: none;
  border: 0;
  background: transparent;
  width: 36px;
  height: 36px;
  font-size: 20px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s ease;
  padding: 0;
}
.byf-wall-emoji-btn:hover {
  background: var(--card-soft, #f3f4f6);
}

/* Tags (hidden by default, toggled via # Tag button) */
.byf-wall-compose-tags {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
  padding-top: 10px;
}
.byf-wall-tag {
  appearance: none;
  border: 1px solid var(--border-soft);
  background: transparent;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--byf-font);
  letter-spacing: var(--byf-ls);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.byf-wall-tag:hover {
  border-color: rgba(111, 99, 246, 0.25);
  color: #6f63f6;
}
.byf-wall-tag.is-on {
  background: rgba(111, 99, 246, 0.08);
  border-color: rgba(111, 99, 246, 0.25);
  color: #6f63f6;
}

/* --- Filter bar --- */
.byf-wall-filters {
  display: flex;
  gap: 5px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0;
}
.byf-wall-filters::-webkit-scrollbar {
  display: none;
}
.byf-wall-filter {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--byf-font);
  letter-spacing: var(--byf-ls);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.byf-wall-filter:hover {
  color: var(--ink);
  background: rgba(20, 19, 26, 0.03);
}
.byf-wall-filter.is-active {
  background: rgba(111, 99, 246, 0.08);
  color: #6f63f6;
}

/* --- Feed --- */
.byf-wall-feed {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- Post card --- */
.byf-wall-post {
  padding: 18px;
}
.byf-wall-pinned {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #6f63f6;
  margin-bottom: 12px;
  padding: 3px 10px;
  background: linear-gradient(
    135deg,
    rgba(230, 233, 255, 0.6),
    rgba(240, 230, 255, 0.6)
  );
  border: 1px solid rgba(185, 163, 255, 0.2);
  border-radius: 8px;
}
.byf-wall-post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.byf-wall-post-meta {
  flex: 1;
  min-width: 0;
}
.byf-wall-post-nick {
  font-weight: var(--w-800);
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  display: block;
  letter-spacing: var(--byf-ls);
}
.byf-wall-post-nick:hover {
  color: #6f63f6;
}
.byf-wall-post-time {
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.byf-wall-post-actions {
  margin-left: auto;
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.byf-wall-action-btn {
  appearance: none;
  border: 1px solid var(--border-soft);
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.byf-wall-action-btn:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.04);
}

/* Tags in post */
.byf-wall-post-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.byf-wall-hashtag {
  color: #6f63f6;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--byf-ls);
}

/* Post title */
.byf-wall-post-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px 0;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Content */
.byf-wall-post-content {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  word-break: break-word;
  margin-bottom: 12px;
  letter-spacing: var(--byf-ls);
}
.byf-wall-post-content.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.byf-wall-read-more {
  display: inline-block;
  margin-top: 4px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #3b82f6;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--byf-font);
  letter-spacing: var(--byf-ls);
}
.byf-wall-read-more:hover {
  text-decoration: underline;
  color: #2563eb;
}
.byf-wall-mention,
.byf-wall-mention:visited {
  color: #6f63f6 !important;
  font-weight: 600;
  text-decoration: none !important;
  cursor: pointer;
}
.byf-wall-mention:hover {
  text-decoration: underline !important;
}

/* Images grid */
.byf-wall-post-images {
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 12px;
}
.byf-wall-post-img {
  width: 100%;
  display: block;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform 0.2s ease;
}
.byf-wall-post-img:hover {
  transform: scale(1.01);
}
.byf-wall-post-images--1 .byf-wall-post-img {
  max-height: 340px;
  border-radius: var(--r-md);
}
.byf-wall-post-images--1 {
  max-width: 520px;
}
.byf-wall-post-images--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  max-width: 520px;
}
.byf-wall-post-images--2 .byf-wall-post-img {
  aspect-ratio: 4/3;
}
.byf-wall-post-images--3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 3px;
  max-width: 520px;
}
.byf-wall-post-images--3 .byf-wall-post-img:first-child {
  grid-column: 1 / -1;
  max-height: 240px;
}

/* --- Footer (reaction bar) --- */
.byf-wall-post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
}
.byf-wall-post-reacts {
  display: flex;
  gap: 4px;
  align-items: center;
}
.byf-wall-react-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--byf-font);
  letter-spacing: var(--byf-ls);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}
.byf-wall-react-btn {
  position: relative;
}
.byf-wall-react-btn:hover {
  background: rgba(20, 19, 26, 0.04);
  color: var(--ink);
}
.byf-wall-react-btn::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--ink, #14131a);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.byf-wall-react-btn:hover::after {
  opacity: 1;
}
.byf-wall-react-btn.is-on {
  color: #6f63f6;
  background: rgba(111, 99, 246, 0.06);
}
/* Muscle/fire reaction active colors */
.byf-wall-react-btn.is-on[data-byf-wall-react-key="muscle"] {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}
.byf-wall-react-btn.is-on[data-byf-wall-react-key="fire"] {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}
.byf-wall-react-btn.is-on[data-byf-wall-react-key="thumbsup"] {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.08);
}
.byf-wall-post-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--muted);
}
.byf-wall-save-btn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  border-radius: 8px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
}
.byf-wall-save-btn:hover {
  color: var(--ink);
}
.byf-wall-save-btn.is-on {
  color: #6f63f6;
}
.byf-wall-save-btn.is-on svg {
  fill: currentColor;
}
.byf-wall-views {
  opacity: 0.7;
}

/* --- Poll --- */
.byf-wall-poll {
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--card-soft, #f8f9fa);
  border-radius: 14px;
}
.byf-wall-poll-question {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: var(--byf-ls);
}
.byf-wall-poll-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.byf-wall-poll-option {
  position: relative;
  appearance: none;
  border: 1px solid var(--border-soft);
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--byf-font);
  letter-spacing: var(--byf-ls);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.byf-wall-poll-option:hover {
  border-color: rgba(111, 99, 246, 0.3);
}
.byf-wall-poll-option.is-voted {
  border-color: rgba(111, 99, 246, 0.35);
  font-weight: 700;
}
.byf-wall-poll-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(111, 99, 246, 0.08);
  border-radius: 10px;
  transition: width 0.5s ease;
  pointer-events: none;
}
.byf-wall-poll-label {
  position: relative;
  z-index: 1;
}
.byf-wall-poll-pct {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  color: #6f63f6;
  flex-shrink: 0;
  margin-left: 10px;
}
.byf-wall-poll-total {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: var(--byf-ls);
}

/* Sort bar */
.byf-wall-sort-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-soft);
}
.byf-wall-sort {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--byf-font);
  letter-spacing: var(--byf-ls);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.byf-wall-sort:hover {
  color: var(--ink);
}
.byf-wall-sort.is-active {
  background: rgba(111, 99, 246, 0.08);
  color: #6f63f6;
}

/* Poll compose */
.byf-wall-poll-compose {
  margin-top: 12px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.byf-wall-poll-question-input,
.byf-wall-poll-option-input {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  font-size: 13.5px;
  font-family: var(--byf-font);
  letter-spacing: var(--byf-ls);
  color: var(--ink);
  outline: none;
  background: #fff;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}
.byf-wall-poll-question-input:focus,
.byf-wall-poll-option-input:focus {
  border-color: rgba(111, 99, 246, 0.35);
}
.byf-wall-poll-question-input::placeholder,
.byf-wall-poll-option-input::placeholder {
  color: var(--muted);
}
.byf-wall-poll-question-input {
  font-weight: 600;
}
.byf-wall-poll-options-compose {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.byf-wall-poll-add-option {
  appearance: none;
  border: 0;
  background: transparent;
  color: #6f63f6;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--byf-font);
  cursor: pointer;
  padding: 4px 0;
  text-align: left;
}
.byf-wall-poll-add-option:hover {
  text-decoration: underline;
}

/* Notification dot */
.byf-wall-notif-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #ef4444;
  border-radius: 50%;
  margin-left: 2px;
  vertical-align: super;
  animation: byf-notif-pulse 2s ease-in-out infinite;
}
@keyframes byf-notif-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* "NOVO" pill on Zid tab */
.byf-wall-novo-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #6f63f6, #a855f7);
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 1.3;
}

/* --- Comments --- */
.byf-wall-comments {
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.byf-wall-comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.byf-wall-comment {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.byf-wall-comment-body {
  flex: 1;
  background: var(--card-soft);
  border-radius: 14px;
  padding: 10px 14px;
  min-width: 0;
}
.byf-wall-comment-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.byf-wall-comment-nick {
  font-weight: var(--w-700);
  font-size: 12.5px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: var(--byf-ls);
}
.byf-wall-comment-nick:hover {
  color: #6f63f6;
}
.byf-wall-comment-time {
  font-size: 10.5px;
  color: var(--muted);
}
.byf-wall-comment-delete {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  padding: 0 3px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.byf-wall-comment:hover .byf-wall-comment-delete {
  opacity: 0.7;
}
.byf-wall-comment-delete:hover {
  color: #ef4444;
  opacity: 1 !important;
}
.byf-wall-comment-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  word-break: break-word;
  letter-spacing: var(--byf-ls);
}
.byf-wall-comment-react {
  padding: 2px 6px !important;
  font-size: 11px !important;
  margin-top: 4px;
  border: 0 !important;
  background: transparent !important;
}
.byf-wall-comment-react.is-on {
  color: #6f63f6 !important;
}
.byf-wall-comments-more {
  appearance: none;
  border: 0;
  background: transparent;
  color: #6f63f6;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 10px;
}
.byf-wall-comments-more:hover {
  text-decoration: underline;
}

/* Comment compose */
.byf-wall-comment-compose {
  display: flex;
  gap: 8px;
  align-items: center;
}
.byf-wall-comment-input {
  flex: 1;
  min-height: 34px;
  max-height: 100px;
  overflow-y: auto;
  padding: 7px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  font-size: 13px;
  font-family: var(--byf-font);
  letter-spacing: var(--byf-ls);
  color: var(--ink);
  outline: none;
  word-break: break-word;
  background: var(--card-soft);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.byf-wall-comment-input:focus {
  border-color: rgba(111, 99, 246, 0.3);
  background: #fff;
}
.byf-wall-comment-input:empty:before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
}
.byf-wall-comment-send {
  appearance: none;
  border: 0;
  background: #6f63f630;
  color: #fff;
  padding: 7px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--byf-font);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.byf-wall-comment-send:disabled {
  opacity: 0.35;
  pointer-events: none;
}
.byf-wall-comment-send:hover {
  background: #5b4fe0;
}

/* --- @Mention dropdown --- */
.byf-wall-mention-dropdown {
  position: absolute;
  z-index: 100002;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow2);
  max-height: 220px;
  overflow-y: auto;
  min-width: 200px;
}
.byf-wall-mention-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s ease;
}
.byf-wall-mention-item:hover,
.byf-wall-mention-item.is-highlighted {
  background: rgba(185, 163, 255, 0.08);
}
.byf-wall-mention-item img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.byf-wall-mention-nick {
  font-weight: 700;
  color: var(--ink);
}
.byf-wall-mention-name {
  font-size: 11px;
  color: var(--muted);
}

/* Mention token in editor */
.byf-wall-mention-token {
  display: inline;
  color: #6f63f6;
  font-weight: 600;
  background: rgba(111, 99, 246, 0.06);
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
}

/* --- Load more --- */
.byf-wall-loadmore {
  display: block;
  margin: 16px auto 0;
  width: auto;
  padding: 10px 28px;
  font-size: 13px;
}

/* --- Empty state --- */
.byf-wall-empty {
  text-align: center;
  padding: 48px 20px;
}
.byf-wall-empty-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, #e6e9ff, #f0e6ff);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.byf-wall-empty-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: var(--byf-ls);
}

/* --- Delete confirm overlay --- */
.byf-wall-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100003;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 49, 58, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.byf-wall-confirm-card {
  width: min(340px, 88vw);
  padding: 28px 24px;
  text-align: center;
}
.byf-wall-confirm-card p {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 18px;
  letter-spacing: var(--byf-ls);
}
.byf-wall-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.byf-wall-confirm-actions .byf-btn {
  width: auto;
  padding: 10px 22px;
  font-size: 13px;
}

/* Swipe-to-delete on mobile */
.byf-wall-swipe-actions {
  position: absolute;
  right: -80px;
  top: 0;
  bottom: 0;
  width: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.byf-wall-swipe-delete {
  appearance: none;
  border: 0;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--byf-font);
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: var(--byf-ls);
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .byf-wall-compose {
    padding: 14px;
  }
  .byf-wall-compose-input {
    min-height: 80px;
    font-size: 14px;
  }
  .byf-wall-compose-title {
    font-size: 14px;
    padding: 8px 14px;
  }
  .byf-wall-compose-img-thumb {
    width: 60px;
    height: 60px;
  }
  .byf-wall-post {
    padding: 14px;
  }
  .byf-wall-post-images--2,
  .byf-wall-post-images--3 {
    grid-template-columns: 1fr;
  }
  .byf-wall-post-images--3 .byf-wall-post-img:first-child {
    grid-column: auto;
  }
  .byf-wall-comment-compose {
    flex-wrap: wrap;
  }
  .byf-wall-compose-left {
    gap: 4px;
  }
  .byf-wall-action-pill {
    padding: 4px 8px;
    font-size: 11px;
  }
  .byf-wall-filter {
    font-size: 10.5px;
    padding: 3px 8px;
  }
  .byf-wall-emoji-btn {
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 32px;
  }
  .byf-wall-sort-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .byf-wall-sort {
    white-space: nowrap;
    font-size: 11.5px;
    padding: 5px 10px;
  }
  .byf-wall-poll-option {
    padding: 9px 12px;
    font-size: 13px;
  }
}

/* ============================================================
   WEEKLY CHALLENGES
   ============================================================ */
.byf-challenges {
  margin-top: 16px;
}

/* Admin create form */
.byf-ch-type-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border, rgba(224, 232, 245, 0.9));
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  flex: 1;
  min-width: 160px;
}
.byf-ch-type-card input[type="radio"] {
  display: none;
}
.byf-ch-type-card:has(input:checked) {
  border-color: #6f63f6;
  background: rgba(111, 99, 246, 0.04);
}
.byf-ch-type-card span {
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.byf-ch-type-card small {
  color: rgba(16, 24, 40, 0.5);
  font-size: 11px;
}

.byf-ch-icon-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1.5px solid var(--border, rgba(224, 232, 245, 0.9));
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.byf-ch-icon-pick input[type="radio"] {
  display: none;
}
.byf-ch-icon-pick:has(input:checked) {
  border-color: #6f63f6;
  background: rgba(111, 99, 246, 0.08);
  color: #6f63f6;
}
.byf-ch-icon-pick:hover {
  background: rgba(16, 24, 40, 0.03);
}

/* Hero card */
.byf-ch-hero {
  padding: 20px;
}
.byf-ch-hero-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.byf-ch-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.1),
    rgba(111, 99, 246, 0.05)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6f63f6;
  flex-shrink: 0;
}
.byf-ch-hero-info {
  flex: 1;
  min-width: 0;
}
.byf-ch-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.3;
}
.byf-ch-desc {
  color: rgba(16, 24, 40, 0.6);
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}
.byf-ch-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.byf-ch-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--card-soft, rgba(246, 248, 252, 0.85));
  color: rgba(16, 24, 40, 0.65);
}

/* Join button */
.byf-ch-join-btn {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 8px 22px;
  border-radius: 10px;
  background: rgba(167, 160, 233, 0.18);
  color: #6f63f6;
  border: 1px solid rgba(167, 160, 233, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}
.byf-ch-join-btn:hover {
  background: rgba(167, 160, 233, 0.28);
  border-color: rgba(167, 160, 233, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(111, 99, 246, 0.12);
}
.byf-ch-join-btn:active {
  transform: translateY(0);
}

/* Week grid */
.byf-ch-my-progress {
  border-top: 1px solid var(--border, rgba(224, 232, 245, 0.9));
  padding-top: 16px;
}
.byf-ch-score {
  font-size: 13px;
  color: #6f63f6;
  font-weight: 600;
}
.byf-ch-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.byf-ch-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.byf-ch-day-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(16, 24, 40, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.byf-ch-day.is-today .byf-ch-day-label {
  color: #6f63f6;
}
.byf-ch-day-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 2px dashed var(--border, rgba(224, 232, 245, 0.9));
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: rgba(16, 24, 40, 0.3);
}
.byf-ch-day-btn:hover {
  border-color: #6f63f6;
  color: #6f63f6;
  background: rgba(111, 99, 246, 0.04);
}
.byf-ch-day.is-done .byf-ch-day-btn {
  border: 2px solid #22c55e;
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
}
.byf-ch-day-dot {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--card-soft, rgba(246, 248, 252, 0.85));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(16, 24, 40, 0.15);
}
.byf-ch-day.is-done .byf-ch-day-dot {
  background: rgba(34, 197, 94, 0.08);
  color: #22c55e;
}
.byf-ch-day.is-future .byf-ch-day-dot {
  opacity: 0.4;
}
.byf-ch-day-empty {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: block;
  opacity: 0.35;
}
.byf-ch-day-val {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

/* Leaderboard */
.byf-ch-leaderboard {
  border-top: 1px solid var(--border, rgba(224, 232, 245, 0.9));
  padding-top: 16px;
}
.byf-ch-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(224, 232, 245, 0.5);
}
.byf-ch-lb-row:last-child {
  border-bottom: 0;
}
.byf-ch-lb-rank {
  width: 28px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.byf-ch-lb-profile {
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.byf-ch-lb-profile:hover .byf-ch-lb-nick {
  color: #6f63f6;
}
.byf-ch-lb-nick {
  font-weight: 600;
  font-size: 13px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease;
}
.byf-ch-lb-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: rgba(185, 163, 255, 0.1);
  overflow: hidden;
}
.byf-ch-lb-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #b9a3ff, #a78bfa);
  transition: width 0.3s ease;
}
/* Top 3 get purple tint, rest get pastel blue */
.byf-ch-lb-row:nth-child(-n + 3) .byf-ch-lb-fill {
  background: linear-gradient(90deg, #6f63f629, #6f63f624);
}
.byf-ch-lb-row:nth-child(n + 4) .byf-ch-lb-fill {
  background: linear-gradient(90deg, #a5c4f7, #7eb0f0);
}
.byf-ch-lb-row:nth-child(n + 4) .byf-ch-lb-bar {
  background: rgba(126, 176, 240, 0.08);
}
.byf-ch-lb-pct {
  font-size: 12px;
  font-weight: 600;
  color: rgba(16, 24, 40, 0.5);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Participants modal */
.byf-ch-participants-link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dashed rgba(16, 24, 40, 0.25);
  transition: color 0.15s ease;
}
.byf-ch-participants-link:hover {
  color: #6f63f6;
  border-bottom-color: #6f63f6;
}
.byf-ch-plist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
}
.byf-ch-plist li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(224, 232, 245, 0.5);
}
.byf-ch-plist li:last-child {
  border-bottom: 0;
}
.byf-ch-plist-nick {
  font-weight: 600;
  font-size: 13px;
}
.byf-ch-plist-score {
  font-size: 11px;
  color: rgba(16, 24, 40, 0.45);
  margin-left: auto;
}

/* Empty state */
.byf-ch-empty {
  text-align: center;
  padding: 48px 24px;
}
.byf-ch-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.1),
    rgba(111, 99, 246, 0.04)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: #6f63f6;
}
.byf-ch-empty-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}
.byf-ch-empty-text {
  color: rgba(16, 24, 40, 0.5);
  font-size: 14px;
  margin: 0;
  max-width: 360px;
  margin-inline: auto;
  line-height: 1.6;
}

/* Mobile */
@media (max-width: 640px) {
  .byf-ch-hero-top {
    flex-direction: column;
    gap: 10px;
  }
  .byf-ch-hero-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }
  .byf-ch-title {
    font-size: 16px;
  }
  .byf-ch-week-grid {
    gap: 4px;
  }
  .byf-ch-day-btn,
  .byf-ch-day-dot {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
  .byf-ch-day-val {
    font-size: 9px;
  }
}

/* Pull-to-refresh */
.byf-ptr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  overflow: hidden;
  background: rgba(242, 242, 252, 0.95);
  backdrop-filter: blur(8px);
  transition: height 0.2s ease;
  pointer-events: none;
}
.byf-ptr.is-pulling {
  transition: none;
}
.byf-ptr.is-refreshing {
  height: 48px !important;
}
.byf-ptr-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(111, 99, 246, 0.15);
  border-top-color: #6f63f6;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.byf-ptr.is-pulling .byf-ptr-spinner {
  opacity: 1;
}
.byf-ptr.is-ready .byf-ptr-spinner {
  opacity: 1;
  border-top-color: #22c55e;
  border-color: rgba(34, 197, 94, 0.15);
}
.byf-ptr.is-refreshing .byf-ptr-spinner {
  opacity: 1;
  animation: byf-ptr-spin 0.6s linear infinite;
}
@keyframes byf-ptr-spin {
  to {
    transform: rotate(360deg);
  }
}

.byf-hero-comm {
  display: grid;
  align-items: stretch;
  background: #f2f2fc;
  border: 1px solid rgba(210, 220, 235, 0.85);
  border-radius: var(--r-xl);
  padding: 18px;
  box-shadow: var(--shadow2);
  margin-bottom: 10px !important;
  margin-top: 15px;
}

/* ============================================================
   DASHBOARD V2 — Premium Redesign
   ============================================================ */

/* --- Icon gradient background utility --- */
.byf-ico-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.12),
    rgba(185, 163, 255, 0.08)
  );
  color: #6f63f6;
}
.byf-ico-wrap--sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.12),
    rgba(185, 163, 255, 0.08)
  );
  color: #6f63f6;
}
.byf-ico-wrap--lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.12),
    rgba(185, 163, 255, 0.08)
  );
  color: #6f63f6;
}
.byf-ico-wrap--pink {
  background: linear-gradient(
    135deg,
    rgba(232, 69, 126, 0.12),
    rgba(232, 69, 126, 0.06)
  );
  color: #e8457e;
}
.byf-ico-wrap--green {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.12),
    rgba(34, 197, 94, 0.06)
  );
  color: #16a34a;
}

/* --- Milestone Toast V2 --- */
.byf-ms-toast--v2 {
  border-left: 4px solid #6f63f6;
  border-radius: var(--r-md) !important;
  padding: 16px 18px !important;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.04),
    rgba(185, 163, 255, 0.02)
  ) !important;
  box-shadow: 0 4px 16px rgba(111, 99, 246, 0.08) !important;
}
.byf-ms-toast--v2.is-gift {
  border-left-color: #e8457e;
}
.byf-ms-toast--v2 .byf-toast-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.14),
    rgba(185, 163, 255, 0.08)
  );
  color: #6f63f6;
}
.byf-ms-toast--v2.is-gift .byf-toast-ico {
  background: linear-gradient(
    135deg,
    rgba(232, 69, 126, 0.14),
    rgba(232, 69, 126, 0.06)
  );
  color: #e8457e;
}
.byf-ms-toast--v2 .byf-toast-body {
  flex: 1;
  min-width: 0;
}
.byf-ms-toast--v2 .byf-toast-body strong {
  font-weight: 700;
}

/* --- Hero V2 --- */
.byf-dash-hero.byf-hero--v2 {
  background: linear-gradient(135deg, #eceaff 0%, #f4eaff 50%, #fdf0f8 100%);
  border-radius: var(--r-xl);
  padding: 20px;
  display: block;
}
.byf-hero--v2 .byf-kicker {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6f63f6;
  margin-bottom: 2px;
}
.byf-hero--v2 .byf-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* KPI row in hero */
.byf-hero-kpis--v2 {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.byf-kpi--v2 {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(210, 220, 235, 0.5);
  border-radius: 14px;
  padding: 8px 12px;
  min-width: 0;
  flex: 1;
}
.byf-kpi--v2 .byf-kpi-val {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}
.byf-kpi--v2 .byf-kpi-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
}

/* Consistency bar in hero */
.byf-hero--v2 .byf-dash-prog {
  margin-top: 14px;
}
.byf-hero--v2 .byf-dash-prog-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.byf-hero--v2 .byf-bar-drugi {
  height: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  overflow: hidden;
}
.byf-hero--v2 .byf-bar-drugi span {
  display: block;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, #6f63f6, #b9a3ff);
  transition: width 0.6s ease;
}
.byf-hero--v2 .byf-dash-prog-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* Chips in hero */
.byf-hero--v2 .byf-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.byf-chip--v2 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(210, 220, 235, 0.45);
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted2);
}
.byf-chip--v2 svg {
  color: #6f63f6;
}

/* Hero actions */
.byf-hero--v2 .byf-dash-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.byf-action-btn--v2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(111, 99, 246, 0.2);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.08s ease;
}
.byf-action-btn--v2:hover {
  background: rgba(185, 163, 255, 0.12) !important;
}
.byf-action-btn--v2:active {
  transform: scale(0.97);
}
.byf-action-btn--v2.is-primary {
  background: linear-gradient(135deg, #6f63f6, #8b7cf7);
  color: #fff;
  border-color: transparent;
}
.byf-action-btn--v2.is-primary:hover {
  background: linear-gradient(135deg, #5b4fe0, #7d6ef5) !important;
}
.byf-action-btn--v2.is-primary svg {
  color: #fff;
}

/* --- Quick Actions --- */
.byf-quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}
@media (max-width: 420px) {
  .byf-quick-actions {
    grid-template-columns: 1fr 1fr;
  }
  .byf-quick-actions .byf-qa:last-child {
    grid-column: 1 / -1;
  }
}
.byf-qa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: var(--r-md);
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--border-soft);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.08s ease, box-shadow 0.15s ease;
  text-align: center;
}
.byf-qa:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(111, 99, 246, 0.1) !important;
  background: #fff !important;
}
.byf-qa:active {
  transform: scale(0.97);
}
.byf-qa__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.byf-qa__sub {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.3;
}

/* --- Tab Navigation --- */
.byf-dash-tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0;
}
.byf-dash-tabs::-webkit-scrollbar {
  display: none;
}
.byf-dash-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.75);
  color: var(--muted2);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.byf-dash-tab:hover {
  background: rgba(185, 163, 255, 0.08) !important;
}
.byf-dash-tab.is-active {
  background: rgba(111, 99, 246, 0.1) !important;
  border-color: rgba(111, 99, 246, 0.25);
  color: #6f63f6;
}
.byf-dash-tab.is-active svg {
  color: #6f63f6;
}

/* Tab panels */
.byf-dash-panel {
  animation: byfPanelIn 0.2s ease;
}
@keyframes byfPanelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Pregled tab: 2-col grid on desktop --- */
.byf-pregled-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 860px) {
  .byf-pregled-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* --- Stats V2 (grouped) --- */
.byf-stat-group {
  margin-bottom: 14px;
}
.byf-stat-group__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--muted);
  padding: 0 2px;
  margin-bottom: 6px;
}
.byf-sico--v2 {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.12),
    rgba(185, 163, 255, 0.08)
  ) !important;
  border: none !important;
  box-shadow: none !important;
  color: #6f63f6;
  font-size: 0;
}
.byf-sico--v2 svg {
  font-size: initial;
}
.byf-sbar--v2 i {
  background: linear-gradient(90deg, #6f63f6, #b9a3ff) !important;
}
.byf-srow.is-reverse .byf-sbar--v2 i {
  background: linear-gradient(90deg, #16a34a, #4ade80) !important;
}

/* --- Milestones V2 --- */
.byf-milestones--v2 .sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.byf-ms-next--v2 {
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.06),
    rgba(185, 163, 255, 0.03)
  );
  border: 1px solid rgba(111, 99, 246, 0.12);
  border-left: 3px solid #6f63f6;
  border-radius: var(--r-sm);
  padding: 14px 16px;
  margin: 10px 0;
}
.byf-ms-next--v2 .byf-ms-next-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #6f63f6;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.byf-ms-next--v2 .byf-ms-next-title {
  font-size: 15px;
  font-weight: 700;
}
.byf-ms-next--v2 .byf-ms-next-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.byf-ms-next--v2 .byf-ms-next-hint {
  font-size: 11px;
  color: #6f63f6;
  margin-top: 6px;
  font-weight: 600;
}

.byf-ms-badge--v2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--border-soft);
  font-size: 12px;
  font-weight: 600;
}
.byf-ms-badge--v2 .byf-ms-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.12),
    rgba(185, 163, 255, 0.08)
  );
  color: #6f63f6;
}
.byf-ms-badge--v2.byf-ms-badge--gift .byf-ms-badge-icon {
  background: linear-gradient(
    135deg,
    rgba(232, 69, 126, 0.12),
    rgba(232, 69, 126, 0.06)
  );
  color: #e8457e;
}

/* --- Platform Links --- */
.byf-platform-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px 0;
}
@media (max-width: 520px) {
  .byf-platform-links {
    grid-template-columns: repeat(2, 1fr);
  }
}
.byf-plink {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: var(--r-sm);
  background: var(--card);
  border: 1px solid var(--border-soft);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  text-decoration: none;
  text-align: center;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
.byf-plink:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(111, 99, 246, 0.08) !important;
  background: #fff !important;
}
.byf-plink:active {
  transform: scale(0.97);
}
.byf-plink__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.byf-plink__sub {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.3;
}

/* =============================================================
   WEIGHT V2 — Complete Premium Redesign (clean slate)
   ============================================================= */
.byf-weightV4--v2 {
  padding: 20px !important;
  overflow: hidden;
}
/* Hide old head — replaced by wt-hero */
.byf-weightV4--v2 .byf-weightV4__head,
.byf-weightV4--v2 .byf-weightV4__sub {
  display: none;
}

/* --- Hero: weight + delta --- */
.byf-wt-hero {
  margin-bottom: 16px;
}
.byf-wt-hero__main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.byf-wt-hero__label {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.byf-wt-hero__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: -0.03em;
  line-height: 1;
}
.byf-wt-hero__delta {
  text-align: right;
  padding: 5px 10px;
  border-radius: 10px;
}
.byf-wt-hero__delta--good {
  background: rgba(61, 138, 92, 0.06);
}
.byf-wt-hero__delta--good .byf-wt-hero__delta-val {
  color: #3d8a5c;
}
.byf-wt-hero__delta--bad {
  background: rgba(200, 50, 50, 0.05);
}
.byf-wt-hero__delta--bad .byf-wt-hero__delta-val {
  color: #b44;
}
.byf-wt-hero__delta--flat,
.byf-wt-hero__delta--up,
.byf-wt-hero__delta--down {
  background: rgba(20, 19, 26, 0.03);
}
.byf-wt-hero__delta-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.6);
}
.byf-wt-hero__delta-sub {
  font-size: 0.62rem;
  color: rgba(20, 19, 26, 0.3);
  margin-top: 1px;
}
.byf-wt-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 0.62rem;
  color: rgba(20, 19, 26, 0.5);
  letter-spacing: 0.01em;
}
.byf-wt-meta span {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(247, 246, 251, 0.5);
  border: 1px solid rgba(120, 112, 168, 0.15);
}

/* --- Goal timeline: ultra-compact --- */
.byf-weightV4--v2 .byf-goalBox {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 0 14px;
  margin: 0;
}
.byf-weightV4--v2 .byf-goalBox__top {
  display: none;
}
.byf-weightV4--v2 .byf-goalTimeline__cap {
  display: none;
}
.byf-weightV4--v2 .byf-goalTimeline__val {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.3);
}

/* --- Before/After Photo Slider --- */
.byf-dcard--photo {
  padding: 14px !important;
  overflow: hidden;
}
.byf-slider {
  margin-top: 6px;
}

/* Desktop: slider left + info right */
@media (min-width: 860px) {
  .byf-photo-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
  .byf-photo-mode .byf-slider,
  .byf-photo-mode .byf-gallery {
    min-width: 0;
  }
}

/* Photo side panel (desktop only) */
.byf-photo-side {
  display: none;
}
@media (min-width: 860px) {
  .byf-photo-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 4px;
  }
}
.byf-photo-side__stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(247, 246, 251, 0.4);
  border: 1px solid rgba(120, 112, 168, 0.06);
}
.byf-photo-side__stat-val {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a2e;
}
.byf-photo-side__stat-label {
  font-size: 0.6rem;
  color: rgba(20, 19, 26, 0.35);
}
.byf-photo-side__strip-title {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
/* Vertical strip for desktop */
.byf-photo-side__vstrip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.byf-photo-side__vchip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.byf-photo-side__vchip:hover {
  background: rgba(247, 246, 251, 0.5) !important;
}
.byf-photo-side__vchip.is-active {
  background: rgba(111, 99, 246, 0.04) !important;
  border-color: rgba(111, 99, 246, 0.12);
}
.byf-photo-side__vchip img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.byf-photo-side__vchip-info {
  min-width: 0;
}
.byf-photo-side__vchip-week {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.6);
}
.byf-photo-side__vchip-date {
  font-size: 0.56rem;
  color: rgba(20, 19, 26, 0.25);
}

/* On desktop: hide horizontal strips, keep labels within slider */
@media (min-width: 860px) {
  .byf-gallery__strip {
    display: none;
  }
}

/* Top bar: angle tabs + gallery toggle */
.byf-slider__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.byf-slider__angles {
  display: flex;
  gap: 4px;
}
.byf-slider__angle-btn {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(120, 112, 168, 0.1);
  background: rgba(255, 255, 255, 0.5);
  color: rgba(20, 19, 26, 0.4);
  cursor: pointer;
  transition: all 0.15s ease;
}
.byf-slider__angle-btn.is-active {
  background: rgba(111, 99, 246, 0.08);
  border-color: rgba(111, 99, 246, 0.2);
  color: rgba(111, 99, 246, 0.7);
}
.byf-slider__gallery-btn {
  font-size: 0.58rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 3px;
}
.byf-slider__gallery-btn:hover {
  color: rgba(111, 99, 246, 0.6) !important;
  background: none !important;
}

/* Slider wrap */
.byf-slider__wrap {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 3 / 4;
  max-height: 480px;
  background: rgba(247, 246, 251, 0.3);
  cursor: col-resize;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}
@media (min-width: 768px) {
  .byf-slider__wrap {
    aspect-ratio: 3 / 4;
    max-height: 520px;
  }
}
.byf-slider__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
}
.byf-slider__img--after {
  position: absolute;
  inset: 0;
}
.byf-slider__before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
}
.byf-slider__before .byf-slider__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  max-width: none;
  height: 100%;
}
/* Handle */
.byf-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}
.byf-slider__line {
  flex: 1;
  width: 2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
}
.byf-slider__grip {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(111, 99, 246, 0.8);
  box-shadow: 0 2px 8px rgba(111, 99, 246, 0.2),
    0 0 0 3px rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  pointer-events: auto;
  cursor: col-resize;
}
/* Labels: overlay at bottom of slider wrap */
.byf-slider__labels {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%);
  border-radius: 0 0 14px 14px;
  z-index: 3;
  pointer-events: none;
}
.byf-slider__label {
  font-size: 0.58rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Week gallery strip */
.byf-slider__strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 0 2px;
  margin-top: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.byf-slider__strip::-webkit-scrollbar {
  display: none;
}
.byf-slider__thumb {
  flex-shrink: 0;
  width: 52px;
  text-align: center;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}
.byf-slider__thumb img {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.byf-slider__thumb.is-active img {
  border-color: rgba(111, 99, 246, 0.4);
}
.byf-slider__thumb-label {
  font-size: 0.48rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.3);
  margin-top: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Photo tabs (Poređenje | Galerija) --- */
.byf-photo-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.byf-photo-tab {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(120, 112, 168, 0.08);
  background: rgba(255, 255, 255, 0.5);
  color: rgba(20, 19, 26, 0.35);
  cursor: pointer;
  transition: all 0.15s ease;
}
.byf-photo-tab.is-active {
  background: rgba(111, 99, 246, 0.07);
  border-color: rgba(111, 99, 246, 0.18);
  color: rgba(111, 99, 246, 0.7);
}
.byf-photo-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: rgba(111, 99, 246, 0.08);
  font-size: 0.52rem;
  margin-left: 3px;
  padding: 0 4px;
}

/* --- Gallery (single view + week strip) --- */
.byf-gallery__current-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.byf-gallery__current-week {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.6);
}
.byf-gallery__current-date {
  font-size: 0.6rem;
  color: rgba(20, 19, 26, 0.25);
}
.byf-gallery__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.byf-gallery__img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(247, 246, 251, 0.3);
}
.byf-gallery__img-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.2s ease;
}
.byf-gallery__img-label {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 0.52rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.9);
}
/* Week selector strip */
.byf-gallery__strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 12px 0 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.byf-gallery__strip::-webkit-scrollbar {
  display: none;
}
.byf-gallery__chip {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.byf-gallery__chip img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid transparent;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.byf-gallery__chip.is-active img {
  border-color: rgba(111, 99, 246, 0.4);
  transform: scale(1.05);
}
.byf-gallery__chip span {
  font-size: 0.5rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.3);
  white-space: nowrap;
}
.byf-gallery__chip.is-active span {
  color: rgba(111, 99, 246, 0.6);
}

/* --- Chart V2 layout --- */
.byf-weightV4--v2 .byf-chartV4 {
  background: none;
  padding: 10px;
  margin: 12px 0 0;
}
.byf-weightV4--v2 .byf-chartV4__top {
  padding: 0 0 6px;
}
.byf-weightV4--v2 .byf-chartV4__title {
  font-size: 0.66rem;
  color: rgba(20, 19, 26, 0.22);
}
.byf-weightV4--v2 .byf-chartV4__title strong {
  display: none;
}
.byf-weightV4--v2 .byf-seg__btn {
  font-size: 0.64rem;
  padding: 3px 9px;
  font-weight: 600;
}

/* Tooltip — light */
.byf-weightV4--v2 .byf-tooltip {
  background: #fff !important;
  color: #1a1a2e !important;
  border: 1px solid rgba(120, 112, 168, 0.06) !important;
  box-shadow: 0 2px 10px rgba(20, 19, 26, 0.05) !important;
  border-radius: 10px !important;
  padding: 7px 10px !important;
}
.byf-weightV4--v2 .byf-tooltip__date {
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  color: rgba(20, 19, 26, 0.28) !important;
  opacity: 1 !important;
}
.byf-weightV4--v2 .byf-tooltip__kg {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: #1a1a2e !important;
  margin-top: 1px !important;
}
.byf-weightV4--v2 .byf-tooltip__delta {
  font-size: 0.58rem !important;
  color: rgba(20, 19, 26, 0.3) !important;
  opacity: 1 !important;
  margin-top: 1px !important;
}
.byf-weightV4--v2 .byf-tooltip__hint {
  display: none !important;
}

/* --- Chart meta (pill row below chart) --- */
.byf-wt-chartmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0 0;
}
.byf-wt-chartmeta span:not(.byf-dot) {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(247, 246, 251, 0.6);
  border: 1px solid rgba(120, 112, 168, 0.06);
  font-size: 0.64rem;
  color: rgba(20, 19, 26, 0.35);
  white-space: nowrap;
}
.byf-wt-chartmeta strong {
  font-weight: 700;
  color: rgba(20, 19, 26, 0.55);
}
.byf-wt-chartmeta .byf-dot {
  display: none;
}

/* --- Secondary visuals grid --- */
.byf-wt-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 0;
}
@media (max-width: 480px) {
  .byf-wt-grid2 {
    grid-template-columns: 1fr;
  }
}
.byf-wt-minicard {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(247, 246, 251, 0.35);
  border: 1px solid rgba(120, 112, 168, 0.08);
}
.byf-wt-minicard__title {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.32);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

/* Monthly bars */
.byf-wt-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 80px;
  padding: 8px 4px 0;
}
.byf-wt-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.byf-wt-bar__val {
  font-size: 0.6rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.byf-wt-bar__val.is-good {
  color: #3d8a5c;
}
.byf-wt-bar__val.is-warn {
  color: #c44;
}
.byf-wt-bar__val.is-flat {
  color: rgba(20, 19, 26, 0.25);
}
.byf-wt-bar__fill {
  width: 100%;
  max-width: 24px;
  border-radius: 6px 6px 2px 2px;
  min-height: 6px;
  transition: height 0.4s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.byf-wt-bar__fill.is-good {
  background: linear-gradient(
    180deg,
    rgba(61, 138, 92, 0.25),
    rgba(61, 138, 92, 0.12)
  );
}
.byf-wt-bar__fill.is-warn {
  background: linear-gradient(
    180deg,
    rgba(200, 68, 68, 0.2),
    rgba(200, 68, 68, 0.08)
  );
}
.byf-wt-bar__fill.is-flat {
  background: linear-gradient(
    180deg,
    rgba(120, 112, 168, 0.12),
    rgba(120, 112, 168, 0.05)
  );
}
.byf-wt-bar__label {
  font-size: 0.54rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Empty month bar — subtle placeholder */
.byf-wt-bar.is-empty .byf-wt-bar__val {
  color: rgba(20, 19, 26, 0.12) !important;
  font-weight: 500;
}
.byf-wt-bar.is-empty .byf-wt-bar__fill {
  background: rgba(120, 112, 168, 0.06) !important;
  border-radius: 3px !important;
}
.byf-wt-bar.is-empty .byf-wt-bar__label {
  color: rgba(20, 19, 26, 0.18);
}

/* Goal projection */
.byf-wt-proj {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 10px 0 4px;
}
.byf-wt-proj__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(111, 99, 246, 0.45);
  box-shadow: 0 0 0 3px rgba(111, 99, 246, 0.08);
}
.byf-wt-proj__dot--goal {
  background: rgba(61, 138, 92, 0.35);
  box-shadow: 0 0 0 3px rgba(61, 138, 92, 0.06);
  border: none;
}
.byf-wt-proj__now,
.byf-wt-proj__goal {
  display: flex;
  align-items: center;
  gap: 7px;
}
.byf-wt-proj__val {
  font-size: 0.88rem;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: -0.02em;
}
.byf-wt-proj__sub {
  font-size: 0.56rem;
  color: rgba(20, 19, 26, 0.35);
  margin-top: 1px;
}
.byf-wt-proj__arrow {
  display: flex;
  flex-shrink: 0;
  opacity: 0.4;
}
.byf-wt-proj__pace {
  font-size: 0.6rem;
  color: rgba(20, 19, 26, 0.35);
  text-align: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(120, 112, 168, 0.06);
}
.byf-wt-proj__pace strong {
  font-weight: 700;
  color: rgba(20, 19, 26, 0.5);
}

/* --- Nudge --- */
.byf-weightV4--v2 .byf-nudge {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 11px;
  background: rgba(111, 99, 246, 0.025);
  font-size: 0.72rem;
  color: rgba(20, 19, 26, 0.4);
  line-height: 1.4;
  margin-top: 10px;
}
.byf-weightV4--v2 .byf-nudge__icon {
  display: flex;
  color: rgba(111, 99, 246, 0.35);
  flex-shrink: 0;
  margin-top: 1px;
}

/* --- Reliability CTA (bottom) --- */
.byf-wt-rel-cta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(20, 19, 26, 0.015);
  font-size: 0.68rem;
  color: rgba(20, 19, 26, 0.32);
}
.byf-wt-rel-cta__txt {
  flex: 1;
  line-height: 1.35;
}
.byf-wt-rel-cta__info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex-shrink: 0;
  background: rgba(111, 99, 246, 0.04) !important;
  border: none;
  color: rgba(111, 99, 246, 0.3);
  cursor: pointer;
}

/* --- Reliability dots --- */
.byf-rel-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.byf-rel-dot--high {
  background: #3d8a5c;
}
.byf-rel-dot--med {
  background: #c5930a;
}
.byf-rel-dot--low {
  background: rgba(120, 112, 168, 0.2);
}

/* --- Photos V2 --- */
.byf-photos--v2 .sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.byf-photos--v2 .byf-compare-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(111, 99, 246, 0.12);
  color: #6f63f6;
}
.byf-photos--v2 .byf-compare-badge.is-now {
  background: linear-gradient(135deg, #6f63f6, #8b7cf7);
  color: #fff;
}

/* --- Calendar V2 --- */
.byf-cal-card--v2 .sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Weekly V2 --- */
.byf-weekcard--v2 {
  border-left: 3px solid var(--border-soft);
  border-radius: var(--r-sm) !important;
}
.byf-weekcard--v2.is-good {
  border-left-color: #22c55e;
}
.byf-weekcard--v2.is-mixed {
  border-left-color: #eab308;
}
.byf-weekcard--v2.is-short {
  border-left-color: #60a5fa;
}
.byf-weekbadge--v2 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 8px;
}
.is-good .byf-weekbadge--v2 {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}
.is-mixed .byf-weekbadge--v2 {
  background: rgba(234, 179, 8, 0.1);
  color: #a16207;
}
.is-short .byf-weekbadge--v2 {
  background: rgba(96, 165, 250, 0.1);
  color: #2563eb;
}
.byf-wk-detail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted2);
}
.byf-wk-detail svg {
  color: #6f63f6;
  flex-shrink: 0;
}

/* --- Notes V2 --- */
.byf-notelist--v2 .sec-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.byf-noteitem--v2 {
  border-left: 2px solid rgba(111, 99, 246, 0.15);
  padding-left: 12px;
  margin-bottom: 12px;
}

/* --- Footer V2 --- */
.byf-dash-footer--v2 {
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.06),
    rgba(185, 163, 255, 0.03)
  ) !important;
  border: 1px solid rgba(111, 99, 246, 0.1) !important;
  text-align: center;
  padding: 20px !important;
}
.byf-dash-footer--v2 .byf-dash-footer-big {
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.byf-dash-footer--v2 .byf-dash-footer-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* --- Pregled section title helper --- */
.byf-sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 2px;
}

/* --- V2 overrides for hero on mobile --- */
@media (max-width: 600px) {
  .byf-hero--v2 {
    padding: 16px;
  }
  .byf-hero--v2 .byf-title {
    font-size: 19px;
  }
  .byf-kpi--v2 {
    padding: 6px 10px;
  }
  .byf-kpi--v2 .byf-kpi-val {
    font-size: 15px;
  }
  .byf-kpi--v2 .byf-kpi-lbl {
    font-size: 9px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
  }
  .byf-action-btn--v2 {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ============================================================
   DASHBOARD V3 — Grid Cards
   ============================================================ */

/* --- 1. Grid System --- */
.byf-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 1120px;
  margin: 0 auto;
}
@media (max-width: 980px) {
  .byf-dash-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .byf-dash-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* --- 2. Card Base --- */
.byf-dcard {
  background: #fff;
  border: 1px solid rgba(120, 112, 168, 0.06);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(20, 19, 26, 0.04);
  display: flex;
  flex-direction: column;
}
a.byf-dcard {
  text-decoration: none;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
a.byf-dcard:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(20, 19, 26, 0.07);
}
a.byf-dcard:active {
  transform: scale(0.99);
}
.byf-dcard--wide {
  grid-column: span 2;
}
.byf-dcard--full {
  grid-column: 1 / -1;
}
@media (max-width: 600px) {
  .byf-dcard--wide {
    grid-column: 1 / -1;
  }
  .byf-dcard--kcal {
    grid-column: 1 / -1;
  }
}

/* --- 3. Card Inner Elements --- */
.byf-dcard__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.byf-dcard__ico {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.08),
    rgba(185, 163, 255, 0.06)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(111, 99, 246, 0.5);
}
.byf-dcard__title {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(20, 19, 26, 0.3);
}
.byf-dcard__link {
  margin-left: auto;
  font-size: 0.58rem;
  color: rgba(111, 99, 246, 0.4);
  text-decoration: none;
}
.byf-dcard__val {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.byf-dcard__sub {
  font-size: 0.62rem;
  color: rgba(20, 19, 26, 0.3);
  margin-top: 3px;
}
/* Card badge (top-right percentage indicator) */
.byf-dcard__badge {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(120, 112, 168, 0.06);
  color: rgba(20, 19, 26, 0.35);
}
.byf-dcard__badge.is-good {
  background: rgba(61, 138, 92, 0.08);
  color: #3d8a5c;
}
.byf-dcard__badge.is-ok {
  background: rgba(111, 99, 246, 0.06);
  color: rgba(111, 99, 246, 0.6);
}

/* Card description (what the number means) */
.byf-dcard__desc {
  font-size: 0.6rem;
  color: rgba(20, 19, 26, 0.3);
  margin-top: 1px;
  margin-bottom: 4px;
}

/* Card value unit suffix */
.byf-dcard__unit {
  font-size: 0.7em;
  font-weight: 500;
  color: rgba(20, 19, 26, 0.35);
}

/* Card row (for challenges, multi-item cards) */
.byf-dcard__row {
  padding: 10px 0;
}
.byf-dcard__row + .byf-dcard__row {
  border-top: 1px solid rgba(120, 112, 168, 0.06);
}
.byf-dcard__row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.byf-dcard__row-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.65);
}
.byf-dcard__row-pct {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(111, 99, 246, 0.06);
  color: rgba(111, 99, 246, 0.55);
}
.byf-dcard__row-val {
  font-size: 0.68rem;
  color: rgba(20, 19, 26, 0.35);
  margin-bottom: 4px;
}

.byf-dcard__bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(210, 220, 235, 0.25);
  margin-top: 12px;
  overflow: hidden;
}
.byf-dcard__bar i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    rgba(185, 163, 255, 0.55),
    rgba(111, 99, 246, 0.45)
  );
  transition: width 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* --- 4. Weight Sparkline Card --- */
.byf-dcard--weight .byf-dcard__head {
  /* normal — no overrides */
}
.byf-sparkline {
  width: 100%;
  height: 55px;
  display: block;
  margin: 8px 0 4px;
}
.byf-dcard--weight .byf-wt-meta {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.byf-dcard--weight .byf-wt-meta span {
  font-size: 0.58rem;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(247, 246, 251, 0.5);
  border: 1px solid rgba(120, 112, 168, 0.15);
  color: rgba(20, 19, 26, 0.25);
}
.byf-dcard--weight .byf-wt-chartmeta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.byf-dcard--weight .byf-wt-chartmeta span {
  font-size: 0.6rem;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(247, 246, 251, 0.4);
  border: 1px solid rgba(120, 112, 168, 0.04);
  color: rgba(20, 19, 26, 0.28);
}
.byf-dcard--weight .byf-wt-chartmeta strong {
  font-weight: 650;
  color: rgba(20, 19, 26, 0.45);
}
.byf-dcard--weight .byf-wt-hero {
  margin-bottom: 4px;
}
.byf-dcard--weight .byf-wt-hero__main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.byf-dcard--weight .byf-wt-hero__label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(20, 19, 26, 0.25);
}
.byf-dcard--weight .byf-wt-hero__value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: -0.03em;
}
.byf-dcard--weight .byf-wt-hero__delta {
  padding: 4px 8px;
  border-radius: 8px;
}
.byf-dcard--weight .byf-wt-hero__delta--good {
  background: rgba(61, 138, 92, 0.06);
}
.byf-dcard--weight .byf-wt-hero__delta--good .byf-wt-hero__delta-val {
  color: #3d8a5c;
}
.byf-dcard--weight .byf-wt-hero__delta--bad {
  background: rgba(200, 50, 50, 0.05);
}
.byf-dcard--weight .byf-wt-hero__delta--bad .byf-wt-hero__delta-val {
  color: #b44;
}
.byf-dcard--weight .byf-wt-hero__delta--flat,
.byf-dcard--weight .byf-wt-hero__delta--up,
.byf-dcard--weight .byf-wt-hero__delta--down {
  background: rgba(20, 19, 26, 0.025);
}
.byf-dcard--weight .byf-wt-hero__delta-val {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.5);
}
.byf-dcard--weight .byf-wt-hero__delta-sub {
  font-size: 0.56rem;
  color: rgba(20, 19, 26, 0.25);
}

/* --- 5. Photo Card --- */
.byf-dcard--photo .byf-photo-pair {
  display: flex;
  gap: 8px;
}
.byf-dcard--photo .byf-photo-pair img {
  flex: 1;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
}
.byf-dcard--photo .byf-photo-label {
  font-size: 0.58rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.3);
  text-align: center;
  margin-top: 4px;
}
.byf-dcard--photo .byf-photo-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.5rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(111, 99, 246, 0.1);
  color: rgba(111, 99, 246, 0.6);
}

/* --- 6. Calendar Mini Card --- */
.byf-dcard--cal .byf-cal-mini {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.byf-dcard--cal .byf-cal-dot {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  max-width: 14px;
}
.byf-cal-dot.is-ok {
  background: rgba(61, 138, 92, 0.35);
}
.byf-cal-dot.is-partial {
  background: rgba(234, 179, 8, 0.35);
}
.byf-cal-dot.is-miss {
  background: rgba(220, 50, 50, 0.25);
}
.byf-cal-dot.is-none {
  background: rgba(120, 112, 168, 0.08);
}

/* --- Mini Calendar (proper month grid) --- */
.byf-minical__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.byf-minical__nav-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.55);
}
.byf-minical__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(247, 246, 251, 0.5) !important;
  border: 1px solid rgba(120, 112, 168, 0.08);
  color: rgba(20, 19, 26, 0.4);
  text-decoration: none;
  transition: all 0.15s ease;
}
.byf-minical__nav-btn:hover {
  background: rgba(111, 99, 246, 0.06) !important;
  color: rgba(111, 99, 246, 0.6);
}
.byf-minical__nav-btn.is-disabled {
  opacity: 0;
  pointer-events: none;
}
.byf-minical {
  margin-top: 0;
}
.byf-minical__head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.byf-minical__head span {
  font-size: 0.5rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.25);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.02em;
  padding: 2px 0;
}
.byf-minical__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.byf-minical__empty {
  aspect-ratio: 1;
}
.byf-minical__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.56rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.5);
  cursor: default;
  transition: background 0.15s ease;
  position: relative;
  max-width: 36px;
}
/* Status colors */
.byf-minical__day.is-ok {
  background: rgba(61, 138, 92, 0.12);
  color: #3d8a5c;
}
.byf-minical__day.is-partial {
  background: rgba(234, 179, 8, 0.1);
  color: #a16207;
}
.byf-minical__day.is-miss {
  background: rgba(220, 50, 50, 0.08);
  color: #b44;
}
.byf-minical__day.is-none {
  background: rgba(120, 112, 168, 0.04);
  color: rgba(20, 19, 26, 0.3);
}
.byf-minical__day.is-future {
  background: none;
  color: rgba(20, 19, 26, 0.12);
}
.byf-minical__day.is-today {
  box-shadow: inset 0 0 0 1.5px rgba(111, 99, 246, 0.4);
}
.byf-minical__day.is-today::after {
  content: "";
  position: absolute;
  bottom: 2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(111, 99, 246, 0.5);
}

/* Legend */
.byf-minical__legend {
  display: flex;
  gap: 12px;
  padding: 10px 0 0;
  flex-wrap: wrap;
}
.byf-minical__leg {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.54rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.35);
}
.byf-minical__leg i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
}
.byf-minical__leg i.is-ok {
  background: rgba(61, 138, 92, 0.3);
}
.byf-minical__leg i.is-partial {
  background: rgba(234, 179, 8, 0.3);
}
.byf-minical__leg i.is-miss {
  background: rgba(220, 50, 50, 0.2);
}

/* --- 7. Milestones Card --- */
.byf-dcard--ms .byf-ms-done-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* --- 8. Weekly Card --- */
.byf-dcard--weekly .byf-wk-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Week status badge */
.byf-wk-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.byf-wk-status.is-good {
  background: rgba(61, 138, 92, 0.1);
  color: #2d7a4a;
}
.byf-wk-status.is-mixed {
  background: rgba(234, 179, 8, 0.1);
  color: #7a5008;
}
.byf-wk-status.is-short {
  background: rgba(96, 165, 250, 0.1);
  color: #2563eb;
}
/* Warn value (emotional eating) */
.byf-wk-signal-val.is-warn {
  color: #a33;
}
.byf-dcard--weekly .byf-wk-signals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.byf-dcard--weekly .byf-wk-signal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(247, 246, 251, 0.4);
}
.byf-dcard--weekly .byf-wk-signal-label {
  font-size: 0.6rem;
  color: rgba(20, 19, 26, 0.4);
}
.byf-dcard--weekly .byf-wk-signal-val {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.6);
}
.byf-dcard--weekly .byf-wk-stat {
  font-size: 0.62rem;
  color: rgba(20, 19, 26, 0.4);
}
.byf-dcard--weekly .byf-wk-stat strong {
  font-weight: 700;
  color: rgba(20, 19, 26, 0.6);
}

/* --- 9. Notes Card --- */
.byf-dcard--notes .byf-note-item {
  border-left: 2px solid rgba(111, 99, 246, 0.1);
  padding-left: 10px;
  margin-bottom: 8px;
}
.byf-dcard--notes .byf-note-date {
  font-size: 0.58rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.25);
}
.byf-dcard--notes .byf-note-text {
  font-size: 0.72rem;
  color: rgba(20, 19, 26, 0.5);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 10. Tools Grid --- */
.byf-dcard--tools .byf-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 600px) {
  .byf-dcard--tools .byf-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.byf-tool-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 8px;
  border-radius: 12px;
  text-decoration: none;
  text-align: center;
  background: rgba(247, 246, 251, 0.3);
  border: 1px solid rgba(120, 112, 168, 0.04);
  transition: background 0.12s ease, transform 0.1s ease;
}
.byf-tool-link:hover {
  background: rgba(247, 246, 251, 0.6);
  transform: translateY(-1px);
}
.byf-tool-link__label {
  font-size: 0.64rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.55);
}
.byf-tool-link__sub {
  font-size: 0.54rem;
  color: rgba(20, 19, 26, 0.25);
}
.byf-tool-link--locked {
  position: relative;
  cursor: default;
  pointer-events: none;
  background: rgba(247, 246, 251, 0.15);
  border: 1px dashed rgba(124, 58, 237, 0.12);
}
.byf-tool-lock-ico {
  position: absolute;
  top: 6px;
  right: 6px;
}

/* --- 11. Weight Modal --- */
.byf-wt-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.byf-wt-modal.is-open {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.byf-wt-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 19, 26, 0.3);
}
.byf-wt-modal__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 20px;
  box-shadow: 0 -4px 30px rgba(20, 19, 26, 0.1);
  animation: byfWtSlideUp 0.25s ease;
}
@keyframes byfWtSlideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.byf-wt-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(20, 19, 26, 0.04);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: rgba(20, 19, 26, 0.4);
}
@media (min-width: 768px) {
  .byf-wt-modal.is-open {
    align-items: center;
  }
  .byf-wt-modal__card {
    border-radius: 20px;
    max-height: 85vh;
  }
}

/* --- 13. Hero Overrides for Grid --- */
.byf-dash-grid .byf-hero--v2 {
  border-radius: 18px;
  padding: 18px;
}
@media (max-width: 600px) {
  .byf-dash-grid .byf-hero--v2 {
    padding: 14px;
  }
}

/* --- Celebration Overlay (milestone unlock) --- */
.byf-celebrate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: byfCelIn 0.4s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.byf-celebrate__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 19, 26, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.byf-celebrate__card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 24px;
  padding: 36px 32px 28px;
  text-align: center;
  max-width: 340px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(20, 19, 26, 0.12),
    0 0 0 1px rgba(120, 112, 168, 0.06);
  animation: byfCelCard 0.5s cubic-bezier(0.2, 0.9, 0.2, 1) 0.1s both;
}
.byf-celebrate__glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(111, 99, 246, 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
}
.byf-celebrate__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(111, 99, 246, 0.1),
    rgba(185, 163, 255, 0.06)
  );
  color: #6f63f6;
  margin-bottom: 16px;
}
.byf-celebrate__label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(111, 99, 246, 0.6);
  margin-bottom: 4px;
}
.byf-celebrate__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.2;
  margin-bottom: 6px;
}
.byf-celebrate__sub {
  font-size: 0.78rem;
  color: rgba(20, 19, 26, 0.5);
  line-height: 1.4;
  margin-bottom: 20px;
}
.byf-celebrate__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6f63f6, #8b7cf7) !important;
  color: #fff !important;
  font-size: 0.78rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform 0.1s ease;
}
.byf-celebrate__btn:hover {
  background: linear-gradient(135deg, #5b4fe0, #7d6ef5) !important;
}
.byf-celebrate__btn:active {
  transform: scale(0.96);
}

@keyframes byfCelIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes byfCelCard {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* --- Mental Health Card --- */
.byf-dcard--mental {
  padding: 18px !important;
}

/* Legend (shared between dashboard and modal) */
.byf-yip__leg {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.54rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.45);
}
.byf-yip__leg i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Right column: emotion stats + notes */
.byf-mental-right {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.byf-emo-stats__title {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}
.byf-emo-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.byf-emo-bar__label {
  font-size: 0.66rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.6);
  width: 76px;
  flex-shrink: 0;
  text-align: right;
}
.byf-emo-bar__track {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: rgba(210, 220, 235, 0.12);
  overflow: hidden;
}
.byf-emo-bar__fill {
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.byf-emo-bar__count {
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.48);
  width: 22px;
  flex-shrink: 0;
}

/* Notes in mental section */
.byf-mental-notes {
  padding-top: 14px;
  border-top: 1px solid rgba(120, 112, 168, 0.06);
}
.byf-mental-notes .byf-noteitem--v2 {
  border-left: 2px solid rgba(111, 99, 246, 0.15);
  padding-left: 10px;
  margin-bottom: 10px;
}
.byf-mental-notes .byf-noteitem--v2 .byf-mini strong {
  color: rgba(111, 99, 246, 0.5);
  font-size: 0.62rem;
}
.byf-mental-notes .byf-noteitem-text {
  font-size: 0.72rem;
  color: rgba(20, 19, 26, 0.58);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Year in Pixels Modal --- */
.byf-yip-modal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: none;
  align-items: center;
  justify-content: center;
}
.byf-yip-modal[aria-hidden="false"] {
  display: flex;
}
.byf-yip-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 19, 26, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.byf-yip-modal__card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 20px;
  width: auto;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(20, 19, 26, 0.12);
  animation: byfMsUp 0.3s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.byf-yip-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(120, 112, 168, 0.06);
  flex-shrink: 0;
}
.byf-yip-modal__title {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.65);
  display: flex;
  align-items: center;
  gap: 6px;
}
.byf-yip-modal__close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(247, 246, 251, 0.5) !important;
  border: none;
  font-size: 16px;
  color: rgba(20, 19, 26, 0.4);
  cursor: pointer;
}
.byf-yip-modal__body {
  overflow: auto;
  padding: 16px 18px 18px;
  -webkit-overflow-scrolling: touch;
}

/* Grid: months as columns (landscape), days as rows */
.byf-yip-modal__grid {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.byf-yip-modal__month {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.byf-yip-modal__mth {
  font-size: 0.68rem;
  font-weight: 800;
  color: rgba(20, 19, 26, 0.6);
  text-transform: uppercase;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.byf-yip-modal__days {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.byf-yip-modal__px {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: rgba(220, 225, 235, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  position: relative;
}
@media (max-width: 600px) {
  .byf-yip-modal__px {
    width: 24px;
    height: 24px;
    border-radius: 5px;
  }
  .byf-yip-modal__mth {
    font-size: 0.58rem;
  }
}
.byf-yip-modal__px span {
  font-size: 0.58rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.3);
  pointer-events: none;
}
.byf-yip-modal__px:not(.is-blank):not(.is-future) span {
  color: rgba(20, 19, 26, 0.5);
}
.byf-yip-modal__px:hover {
  transform: scale(1.25);
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
.byf-yip-modal__px.is-blank {
  background: rgba(220, 225, 235, 0.07);
}
.byf-yip-modal__px.is-future {
  background: rgba(220, 225, 235, 0.04);
  cursor: default;
}
.byf-yip-modal__px.is-future span {
  color: rgba(20, 19, 26, 0.12);
}

/* YiP Tooltip */
.byf-yip-tip {
  position: fixed;
  z-index: 99999;
  background: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 4px 20px rgba(20, 19, 26, 0.1);
  border: 1px solid rgba(120, 112, 168, 0.06);
  max-width: 240px;
  pointer-events: none;
}
.byf-yip-tip__date {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.4);
  margin-bottom: 2px;
}
.byf-yip-tip__emo {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.7);
  margin-bottom: 4px;
}
.byf-yip-tip__note {
  font-size: 0.65rem;
  color: rgba(20, 19, 26, 0.5);
  line-height: 1.4;
  font-style: italic;
}

.byf-yip-modal__legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 0 0;
  border-top: 1px solid rgba(120, 112, 168, 0.05);
  margin-top: 10px;
}

/* Grid */
.byf-yip-modal__grid {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
  .byf-yip-modal__grid {
    gap: 3px;
  }
}

/* All Notes modal */
.byf-notes-modal__card {
  width: 540px;
  max-width: 95vw;
}
.byf-notes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.byf-notes-list .byf-noteitem--src {
  margin: 0;
  border-left: 2px solid rgba(111, 99, 246, 0.15);
  padding: 4px 0 4px 10px;
}
.byf-notes-list .byf-noteitem-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.byf-notes-list .byf-noteitem-head .byf-mini strong {
  color: rgba(111, 99, 246, 0.5);
  font-size: 0.62rem;
}
.byf-notes-list .byf-noteitem-text {
  font-size: 0.78rem;
  color: rgba(20, 19, 26, 0.72);
  line-height: 1.5;
  white-space: normal;
}
.byf-note-src {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 6px;
  margin-top: 4px;
}
.byf-note-src.is-daily {
  background: rgba(111, 99, 246, 0.10);
  color: rgba(111, 99, 246, 0.85);
}
.byf-note-src.is-izazov {
  background: rgba(232, 120, 102, 0.12);
  color: rgba(196, 89, 73, 0.95);
}
.byf-note-src.is-ponos {
  background: rgba(60, 165, 192, 0.12);
  color: rgba(40, 130, 155, 0.95);
}
/* Color the left border to match source */
.byf-notes-list .byf-noteitem--src:has(.is-izazov) {
  border-left-color: rgba(232, 120, 102, 0.30);
}
.byf-notes-list .byf-noteitem--src:has(.is-ponos) {
  border-left-color: rgba(60, 165, 192, 0.30);
}
.byf-dcard__link--btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.byf-dcard__link--btn:hover {
  opacity: 0.75;
}

/* Dashboard mental card: 2-col on desktop */
.byf-mental-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 8px;
}
@media (min-width: 860px) {
  .byf-mental-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Health visual cards (cycle + supplements) */
.byf-mental-health {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.byf-health-card {
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(120, 112, 168, 0.06);
  text-decoration: none;
  color: inherit;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.byf-health-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(20, 19, 26, 0.06) !important;
  background: #fff !important;
}
.byf-health-card--empty {
  padding: 12px 16px;
}
.byf-health-card__phase {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.62rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.byf-health-card__main {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.byf-health-card__big {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1a1a2e;
  letter-spacing: -0.02em;
}
.byf-health-card__sub {
  font-size: 0.62rem;
  color: rgba(20, 19, 26, 0.35);
}
.byf-health-card__bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(210, 220, 235, 0.2);
  overflow: hidden;
  margin-bottom: 8px;
}
.byf-health-card__bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.byf-health-card__meta {
  font-size: 0.62rem;
  color: rgba(20, 19, 26, 0.4);
  display: flex;
  align-items: center;
  gap: 4px;
}
.byf-health-card__meta strong {
  font-weight: 700;
  color: rgba(20, 19, 26, 0.6);
}

/* --- Year in Pixels Pill Button --- */
.byf-yip-pill {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(247, 246, 251, 0.5);
  border: 1px solid rgba(120, 112, 168, 0.08);
  color: rgba(20, 19, 26, 0.35);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  transition: all 0.15s ease;
}
.byf-yip-pill:hover {
  background: rgba(111, 99, 246, 0.06);
  color: rgba(111, 99, 246, 0.6);
  border-color: rgba(111, 99, 246, 0.1);
}
.byf-yip-pill svg {
  width: 10px;
  height: 10px;
}

/* --- Health Card link reset --- */
.byf-health-card,
.byf-health-card:hover,
.byf-health-card:focus,
.byf-health-card:visited {
  text-decoration: none !important;
}
.byf-health-card__meta a,
.byf-health-card__meta a:hover {
  text-decoration: none !important;
}

/* --- Daily Quote --- */
.byf-daily-quote {
  padding: 20px 20px 18px;
  text-align: center;
}
.byf-daily-quote__label {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(111, 99, 246, 0.3);
  margin-bottom: 8px;
}
.byf-daily-quote__text {
  margin: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1.55;
  color: rgb(20 19 26 / 55%);
  letter-spacing: -0.01em;
}
@media (max-width: 600px) {
  .byf-daily-quote__text {
    font-size: 0.95rem;
  }
}

/* --- Favorites Section --- */
.byf-dcard--favs {
  padding-bottom: 12px;
}
.byf-favs__section {
  margin-top: 12px;
}
.byf-favs__section + .byf-favs__section {
  margin-top: 16px;
}
.byf-favs__label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(20, 19, 26, 0.3);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
  padding-left: 2px;
}
.byf-favs__label svg {
  opacity: 0.5;
}
.byf-favs__scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.byf-favs__scroll::-webkit-scrollbar {
  display: none;
}
.byf-favs__item {
  flex: 0 0 110px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(120, 112, 168, 0.06);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.byf-favs__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(20, 19, 26, 0.06);
}
.byf-favs__img {
  width: 100%;
  height: 80px;
  background-size: cover;
  background-position: center;
  background-color: rgba(120, 112, 168, 0.04);
}
.byf-favs__img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(111, 99, 246, 0.2);
}
.byf-favs__name {
  padding: 7px 8px;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(20, 19, 26, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .byf-favs__item {
    flex: 0 0 100px;
  }
  .byf-favs__img {
    height: 68px;
  }
  .byf-favs__name {
    font-size: 0.58rem;
    padding: 6px 7px;
  }
}

/* --- Milestones Detail Modal --- */
.byf-ms-modal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.byf-ms-modal[aria-hidden="false"] {
  display: flex;
}
.byf-ms-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 19, 26, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.byf-ms-modal__card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 40px rgba(20, 19, 26, 0.1);
  animation: byfMsUp 0.3s cubic-bezier(0.2, 0.9, 0.2, 1);
}
@media (min-width: 600px) {
  .byf-ms-modal {
    align-items: center;
  }
  .byf-ms-modal__card {
    border-radius: 20px;
    max-height: 70vh;
  }
}
@keyframes byfMsUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.byf-ms-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(120, 112, 168, 0.06);
  flex-shrink: 0;
}
.byf-ms-modal__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.7);
  display: flex;
  align-items: center;
  gap: 6px;
}
.byf-ms-modal__close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(247, 246, 251, 0.5) !important;
  border: none;
  font-size: 16px;
  color: rgba(20, 19, 26, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.byf-ms-modal__body {
  overflow-y: auto;
  padding: 12px 20px 20px;
  -webkit-overflow-scrolling: touch;
}
.byf-ms-modal__group {
  margin-bottom: 16px;
}
.byf-ms-modal__group-title {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(20, 19, 26, 0.35);
  padding: 0 0 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(120, 112, 168, 0.05);
}
.byf-ms-modal__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
}
.byf-ms-modal__item + .byf-ms-modal__item {
  border-top: 1px solid rgba(120, 112, 168, 0.04);
}
.byf-ms-modal__item-ico {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(120, 112, 168, 0.06);
  color: rgba(20, 19, 26, 0.3);
}
.byf-ms-modal__item-ico.is-done {
  background: rgba(61, 138, 92, 0.1);
  color: #2d7a4a;
}
.byf-ms-modal__item-body {
  flex: 1;
  min-width: 0;
}
.byf-ms-modal__item-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.7);
}
.byf-ms-modal__item.is-done .byf-ms-modal__item-title {
  color: rgba(20, 19, 26, 0.45);
}
.byf-ms-modal__item-sub {
  font-size: 0.62rem;
  color: rgba(20, 19, 26, 0.38);
  margin-top: 1px;
}
.byf-ms-modal__item-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.byf-ms-modal__item-bar {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(210, 220, 235, 0.25);
  overflow: hidden;
}
.byf-ms-modal__item-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(185, 163, 255, 0.6),
    rgba(111, 99, 246, 0.5)
  );
}
.byf-ms-modal__item-pct {
  font-size: 0.56rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.35);
  white-space: nowrap;
}
.byf-ms-modal__item-check {
  flex-shrink: 0;
  color: #2d7a4a;
  display: flex;
  align-items: center;
  margin-top: 2px;
}

/* "Vidi sve" link button in card head */
.byf-dcard__link {
  margin-left: auto;
  font-size: 0.58rem;
  font-weight: 600;
  color: rgba(20, 19, 26, 0.35);
  background: none !important;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0;
}
.byf-dcard__link:hover {
  color: rgba(111, 99, 246, 0.6) !important;
}

/* ============================================================
   CONTRAST BOOST — stronger text across entire dashboard
   ============================================================ */

/* ── Kcal CTA button ── */
.byf-kcal-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.6rem;
  font-weight: 650;
  color: rgba(111, 99, 246, 0.7);
  background: rgba(111, 99, 246, 0.06);
  border: 1px solid rgba(111, 99, 246, 0.08);
  text-decoration: none;
  transition: all 0.15s ease;
}
.byf-kcal-btn:hover {
  background: rgba(111, 99, 246, 0.1);
  color: rgba(111, 99, 246, 0.85);
}

/* ── Card borders — more visible ── */
.byf-dash-grid .byf-dcard {
  border-color: rgba(120, 112, 168, 0.1);
  box-shadow: 0 2px 10px rgba(20, 19, 26, 0.05);
}

/* ── Accent card: Weight ── */
.byf-dash-grid .byf-dcard--weight {
  background: linear-gradient(
    135deg,
    rgb(243 244 254 / 27%),
    rgba(250, 249, 255, 1)
  );
  border-color: rgb(99 180 246 / 8%);
}
.byf-dcard--weight .byf-wt-meta span {
  font-size: 0.58rem;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgb(240 244 255);
  border: 1px solid rgba(120, 112, 168, 0.15);
  color: rgb(20 19 26 / 70%);
}
.byf-dcard--weight .byf-wt-chartmeta span {
  font-size: 0.6rem;
  padding: 3px 8px;
  border-radius: 6px;
  color: rgba(111, 99, 246, 0.7) !important;
  background: rgba(111, 99, 246, 0.06);
  border: 1px solid rgba(111, 99, 246, 0.08);
}

/* Card titles */
.byf-dash-grid .byf-dcard__title {
  color: rgb(20 19 26 / 82%);
}

/* Card values */
.byf-dash-grid .byf-dcard__val {
  color: #14131a;
}

/* Card descriptions / sub text */
.byf-dash-grid .byf-dcard__desc {
  color: rgba(20, 19, 26, 0.55);
}
.byf-dash-grid .byf-dcard__sub {
  color: rgba(20, 19, 26, 0.55);
}

/* Card badges */
.byf-dash-grid .byf-dcard__badge {
  color: rgba(20, 19, 26, 0.6);
}
.byf-dash-grid .byf-dcard__badge.is-good {
  color: #2d7a4a;
}
.byf-dash-grid .byf-dcard__badge.is-ok {
  color: rgba(111, 99, 246, 0.8);
}

/* Card unit */
.byf-dash-grid .byf-dcard__unit {
  color: rgba(20, 19, 26, 0.55);
}

/* Card row labels (challenges) */
.byf-dash-grid .byf-dcard__row-label {
  color: rgba(20, 19, 26, 0.8);
}
.byf-dash-grid .byf-dcard__row-val {
  color: rgba(20, 19, 26, 0.6);
}
.byf-dash-grid .byf-dcard__row-pct {
  color: rgba(111, 99, 246, 0.8);
}

/* Weight hero */
.byf-dash-grid .byf-wt-hero__label {
  color: rgba(20, 19, 26, 0.6);
}
.byf-dash-grid .byf-wt-hero__delta-val {
  color: rgba(20, 19, 26, 0.85);
}
.byf-dash-grid .byf-wt-hero__delta-sub {
  color: rgba(20, 19, 26, 0.55);
}
.byf-dash-grid .byf-wt-meta {
  color: rgba(20, 19, 26, 0.6);
}

/* Chart meta pills */
.byf-dash-grid .byf-wt-chartmeta span:not(.byf-dot) {
  color: rgba(20, 19, 26, 0.55);
  border-color: rgba(120, 112, 168, 0.08);
}
.byf-dash-grid .byf-wt-chartmeta strong {
  color: rgba(20, 19, 26, 0.72);
}

/* Nudge */
.byf-dash-grid .byf-nudge {
  color: rgba(20, 19, 26, 0.6);
}

/* Monthly bars */
.byf-dash-grid .byf-wt-minicard__title {
  color: rgba(20, 19, 26, 0.55);
}
.byf-dash-grid .byf-wt-bar__val.is-good {
  color: #2a7045;
}
.byf-dash-grid .byf-wt-bar__val.is-warn {
  color: #a22;
}
.byf-dash-grid .byf-wt-bar__label {
  color: rgba(20, 19, 26, 0.5);
}

/* Projection */
.byf-dash-grid .byf-wt-proj__sub {
  color: rgba(20, 19, 26, 0.55);
}
.byf-dash-grid .byf-wt-proj__pace {
  color: rgba(20, 19, 26, 0.55);
}
.byf-dash-grid .byf-wt-proj__pace strong {
  color: rgba(20, 19, 26, 0.72);
}

/* Photo tabs */
.byf-dash-grid .byf-photo-tab {
  font-size: 0.64rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  border: 2px solid rgb(140 130 202 / 15%) !important;
  background: rgba(255, 255, 255, 0.5) !important;
  color: rgb(20 19 26 / 60%) !important;
  cursor: pointer !important;
  transition: all 0.15s ease;
}
.byf-dash-grid .byf-photo-tab.is-active {
  color: rgba(111, 99, 246, 0.85) !important;
  background: rgba(111, 99, 246, 0.06) !important;
  border-color: rgba(111, 99, 246, 0.2) !important;
}

/* Slider */
.byf-dash-grid .byf-slider__angle-btn {
  color: rgba(20, 19, 26, 0.6);
}
.byf-dash-grid .byf-slider__angle-btn.is-active {
  color: rgba(111, 99, 246, 0.9);
}

/* Gallery */
.byf-dash-grid .byf-gallery__current-week {
  color: rgba(20, 19, 26, 0.8);
}
.byf-dash-grid .byf-gallery__current-date {
  color: rgba(20, 19, 26, 0.5);
}
.byf-dash-grid .byf-gallery__chip span {
  color: rgba(20, 19, 26, 0.55);
}

/* Photo side panel */
.byf-dash-grid .byf-photo-side__stat-label {
  color: rgba(20, 19, 26, 0.55);
}
.byf-dash-grid .byf-photo-side__strip-title {
  color: rgba(20, 19, 26, 0.5);
}
.byf-dash-grid .byf-photo-side__vchip-week {
  color: rgba(20, 19, 26, 0.75);
}
.byf-dash-grid .byf-photo-side__vchip-date {
  color: rgba(20, 19, 26, 0.5);
}

/* Calendar */
.byf-dash-grid .byf-minical__nav-label {
  color: rgba(20, 19, 26, 0.75);
}
.byf-dash-grid .byf-minical__head span {
  color: rgba(20, 19, 26, 0.5);
}
.byf-dash-grid .byf-minical__day {
  color: rgba(20, 19, 26, 0.68);
  font-weight: 650;
}
.byf-dash-grid .byf-minical__day.is-ok {
  background: rgba(61, 138, 92, 0.2);
  color: #256b3a;
}
.byf-dash-grid .byf-minical__day.is-partial {
  background: rgba(234, 179, 8, 0.18);
  color: #7a5008;
}
.byf-dash-grid .byf-minical__day.is-miss {
  background: rgba(220, 50, 50, 0.14);
  color: #922;
}
.byf-dash-grid .byf-minical__day.is-none {
  color: rgba(20, 19, 26, 0.42);
}
.byf-dash-grid .byf-minical__day.is-future {
  color: rgba(20, 19, 26, 0.2);
}
.byf-dash-grid .byf-minical__leg {
  color: rgb(20 19 26 / 68%);
}

/* Milestones */
.byf-dash-grid .byf-ms-next--v2 .byf-ms-next-badge {
  color: rgba(111, 99, 246, 0.8);
}
.byf-dash-grid .byf-ms-next--v2 .byf-ms-next-title {
  color: rgba(20, 19, 26, 0.8);
}
.byf-dash-grid .byf-ms-next--v2 .byf-ms-next-sub {
  color: rgba(20, 19, 26, 0.58);
}
.byf-dash-grid .byf-ms-next--v2 .byf-ms-next-hint {
  color: rgba(111, 99, 246, 0.65);
}
/* Milestone badges — compact */
.byf-dash-grid .byf-ms-badge {
  padding: 4px 8px;
  font-size: 0.62rem;
}
.byf-dash-grid .byf-ms-badge-icon {
  font-size: 14px;
}

/* Weekly summary */
.byf-dash-grid .byf-wk-signal-label {
  font-size: 0.72rem;
  color: rgba(20, 19, 26, 0.58);
}
.byf-dash-grid .byf-wk-signal-val {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(20, 19, 26, 0.78);
}
.byf-dash-grid .byf-wk-stat {
  font-size: 0.72rem;
  color: rgba(20, 19, 26, 0.58);
}
.byf-dash-grid .byf-wk-stat strong {
  font-size: 0.78rem;
  color: rgba(20, 19, 26, 0.78);
}

/* Notes */
.byf-dash-grid .byf-noteitem--v2 {
  border-left-color: rgba(111, 99, 246, 0.25);
}
.byf-dash-grid .byf-note-date {
  color: rgba(111, 99, 246, 0.65);
}
.byf-dash-grid .byf-note-text {
  color: rgba(20, 19, 26, 0.65);
}

/* Tools grid links */
.byf-dash-grid .byf-tool-link__label {
  color: rgba(20, 19, 26, 0.7);
}
.byf-dash-grid .byf-plink__label {
  color: rgba(20, 19, 26, 0.7);
}
.byf-dash-grid .byf-plink__sub {
  color: rgba(20, 19, 26, 0.5);
}

/* Reliability CTA */
.byf-dash-grid .byf-wt-rel-cta {
  color: rgba(20, 19, 26, 0.55);
}

/* Progress bars — stronger */
.byf-dash-grid .byf-dcard__bar i {
  background: linear-gradient(
    90deg,
    rgba(185, 163, 255, 0.75),
    rgba(111, 99, 246, 0.65)
  );
}

/* Favs labels */
.byf-dash-grid .byf-favs__label {
  color: rgba(20, 19, 26, 0.4);
}
.byf-dash-grid .byf-favs__name {
  color: rgba(20, 19, 26, 0.65);
}
.byf-dash-grid .byf-favs__item {
  border-color: rgba(120, 112, 168, 0.1);
}

/* Mobile: single column for calendar/milestones/weekly */
@media (max-width: 600px) {
  .byf-dcard--cal,
  .byf-dcard--ms,
  .byf-dcard--weekly {
    grid-column: 1 / -1;
  }
}

/* ── Obimi tela (nedeljni log forma) ── */
.byf-obim-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.byf-obim-field .inp {
  text-align: center;
}
@media (max-width: 480px) {
  .byf-obimi-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Obimi tela – dashboard kartica ── */

/* Empty state */
.byf-obi-empty {
  text-align: center;
  padding: 28px 16px 20px;
}
.byf-obi-empty__ico {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(111,99,246,0.08), rgba(185,163,255,0.06));
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.byf-obi-empty__title {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: rgba(20,19,26,0.3); margin-bottom: 8px;
}
.byf-obi-empty__text {
  font-size: 13px; color: #6b7280; line-height: 1.5; max-width: 340px; margin: 0 auto 14px;
}
.byf-obi-empty__btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: #7c3aed;
  padding: 6px 14px; border-radius: 8px;
  background: rgba(111,99,246,0.06); text-decoration: none;
  transition: background 0.15s;
}
.byf-obi-empty__btn:hover { background: rgba(111,99,246,0.1); }

/* Hero section – mirrors weight card hero */
.byf-obi-hero {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 12px; margin-bottom: 2px;
  border-bottom: 1px solid rgba(120,112,168,0.06);
}
.byf-obi-hero__label {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: rgba(20,19,26,0.25); margin-bottom: 4px;
}
.byf-obi-hero__total {
  font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em;
}
.byf-obi-hero__total.is-down { color: #3d8a5c; }
.byf-obi-hero__total.is-up { color: #b44; }
.byf-obi-hero__total.is-neutral { color: rgba(20,19,26,0.35); font-size: 0.75rem; font-weight: 600; }
.byf-obi-hero__meta {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
}
.byf-obi-hero__meta span {
  font-size: 0.58rem; font-weight: 600; padding: 2px 7px; border-radius: 5px;
  background: rgba(247,246,251,0.5); border: 1px solid rgba(120,112,168,0.15);
  color: rgba(20,19,26,0.25); white-space: nowrap;
}

/* Body layout: silueta + sparkline kartice */
.byf-obi-body-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-top: 16px; align-items: start;
}
/* Silueta */
.byf-obi-silhouette {
  display: flex; justify-content: center; padding: 8px 0;
}
.byf-obi-figure {
  position: relative; width: 110px; margin: 0 auto;
}
.byf-obi-figure__img {
  width: 100%; height: auto; display: block; opacity: 0.7;
}
/* Markeri pored siluete */
.byf-obi-marker {
  position: absolute; white-space: nowrap;
}
.byf-obi-marker--left { text-align: right; }
.byf-obi-marker--right { text-align: left; }
.byf-obi-marker__val {
  font-size: 12px; font-weight: 700; color: #1a1a2e; line-height: 1.2;
}
.byf-obi-marker__val span {
  font-size: 9px; font-weight: 600; color: rgba(20,19,26,0.25);
}
.byf-obi-marker__label {
  font-size: 9px; font-weight: 600; color: rgba(20,19,26,0.3);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.byf-obi-marker__delta {
  font-size: 9px; font-weight: 700; margin-left: 3px;
  padding: 0 3px; border-radius: 3px;
}
.byf-obi-marker__delta.is-down { color: #3d8a5c; background: rgba(61,138,92,0.08); }
.byf-obi-marker__delta.is-up { color: #b44; background: rgba(200,50,50,0.06); }
/* Sparkline kartice desno */
.byf-obi-sparks {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* Metric grid fallback */
.byf-obi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 12px;
}
.byf-obi-metric {
  background: rgba(247,246,251,0.45);
  border: 1px solid rgba(120,112,168,0.06);
  border-radius: 12px; padding: 12px 12px 8px; overflow: hidden;
}
.byf-obi-metric__top {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px;
}
.byf-obi-metric__label {
  font-size: 0.55rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: rgba(20,19,26,0.3);
}
.byf-obi-metric__delta {
  font-size: 0.55rem; font-weight: 700; padding: 1px 5px; border-radius: 4px;
}
.byf-obi-metric__delta.is-down {
  color: #3d8a5c; background: rgba(61,138,92,0.06);
}
.byf-obi-metric__delta.is-up {
  color: #b44; background: rgba(200,50,50,0.05);
}
.byf-obi-metric__val {
  font-size: 1.15rem; font-weight: 700; color: #1a1a2e; letter-spacing: -0.03em;
  line-height: 1.2;
}
.byf-obi-metric__val span {
  font-size: 0.6rem; font-weight: 600; color: rgba(20,19,26,0.2); margin-left: 1px;
}
.byf-obi-metric .byf-sparkline {
  height: 28px; margin: 6px -12px -8px; display: block;
}

/* Details / history table */
.byf-obi-details {
  margin-top: 12px; border-top: 1px solid rgba(120,112,168,0.06); padding-top: 10px;
}
.byf-obi-details__toggle {
  font-size: 0.65rem; font-weight: 600; color: rgba(111,99,246,0.6);
  cursor: pointer; user-select: none; list-style: none;
  display: flex; align-items: center; gap: 5px;
}
.byf-obi-details__toggle::-webkit-details-marker { display: none; }
.byf-obi-details[open] .byf-obi-details__toggle svg { transform: rotate(90deg); }
.byf-obi-tbl-wrap {
  overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch;
}
/* Nedelja kartice */
.byf-obi-week {
  background: #fff;
  border: 1px solid rgba(120,112,168,0.06);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 8px;
}
.byf-obi-week__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.byf-obi-week__label {
  font-size: 13px; font-weight: 700; color: #1a1a2e;
}
.byf-obi-week__now {
  font-size: 10px; font-weight: 600; color: rgba(111,99,246,0.6);
  background: rgba(111,99,246,0.06); padding: 1px 6px; border-radius: 4px;
  margin-left: 6px; vertical-align: middle;
}
.byf-obi-week__date {
  font-size: 11px; font-weight: 500; color: rgba(20,19,26,0.25);
}
.byf-obi-week__pills {
  display: flex; flex-wrap: wrap; gap: 6px;
}
/* Delta kartica */
.byf-obi-week--delta {
  background: linear-gradient(135deg, rgba(247,246,251,0.8), rgba(253,247,250,0.6));
  border: 1px solid rgba(120,112,168,0.1);
}
.byf-obi-week--delta .byf-obi-week__label {
  font-size: 12px; font-weight: 800; color: #7c3aed;
}
/* Poslednje merenje */
.byf-obi-week--latest {
  border-color: rgba(111,99,246,0.12);
  box-shadow: 0 1px 6px rgba(111,99,246,0.06);
}
/* Pills */
.byf-obi-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 8px;
  background: rgba(247,246,251,0.5);
  border: 1px solid rgba(120,112,168,0.08);
}
.byf-obi-pill__label {
  font-size: 10px; font-weight: 600; color: rgba(20,19,26,0.3);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.byf-obi-pill__val {
  font-size: 12.5px; font-weight: 700; color: #1a1a2e;
  font-variant-numeric: tabular-nums;
}
/* Delta pill varijante */
.byf-obi-pill.is-down {
  background: rgba(61,138,92,0.06); border-color: rgba(61,138,92,0.1);
}
.byf-obi-pill.is-down .byf-obi-pill__val { color: #3d8a5c; }
.byf-obi-pill.is-down .byf-obi-pill__label { color: rgba(61,138,92,0.5); }
.byf-obi-pill.is-up {
  background: rgba(200,50,50,0.04); border-color: rgba(200,50,50,0.08);
}
.byf-obi-pill.is-up .byf-obi-pill__val { color: #b44; }
.byf-obi-pill.is-up .byf-obi-pill__label { color: rgba(200,50,50,0.45); }
.byf-obi-pill.is-flat {
  background: rgba(20,19,26,0.02); border-color: rgba(20,19,26,0.05);
}
.byf-obi-pill.is-flat .byf-obi-pill__val { color: rgba(20,19,26,0.25); }

@media (max-width: 860px) {
  .byf-obi-body-layout {
    grid-template-columns: 1fr;
  }
  .byf-obi-silhouette {
    order: -1;
  }
  .byf-obi-figure { width: 120px; }
  .byf-obi-sparks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .byf-obi-grid { grid-template-columns: repeat(2, 1fr); }
  .byf-obi-sparks { grid-template-columns: 1fr; }
  .byf-obi-hero { flex-direction: column; gap: 8px; }
  .byf-obi-hero__meta { justify-content: flex-start; }
}