/*
 * Biometeo i polen — v5 „Vedrina 2" (VojvodinaMeteo)
 * Nebo plavo-indigo, meke staklene kartice, prstenasti indikatori.
 * Sav stil je ograničen na #vm-bio-root.vm-bp (stari .vm-bio-* slojevi iz vm-styles.css
 * se više ne primenjuju). Handle: vm-biometeo-design (blokirajući, data-no-optimize).
 */

/* ── Tokeni ─────────────────────────────────────────────────────────────── */
#vm-bio-root.vm-bp {
	--bp-ink: #0f172a;
	--bp-muted: #475569;
	--bp-soft: #64748b;
	--bp-line: rgba(148, 163, 184, .32);
	--bp-card: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
	--bp-card-solid: #ffffff;
	--bp-card-border: #e0e7ff;
	--bp-tint: #f5f8ff;
	--bp-chip: #f1f5f9;
	--bp-track: #e2e8f0;
	--bp-accent: #3b82f6;
	--bp-accent-2: #6366f1;
	--bp-accent-ink: #1d4ed8;
	--bp-grad: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
	--bp-sky: radial-gradient(120% 90% at 100% 0%, rgba(253, 230, 138, .55) 0%, rgba(253, 230, 138, 0) 42%), radial-gradient(90% 80% at 0% 100%, rgba(196, 181, 253, .45) 0%, rgba(196, 181, 253, 0) 55%), linear-gradient(160deg, #e0f2fe 0%, #eef2ff 55%, #f5f3ff 100%);
	--bp-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -18px rgba(37, 99, 235, .35);
	--bp-l1: #16a34a;
	--bp-l2: #d97706;
	--bp-l3: #dc2626;
	--bp-radius: 24px;
	color: var(--bp-ink);
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin: 6px 0 44px;
	line-height: 1.55;
	font-size: 1rem;
}
[data-theme="dark"] #vm-bio-root.vm-bp {
	--bp-ink: #e2e8f0;
	--bp-muted: #cbd5e1;
	--bp-soft: #94a3b8;
	--bp-line: rgba(148, 163, 184, .2);
	--bp-card: linear-gradient(180deg, #111a2e 0%, #0f172a 100%);
	--bp-card-solid: #0f172a;
	--bp-card-border: rgba(129, 140, 248, .22);
	--bp-tint: rgba(30, 41, 59, .7);
	--bp-chip: rgba(51, 65, 85, .55);
	--bp-track: rgba(71, 85, 105, .55);
	--bp-accent: #60a5fa;
	--bp-accent-2: #818cf8;
	--bp-accent-ink: #93c5fd;
	--bp-sky: radial-gradient(120% 90% at 100% 0%, rgba(99, 102, 241, .35) 0%, rgba(99, 102, 241, 0) 45%), radial-gradient(90% 80% at 0% 100%, rgba(14, 165, 233, .22) 0%, rgba(14, 165, 233, 0) 55%), linear-gradient(160deg, #0f172a 0%, #172554 55%, #1e1b4b 100%);
	--bp-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -22px rgba(0, 0, 0, .7);
	--bp-l1: #4ade80;
	--bp-l2: #fbbf24;
	--bp-l3: #f87171;
}

#vm-bio-root.vm-bp *, #vm-bio-root.vm-bp *::before, #vm-bio-root.vm-bp *::after { box-sizing: border-box; }
#vm-bio-root.vm-bp p { margin: 0; text-align: left; }
#vm-bio-root.vm-bp h1, #vm-bio-root.vm-bp h2, #vm-bio-root.vm-bp h3 { margin: 0; color: var(--bp-ink); letter-spacing: -.01em; }
#vm-bio-root.vm-bp svg { flex: none; }
#vm-bio-root .vm-bp-num { font-variant-numeric: tabular-nums; }
#vm-bio-root .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#vm-bio-root > .vm-promo-slot { margin: 0; }

/* Dan: sve vrednosti po danu su u .vm-bp-dd, vidljiv je samo izabrani. */
#vm-bio-root[data-day="0"] .vm-bp-dd:not([data-d="0"]),
#vm-bio-root[data-day="1"] .vm-bp-dd:not([data-d="1"]),
#vm-bio-root[data-day="2"] .vm-bp-dd:not([data-d="2"]) { display: none !important; }

/* Boje nivoa (lica, akcenti). */
#vm-bio-root .vm-bp-lvl1 { --lvl: #22c55e; --lvl-ink: var(--bp-l1); }
#vm-bio-root .vm-bp-lvl2 { --lvl: #f59e0b; --lvl-ink: var(--bp-l2); }
#vm-bio-root .vm-bp-lvl3 { --lvl: #ef4444; --lvl-ink: var(--bp-l3); }
#vm-bio-root .vm-bp-lvl0 { --lvl: #94a3b8; --lvl-ink: var(--bp-soft); }

/* ── Zaglavlje ──────────────────────────────────────────────────────────── */
#vm-bio-root .vm-bp-head { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
#vm-bio-root .vm-bp-eyebrow {
	align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 13px; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .02em;
	color: var(--bp-accent-ink); background: linear-gradient(var(--bp-card-solid), var(--bp-card-solid)) padding-box, var(--bp-grad) border-box; border: 1.5px solid transparent;
}
#vm-bio-root .vm-bp-h1 { font-size: clamp(1.75rem, 4.2vw, 2.55rem); line-height: 1.12; font-weight: 800; }
#vm-bio-root .vm-bp-lead { color: var(--bp-muted); font-size: 1.04rem; max-width: 62ch; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
#vm-bio-root .vm-bp-hero {
	position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 18px;
	padding: 18px; border-radius: 30px; background: var(--bp-sky);
	border: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--bp-shadow);
}
[data-theme="dark"] #vm-bio-root .vm-bp-hero { border-color: rgba(129, 140, 248, .25); }
#vm-bio-root .vm-bp-hero::before, #vm-bio-root .vm-bp-hero::after {
	content: ""; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(2px);
}
#vm-bio-root .vm-bp-hero::before { width: 220px; height: 220px; right: -60px; top: -80px; background: radial-gradient(circle, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); }
#vm-bio-root .vm-bp-hero::after { width: 260px; height: 120px; left: -40px; bottom: -50px; background: radial-gradient(ellipse, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 70%); }
[data-theme="dark"] #vm-bio-root .vm-bp-hero::before { background: radial-gradient(circle, rgba(165, 180, 252, .28), rgba(165, 180, 252, 0) 70%); }
[data-theme="dark"] #vm-bio-root .vm-bp-hero::after { background: radial-gradient(ellipse, rgba(56, 189, 248, .16), rgba(56, 189, 248, 0) 70%); }
#vm-bio-root .vm-bp-hero > * { position: relative; z-index: 1; }
#vm-bio-root .vm-bp-hero--empty { min-height: 140px; justify-content: center; }
#vm-bio-root .vm-bp-hero__empty { color: var(--bp-muted); font-weight: 600; }

#vm-bio-root .vm-bp-days-toggle {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; padding: 6px;
	border-radius: 20px; background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
[data-theme="dark"] #vm-bio-root .vm-bp-days-toggle { background: rgba(15, 23, 42, .5); border-color: rgba(148, 163, 184, .18); }
#vm-bio-root button.vm-bp-daybtn {
	appearance: none; -webkit-appearance: none; display: flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 54px; padding: 8px 10px; margin: 0; border: 0; border-radius: 15px; background: transparent;
	color: var(--bp-ink); font: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none;
	transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
#vm-bio-root button.vm-bp-daybtn:hover { background: rgba(255, 255, 255, .6); }
[data-theme="dark"] #vm-bio-root button.vm-bp-daybtn:hover { background: rgba(51, 65, 85, .5); }
#vm-bio-root button.vm-bp-daybtn[aria-pressed="true"] { background: var(--bp-card-solid); box-shadow: 0 8px 20px -10px rgba(37, 99, 235, .55); }
[data-theme="dark"] #vm-bio-root button.vm-bp-daybtn[aria-pressed="true"] { background: #1e293b; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(129, 140, 248, .35); }
#vm-bio-root button.vm-bp-daybtn:disabled { opacity: .45; cursor: not-allowed; }
#vm-bio-root .vm-bp-daybtn__face { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; color: var(--lvl-ink); background: color-mix(in srgb, var(--lvl) 18%, transparent); }
#vm-bio-root .vm-bp-daybtn__txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
#vm-bio-root .vm-bp-daybtn__txt b { font-size: .98rem; font-weight: 800; }
#vm-bio-root .vm-bp-daybtn__txt small { font-size: .76rem; color: var(--bp-soft); font-weight: 600; }

#vm-bio-root .vm-bp-hero__day { display: flex; flex-direction: column; gap: 14px; padding: 4px 6px 0; }
#vm-bio-root .vm-bp-hero__kicker { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-accent-ink); }
#vm-bio-root .vm-bp-hero__headline { font-size: clamp(1.12rem, 2.3vw, 1.4rem); font-weight: 800; line-height: 1.3; max-width: 46ch; }
#vm-bio-root .vm-bp-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#vm-bio-root .vm-bp-ringbox {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
	padding: 16px 10px 14px; border-radius: 22px; background: rgba(255, 255, 255, .62);
	border: 1px solid rgba(255, 255, 255, .85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
[data-theme="dark"] #vm-bio-root .vm-bp-ringbox { background: rgba(15, 23, 42, .55); border-color: rgba(148, 163, 184, .16); }
#vm-bio-root .vm-bp-ring { position: relative; display: inline-block; width: 116px; height: 116px; margin-bottom: 8px; }
#vm-bio-root .vm-bp-ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#vm-bio-root .vm-bp-ring__track { fill: none; stroke: var(--bp-track); stroke-width: 11; }
#vm-bio-root .vm-bp-ring__val { fill: none; stroke-width: 11; stroke-linecap: round; filter: drop-shadow(0 2px 6px rgba(15, 23, 42, .12)); }
#vm-bio-root .vm-bp-ring__in { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#vm-bio-root .vm-bp-ring__face { color: var(--lvl-ink); display: inline-flex; }
#vm-bio-root .vm-bp-ring__icon { color: var(--bp-l1); display: inline-flex; }
#vm-bio-root .vm-bp-ring__num { font-size: 2.3rem; font-weight: 700; line-height: 1; color: var(--bp-ink); font-variant-numeric: tabular-nums; }
#vm-bio-root .vm-bp-ringbox__t { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--bp-soft); }
#vm-bio-root .vm-bp-ringbox__v { font-size: 1.04rem; font-weight: 800; line-height: 1.25; }
#vm-bio-root .vm-bp-ringbox__s { font-size: .76rem; color: var(--bp-soft); }
#vm-bio-root .vm-bp-hero__advice {
	padding: 13px 16px; border-radius: 18px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .85);
	color: var(--bp-muted); font-size: .97rem;
}
[data-theme="dark"] #vm-bio-root .vm-bp-hero__advice { background: rgba(15, 23, 42, .5); border-color: rgba(148, 163, 184, .16); }
#vm-bio-root .vm-bp-hero__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 0 6px 2px; font-size: .84rem; color: var(--bp-soft); }
#vm-bio-root .vm-bp-hero__updated { display: inline-flex; align-items: center; gap: 6px; }
#vm-bio-root .vm-bp-status { font-size: .86rem; font-weight: 600; color: var(--bp-muted); }
#vm-bio-root .vm-bp-status:empty { display: none; }
#vm-bio-root button.vm-bp-reload {
	appearance: none; display: inline-flex; align-items: center; margin: 0 2px; padding: 4px 12px; border: 0; border-radius: 999px;
	background: var(--bp-grad); color: #fff; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; text-transform: none; letter-spacing: 0;
}

/* ── Navigacija po stranici ─────────────────────────────────────────────── */
#vm-bio-root .vm-bp-jump { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin-top: -6px; }
#vm-bio-root .vm-bp-jump::-webkit-scrollbar { display: none; }
#vm-bio-root .vm-bp-jump a {
	flex: none; padding: 7px 14px; border-radius: 999px; background: var(--bp-chip); color: var(--bp-muted) !important;
	font-size: .84rem; font-weight: 700; text-decoration: none !important; border: 1px solid transparent !important; transition: border-color .15s, color .15s;
}
#vm-bio-root .vm-bp-jump a:hover, #vm-bio-root .vm-bp-jump a:focus-visible { color: var(--bp-accent-ink) !important; border-color: var(--bp-accent) !important; }

/* ── Kartice ────────────────────────────────────────────────────────────── */
#vm-bio-root .vm-bp-card {
	display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; border-radius: var(--bp-radius);
	background: var(--bp-card); border: 1px solid var(--bp-card-border); box-shadow: var(--bp-shadow);
}
#vm-bio-root .vm-bp-card__head { display: flex; align-items: flex-start; gap: 14px; }
#vm-bio-root .vm-bp-card__head > div { flex: 1; min-width: 0; }
#vm-bio-root .vm-bp-card__icon {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 15px;
	color: var(--bp-accent-ink); background: linear-gradient(135deg, rgba(59, 130, 246, .16), rgba(99, 102, 241, .2));
}
#vm-bio-root .vm-bp-card__icon--you { color: #7c3aed; background: linear-gradient(135deg, rgba(167, 139, 250, .22), rgba(244, 114, 182, .18)); }
#vm-bio-root .vm-bp-card__icon--time { color: #d97706; background: linear-gradient(135deg, rgba(253, 224, 71, .28), rgba(251, 146, 60, .18)); }
#vm-bio-root .vm-bp-card__icon--bio { color: #e11d48; background: linear-gradient(135deg, rgba(251, 113, 133, .2), rgba(244, 63, 94, .12)); }
#vm-bio-root .vm-bp-card__icon--pollen { color: #16a34a; background: linear-gradient(135deg, rgba(134, 239, 172, .3), rgba(34, 197, 94, .14)); }
#vm-bio-root .vm-bp-card__icon--season { color: #7c3aed; background: linear-gradient(135deg, rgba(196, 181, 253, .32), rgba(129, 140, 248, .16)); }
#vm-bio-root .vm-bp-card__icon--dress { color: #0284c7; background: linear-gradient(135deg, rgba(125, 211, 252, .3), rgba(59, 130, 246, .14)); }
#vm-bio-root .vm-bp-h2 { font-size: clamp(1.14rem, 2.2vw, 1.34rem); line-height: 1.25; font-weight: 800; }
#vm-bio-root .vm-bp-card__sub { margin-top: 3px; color: var(--bp-soft); font-size: .92rem; }
#vm-bio-root .vm-bp-note { color: var(--bp-soft); font-size: .86rem; }
#vm-bio-root .vm-bp-note a, #vm-bio-root .vm-bp-card__sub a { color: var(--bp-accent-ink); }
#vm-bio-root .vm-bp-empty { color: var(--bp-muted); padding: 14px 16px; border-radius: 16px; background: var(--bp-tint); }
#vm-bio-root .vm-bp-pill {
	flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
	background: var(--bp-card-solid); border: 1px solid var(--bp-line); font-size: .8rem; font-weight: 700; color: var(--bp-muted); white-space: nowrap;
}
#vm-bio-root .vm-bp-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bp-grad); }
[data-theme="dark"] #vm-bio-root .vm-bp-pill { background: rgba(30, 41, 59, .8); }

/* ── Za vas danas ───────────────────────────────────────────────────────── */
#vm-bio-root .vm-bp-profile__pick { display: flex; flex-direction: column; gap: 12px; }
#vm-bio-root .vm-bp-chipset { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#vm-bio-root .vm-bp-chipset__t { width: 100%; font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--bp-soft); }
#vm-bio-root button.vm-bp-chip {
	appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 7px; margin: 0; min-height: 40px;
	padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--bp-line); background: var(--bp-card-solid);
	color: var(--bp-ink); font: inherit; font-size: .9rem; font-weight: 700; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
[data-theme="dark"] #vm-bio-root button.vm-bp-chip { background: rgba(30, 41, 59, .7); }
#vm-bio-root button.vm-bp-chip:hover { border-color: var(--bp-accent); }
#vm-bio-root button.vm-bp-chip svg { color: var(--bp-accent); }
#vm-bio-root button.vm-bp-chip--pollen svg { color: #16a34a; }
#vm-bio-root button.vm-bp-chip[aria-pressed="true"] { background: var(--bp-grad); border-color: transparent; color: #fff; }
#vm-bio-root button.vm-bp-chip--pollen[aria-pressed="true"] { background: linear-gradient(135deg, #22c55e, #0d9488); }
#vm-bio-root button.vm-bp-chip[aria-pressed="true"] svg { color: #fff; }
#vm-bio-root .vm-bp-profile__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
#vm-bio-root .vm-bp-select { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 700; color: var(--bp-muted); }
#vm-bio-root .vm-bp-select > span { white-space: nowrap; }
#vm-bio-root .vm-bp-select select { width: auto; max-width: 100%; margin: 0; }
#vm-bio-root .vm-bp-select select {
	min-height: 40px; padding: 6px 34px 6px 12px; border-radius: 12px; border: 1.5px solid var(--bp-line);
	background-color: var(--bp-card-solid); color: var(--bp-ink); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
}
#vm-bio-root .vm-bp-select select:disabled { opacity: .55; cursor: not-allowed; }
[data-theme="dark"] #vm-bio-root .vm-bp-select select { background-color: #1e293b; }
#vm-bio-root .vm-bp-select--sm { flex: none; align-self: center; }
#vm-bio-root button.vm-bp-linkbtn { appearance: none; border: 0; background: none; padding: 4px 2px; color: var(--bp-accent-ink); font: inherit; font-size: .86rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-transform: none; letter-spacing: 0; box-shadow: none; }
#vm-bio-root .vm-bp-profile__out { min-height: 110px; padding: 16px; border-radius: 18px; background: var(--bp-tint); border: 1px dashed var(--bp-card-border); }
#vm-bio-root .vm-bp-profile__prompt { display: flex; align-items: flex-start; gap: 10px; color: var(--bp-muted); font-weight: 600; }
#vm-bio-root .vm-bp-profile__prompt svg { color: #7c3aed; margin-top: 2px; }
#vm-bio-root .vm-bp-you__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#vm-bio-root .vm-bp-you__top > div { display: flex; flex-direction: column; gap: 1px; }
#vm-bio-root .vm-bp-you__top small { font-size: .78rem; color: var(--bp-soft); font-weight: 700; }
#vm-bio-root .vm-bp-you__top b { font-size: 1.08rem; font-weight: 800; }
#vm-bio-root .vm-bp-you__face { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; color: var(--lvl-ink); background: color-mix(in srgb, var(--lvl) 18%, var(--bp-card-solid)); }
#vm-bio-root .vm-bp-you__win { font-size: .9rem; color: var(--bp-muted); }
#vm-bio-root .vm-bp-you__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#vm-bio-root .vm-bp-you__item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bp-card-solid); border: 1px solid var(--bp-line); font-size: .93rem; color: var(--bp-muted); }
[data-theme="dark"] #vm-bio-root .vm-bp-you__item { background: rgba(15, 23, 42, .6); }
#vm-bio-root .vm-bp-you__item b { color: var(--bp-ink); }
#vm-bio-root .vm-bp-you__ic { flex: none; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; color: #fff; background: #94a3b8; }
#vm-bio-root .vm-bp-you__item--ok .vm-bp-you__ic { background: #22c55e; }
#vm-bio-root .vm-bp-you__item--info .vm-bp-you__ic { background: #3b82f6; }
#vm-bio-root .vm-bp-you__item--warn .vm-bp-you__ic { background: #f59e0b; }
#vm-bio-root .vm-bp-you__item--alert .vm-bp-you__ic { background: #ef4444; }

/* Grupe iz profila se ističu u biometeo karticama. */
#vm-bio-root.vm-bp-g-kardiovaskularni .vm-bp-gchip[data-g="kardiovaskularni"],
#vm-bio-root.vm-bp-g-respiratorni .vm-bp-gchip[data-g="respiratorni"],
#vm-bio-root.vm-bp-g-reumatski .vm-bp-gchip[data-g="reumatski"],
#vm-bio-root.vm-bp-g-neuroloski .vm-bp-gchip[data-g="neuroloski"],
#vm-bio-root.vm-bp-g-koza .vm-bp-gchip[data-g="koza"],
#vm-bio-root.vm-bp-g-stariji .vm-bp-gchip[data-g="stariji"] { background: var(--bp-grad); color: #fff !important; border-color: transparent; box-shadow: 0 4px 12px -6px rgba(79, 70, 229, .7); }

/* ── Najbolje vreme napolju ─────────────────────────────────────────────── */
#vm-bio-root .vm-bp-tl__day { display: flex; flex-direction: column; gap: 12px; }
#vm-bio-root .vm-bp-tl__summary { display: flex; flex-wrap: wrap; gap: 8px; min-height: 36px; }
#vm-bio-root .vm-bp-tl__best, #vm-bio-root .vm-bp-tl__avoid { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 12px; font-size: .92rem; }
#vm-bio-root .vm-bp-tl__best { background: rgba(34, 197, 94, .12); color: var(--bp-ink); }
#vm-bio-root .vm-bp-tl__avoid { background: rgba(245, 158, 11, .14); color: var(--bp-ink); }
#vm-bio-root .vm-bp-tl__avoid[hidden] { display: none; }
#vm-bio-root .vm-bp-tl__best b, #vm-bio-root .vm-bp-tl__avoid b { font-weight: 800; }
#vm-bio-root .vm-bp-tl__ribbon { position: relative; }
#vm-bio-root .vm-bp-tl__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 4px; }
#vm-bio-root .vm-bp-tl__grid { display: flex; min-width: 440px; gap: 4px; }
#vm-bio-root .vm-bp-tl__axis, #vm-bio-root .vm-bp-tl__col { display: grid; grid-template-rows: 96px 26px 24px 20px; align-items: center; }
#vm-bio-root .vm-bp-tl__axis { flex: 0 0 66px; position: sticky; left: 0; z-index: 2; background: var(--bp-card-solid); padding-right: 6px; }
[data-theme="dark"] #vm-bio-root .vm-bp-tl__axis { background: #0f172a; }
#vm-bio-root .vm-bp-tl__axis span { font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--bp-soft); text-align: right; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
#vm-bio-root .vm-bp-tl__axis span:first-child { align-self: end; padding-bottom: 6px; }
#vm-bio-root .vm-bp-tl__col { flex: 1 1 0; min-width: 38px; border-radius: 12px; padding: 4px 0; text-align: center; transition: background .2s ease; }
#vm-bio-root .vm-bp-tl__col--day { background: color-mix(in srgb, var(--bp-tint) 80%, transparent); }
#vm-bio-root .vm-bp-tl__col.is-best { background: rgba(34, 197, 94, .14); box-shadow: inset 0 3px 0 #22c55e; }
#vm-bio-root .vm-bp-tl__col.is-avoid { background: repeating-linear-gradient(135deg, rgba(245, 158, 11, .16) 0 6px, rgba(245, 158, 11, .06) 6px 12px); box-shadow: inset 0 3px 0 #f59e0b; }
#vm-bio-root .vm-bp-tl__uv { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; padding: 0 7px; }
#vm-bio-root .vm-bp-tl__uv i { display: block; width: 100%; max-width: 22px; height: var(--h); min-height: 3px; border-radius: 7px 7px 4px 4px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 55%, transparent)); }
#vm-bio-root .vm-bp-tl__uv b { order: -1; margin-bottom: 3px; font-size: .78rem; font-weight: 700; color: var(--bp-muted); font-variant-numeric: tabular-nums; }
#vm-bio-root .vm-bp-tl__pol { display: flex; justify-content: center; }
#vm-bio-root .vm-bp-tl__pol i { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
#vm-bio-root .vm-bp-tl__t { font-size: .8rem; font-weight: 700; color: var(--bp-ink); font-variant-numeric: tabular-nums; }
#vm-bio-root .vm-bp-tl__hr { font-size: .7rem; font-weight: 700; color: var(--bp-soft); font-variant-numeric: tabular-nums; }
#vm-bio-root .vm-bp-tl__empty { padding: 18px; border-radius: 16px; background: var(--bp-tint); color: var(--bp-muted); text-align: center; }
#vm-bio-root .vm-bp-tl__uvnote { font-size: .92rem; color: var(--bp-muted); }
#vm-bio-root .vm-bp-uv-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--bp-soft); font-weight: 600; }
#vm-bio-root .vm-bp-uv-legend span { display: inline-flex; align-items: center; gap: 6px; }
#vm-bio-root .vm-bp-uv-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }

/* ── Gradovi ────────────────────────────────────────────────────────────── */
#vm-bio-root .vm-bp-regions { display: flex; flex-direction: column; gap: 16px; }
#vm-bio-root .vm-bp-region__t { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-soft); }
#vm-bio-root .vm-bp-region__t::after { content: ""; flex: 1; height: 1px; background: var(--bp-line); }
#vm-bio-root .vm-bp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
#vm-bio-root a.vm-bp-tile, #vm-bio-root a.vm-bp-tile:visited {
	position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 42px 14px 15px; border-radius: 18px;
	background: var(--bp-card-solid); border: 1px solid var(--bp-line) !important; color: var(--bp-ink) !important; text-decoration: none !important;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
[data-theme="dark"] #vm-bio-root a.vm-bp-tile { background: rgba(15, 23, 42, .6); }
#vm-bio-root a.vm-bp-tile:hover, #vm-bio-root a.vm-bp-tile:focus-visible { transform: translateY(-2px); border-color: var(--bp-accent) !important; box-shadow: 0 12px 24px -16px rgba(37, 99, 235, .6); color: var(--bp-ink) !important; }
#vm-bio-root .vm-bp-tile__name { font-weight: 800; font-size: 1.02rem; }
#vm-bio-root .vm-bp-tile__d { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
#vm-bio-root .vm-bp-tile__face { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; color: var(--lvl-ink); background: color-mix(in srgb, var(--lvl) 16%, transparent); }
#vm-bio-root .vm-bp-tile__pol { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, transparent); font-size: .82rem; font-weight: 700; color: var(--bp-ink); }
#vm-bio-root .vm-bp-tile__pol::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
#vm-bio-root .vm-bp-tile__pol small { font-size: .74rem; color: var(--bp-soft); }
#vm-bio-root .vm-bp-tile__meta { display: inline-flex; gap: 10px; font-size: .8rem; color: var(--bp-soft); }
#vm-bio-root .vm-bp-tile__meta b { color: var(--bp-ink); font-weight: 800; }
#vm-bio-root .vm-bp-tile__uv { display: inline-flex; align-items: center; gap: 5px; }
#vm-bio-root .vm-bp-tile__uv::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
#vm-bio-root .vm-bp-tile__go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; color: var(--bp-accent-ink); background: rgba(59, 130, 246, .1); }

/* ── Biometeo za 3 dana ─────────────────────────────────────────────────── */
#vm-bio-root .vm-bp-daycards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#vm-bio-root .vm-bp-daycard {
	display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--lvl) 12%, var(--bp-card-solid)) 0%, var(--bp-card-solid) 46%);
	border: 1px solid color-mix(in srgb, var(--lvl) 28%, var(--bp-line)); transition: box-shadow .2s ease, transform .2s ease;
}
[data-theme="dark"] #vm-bio-root .vm-bp-daycard { background: linear-gradient(180deg, color-mix(in srgb, var(--lvl) 16%, #0f172a) 0%, #0f172a 50%); }
#vm-bio-root[data-day="0"] .vm-bp-daycard[data-d="0"],
#vm-bio-root[data-day="1"] .vm-bp-daycard[data-d="1"],
#vm-bio-root[data-day="2"] .vm-bp-daycard[data-d="2"] { box-shadow: 0 0 0 2px var(--bp-accent-2), 0 16px 30px -20px rgba(79, 70, 229, .7); }
#vm-bio-root .vm-bp-daycard__head { display: flex; align-items: center; gap: 10px; }
#vm-bio-root .vm-bp-daycard__face { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; color: var(--lvl-ink); background: color-mix(in srgb, var(--lvl) 18%, transparent); }
#vm-bio-root .vm-bp-daycard__when { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#vm-bio-root .vm-bp-daycard__when h3 { font-size: 1.04rem; font-weight: 800; }
#vm-bio-root .vm-bp-daycard__when time { font-size: .8rem; color: var(--bp-soft); }
#vm-bio-root .vm-bp-badge { flex: none; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; color: #fff; background: var(--lvl); max-width: 50%; text-align: center; line-height: 1.25; }
#vm-bio-root .vm-bp-lvl2 .vm-bp-badge { color: #451a03; }
#vm-bio-root .vm-bp-drivers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
#vm-bio-root .vm-bp-driver { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 12px; background: var(--bp-tint); }
#vm-bio-root .vm-bp-driver span { font-size: .7rem; font-weight: 700; color: var(--bp-soft); text-transform: uppercase; letter-spacing: .04em; }
#vm-bio-root .vm-bp-driver b { font-size: 1rem; font-weight: 800; color: var(--bp-ink); }
#vm-bio-root .vm-bp-driver b small { font-size: .74rem; font-weight: 700; color: var(--bp-soft); }
#vm-bio-root .vm-bp-driver--down b .vm-bp-num { color: #2563eb; }
#vm-bio-root .vm-bp-driver--up b .vm-bp-num { color: #dc2626; }
#vm-bio-root .vm-bp-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .78rem; color: var(--bp-soft); }
#vm-bio-root .vm-bp-gchip { padding: 3px 9px; border-radius: 999px; border: 1px solid var(--bp-line); background: var(--bp-card-solid); color: var(--bp-ink); font-weight: 700; }
[data-theme="dark"] #vm-bio-root .vm-bp-gchip { background: rgba(30, 41, 59, .8); }
#vm-bio-root .vm-bp-daycard__advice { font-size: .92rem; color: var(--bp-muted); }

/* ── Uvod ───────────────────────────────────────────────────────────────── */
#vm-bio-root .vm-bp-intro { display: grid; gap: 10px; padding: 4px 6px; color: var(--bp-muted); font-size: .97rem; }
#vm-bio-root .vm-bp-intro strong { color: var(--bp-ink); }

/* ── Kako se obući ──────────────────────────────────────────────────────── */
#vm-bio-root .vm-bp-dress { display: flex; flex-direction: column; gap: 12px; }
#vm-bio-root .vm-bp-dress__chips { display: flex; flex-wrap: wrap; gap: 8px; }
#vm-bio-root .vm-bp-dress__chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .86rem; font-weight: 800; color: var(--bp-ink); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
#vm-bio-root .vm-bp-dress__chip svg { color: var(--c); }
#vm-bio-root .vm-bp-dress__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
#vm-bio-root .vm-bp-dress__card { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--bp-card-solid); border: 1px solid var(--bp-line); }
[data-theme="dark"] #vm-bio-root .vm-bp-dress__card { background: rgba(15, 23, 42, .6); }
#vm-bio-root .vm-bp-dress__ic { grid-row: span 2; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
#vm-bio-root .vm-bp-dress__card b { font-size: .95rem; font-weight: 800; }
#vm-bio-root .vm-bp-dress__card p { font-size: .86rem; color: var(--bp-muted); }

/* ── Polen ──────────────────────────────────────────────────────────────── */
#vm-bio-root .vm-bp-pollen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
#vm-bio-root .vm-bp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#vm-bio-root .vm-bp-bar { display: grid; grid-template-columns: 92px 1fr 118px; align-items: center; gap: 10px; }
#vm-bio-root .vm-bp-bar__name { font-weight: 800; font-size: .92rem; }
#vm-bio-root .vm-bp-bar__track { position: relative; height: 12px; border-radius: 999px; background: var(--bp-track); overflow: hidden; }
#vm-bio-root .vm-bp-bar__track i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, transparent), var(--c)); }
#vm-bio-root .vm-bp-bar__lvl { display: flex; flex-direction: column; line-height: 1.2; font-size: .86rem; font-weight: 800; color: var(--bp-ink); }
#vm-bio-root .vm-bp-bar__lvl small { font-size: .74rem; font-weight: 600; color: var(--bp-soft); }
#vm-bio-root .vm-bp-curve { padding: 14px; border-radius: 16px; background: var(--bp-tint); }
#vm-bio-root .vm-bp-curve__t { font-size: .9rem; margin-bottom: 10px !important; }
#vm-bio-root .vm-bp-curve__t small { color: var(--bp-soft); }
#vm-bio-root .vm-bp-curve__bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 92px; }
#vm-bio-root .vm-bp-curve__bars span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
#vm-bio-root .vm-bp-curve__bars i { display: block; width: 100%; max-width: 16px; height: var(--h); min-height: 2px; border-radius: 5px 5px 2px 2px; background: var(--c); }
#vm-bio-root .vm-bp-curve__bars em { font-style: normal; font-size: .64rem; color: var(--bp-soft); font-weight: 700; }
#vm-bio-root .vm-bp-advice { grid-column: 1 / -1; display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--c) 9%, var(--bp-card-solid)); border-left: 4px solid var(--c); }
[data-theme="dark"] #vm-bio-root .vm-bp-advice { background: color-mix(in srgb, var(--c) 10%, #0f172a); }
#vm-bio-root .vm-bp-advice__h { display: flex; align-items: center; gap: 8px; }
#vm-bio-root .vm-bp-advice__h svg { color: var(--c); }
#vm-bio-root .vm-bp-advice p { font-size: .93rem; color: var(--bp-muted); }
#vm-bio-root .vm-bp-advice ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#vm-bio-root .vm-bp-advice li { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; color: var(--bp-muted); }
#vm-bio-root .vm-bp-advice li svg { color: #16a34a; margin-top: 3px; }

/* ── Polenski sat ───────────────────────────────────────────────────────── */
#vm-bio-root .vm-bp-season__grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 20px; align-items: center; }
#vm-bio-root .vm-bp-clock { position: relative; margin: 0; width: 100%; max-width: 380px; aspect-ratio: 1 / 1; justify-self: center; }
#vm-bio-root .vm-bp-clock svg { width: 100%; height: 100%; overflow: visible; }
#vm-bio-root .vm-bp-clock__tick { stroke: var(--bp-line); stroke-width: 1; }
#vm-bio-root .vm-bp-clock__month { font-size: 10.5px; font-weight: 800; fill: var(--bp-soft); text-anchor: middle; text-transform: uppercase; letter-spacing: .04em; }
#vm-bio-root .vm-bp-clock__track { fill: none; stroke: var(--bp-track); stroke-width: 13; opacity: .55; }
#vm-bio-root .vm-bp-clock__season { fill: none; stroke: #cbd5e1; stroke-width: 13; stroke-linecap: round; }
[data-theme="dark"] #vm-bio-root .vm-bp-clock__season { stroke: #64748b; }
#vm-bio-root .vm-bp-clock__lvl { fill: none; stroke-width: 13; stroke-linecap: round; }
#vm-bio-root .vm-bp-clock__needle { stroke: var(--bp-accent-2); stroke-width: 3; stroke-linecap: round; }
#vm-bio-root .vm-bp-clock__hub { fill: var(--bp-card-solid); stroke: var(--bp-card-border); stroke-width: 1.5; }
#vm-bio-root .vm-bp-clock__dot { fill: var(--bp-accent-2); stroke: var(--bp-card-solid); stroke-width: 3; }
#vm-bio-root .vm-bp-clock__ring:hover .vm-bp-clock__season { stroke: #94a3b8; }
#vm-bio-root .vm-bp-clock__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; line-height: 1.15; }
#vm-bio-root .vm-bp-clock__center small { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bp-soft); }
#vm-bio-root .vm-bp-clock__center b { font-size: .92rem; font-weight: 800; color: var(--bp-ink); }
#vm-bio-root .vm-bp-season__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
#vm-bio-root .vm-bp-season__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bp-tint); }
#vm-bio-root .vm-bp-season__ring { flex: none; display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; font-size: .74rem; font-weight: 800; color: var(--bp-accent-ink); border: 2px solid var(--bp-card-border); background: var(--bp-card-solid); }
#vm-bio-root .vm-bp-season__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#vm-bio-root .vm-bp-season__txt b { font-weight: 800; }
#vm-bio-root .vm-bp-season__txt small { font-size: .8rem; color: var(--bp-soft); }
#vm-bio-root .vm-bp-season__st { flex: none; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; background: var(--bp-chip); color: var(--bp-muted); }
#vm-bio-root .vm-bp-season__item--in .vm-bp-season__st { background: rgba(34, 197, 94, .16); color: var(--bp-l1); }
#vm-bio-root .vm-bp-season__item--before .vm-bp-season__st { background: rgba(59, 130, 246, .14); color: var(--bp-accent-ink); }
#vm-bio-root .vm-bp-clock__legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; font-weight: 600; color: var(--bp-soft); }
#vm-bio-root .vm-bp-clock__legend span { display: inline-flex; align-items: center; gap: 6px; }
#vm-bio-root .vm-bp-clock__legend span::before { content: ""; width: 16px; height: 6px; border-radius: 4px; background: var(--c); }
#vm-bio-root .vm-bp-details { border-radius: 14px; border: 1px solid var(--bp-line); padding: 0 14px; }
#vm-bio-root .vm-bp-details summary { cursor: pointer; padding: 10px 0; font-weight: 800; font-size: .9rem; color: var(--bp-accent-ink); }
#vm-bio-root .vm-bp-table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: .88rem; }
#vm-bio-root .vm-bp-table caption { text-align: left; font-size: .8rem; color: var(--bp-soft); padding-bottom: 6px; }
#vm-bio-root .vm-bp-table th, #vm-bio-root .vm-bp-table td { padding: 7px 8px; border-bottom: 1px solid var(--bp-line); text-align: left; color: var(--bp-ink); }

/* ── Mapa: sopstveni izbor dana + parametri sa servera ─────────────────── */
#vm-bio-root .vm-bp-card__icon--map { color: #0d9488; background: linear-gradient(135deg, rgba(94, 234, 212, .3), rgba(59, 130, 246, .14)); }
#vm-bio-root .vm-bp-mapbar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
	padding: 8px; border-radius: 22px; background: var(--bp-sky); border: 1px solid rgba(255, 255, 255, .8);
}
[data-theme="dark"] #vm-bio-root .vm-bp-mapbar { border-color: rgba(129, 140, 248, .25); }
#vm-bio-root .vm-bp-days-toggle--map { flex: 0 1 420px; min-width: 0; padding: 4px; border-radius: 16px; }
#vm-bio-root button.vm-bp-daybtn--sm { min-height: 44px; flex-direction: column; gap: 0; padding: 5px 8px; border-radius: 12px; line-height: 1.15; }
#vm-bio-root button.vm-bp-daybtn--sm b { font-size: .9rem; font-weight: 800; }
#vm-bio-root button.vm-bp-daybtn--sm small { font-size: .72rem; font-weight: 600; color: var(--bp-soft); }
#vm-bio-root .vm-bp-mapbar__now { display: inline-flex; align-items: center; gap: 7px; padding: 0 8px; font-size: .86rem; color: var(--bp-muted); }
#vm-bio-root .vm-bp-mapbar__now svg { color: var(--bp-accent-ink); }
#vm-bio-root .vm-bp-mapbar__now b { color: var(--bp-ink); font-weight: 800; }
#vm-bio-root .vm-bp-params {
	display: flex; flex-wrap: wrap; gap: 8px; min-height: 44px; padding: 5px;
	border-radius: 20px; background: var(--bp-tint); border: 1px solid var(--bp-line);
}
#vm-bio-root button.vm-bp-param {
	appearance: none; -webkit-appearance: none; position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 0;
	min-height: 40px; padding: 7px 14px 7px 12px; border-radius: 15px; border: 1px solid transparent;
	background: transparent; color: var(--bp-muted); font: inherit; font-size: .88rem; font-weight: 750; cursor: pointer;
	text-transform: none; letter-spacing: 0; box-shadow: none; transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
#vm-bio-root button.vm-bp-param:hover { background: var(--bp-card-solid); color: var(--bp-ink); }
#vm-bio-root button.vm-bp-param svg { color: var(--bp-accent); }
#vm-bio-root button.vm-bp-param[aria-pressed="true"] { background: var(--bp-card-solid); color: var(--bp-ink); border-color: var(--bp-card-border); box-shadow: 0 8px 20px -12px rgba(37, 99, 235, .7), inset 0 -3px 0 var(--bp-accent); }
[data-theme="dark"] #vm-bio-root button.vm-bp-param:hover, [data-theme="dark"] #vm-bio-root button.vm-bp-param[aria-pressed="true"] { background: #1e293b; }
#vm-bio-root .vm-bp-param__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 28%, transparent); }
#vm-bio-root .vm-bp-map { position: relative; height: 460px; border-radius: 20px; overflow: hidden; background: var(--bp-tint); border: 1px solid var(--bp-line); z-index: 0; }
#vm-bio-root .vm-bp-map__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; color: var(--bp-soft); font-weight: 600; }
#vm-bio-root .vm-bp-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; font-weight: 600; color: var(--bp-soft); min-height: 20px; }
#vm-bio-root .vm-bp-legend span { display: inline-flex; align-items: center; gap: 6px; }
#vm-bio-root .vm-bp-legend span::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--c); }
#vm-bio-root .vm-bp-mk-wrap { background: none; border: 0; }
#vm-bio-root .vm-bp-mk { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--c); color: var(--ink, #fff); font-weight: 800; font-size: .9rem; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, .3); font-variant-numeric: tabular-nums; }
[data-theme="dark"] #vm-bio-root .vm-bp-mk { border-color: #0f172a; }
#vm-bio-root .vm-bp-pop { display: grid; gap: 4px; font-size: .86rem; min-width: 170px; }
#vm-bio-root .vm-bp-pop small { color: #64748b; }

/* ── Ukratko (prvi odgovor za pretragu i AI alate) ─────────────────────── */
#vm-bio-root .vm-bp-card__icon--quick { color: #0ea5e9; background: linear-gradient(135deg, rgba(125, 211, 252, .3), rgba(129, 140, 248, .18)); }
#vm-bio-root .vm-bp-quick__day { display: grid; gap: 12px; }
#vm-bio-root .vm-bp-quick__lead { font-size: 1.04rem; font-weight: 700; line-height: 1.45; color: var(--bp-ink); padding: 12px 14px; border-radius: 16px; background: var(--bp-tint); border-left: 4px solid var(--bp-accent); }
#vm-bio-root .vm-bp-quick__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 0; }
#vm-bio-root .vm-bp-quick__row { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--bp-line); background: var(--bp-card-solid); }
[data-theme="dark"] #vm-bio-root .vm-bp-quick__row { background: rgba(15, 23, 42, .55); }
#vm-bio-root .vm-bp-quick__row dt { font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--bp-soft); }
#vm-bio-root .vm-bp-quick__row dd { margin: 0; font-size: .93rem; color: var(--bp-ink); }

/* ── Čipovi vrsta polena ────────────────────────────────────────────────── */
#vm-bio-root .vm-bp-spchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#vm-bio-root .vm-bp-spchips__t { font-size: .84rem; font-weight: 800; color: var(--bp-soft); margin-right: 2px; }
#vm-bio-root a.vm-bp-spchip, #vm-bio-root a.vm-bp-spchip:visited {
	display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-size: .86rem; font-weight: 750;
	background: rgba(34, 197, 94, .1); color: var(--bp-ink) !important; border: 1px solid rgba(34, 197, 94, .3) !important; text-decoration: none !important;
	transition: border-color .15s ease, transform .15s ease;
}
#vm-bio-root a.vm-bp-spchip svg { color: #16a34a; }
#vm-bio-root a.vm-bp-spchip:hover, #vm-bio-root a.vm-bp-spchip:focus-visible { border-color: #16a34a !important; transform: translateY(-1px); }
#vm-bio-root a.vm-bp-spchip[aria-current="page"] { background: linear-gradient(135deg, #22c55e, #0d9488); color: #fff !important; border-color: transparent !important; }
#vm-bio-root a.vm-bp-spchip[aria-current="page"] svg { color: #fff; }

/* ── Lokalne stranice gradova i vrsta ───────────────────────────────────── */
#vm-bio-root .vm-bp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .82rem; color: var(--bp-soft); }
#vm-bio-root .vm-bp-crumbs a { color: var(--bp-accent-ink) !important; text-decoration: none !important; border: 0 !important; }
#vm-bio-root .vm-bp-crumbs a:hover { text-decoration: underline !important; }
#vm-bio-root .vm-bp-kicker { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-accent-ink); }
#vm-bio-root .vm-bp-daybtn__face--pollen { color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
#vm-bio-root .vm-bp-near { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
#vm-bio-root a.vm-bp-near__item, #vm-bio-root a.vm-bp-near__item:visited {
	display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: var(--bp-card-solid);
	border: 1px solid var(--bp-line) !important; color: var(--bp-ink) !important; text-decoration: none !important; transition: transform .18s ease, border-color .18s ease;
}
[data-theme="dark"] #vm-bio-root a.vm-bp-near__item { background: rgba(15, 23, 42, .6); }
#vm-bio-root a.vm-bp-near__item:hover, #vm-bio-root a.vm-bp-near__item:focus-visible { transform: translateY(-2px); border-color: var(--bp-accent) !important; }
#vm-bio-root .vm-bp-near__name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
#vm-bio-root .vm-bp-near__name b { font-weight: 800; }
#vm-bio-root .vm-bp-near__name small { font-size: .78rem; color: var(--bp-soft); font-variant-numeric: tabular-nums; }
#vm-bio-root .vm-bp-near__pol { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--bp-ink); }
#vm-bio-root .vm-bp-near__pol::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
#vm-bio-root .vm-bp-aq { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
#vm-bio-root .vm-bp-aq > div { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--bp-tint); }
#vm-bio-root .vm-bp-aq__main { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; }
#vm-bio-root .vm-bp-aq__main b { display: inline-flex; min-width: 54px; height: 54px; padding: 0 8px; align-items: center; justify-content: center; border-radius: 16px; background: var(--c); color: var(--ink); font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#vm-bio-root .vm-bp-aq__main span { font-weight: 800; }
#vm-bio-root .vm-bp-aq__pm span { font-size: .72rem; font-weight: 800; letter-spacing: .06em; color: var(--bp-soft); }
#vm-bio-root .vm-bp-aq__pm b { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#vm-bio-root .vm-bp-aq__pm small { font-size: .74rem; color: var(--bp-soft); }
#vm-bio-root .vm-bp-clock__peak { fill: var(--bp-card-solid); stroke: #6366f1; stroke-width: 3; }
#vm-bio-root .vm-bp-season__year { color: var(--bp-muted) !important; font-weight: 600; }
#vm-bio-root .vm-bp-clock__legend-peak::before { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: transparent !important; border: 3px solid var(--c); }

/* ── Tekstualni blokovi, FAQ, povezane ─────────────────────────────────── */
#vm-bio-root .vm-bp-prose { display: grid; gap: 10px; color: var(--bp-muted); font-size: .95rem; }
#vm-bio-root .vm-bp-prose strong { color: var(--bp-ink); }
#vm-bio-root .vm-bp-prose a { color: var(--bp-accent-ink); }
#vm-bio-root .vm-bp-inline-face { display: inline-flex; vertical-align: -3px; color: var(--lvl-ink); }
#vm-bio-root .vm-bp-faq { display: grid; gap: 8px; }
#vm-bio-root .vm-bp-faq__item { border-radius: 16px; background: var(--bp-card-solid); border: 1px solid var(--bp-line); overflow: hidden; }
[data-theme="dark"] #vm-bio-root .vm-bp-faq__item { background: rgba(15, 23, 42, .6); }
#vm-bio-root .vm-bp-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; font-weight: 800; color: var(--bp-ink); }
#vm-bio-root .vm-bp-faq__item summary::-webkit-details-marker { display: none; }
#vm-bio-root .vm-bp-faq__item summary::after { content: "+"; flex: none; display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(59, 130, 246, .12); color: var(--bp-accent-ink); font-weight: 800; }
#vm-bio-root .vm-bp-faq__item[open] summary::after { content: "−"; }
#vm-bio-root .vm-bp-faq__item p { padding: 0 16px 14px; color: var(--bp-muted); font-size: .94rem; }
#vm-bio-root .vm-bp-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
#vm-bio-root .vm-bp-related a, #vm-bio-root .vm-bp-related a:visited {
	display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 14px; border-radius: 16px;
	background: var(--bp-card-solid); border: 1px solid var(--bp-line) !important; color: var(--bp-ink) !important; text-decoration: none !important;
	transition: transform .18s ease, border-color .18s ease;
}
[data-theme="dark"] #vm-bio-root .vm-bp-related a { background: rgba(15, 23, 42, .6); }
#vm-bio-root .vm-bp-related a:hover, #vm-bio-root .vm-bp-related a:focus-visible { transform: translateY(-2px); border-color: var(--bp-accent) !important; }
#vm-bio-root .vm-bp-related a > span { grid-row: span 2; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 12px; color: var(--bp-accent-ink); background: rgba(59, 130, 246, .12); }
#vm-bio-root .vm-bp-related b { font-weight: 800; }
#vm-bio-root .vm-bp-related small { font-size: .82rem; color: var(--bp-soft); }

/* ── Zastareo paket: vrednosti se ne prikazuju kao aktuelne ────────────── */
#vm-bio-root.vm-bp--expired .vm-bp-dd,
#vm-bio-root.vm-bp--expired .vm-bp-days-toggle,
#vm-bio-root.vm-bp--expired #vm-bio-days,
#vm-bio-root.vm-bp--expired .vm-bp-profile__out { display: none !important; }

/* ── Fokus i tamna tema: globalno pravilo teme boji sve span-ove u tamnoj ─ */
#vm-bio-root button:focus-visible, #vm-bio-root a:focus-visible, #vm-bio-root select:focus-visible, #vm-bio-root summary:focus-visible { outline: 3px solid var(--bp-accent); outline-offset: 2px; }
[data-theme="dark"] #vm-bio-root .vm-bp-ringbox__t, [data-theme="dark"] #vm-bio-root .vm-bp-ringbox__s,
[data-theme="dark"] #vm-bio-root .vm-bp-daybtn__txt small, [data-theme="dark"] #vm-bio-root .vm-bp-tile__meta,
[data-theme="dark"] #vm-bio-root .vm-bp-driver span, [data-theme="dark"] #vm-bio-root .vm-bp-tl__axis span,
[data-theme="dark"] #vm-bio-root .vm-bp-tl__hr, [data-theme="dark"] #vm-bio-root .vm-bp-chipset__t,
[data-theme="dark"] #vm-bio-root .vm-bp-uv-legend span, [data-theme="dark"] #vm-bio-root .vm-bp-legend span,
[data-theme="dark"] #vm-bio-root .vm-bp-clock__legend span, [data-theme="dark"] #vm-bio-root .vm-bp-groups > span:first-child,
[data-theme="dark"] #vm-bio-root .vm-bp-spchips__t, [data-theme="dark"] #vm-bio-root .vm-bp-near__name small, [data-theme="dark"] #vm-bio-root .vm-bp-aq__pm span,
[data-theme="dark"] #vm-bio-root .vm-bp-aq__pm small, [data-theme="dark"] #vm-bio-root .vm-bp-daybtn--sm small, [data-theme="dark"] #vm-bio-root .vm-bp-crumbs > span { color: #94a3b8 !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-mapbar__now, [data-theme="dark"] #vm-bio-root .vm-bp-mapbar__now b, [data-theme="dark"] #vm-bio-root button.vm-bp-param span,
[data-theme="dark"] #vm-bio-root .vm-bp-near__pol, [data-theme="dark"] #vm-bio-root .vm-bp-aq__main span, [data-theme="dark"] #vm-bio-root .vm-bp-spchip span { color: #e2e8f0 !important; }
[data-theme="dark"] #vm-bio-root a.vm-bp-spchip[aria-current="page"] span { color: #fff !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-kicker, [data-theme="dark"] #vm-bio-root .vm-bp-card__icon--map, [data-theme="dark"] #vm-bio-root .vm-bp-card__icon--quick { color: #93c5fd !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-daybtn__face--pollen { color: var(--c) !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-eyebrow, [data-theme="dark"] #vm-bio-root .vm-bp-hero__kicker,
[data-theme="dark"] #vm-bio-root .vm-bp-season__ring { color: #93c5fd !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-ring__face, [data-theme="dark"] #vm-bio-root .vm-bp-daybtn__face,
[data-theme="dark"] #vm-bio-root .vm-bp-tile__face, [data-theme="dark"] #vm-bio-root .vm-bp-daycard__face,
[data-theme="dark"] #vm-bio-root .vm-bp-you__face, [data-theme="dark"] #vm-bio-root .vm-bp-inline-face { color: var(--lvl-ink) !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-ring__icon { color: #4ade80 !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-card__icon { color: #93c5fd !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-card__icon--you, [data-theme="dark"] #vm-bio-root .vm-bp-card__icon--season { color: #c4b5fd !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-card__icon--time { color: #fcd34d !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-card__icon--bio { color: #fda4af !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-card__icon--pollen { color: #86efac !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-card__icon--dress { color: #7dd3fc !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-hero__updated, [data-theme="dark"] #vm-bio-root .vm-bp-select > span { color: #94a3b8 !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-season__item--in .vm-bp-season__st { color: #4ade80 !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-season__item--before .vm-bp-season__st { color: #93c5fd !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-tile__go, [data-theme="dark"] #vm-bio-root .vm-bp-related a > span { color: #93c5fd !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-lvl2 .vm-bp-badge { color: #451a03 !important; }
[data-theme="dark"] #vm-bio-root .vm-bp-badge { color: #fff !important; }
[data-theme="dark"] #vm-bio-root.vm-bp-g-kardiovaskularni .vm-bp-gchip[data-g="kardiovaskularni"],
[data-theme="dark"] #vm-bio-root.vm-bp-g-respiratorni .vm-bp-gchip[data-g="respiratorni"],
[data-theme="dark"] #vm-bio-root.vm-bp-g-reumatski .vm-bp-gchip[data-g="reumatski"],
[data-theme="dark"] #vm-bio-root.vm-bp-g-neuroloski .vm-bp-gchip[data-g="neuroloski"],
[data-theme="dark"] #vm-bio-root.vm-bp-g-koza .vm-bp-gchip[data-g="koza"],
[data-theme="dark"] #vm-bio-root.vm-bp-g-stariji .vm-bp-gchip[data-g="stariji"] { color: #fff !important; }

/* ── Mobilni (primarni) ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
	#vm-bio-root .vm-bp-daycards { grid-template-columns: 1fr; }
	#vm-bio-root .vm-bp-pollen { grid-template-columns: 1fr; }
	#vm-bio-root .vm-bp-season__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	#vm-bio-root.vm-bp { gap: 16px; }
	#vm-bio-root .vm-bp-hero { padding: 12px; border-radius: 24px; gap: 14px; }
	#vm-bio-root .vm-bp-days-toggle { gap: 4px; padding: 4px; }
	#vm-bio-root button.vm-bp-daybtn { flex-direction: column; gap: 4px; min-height: 64px; padding: 6px 4px; }
	#vm-bio-root .vm-bp-daybtn__face { width: 28px; height: 28px; }
	#vm-bio-root .vm-bp-daybtn__txt { align-items: center; }
	#vm-bio-root .vm-bp-daybtn__txt b { font-size: .88rem; }
	#vm-bio-root .vm-bp-hero__day { padding: 2px 2px 0; }
	#vm-bio-root .vm-bp-rings { gap: 6px; }
	#vm-bio-root .vm-bp-ringbox { padding: 12px 4px 10px; border-radius: 18px; }
	#vm-bio-root .vm-bp-ring { width: 78px; height: 78px; margin-bottom: 6px; }
	#vm-bio-root .vm-bp-ring__face svg, #vm-bio-root .vm-bp-ring__icon svg { width: 28px; height: 28px; }
	#vm-bio-root .vm-bp-ring__num { font-size: 1.6rem; }
	#vm-bio-root .vm-bp-ringbox__t { font-size: .62rem; letter-spacing: .05em; }
	#vm-bio-root .vm-bp-ringbox__v { font-size: .86rem; }
	#vm-bio-root .vm-bp-ringbox__s { font-size: .68rem; }
	#vm-bio-root .vm-bp-card { padding: 16px 14px 18px; border-radius: 20px; gap: 14px; }
	#vm-bio-root .vm-bp-card__head { gap: 12px; flex-wrap: wrap; }
	#vm-bio-root .vm-bp-card__icon { width: 40px; height: 40px; border-radius: 13px; }
	#vm-bio-root .vm-bp-card__head > div { flex: 1 1 calc(100% - 60px); }
	#vm-bio-root .vm-bp-pill { order: 3; margin-left: 52px; }
	#vm-bio-root .vm-bp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	#vm-bio-root a.vm-bp-tile, #vm-bio-root a.vm-bp-tile:visited { padding: 12px 12px 12px; gap: 6px; }
	#vm-bio-root .vm-bp-tile__go { top: 12px; right: 10px; transform: none; width: 22px; height: 22px; }
	#vm-bio-root .vm-bp-tile__name { font-size: .95rem; padding-right: 22px; }
	#vm-bio-root .vm-bp-tile__pol { font-size: .76rem; padding: 3px 8px; }
	#vm-bio-root .vm-bp-tile__meta { gap: 8px; font-size: .76rem; }
	#vm-bio-root .vm-bp-tl__grid { min-width: 318px; gap: 2px; }
	#vm-bio-root .vm-bp-tl__axis { flex-basis: 54px; padding-right: 4px; }
	#vm-bio-root .vm-bp-tl__axis span { font-size: .62rem; }
	#vm-bio-root .vm-bp-tl__col { min-width: 28px; }
	#vm-bio-root .vm-bp-tl__uv { padding: 0 4px; }
	#vm-bio-root .vm-bp-bar { grid-template-columns: 78px 1fr 96px; gap: 8px; }
	#vm-bio-root .vm-bp-map { height: 380px; }
	#vm-bio-root .vm-bp-mapbar { padding: 6px; border-radius: 18px; }
	#vm-bio-root .vm-bp-days-toggle--map { flex: 1 1 100%; }
	#vm-bio-root .vm-bp-mapbar__now { font-size: .8rem; padding: 0 6px 2px; }
	#vm-bio-root .vm-bp-params { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px; }
	#vm-bio-root .vm-bp-params::-webkit-scrollbar { display: none; }
	#vm-bio-root button.vm-bp-param { flex: none; padding: 7px 12px 7px 10px; font-size: .84rem; }
	#vm-bio-root .vm-bp-quick__lead { font-size: .98rem; padding: 10px 12px; }
	#vm-bio-root .vm-bp-quick__list { grid-template-columns: 1fr; }
	#vm-bio-root .vm-bp-aq { grid-template-columns: 1fr 1fr; }
	#vm-bio-root .vm-bp-aq__main { grid-column: 1 / -1; }
	#vm-bio-root .vm-bp-near { grid-template-columns: 1fr 1fr; }
	#vm-bio-root .vm-bp-season__item { flex-wrap: wrap; align-items: flex-start; }
	#vm-bio-root .vm-bp-season__txt { flex: 1 1 calc(100% - 40px); }
	#vm-bio-root .vm-bp-season__st { margin-left: 38px; }
	#vm-bio-root .vm-bp-select--sm { width: 100%; }
	#vm-bio-root .vm-bp-select--sm select { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
	#vm-bio-root *, #vm-bio-root *::before, #vm-bio-root *::after { transition: none !important; animation: none !important; }
}