/* ═══════════════════════════════════════════
   style-additions.css — ZenFlow v2
   Full redesign: cleaner panels, better UX
═══════════════════════════════════════════ */

/* ── GLOBAL IMPROVEMENTS ── */
* { -webkit-tap-highlight-color: transparent; }

#settings-panel { z-index: 200 !important; }

/* Smoother panel animations */
.fp { transition: opacity .15s ease; }

/* Better scrollbars */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }

/* ══════════════════════════════════
   NAV IMPROVEMENTS
══════════════════════════════════ */
#nav { gap: 8px; padding: 7px 16px; }

.pill {
  font-size: .67rem;
  padding: 5px 11px;
  transition: all .18s ease;
}
.pill:hover {
  background: rgba(255,255,255,.13) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.pill.on {
  background: rgba(232,201,154,.15) !important;
  color: var(--acc) !important;
  border-color: rgba(232,201,154,.3) !important;
}

/* ══════════════════════════════════
   PANEL HEADERS — cleaner look
══════════════════════════════════ */
.fp-header {
  padding: 10px 12px 9px;
  background: rgba(255,255,255,.025);
}
.fp-title {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(255,255,255,.5);
}
.fp-close {
  width: 20px; height: 20px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 50%;
  color: rgba(255,255,255,.3);
  cursor: pointer; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .13s; line-height: 1;
}
.fp-close:hover {
  background: rgba(255,60,60,.2);
  color: #ff7070;
  border-color: rgba(255,60,60,.3);
}

/* ══════════════════════════════════
   SETTINGS PANEL — redesigned
══════════════════════════════════ */
#settings-panel .fp-body { padding: 10px 12px 14px; }

.set-section-title {
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  margin: 10px 0 7px;
  display: flex; align-items: center; gap: 6px;
}
.set-section-title::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.05);
}
.set-section-title:first-child { margin-top: 2px; }

.set-row {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  padding: 5px 8px;
  background: rgba(255,255,255,.02);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.04);
}
.set-lbl { font-size: .68rem; color: rgba(255,255,255,.55); }
.set-inp {
  width: 54px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 4px 8px;
  color: #fff; font-size: .72rem;
  text-align: center; outline: none;
  transition: border-color .13s;
}
.set-inp:focus { border-color: var(--acc); }

.set-toggle {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  background: rgba(255,255,255,.02);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.04);
  margin-bottom: 7px;
}

.set-select {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  padding: 7px 10px;
  color: rgba(255,255,255,.8);
  font-size: .68rem; outline: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: border-color .13s;
  margin-bottom: 3px;
}
.set-select:focus { border-color: rgba(255,255,255,.2); }
.set-select option { background: #0a0820; }

/* End sound row with test button */
.end-sound-row { display: flex; gap: 6px; align-items: center; }
.end-sound-row .set-select { flex: 1; margin-bottom: 0; }
.btn-test-sound {
  padding: 7px 11px;
  background: rgba(232,201,154,.1);
  border: 1px solid rgba(232,201,154,.22);
  border-radius: 9px;
  color: var(--acc);
  font-size: .62rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all .13s; flex-shrink: 0;
}
.btn-test-sound:hover {
  background: rgba(232,201,154,.22);
  border-color: var(--acc);
  transform: scale(1.03);
}
.btn-test-sound:active { transform: scale(.97); }

/* City search */
.city-search-wrap {
  position: relative; margin-bottom: 4px;
}
.city-search-wrap .text-input { width: 100%; }

.set-sep { height: 1px; background: rgba(255,255,255,.05); margin: 8px 0; }

/* Apply / Danger buttons */
.btn-apply {
  width: 100%; padding: 8px;
  background: var(--acc); border: none;
  border-radius: 10px; color: #07060f;
  font-size: .72rem; font-weight: 700;
  cursor: pointer; margin-bottom: 6px;
  transition: filter .12s, transform .1s;
  letter-spacing: .02em;
}
.btn-apply:hover  { filter: brightness(1.1); transform: translateY(-1px); }
.btn-apply:active { transform: translateY(0); }

.btn-danger {
  width: 100%; padding: 7px;
  background: rgba(255,50,50,.04);
  border: 1px solid rgba(255,50,50,.1);
  border-radius: 10px; color: rgba(255,100,100,.45);
  font-size: .63rem; cursor: pointer;
  transition: all .13s;
}
.btn-danger:hover {
  background: rgba(255,50,50,.1);
  color: rgba(255,100,100,.75);
  border-color: rgba(255,50,50,.22);
}

/* Video vol slider row */
.slider-row {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
}
.slider-lbl { font-size: .62rem; color: rgba(255,255,255,.35); white-space: nowrap; }
.slider-val { font-size: .6rem; color: rgba(255,255,255,.35); min-width: 28px; text-align: right; }

/* ══════════════════════════════════
   MOOD PANEL — vibe colors
══════════════════════════════════ */
.mood-theme-section { margin: 11px 0 10px; }
.mood-themes {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px;
}
.mood-theme-btn {
  width: 34px; height: 34px; border-radius: 10px;
  border: 2px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  position: relative;
}
.mood-theme-btn::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 8px; opacity: 0;
  background: rgba(255,255,255,.12);
  transition: opacity .13s;
}
.mood-theme-btn:hover { transform: scale(1.18); border-color: rgba(255,255,255,.3); }
.mood-theme-btn:hover::after { opacity: 1; }
.mood-theme-btn.active {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(232,201,154,.2), 0 4px 16px rgba(0,0,0,.4);
  transform: scale(1.12);
}
/* Gradient backgrounds via inline style on each button */

/* ══════════════════════════════════
   BACKGROUND MODAL — improved
══════════════════════════════════ */
#bg-modal {
  position: fixed; inset: 0; z-index: 300;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
#bg-modal.open { display: flex; animation: fadeIn .18s ease; }
@keyframes fadeIn { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:scale(1)} }

#bg-box {
  width: min(780px, 95vw);
  max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px;
}

.bg-modal-header {
  padding: 14px 16px 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.bg-modal-title {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* Category tabs */
.bg-cat-tabs {
  display: flex; gap: 5px;
  padding: 12px 15px 10px;
  overflow-x: auto; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.bg-cat-tabs::-webkit-scrollbar { height: 0; }

.bg-cat-tab {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 50px; white-space: nowrap;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.4); font-size: .65rem;
  cursor: pointer; flex-shrink: 0;
  transition: all .15s ease;
}
.bg-cat-tab:hover {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.14);
}
.bg-cat-tab.active {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.22);
  color: #fff;
  font-weight: 600;
}
.bg-cat-tab-ico { font-size: 1rem; }

/* 4-col grid */
.bg-grid-scroll { flex: 1; overflow-y: auto; padding: 14px; min-height: 0; }
.bg-items-grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }

.bg-item-card {
  border-radius: 11px; overflow: hidden; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.06);
  transition: all .17s ease; position: relative;
  aspect-ratio: 16/9;
  background: rgba(255,255,255,.04);
}
.bg-item-card:hover {
  border-color: rgba(255,255,255,.28);
  transform: scale(1.04);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.bg-item-card.on {
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc), 0 8px 24px rgba(232,201,154,.15);
}
.bg-item-card.on::before {
  content: '✓';
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--acc); color: #07060f;
  font-size: .65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.bg-item-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-item-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 5px 8px 6px;
  font-size: .59rem; font-weight: 500;
  color: rgba(255,255,255,.92);
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  text-align: center;
}

/* Custom form */
.bg-custom-body { padding: 16px; overflow-y: auto; }
.custom-lbl {
  font-size: .67rem; font-weight: 600;
  color: rgba(255,255,255,.6); margin-bottom: 5px;
}
.custom-note {
  font-size: .59rem; color: rgba(255,255,255,.28);
  line-height: 1.65; margin-bottom: 0;
}
.custom-note code {
  background: rgba(255,255,255,.08); border-radius: 5px;
  padding: 1px 5px; font-family: monospace;
  color: rgba(255,255,255,.5);
}
.custom-row { display: flex; gap: 7px; margin-top: 9px; }

.btn-set {
  padding: 7px 14px; background: var(--acc); border: none;
  border-radius: 10px; color: #07060f; font-size: .68rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: filter .12s, transform .1s;
}
.btn-set:hover { filter: brightness(1.1); transform: translateY(-1px); }

.btn-ghost {
  flex: 1; padding: 7px 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px; color: rgba(255,255,255,.45);
  font-size: .67rem; cursor: pointer; transition: all .13s;
}
.btn-ghost:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }

.custom-divider {
  display: flex; align-items: center; gap: 9px;
  margin: 14px 0;
  font-size: .54rem; color: rgba(255,255,255,.2);
  letter-spacing: .1em; text-transform: uppercase;
}
.custom-divider::before, .custom-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.06);
}

/* Custom bg active badge */
.custom-bg-status {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-radius: 10px;
  background: rgba(232,201,154,.07);
  border: 1px solid rgba(232,201,154,.18);
  margin-bottom: 14px;
  font-size: .63rem; color: var(--acc);
  animation: fpIn .2s ease;
}
.custom-bg-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 8px var(--acc);
  flex-shrink: 0; animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ══════════════════════════════════
   PiP FLOATING PLAYER
══════════════════════════════════ */
#pip-player {
  position: fixed; z-index: 600;
  border-radius: 13px; overflow: hidden;
  box-shadow: 0 28px 70px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06);
  user-select: none;
  animation: fpIn .18s ease;
}
.pip-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px;
  background: rgba(8,7,22,.6);
  border-bottom: 1px solid rgba(255,255,255,.07);
  cursor: grab;
}
.pip-bar:active { cursor: grabbing; }
.pip-drag-ico { font-size: .85rem; color: rgba(255,255,255,.15); flex-shrink: 0; }
.pip-title-inner {
  font-size: .62rem; color: rgba(255,255,255,.45); font-weight: 500;
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pip-controls { display: flex; gap: 5px; flex-shrink: 0; }
.pip-btn {
  width: 14px; height: 14px; border-radius: 50%; border: none;
  cursor: pointer; font-size: 0;
  display: flex; align-items: center; justify-content: center;
  transition: filter .14s;
}
.pip-btn:hover { filter: brightness(1.3); }
.pip-min   { background: rgba(255,190,0,.85); }
.pip-close { background: rgba(255,75,75,.85); }
.pip-resize-handle {
  position: absolute; bottom: 0; right: 0;
  width: 20px; height: 20px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.06) 50%);
  border-radius: 0 0 13px 0; opacity: .35; transition: opacity .13s;
}
.pip-resize-handle:hover { opacity: .9; }
body.zen #pip-player { opacity: 0; pointer-events: none; transition: opacity .4s; }

/* ══════════════════════════════════
   MUSIC PANEL
══════════════════════════════════ */
.music-url-row { display: flex; gap: 6px; margin-bottom: 0; }
.pip-popout-btn {
  padding: 6px 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px; color: rgba(255,255,255,.35);
  font-size: .78rem; cursor: pointer;
  transition: all .13s; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pip-popout-btn:hover {
  background: rgba(255,255,255,.11);
  color: var(--acc); border-color: rgba(232,201,154,.3);
}

/* Station rows */
.station-row { margin-bottom: 5px; }
.station-main {
  display: flex; align-items: center;
  padding: 7px 10px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: all .14s; gap: 7px;
}
.station-main:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.13); }
.station-main.on    { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
.station-label {
  font-size: .64rem; color: rgba(255,255,255,.4); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .13s;
}
.station-main:hover .station-label, .station-main.on .station-label { color: rgba(255,255,255,.88); }
.station-actions { display: flex; gap: 4px; flex-shrink: 0; }
.stn-btn {
  width: 24px; height: 24px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.28);
  font-size: .66rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .13s; font-family: var(--ff);
}
.stn-btn:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); }
.stn-pip:hover { color: var(--acc); border-color: rgba(232,201,154,.3); }
.station-edit-form { padding: 7px 0 3px; }
.station-tip {
  margin-top: 9px; padding: 7px 10px; border-radius: 9px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.04);
  font-size: .57rem; color: rgba(255,255,255,.18); line-height: 1.65;
}
.station-tip strong { color: rgba(255,255,255,.38); }

/* ══════════════════════════════════
   TOAST — better style
══════════════════════════════════ */
#toast {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  background: rgba(8,7,22,.96);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50px; padding: 8px 18px;
  font-size: .68rem; color: rgba(255,255,255,.75);
  z-index: 800; opacity: 0; pointer-events: none;
  white-space: nowrap; transition: opacity .22s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
#toast.on { opacity: 1; }

/* ══════════════════════════════════
   CALENDAR
══════════════════════════════════ */
.cal-day-hdr {
  font-size: .5rem; color: rgba(255,255,255,.18);
  text-align: center; padding: 4px 0; font-weight: 700;
  letter-spacing: .04em;
}
.cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 7px; font-size: .65rem; color: rgba(255,255,255,.35);
  cursor: pointer; transition: all .12s; position: relative;
}
.cal-day:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.cal-day.today {
  color: var(--acc); font-weight: 700;
  background: rgba(232,201,154,.08);
}
.cal-day.has-mood::after {
  content: ''; position: absolute; bottom: 2px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--acc); opacity: .8;
}
.cal-day.has-tasks::before {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.3);
}

/* ══════════════════════════════════
   POMODORO RING — glow effect
══════════════════════════════════ */
.ring-fg {
  filter: drop-shadow(0 0 8px rgba(232,201,154,.45));
  transition: stroke-dashoffset 1s linear, stroke .3s ease;
}

/* ══════════════════════════════════
   SOUND ITEMS — improved
══════════════════════════════════ */
.sound-item {
  padding: 9px 8px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  cursor: pointer; transition: all .14s;
}
.sound-item:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }
.sound-item.on {
  background: rgba(232,201,154,.08);
  border-color: rgba(232,201,154,.22);
}
.sound-item.on .si-name { color: var(--acc); }
.si-ico { font-size: .95rem; display: block; margin-bottom: 3px; }
.si-name { font-size: .58rem; color: rgba(255,255,255,.4); font-weight: 500; display: block; }
.si-status { display: none !important; }

/* ══════════════════════════════════
   ZEN HINT
══════════════════════════════════ */
#zen-hint {
  font-size: .62rem; color: rgba(255,255,255,.2);
  letter-spacing: .04em;
}

/* ══════════════════════════════════
   BREATHING — pattern sub-labels
══════════════════════════════════ */
.br-pat {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 6px 4px;
}
.br-pat-sub {
  font-size: .48rem; color: rgba(255,255,255,.25);
  letter-spacing: .05em; text-transform: uppercase;
  font-weight: 500;
}
.br-pat.active .br-pat-sub { color: var(--acc); opacity: .7; }

/* ══════════════════════════════════
   NOTES — better textarea
══════════════════════════════════ */
#notes-area {
  height: 220px; resize: vertical;
  min-height: 120px;
}

/* ══════════════════════════════════
   MOOD HISTORY — cleaner
══════════════════════════════════ */
.mood-history { border-top: 1px solid rgba(255,255,255,.05); padding-top: 10px; margin-top: 4px; }
.mood-hist-row {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 0; font-size: .62rem;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.mood-hist-row:last-child { border-bottom: none; }
.mood-hist-date { color: rgba(255,255,255,.3); flex: 1; }
.mood-hist-mood { font-size: .9rem; }
.mood-hist-energy { display: flex; gap: 3px; }
.eh-dot { width: 7px; height: 7px; border-radius: 3px; background: rgba(255,255,255,.08); }
.eh-dot.on { background: var(--acc); }

/* ══════════════════════════════════
   PRESET GRID — labels wrap properly
══════════════════════════════════ */
.prb {
  padding: 6px 3px; font-size: .56rem; font-weight: 600;
  white-space: pre-line; line-height: 1.35;
  transition: all .13s;
}
.prb:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.prb.on { background: rgba(232,201,154,.1) !important; border-color: rgba(232,201,154,.3) !important; color: var(--acc) !important; }

/* ══════════════════════════════════
   TIMER CONTROLS — larger tap target
══════════════════════════════════ */
.btn-sm {
  width: 32px; height: 32px;
  transition: all .13s;
}
.btn-sm:hover {
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  transform: scale(1.08);
}

/* ══════════════════════════════════
   GENERAL BUTTON IMPROVEMENTS
══════════════════════════════════ */
.btn-main {
  letter-spacing: .04em;
  font-weight: 700;
  transition: filter .14s, transform .1s, box-shadow .14s;
  box-shadow: 0 4px 16px rgba(232,201,154,.2);
}
.btn-main:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(232,201,154,.3);
}
.btn-main:active { transform: translateY(0); }

/* ══════════════════════════════════
   WEATHER — better display
══════════════════════════════════ */
#weather {
  display: flex; align-items: center; gap: 5px;
  font-size: .68rem; color: rgba(255,255,255,.45);
  padding: 0 4px;
}
#weather span { transition: color .3s; }

/* ══════════════════════════════════
   CITY SUGGESTIONS
══════════════════════════════════ */
.city-sugg {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: rgba(10,8,28,.98);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px; overflow: hidden;
  z-index: 300; display: none;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  backdrop-filter: blur(20px);
}
.city-sugg.open { display: block; animation: fpIn .14s ease; }
.city-sugg-item {
  padding: 8px 12px; font-size: .68rem; color: rgba(255,255,255,.5);
  cursor: pointer; transition: all .11s;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.city-sugg-item:last-child { border-bottom: none; }
.city-sugg-item:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.9); }
.city-current { font-size: .6rem; color: rgba(255,255,255,.25); margin-top: 4px; padding: 0 2px; }

/* ══════════════════════════════════
   CRITICAL FIX — YouTube iframe
   style.css sets opacity:0 and pointer-events:none on #bg-yt
   We need the opacity to be controllable via JS
══════════════════════════════════ */
#bg-yt {
  transition: opacity 1.5s ease !important;
  pointer-events: none !important; /* keep none — it's background only */
}

/* When JS sets opacity:1, it will show */
#bg-yt-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Make sure bg-img covers full screen for uploaded images */
#bg-img {
  position: absolute;
  inset: 0;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Video element covers full screen */
#bg-video {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100vw; min-height: 100vh;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}