/* ===== CATCHES MODULE ===== */

.ct-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
}

/* ── Topbar ── */
.ct-topbar {
  background: var(--topbar-bg);
  padding: 14px 16px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.ct-back {
  width: 36px; height: 36px;
  border: none; background: rgba(255,255,255,0.12);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer; flex-shrink: 0;
}
.ct-topbar__text  { flex: 1; }
.ct-topbar__title { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
.ct-topbar__sub   { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 2px; }

/* ── Tabs ── */
.ct-tabs {
  display: flex;
  background: var(--topbar-bg);
  padding: 0 12px 10px;
  gap: 4px;
  flex-shrink: 0;
}
.ct-tab {
  flex: 1; text-align: center;
  font-size: 13px; font-weight: 600;
  padding: 7px 4px;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ct-tab.active { background: rgba(255,255,255,0.15); color: #fff; }

/* ── Scroll area ── */
.ct-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.ct-scroll {
  padding: 14px 16px calc(90px + env(safe-area-inset-bottom));
}

/* ── Section label ── */
.ct-sec-label {
  font-size: 11px; font-weight: 700;
  color: var(--label3);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 0 0 8px 2px;
  margin-top: 16px;
}
.ct-sec-label:first-child { margin-top: 0; }

/* ── Card container ── */
.ct-card {
  background: var(--bg2);
  border-radius: var(--radius-md);
  border: 0.5px solid var(--sep);
  overflow: hidden;
  margin-bottom: 4px;
}

/* ── Stats grid ── */
.ct-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}
.ct-stat-card {
  background: var(--bg2);
  border-radius: var(--radius-md);
  padding: 12px;
  border: 0.5px solid var(--sep);
}
.ct-stat-lbl  { font-size: 10px; color: var(--label3); text-transform: uppercase; letter-spacing: 0.05em; }
.ct-stat-num  { font-size: 28px; font-weight: 700; color: var(--label); margin-top: 2px; letter-spacing: -0.5px; }
.ct-stat-num--green { color: var(--green); }
.ct-stat-num--muted { color: var(--label3); }
.ct-stat-sub  { font-size: 11px; color: var(--label3); margin-top: 2px; }
.ct-stat-sub--green { color: var(--green); }
.ct-stat-sub--muted { color: var(--label4); }

/* ── Members leaderboard ── */
.ct-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--sep);
}
.ct-member-row:last-child { border-bottom: none; }

.ct-member-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.ct-avatar-0 { background: rgba(10,132,255,0.15);  color: var(--accent); }
.ct-avatar-1 { background: rgba(48,209,88,0.15);   color: var(--green);  }
.ct-avatar-2 { background: rgba(255,159,10,0.15);  color: var(--orange); }
.ct-avatar-3 { background: rgba(255,69,58,0.15);   color: var(--red);    }
.ct-avatar-4 { background: rgba(191,90,242,0.15);  color: #BF5AF2;       }

.ct-member-info  { min-width: 60px; flex-shrink: 0; }
.ct-member-name  { font-size: 13px; font-weight: 600; color: var(--label); }

.ct-member-bar-wrap {
  flex: 1; height: 6px;
  background: var(--bg3);
  border-radius: 3px; overflow: hidden;
}
.ct-member-bar { height: 100%; border-radius: 3px; transition: width 0.3s; }

.ct-member-count { font-size: 14px; font-weight: 700; color: var(--label); flex-shrink: 0; }
.ct-member-unit  { font-size: 11px; font-weight: 400; color: var(--label3); }

/* ── Fish bars ── */
.ct-bar-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-bottom: 0.5px solid var(--sep);
}
.ct-bar-row:last-child { border-bottom: none; }
.ct-bar-label { font-size: 13px; color: var(--label); min-width: 80px; }
.ct-bar-track {
  flex: 1; height: 6px;
  background: var(--bg3); border-radius: 3px; overflow: hidden;
}
.ct-bar-fill  { height: 100%; border-radius: 3px; transition: width 0.3s; }
.ct-bar-count { font-size: 13px; font-weight: 600; color: var(--label); min-width: 24px; text-align: right; }

/* ── Rivers ── */
.ct-river-row {
  display: flex; align-items: center;
  padding: 11px 14px;
  border-bottom: 0.5px solid var(--sep);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.ct-river-row:last-of-type { border-bottom: none; }
.ct-river-row:active { background: var(--bg3); }

.ct-river-info  { flex: 1; }
.ct-river-name  { font-size: 13px; font-weight: 600; color: var(--label); margin-bottom: 4px; }
.ct-river-bar-wrap { height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.ct-river-bar   { height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.3s; }

.ct-river-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: 12px; }
.ct-river-count { font-size: 13px; font-weight: 600; color: var(--accent); }
.ct-river-arrow { font-size: 18px; color: var(--label4); }
.ct-river-hint  { font-size: 11px; color: var(--label4); text-align: center; padding: 8px; }

/* ── Catch row ── */
.ct-catch-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--sep);
}
.ct-catch-row:last-child { border-bottom: none; }

.ct-catch-icon {
  font-size: 22px; flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--bg3); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.ct-catch-info   { flex: 1; min-width: 0; }
.ct-catch-fish   { font-size: 14px; font-weight: 600; color: var(--label); }
.ct-catch-meta   { font-size: 11px; color: var(--label3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ct-catch-right  { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ct-catch-badge  { font-size: 11px; padding: 2px 8px; border-radius: 8px; }
.ct-badge-kept   { background: rgba(48,209,88,0.12); color: var(--green); }
.ct-badge-rel    { background: var(--bg3); color: var(--label3); }

.ct-catch-del {
  width: 24px; height: 24px;
  border: none; background: transparent;
  font-size: 18px; color: var(--label4);
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.ct-catch-del:active { color: var(--red); }

/* ── Empty state ── */
.ct-empty {
  text-align: center;
  padding: 48px 24px;
}
.ct-empty__icon  { font-size: 48px; margin-bottom: 14px; }
.ct-empty__title { font-size: 17px; font-weight: 700; color: var(--label); margin-bottom: 8px; }
.ct-empty__sub   { font-size: 14px; color: var(--label3); line-height: 1.5; }

/* ── Form ── */
.ct-form-card { padding: 14px; }

.ct-form-label {
  font-size: 12px; font-weight: 600;
  color: var(--label3);
  margin-bottom: 6px; margin-top: 10px;
  letter-spacing: 0.03em;
}
.ct-form-label:first-child { margin-top: 0; }

.ct-form-select {
  width: 100%;
  background: var(--bg3);
  border: 0.5px solid var(--sep);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--label);
  font-size: 14px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.ct-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Counter */
.ct-counter {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg3);
  border: 0.5px solid var(--sep);
  border-radius: 10px;
  padding: 6px 12px;
  height: 42px;
}
.ct-counter__btn {
  width: 28px; height: 28px;
  border: none; background: var(--bg2);
  border-radius: 8px; cursor: pointer;
  font-size: 18px; color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  line-height: 1; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.ct-counter__btn--plus { color: var(--accent); }
.ct-counter__val {
  font-size: 18px; font-weight: 700;
  color: var(--label); min-width: 28px; text-align: center;
}

/* Toggle kept/released */
.ct-tog-row {
  display: flex; gap: 6px;
  margin-top: 2px;
}
.ct-tog {
  flex: 1; padding: 10px;
  border: 0.5px solid var(--sep);
  border-radius: 10px;
  background: var(--bg3); color: var(--label3);
  font-size: 13px; font-weight: 500;
  font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s;
}
.ct-tog.active {
  background: rgba(48,209,88,0.12);
  color: var(--green);
  border-color: rgba(48,209,88,0.3);
  font-weight: 600;
}

/* Save button */
.ct-save-btn {
  width: 100%;
  background: var(--accent);
  color: #fff; border: none;
  border-radius: var(--radius-md);
  padding: 13px; font-size: 15px; font-weight: 600;
  cursor: pointer; margin-top: 14px;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ct-save-btn:active { opacity: 0.85; }