/* ===================== CONTROLS ===================== */
.fb{display:flex;gap:var(--sp2);align-items:center;flex-wrap:wrap;margin-bottom:var(--sp3)}
.fb select,.fb input{background:var(--ibg);border:1px solid var(--bdr);border-radius:var(--r-sm);
  padding:7px 10px;color:var(--tx);font-size:13px;outline:none;transition:border-color .15s,box-shadow .15s}
.fb input{width:210px}
.fb select:focus,.fb input:focus{border-color:var(--accent);box-shadow:var(--ring)}
.btn{padding:7px 13px;border-radius:var(--r-sm);border:1px solid var(--bdr);cursor:pointer;
  font-size:12.5px;font-weight:600;background:transparent;color:var(--txm);transition:all .15s;
  display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--accent);color:var(--accent);background:var(--card-h)}
.btn-a{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
  border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.btn-w{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber);
  border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
.btn-p{background:linear-gradient(135deg,var(--accent-h),var(--brand-2));color:#04121a;border:none;font-weight:550}
/* Restates the gradient: `.btn:hover` above is more specific than `.btn-p` and
   would otherwise replace it with the flat hover grey. */
.btn-p:hover{background:linear-gradient(135deg,var(--accent-h),var(--brand-2));
  filter:brightness(1.08);color:#04121a}
.btn:disabled{opacity:.45;cursor:not-allowed}
.tg{display:inline-flex;gap:2px;background:var(--ibg);border-radius:var(--r-md);padding:3px;
  border:1px solid var(--bdr)}
.tg button{padding:5px 12px;border-radius:var(--r-sm);border:none;cursor:pointer;font-size:12px;
  font-weight:600;background:transparent;color:var(--txd);transition:all .15s}
.tg button.active{background:var(--card);color:var(--accent);box-shadow:var(--shadow)}
.subnav{display:inline-flex;gap:2px;padding:3px;background:var(--ibg);border:1px solid var(--bdr);
  border-radius:var(--r-md);margin-bottom:var(--sp4);flex-wrap:wrap}
.subnav button{padding:7px 15px;border:none;border-radius:var(--r-sm);background:transparent;
  color:var(--txm);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.subnav button:hover{color:var(--tx)}
.subnav button.active{background:var(--card);color:var(--accent);box-shadow:var(--shadow)}
.subnav button .n{margin-left:6px;font-size:11px;font-weight:600;opacity:.7}

.pg{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sp3);
  padding-top:var(--sp3);border-top:1px solid var(--bdr)}
.pg .pi2{font-size:12px;color:var(--txd)}
.pg .pc{display:flex;gap:3px}
.pg .pb{width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);border:1px solid var(--bdr);background:transparent;color:var(--txm);
  cursor:pointer;font-size:12px;transition:all .15s}
.pg .pb:hover{border-color:var(--accent);color:var(--accent)}
.pg .pb.active{background:var(--accent);color:#04121a;border-color:var(--accent);font-weight:600}