/* ===== GreenGo BPM/Key beta — tool-specific styles (layered on dither.css) ===== */

/* Flat hero variant: single column, aligned with .tool-shell content below */
.tool-hero-flat .container { grid-template-columns: 1fr; }
.tool-hero-flat .tool-shell { width: 100%; }
.tool-hero-flat { padding: 110px 0 4px; }
/* flat heroes have no visual panel to balance — drop the lead's 28px so the
   title block sits tight against whatever section follows */
.tool-hero-flat p.lead { margin-bottom: 0; }

/* Tighter vertical rhythm for beta pages (production .section is 90px) */
.section-tight { padding: 4px 0 48px; }
.section-tight + .section-tight { padding-top: 0; }
.lib-teaser-tight { margin-top: 1.5rem; }

/* --- library search + view toggle + load more --- */
.lib-controls {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  margin-top: .2rem;
}
.lib-search {
  flex: 1 1 280px; max-width: 480px;
  display: flex; align-items: center; gap: .55rem;
  border: 1px solid var(--gg-border-strong); border-radius: var(--radius-md, 8px);
  background: var(--bg-card); padding: .65rem .9rem;
  transition: border-color var(--gg-transition);
}
.lib-search:focus-within { border-color: var(--gg-green); }
.lib-search svg { color: var(--gg-text-dim); flex-shrink: 0; }
.lib-search input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--gg-text); font-family: var(--gg-mono); font-size: .9rem;
}
.lib-search input::placeholder { color: var(--gg-text-dim); opacity: .7; }

.view-toggle { display: inline-flex; border: 1px solid var(--gg-border-strong); border-radius: var(--radius-md, 8px); overflow: hidden; }
.view-toggle button {
  background: transparent; border: none; cursor: pointer;
  color: var(--gg-text-dim); font-family: var(--gg-mono); font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .6rem 1rem; transition: all var(--gg-transition);
}
.view-toggle button.active { background: var(--gg-faint); color: var(--gg-green); }

.lib-count { font-family: var(--gg-mono); font-size: .72rem; color: var(--gg-text-dim); letter-spacing: .06em; }

.lib-empty { display: none; margin-top: 2rem; text-align: center; color: var(--gg-text-dim); font-family: var(--gg-mono); font-size: .85rem; }
.lib-empty.active { display: block; }

#libTracksView { display: none; }
#libTracksView.active { display: block; }
#libArtistsView.hidden { display: none; }

.load-more-wrap { text-align: center; margin-top: 1.8rem; }
#libLoadMore {
  background: transparent; border: 1px solid var(--gg-border-strong);
  border-radius: var(--radius-md, 8px); cursor: pointer;
  color: var(--gg-green); font-family: var(--gg-mono); font-size: .8rem;
  letter-spacing: .08em; padding: .7rem 1.6rem; text-transform: uppercase;
  transition: all var(--gg-transition);
}
#libLoadMore:hover { border-color: var(--gg-green); background: var(--gg-faint); }
#libLoadMore.hidden { display: none; }
.artist-card.hidden { display: none; }
mark.lib-hl { background: var(--gg-faint); color: var(--gg-green); border-radius: 2px; padding: 0 .1em; }

/* .tool-shell lives INSIDE .container — shared left rail with navbar/grids */
.tool-shell { max-width: 860px; margin: 0; }

.usage-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--gg-mono); font-size: .8rem; letter-spacing: .08em;
  color: var(--gg-text-dim);
  border: 1px solid var(--gg-border); border-radius: 999px;
  padding: .35rem .9rem; margin-top: 1rem;
}
.usage-pill b { color: var(--gg-green); font-weight: 600; }

/* --- dropzone --- */
.dropzone {
  margin-top: 2rem;
  border: 1px dashed var(--gg-border-strong);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-card);
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--gg-transition), background var(--gg-transition);
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--gg-green);
  background: var(--bg-card-hover);
}
.dropzone .dz-icon { color: var(--gg-green); margin-bottom: 1rem; }
.dropzone .dz-title { font-family: var(--gg-mono); font-size: 1.05rem; color: var(--gg-text); }
.dropzone .dz-sub { margin-top: .5rem; color: var(--gg-text-dim); font-size: .85rem; }
.dropzone input[type="file"] { display: none; }

.formats-note {
  margin-top: .9rem; font-family: var(--gg-mono); font-size: .72rem;
  color: var(--gg-text-dim); letter-spacing: .05em;
}
.privacy-note {
  margin-top: .4rem; font-size: .78rem; color: var(--gg-text-dim); opacity: .8;
}

/* --- progress --- */
.analyze-progress { display: none; margin-top: 2rem; text-align: center; }
.analyze-progress.active { display: block; }
.scan-bar {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: var(--gg-faint); position: relative; margin: 1rem auto 0; max-width: 420px;
}
.scan-bar::after {
  content: ''; position: absolute; inset: 0; width: 40%;
  background: var(--gg-green);
  animation: scan 1.4s ease-in-out infinite;
}
@keyframes scan { 0% { left: -40%; } 100% { left: 100%; } }
.analyze-status {
  font-family: var(--gg-mono); font-size: .8rem; color: var(--gg-text-dim);
  letter-spacing: .06em; margin-top: .6rem;
}

/* --- results --- */
.results { display: none; margin-top: 2rem; }
.results.active { display: block; }
.result-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}
.result-card {
  border: 1px solid var(--gg-border); border-radius: var(--radius-md, 8px);
  background: var(--bg-card); padding: 1.25rem 1rem; text-align: center;
}
.result-card .rc-label {
  font-family: var(--gg-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gg-text-dim);
}
.result-card .rc-value {
  font-family: var(--gg-mono); font-size: 1.9rem; font-weight: 600;
  color: var(--gg-green); margin-top: .4rem;
  text-shadow: 0 0 18px var(--green-glow);
}
.result-card .rc-sub { font-size: .72rem; color: var(--gg-text-dim); margin-top: .3rem; }

.locked-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem; margin-top: 1rem;
}
.locked-card {
  border: 1px dashed var(--gg-border); border-radius: var(--radius-md, 8px);
  padding: 1.25rem 1rem; text-align: center; opacity: .75;
  filter: saturate(.4);
}
.locked-card .rc-label {
  font-family: var(--gg-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gg-text-dim);
}
.locked-card .rc-value {
  font-family: var(--gg-mono); font-size: 1.1rem; color: var(--gg-text-dim);
  margin-top: .4rem;
}

.limit-box, .error-box {
  display: none; margin-top: 2rem; border-radius: var(--radius-md, 8px);
  padding: 1.5rem; text-align: center;
}
.limit-box { border: 1px solid var(--gg-border-strong); background: var(--bg-card); }
.error-box { border: 1px solid rgba(255, 80, 80, .35); background: rgba(255, 80, 80, .05); }
.limit-box.active, .error-box.active { display: block; }
.limit-box h3 { font-family: var(--gg-mono); color: var(--gg-green); font-size: 1.05rem; }
.error-box p { color: #ff9a9a; font-family: var(--gg-mono); font-size: .85rem; }

.cta-band {
  margin-top: 2.5rem; border: 1px solid var(--gg-border-strong);
  border-radius: var(--radius-md, 8px);
  background: linear-gradient(135deg, rgba(0,255,65,.07), rgba(15,232,184,.05));
  padding: 2rem; text-align: center;
}
.cta-band h3 { font-family: var(--gg-mono); color: var(--gg-text); font-size: 1.1rem; }
.cta-band p { color: var(--gg-text-dim); font-size: .9rem; margin: .6rem 0 1.2rem; }

/* --- library teaser / song library --- */
.lib-teaser { margin-top: 3rem; }
.lib-teaser h2, .lib-section h2 { font-family: var(--gg-mono); font-size: 1.2rem; color: var(--gg-text); }
.lib-teaser p { color: var(--gg-text-dim); font-size: .9rem; margin: .5rem 0 1rem; }

.song-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.song-table th {
  font-family: var(--gg-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gg-text-dim); text-align: left;
  padding: .6rem .75rem; border-bottom: 1px solid var(--gg-border);
}
.song-table td {
  padding: .7rem .75rem; border-bottom: 1px solid var(--gg-faint);
  font-size: .88rem; color: var(--gg-text);
}
.song-table td.num { font-family: var(--gg-mono); color: var(--gg-green); }
.song-table tr:hover td { background: var(--gg-faint); }
.lang-tag {
  font-family: var(--gg-mono); font-size: .65rem; letter-spacing: .1em;
  border: 1px solid var(--gg-border); border-radius: 3px;
  padding: .1rem .4rem; color: var(--gg-text-dim);
}
.artist-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem; margin-top: 1.25rem;
}
.artist-card {
  border: 1px solid var(--gg-border); border-radius: var(--radius-md, 8px);
  background: var(--bg-card); padding: 1.4rem 1.2rem;
  text-decoration: none; transition: border-color var(--gg-transition), background var(--gg-transition);
}
.artist-card:hover { border-color: var(--gg-green); background: var(--bg-card-hover); }
.artist-card .ac-name { font-family: var(--gg-mono); color: var(--gg-text); font-size: 1rem; }
.artist-card .ac-meta { color: var(--gg-text-dim); font-size: .78rem; margin-top: .35rem; }

.analysis-badge {
  font-family: var(--gg-mono); font-size: .62rem; letter-spacing: .1em;
  color: var(--gg-teal); text-transform: uppercase;
}

/* --- artwork --- */
.ac-img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--gg-border); margin-bottom: .8rem; display: block;
  background: var(--gg-faint);
}
.track-thumb {
  width: 40px; height: 40px; object-fit: cover; border-radius: 4px;
  border: 1px solid var(--gg-border); vertical-align: middle;
  margin-right: .6rem; display: inline-block;
}
.td-track { display: flex; align-items: center; }
.td-title { display: inline-block; }
.artist-hero { display: flex; align-items: center; gap: 1.5rem; }
.artist-hero-img {
  width: 120px; height: 120px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--gg-border-strong);
  box-shadow: 0 0 30px rgba(0, 255, 65, 0.15); flex-shrink: 0;
}
@media (max-width: 560px) { .artist-hero-img { width: 72px; height: 72px; } }

.hidden { display: none !important; }