:root {
  --bg: #14151a;
  --surface: #1c1e26;
  --surface-hover: #262933;
  --border: #2c2f3a;
  --text: #f2f2f5;
  --subtext: #9497a6;
  --accent: #3b6ef6;
  --accent-dim: #1f3566;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
}
.search-wrap input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 16px;
  color: var(--text);
  font-size: 14px;
  width: 240px;
  outline: none;
}
.search-wrap input:focus { border-color: var(--accent); }

.section-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px 0;
}
.section-tab-group {
  display: flex;
  gap: 4px;
}
.section-tab {
  background: none;
  border: none;
  color: var(--subtext);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 16px;
  cursor: pointer;
}
.section-tab:hover { background: var(--surface); color: var(--text); }
.section-tab.active { background: var(--accent-dim); color: var(--text); }

.content { padding: 20px 24px 48px; }

.cf-hint {
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: #c7c9d4;
  margin-bottom: 4px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.coverflow {
  position: relative;
  /* height and the custom properties below are set by cfComputeLayout() in
     app.js so exactly CF_VISIBLE_COUNT covers fill the real screen width. */
  height: 400px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  perspective: var(--cf-perspective, 1200px);
  user-select: none;
  touch-action: pan-y;
  overflow: hidden;
}

.cf-stage {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.cf-stage.dragging .cf-item { transition: none; }

.cf-item {
  /* No margin-left/top here - the JS transform's translate(-50%, -50%)
     already centers on left/top; adding a margin offset too would double it
     (that was a real bug once already - see updateCfItemTransform). */
  position: absolute;
  left: 50%;
  top: 34%;
  width: var(--cf-item-size, 168px);
  height: var(--cf-item-size, 168px);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.22, 0.68, 0, 1.01);
}

.cf-face {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cf-item-size, 168px) * 0.262);
  font-weight: 700;
  color: #14151a;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.cf-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
.cf-item.focused .cf-face {
  box-shadow: 0 22px 50px rgba(59, 110, 246, 0.35), 0 14px 34px rgba(0, 0, 0, 0.65);
}

.cf-reflection {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  transform: scaleY(-1);
  pointer-events: none;
}
.cf-reflection img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Dimmed via brightness, not alpha - stays fully opaque so it occludes
     whatever sits behind it instead of letting it show through. */
  filter: brightness(0.55);
}

.cf-reflection-fade {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  /* Taller than it needs to be, on purpose: a 3D-transformed, GPU-composited
     element shows a faint seam at its own bottom edge even when the fill
     matches the page background exactly. Making the box much taller pushes
     that edge safely past the coverflow container's own overflow:hidden clip
     (a clean cut, no seam) - the actual visible fade distance is controlled
     separately below via a fixed-relative-to-cover-size gradient stop, so
     this doesn't change how the fade looks, just where the box truly ends. */
  height: 400%;
  border-radius: 4px;
  pointer-events: none;
  /* Not flipped like .cf-reflection - fades the (opaque) reflection into the
     solid page background top-to-bottom, rather than into transparency. */
  background: linear-gradient(to bottom, transparent 0, var(--bg) calc(var(--cf-item-size, 168px) * 0.68));
}

.cf-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(28, 30, 38, 0.85);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-arrow:hover { background: var(--surface-hover); }
.cf-arrow:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
.cf-arrow-prev { left: 12px; }
.cf-arrow-next { right: 12px; }

.cf-caption {
  position: relative;
  text-align: center;
  /* margin-top is set in JS (cfComputeLayout) - it pulls the caption up to
     sit just below the focused cover's shadow instead of the coverflow
     container's own much-taller bottom edge. */
  padding: 0 56px;
}
.cf-title {
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cf-subtitle {
  font-size: 13px;
  color: var(--subtext);
  margin-top: 4px;
}

.preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.preview-modal-inner {
  width: 100%;
  max-width: 480px;
  height: 100%;
  max-height: 780px;
  background: var(--bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
}
.preview-modal-header {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding: 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.preview-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.preview-modal-close:hover { background: var(--surface-hover); }
.preview-modal-frame {
  flex: 1;
  width: 100%;
  border: none;
}

.hidden { display: none !important; }

.empty-state {
  color: var(--subtext);
  font-size: 14px;
  padding: 40px 0;
  text-align: center;
}

.cta-button {
  display: inline-block;
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(59, 110, 246, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(59, 110, 246, 0.45);
}
.cta-button:active {
  transform: translateY(0);
}