/* ----------------------------------------
   BirdScan — HAS Green Academy huisstijl
   ---------------------------------------- */

/* -- Reset -- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img, video { display: block; max-width: 100%; }
button { cursor: pointer; font: inherit; }

/* -- HAS Green Academy design tokens -- */
:root {
  /* Brand palette — official HAS colours */
  --has-green:       #28463A;   /* HAS dark green  */
  --has-green-mid:   #1e3830;   /* hover / pressed  */
  --has-green-lt:    #14BF54;   /* HAS light green  */
  --has-green-pale:  #E3F9EC;   /* light tint       */
  --has-green-xpale: #F2FDF6;   /* extra light tint */

  --has-blue:        #006BFF;   /* HAS light blue   */
  --has-blue-dark:   #173951;   /* HAS dark blue    */
  --has-blue-pale:   #E6F0FF;   /* blue tint        */

  /* Neutrals */
  --bg:          #F5F8F6;
  --surface:     #FFFFFF;
  --raised:      #EFF5F1;
  --border:      #C5DDD0;
  --border2:     #94C4A8;
  --text:        #1A2820;
  --text-dim:    #2A4438;
  --text-muted:  #567060;

  /* Semantic */
  --amber:       #E07B00;
  --red:         #E32B00;   /* HAS light red */

  /* Radius */
  --r-sm:  6px;
  --r:    10px;
  --r-lg: 14px;

  /* Shadows */
  --shadow-sm: 0 1px 4px  rgba(40,70,58,.10);
  --shadow:    0 4px 18px rgba(40,70,58,.14);
  --shadow-md: 0 6px 28px rgba(40,70,58,.18);
}

/* -- Base -- */
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.55;
}

/* ----------------------------------------
   HEADER  — dark green bar (HAS dark green)
   ---------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--has-green);           /* #28463A */
  border-bottom: 3px solid var(--has-green-lt);
  padding: 0 28px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.logo { display: flex; align-items: center; gap: 12px; }

/* Lichtgroen logo direct op donkere header — geen filter nodig */
.logo-img {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
}
.logo-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,.25);
  margin: 0 4px;
}
.logo-app {
  font-size: 1.1rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  letter-spacing: -.2px;
}
.logo-app strong { font-weight: 800; color: #fff; }

.header-right { display: flex; align-items: center; gap: 12px; }

.live-badge {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  padding: 4px 13px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.live-dot {
  width: 7px; height: 7px;
  background: var(--has-green-lt);
  border-radius: 50%;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .2; } }

.clock {
  font-family: 'Courier New', monospace;
  font-size: .82rem;
  font-weight: 700;
  color: var(--has-green-lt);
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.15);
  padding: 4px 12px;
  border-radius: var(--r-sm);
  letter-spacing: .5px;
}

/* ----------------------------------------
   LAYOUT
   ---------------------------------------- */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.top-grid {
  display: grid;
  grid-template-columns: 1fr 295px;
  gap: 20px;
  align-items: start;
}

/* ----------------------------------------
   STREAM CARD
   ---------------------------------------- */
.stream-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.stream-top-bar,
.stream-bottom-bar {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  gap: 10px;
  font-size: .81rem;
  color: var(--text-dim);
  background: var(--has-green-xpale);
}
.stream-top-bar   { border-bottom: 1px solid var(--border); }
.stream-bottom-bar { border-top: 1px solid var(--border); flex-wrap: wrap; }
.stream-bottom-bar span { display: flex; align-items: center; gap: 5px; }

.location-tag { flex: 1; font-weight: 600; color: var(--has-green); }
.stream-actions { display: flex; gap: 8px; }

.video-box {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0a1a0a;
  overflow: hidden;
}
#webcam { width: 100%; height: 100%; object-fit: cover; }

#detection-video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #0a1a0a;
  display: block;
}

/* Processing banner — shown while no finished clip is available */
.processing-banner {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: rgba(10, 26, 10, .85);
  color: var(--has-green-lt);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.processing-banner[hidden] { display: none; }
.processing-spinner {
  width: 1.1rem; height: 1.1rem;
  border: 2px solid var(--has-green-lt);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.video-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, #001f10 0%, #003820 60%, #001f10 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
}
.ph-icon { font-size: 3.5rem; }
.video-placeholder p {
  font-size: .9rem;
  color: rgba(255,255,255,.65);
  max-width: 280px;
}

/* ----------------------------------------
   BUTTONS
   ---------------------------------------- */
.btn {
  background: var(--surface);
  border: 1.5px solid var(--border2);
  color: var(--has-green);
  padding: 6px 14px;
  border-radius: var(--r-sm);
  font-size: .81rem;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn:hover { background: var(--has-green-pale); border-color: var(--has-green); }
.btn-primary { background: var(--has-green); border-color: var(--has-green); color: #fff; }
.btn-primary:hover { background: var(--has-green-mid); border-color: var(--has-green-mid); }

/* ----------------------------------------
   SIDEBAR
   ---------------------------------------- */
.sidebar { display: flex; flex-direction: column; gap: 14px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.card-eyebrow {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 10px;
}

.week-info {
  background: var(--has-green-xpale);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  font-size: .84rem;
  color: var(--text-dim);
  text-align: center;
}
.week-info strong {
  display: block;
  font-size: .9rem;
  color: var(--has-green);
  font-weight: 700;
  margin-bottom: 2px;
}

.now-bird { display: flex; align-items: center; gap: 12px; }
.bird-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,79,50,.3);
  transition: background .4s ease;
  overflow: hidden;
}
.bird-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.bird-name  { font-size: .95rem; font-weight: 700; color: var(--text); }
.bird-latin { font-size: .71rem; color: var(--text-muted); font-style: italic; }
/* Blue accent on bird time */
.bird-time  { font-size: .73rem; color: var(--has-blue); font-weight: 600; margin-top: 3px; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-box {
  background: var(--has-green-xpale);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.stat-val { font-size: 1.5rem; font-weight: 800; color: var(--has-green); line-height: 1; }
.stat-lbl { font-size: .63rem; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); font-weight: 600; }

/* ----------------------------------------
   SECTION HEADER
   ---------------------------------------- */
.section-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--has-green-pale);
}
.section-header h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--has-green);
}
.badge {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 12px;
}
.badge.amber {
  background: rgba(224,123,0,.1);
  border: 1px solid rgba(224,123,0,.3);
  color: var(--amber);
}
.badge.green {
  background: var(--has-green-pale);
  border: 1px solid var(--border2);
  color: var(--has-green);
}

/* ----------------------------------------
   HOT PICKS
   ---------------------------------------- */
.picks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.pick-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pick-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--has-green-lt);
}

.pick-thumb {
  aspect-ratio: 16 / 9;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pick-thumb.forest {
  background: linear-gradient(135deg, #14201a 0%, #28463A 55%, #101e16 100%);
}
.pick-thumb.sky {
  background: linear-gradient(135deg, #0d1e30 0%, #173951 45%, #006BFF22 100%);
}
.pick-thumb.dawn {
  background: linear-gradient(135deg, #201408 0%, #28463A 55%, #173951 100%);
}
.pick-thumb.meadow {
  background: linear-gradient(135deg, #0d2010 0%, #14BF5433 45%, #28463A 100%);
}
.pick-thumb.dusk {
  background: linear-gradient(135deg, #1f0a2e 0%, #4a1060 50%, #e32b0022 100%);
}

.pick-bird {
  font-size: 4rem;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
  animation: hover-float 3.2s ease-in-out infinite;
}
.pick-card:nth-child(2) .pick-bird { animation-delay: -1.1s; }
.pick-card:nth-child(3) .pick-bird { animation-delay: -2.3s; }

/* Bird photo inside thumb */
.pick-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform .4s ease;
}
.pick-card:hover .pick-photo { transform: scale(1.06); }

/* Skeleton loaders */
@keyframes skel-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skel {
  background: linear-gradient(90deg,
    var(--raised) 25%, var(--border) 50%, var(--raised) 75%);
  background-size: 800px 100%;
  animation: skel-shimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
}
.skel-thumb {
  position: absolute; inset: 0;
  border-radius: 0;
}
.skel-line {
  height: 13px; width: 80%; margin-bottom: 9px;
}
.skel-line-lg  { width: 60%; height: 16px; }
.skel-line-sm  { width: 45%; height: 10px; }
.picks-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
  font-size: .88rem;
}

@keyframes hover-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.rank {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.55);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: .72rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.rank.gold   { color: #FFD700; }
.rank.silver { color: #C8C8D0; }
.rank.bronze { color: #CD9060; }

.tag-special {
  position: absolute; top: 8px; right: 8px;
  background: var(--has-green-lt);
  color: var(--has-green);
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 5px;
}

.pick-body { padding: 14px 16px; }
.p-name  { font-size: .95rem; font-weight: 700; color: var(--text); }
.p-latin { font-size: .71rem; color: var(--text-muted); font-style: italic; margin-bottom: 7px; }
.p-desc  { font-size: .79rem; color: var(--text-dim); line-height: 1.48; margin-bottom: 10px; }
.p-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: 6px;
}
.p-date { font-size: .71rem; color: var(--text-muted); }
.p-tag {
  background: var(--has-green-pale);
  border: 1px solid var(--border);
  color: var(--has-green);
  font-size: .69rem; font-weight: 700;
  padding: 2px 8px; border-radius: 6px;
}
.p-clip-btn {
  display: inline-block;
  margin-top: 10px;
  font-size: .75rem;
  padding: 5px 14px;
}

/* ----------------------------------------
   DETECTION INFO BAR
   ---------------------------------------- */
.detection-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 12px;
  background: var(--has-green-xpale);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.detection-bird {
  display: flex; align-items: center; gap: 10px;
}
.det-thumb {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--has-green-lt);
  flex-shrink: 0;
}
.detection-badges {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.det-badge {
  background: var(--has-green-pale);
  border: 1px solid var(--border2);
  color: var(--has-green);
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
}

/* Confidence badge for sidebar 'Laatste detectie' */
.conf-badge {
  display: inline-block;
  min-width: 44px;
  text-align: center;
  padding: 3px 8px;
  font-size: .78rem;
  font-weight: 800;
  border-radius: 10px;
  color: #fff;
  margin-left: 6px;
}
.conf-good { background: linear-gradient(90deg,#2ecc71,#27ae60); }
.conf-warn { background: linear-gradient(90deg,#f1c40f,#e67e22); }
.conf-low  { background: linear-gradient(90deg,#e74c3c,#c0392b); }

/* Sighting preview modal tweaks */
.modal-panel { position: relative; }
.modal-close {
  position: absolute; top: 10px; right: 12px; background: transparent; border: none; font-size: 1.1rem; cursor: pointer;
}
.modal-panel img { display: block; margin: 10px 0; max-height: 420px; width: auto; }
.modal #sighting-meta { color: var(--text-muted); margin-top: 8px; }

/* ----------------------------------------
   CHART SECTION
   ---------------------------------------- */
.chart-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 24px;
  box-shadow: var(--shadow);
}

.chart { display: flex; flex-direction: column; gap: 12px; }

.bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 50px;
  align-items: center;
  gap: 14px;
}
.bar-label {
  display: flex; align-items: center; gap: 8px;
  font-size: .87rem; font-weight: 600;
  color: var(--text); white-space: nowrap;
}
.bird-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.bar-track {
  height: 26px;
  background: var(--has-green-xpale);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.bar-fill {
  height: 100%; border-radius: 5px; width: 0;
  transition: width 1.15s cubic-bezier(.4,0,.2,1);
  position: relative; overflow: hidden;
}
.bar-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 60%, rgba(255,255,255,.18) 100%);
}
.bar-num {
  font-size: .88rem; font-weight: 700;
  text-align: right; color: var(--text-dim);
}
.bar-row:first-child .bar-num { color: var(--has-green); }

/* ----------------------------------------
   SPECIES CATALOG
   ---------------------------------------- */

/* Filter pills */
.sc-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sc-filter-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text-dim);
  padding: 5px 16px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.sc-filter-btn:hover  { background: var(--has-green-pale); border-color: var(--has-green); color: var(--has-green); }
.sc-filter-btn.active { background: var(--has-green); border-color: var(--has-green); color: #fff; }

/* List container */
.sc-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* List row */
.sc-row {
  display: grid;
  grid-template-columns: 44px 1fr 220px;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--raised);
  transition: background .12s;
}
.sc-row:last-child { border-bottom: none; }
.sc-row:hover      { background: var(--has-green-xpale); }

/* Avatar */
.sc-row-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.sc-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.sc-avatar-initial {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 800; color: #fff;
}

/* Name + latin */
.sc-row-info   { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sc-row-name   { font-size: .87rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-row-latin  { font-size: .68rem; color: var(--text-muted); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Progress bar + count */
.sc-row-bar-wrap  { display: flex; align-items: center; gap: 10px; }
.sc-row-bar-track {
  flex: 1;
  height: 8px;
  background: var(--raised);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.sc-row-bar-fill {
  height: 100%; border-radius: 4px;
  transition: width .9s cubic-bezier(.4,0,.2,1);
  opacity: .85;
}
.sc-row-total { font-size: .78rem; font-weight: 700; color: var(--text-dim); white-space: nowrap; min-width: 32px; text-align: right; }

/* Status meta */
.sc-row-meta   { display: flex; align-items: center; gap: 7px; justify-content: flex-end; }
.sc-dot        { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sc-dot-today  { background: var(--has-green-lt); }
.sc-dot-week   { background: var(--has-blue); }
.sc-dot-seen   { background: var(--amber); }
.sc-dot-unseen { background: var(--border2); }
.sc-row-status { font-size: .72rem; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.sc-row-date   { font-size: .68rem; color: var(--text-muted); white-space: nowrap; }

@media (max-width: 1050px) { .sc-row { grid-template-columns: 44px 1fr 120px; } .sc-row-date { display: none; } }
@media (max-width: 700px)  { .sc-row { grid-template-columns: 40px 1fr; gap: 10px; } .sc-row-meta { display: none; } }

/* Show-more button */
.sc-show-more {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--surface);
  border: none;
  border-top: 1px solid var(--raised);
  color: var(--has-green);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s;
}
.sc-show-more:hover { background: var(--has-green-xpale); }

/* ----------------------------------------
   FOOTER
   ---------------------------------------- */
.footer {
  background: var(--has-green);
  border-top: 3px solid var(--has-green-lt);
  padding: 18px 24px;
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex; align-items: center;
  justify-content: center;
  gap: 12px; flex-wrap: wrap;
  font-size: .78rem;
  color: rgba(255,255,255,.75);
}
/* Footer logo: white version via CSS filter (dark bg) */
.footer-logo-img {
  height: 26px;
  width: auto;
}
.footer-sep { color: rgba(20,191,84,.45); }

/* ── AI-model sidebar card ── */
.ai-info { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ai-row  { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .78rem; }
.ai-lbl  { color: var(--text-muted); white-space: nowrap; }
.ai-val  { font-weight: 600; color: var(--text-main); text-align: right; }

/* ----------------------------------------
   TOAST
   ---------------------------------------- */
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--surface);
  border: 1.5px solid var(--has-green-lt);
  border-left: 4px solid var(--has-green);
  border-radius: var(--r);
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-md);
  z-index: 999; max-width: 300px;
  transform: translateX(calc(100% + 40px));
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.toast.visible { transform: translateX(0); }

.toast-icon { font-size: 1.4rem; flex-shrink: 0; }
.toast-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.toast-body b    { font-size: .84rem; color: var(--has-green); font-weight: 700; }
.toast-body span { font-size: .74rem; color: var(--text-muted); font-style: italic; }
.toast-x {
  background: none; border: none;
  color: var(--text-muted); font-size: .8rem;
  padding: 2px 5px; flex-shrink: 0; border-radius: 4px;
}
.toast-x:hover { color: var(--has-green); background: var(--has-green-pale); }

/* ----------------------------------------
   MODAL (feedback)
   ---------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.45);
}
.modal-panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 18px;
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  max-width: 520px;
  width: calc(100% - 48px);
  z-index: 1510;
}
.fb-initial { display: flex; gap: 12px; justify-content: center; margin: 12px 0; }
.fb-quick { padding: 12px 18px; font-size: 1rem; }
.fb-reasons { margin-top: 10px; }
.fb-options { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }

.fb-notes-wrapper { margin-top: 8px; }
.fb-suggestions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fb-sugg { font-size: .82rem; padding: 6px 10px; }
.fb-notes-wrapper textarea {
  width: 100%;
  min-height: 88px;
  max-height: 300px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .92rem;
  line-height: 1.4;
  resize: vertical;
}
.fb-notes-meta { text-align: right; color: var(--text-muted); margin-top: 6px; }

/* ----------------------------------------
   RESPONSIVE
   ---------------------------------------- */
@media (max-width: 1050px) {
  .top-grid { grid-template-columns: 1fr; }
  .sidebar  { display: grid; grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .picks-grid  { grid-template-columns: 1fr; }
  .sidebar     { grid-template-columns: 1fr 1fr; }
  .container   { padding: 14px; gap: 20px; }
  .header      { padding: 0 14px; }
  .chart-section { padding: 16px; }
}

@media (max-width: 520px) {
  .bar-row     { grid-template-columns: 110px 1fr 38px; }
  .sidebar     { grid-template-columns: 1fr; }
  .stream-actions { flex-direction: column; }
  .logo-divider, .logo-app { display: none; }
}