:root{
  --app-primary:#23b8d6;
  --app-primary-hover:#1ca3bd;
  --app-primary-soft:#dff7fb;
  --app-bg:#eef3f2;
}
body{background:var(--app-bg);}
.app-nav{
  background: var(--app-primary);
}
.btn-primary,
.btn-success,
.btn-info,
.btn-warning {
  --bs-btn-color: #11151a;
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-color: #11151a;
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-color: #11151a;
  --bs-btn-active-bg: var(--app-primary-hover);
  --bs-btn-active-border-color: var(--app-primary-hover);
  --bs-btn-disabled-color: #11151a;
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
  color: #11151a;
}
.btn-outline-primary {
  --bs-btn-color: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary);
  --bs-btn-hover-border-color: var(--app-primary);
  --bs-btn-active-bg: var(--app-primary-hover);
  --bs-btn-active-border-color: var(--app-primary-hover);
}
.btn:focus-visible,
.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(35, 184, 214, 0.25);
}
.brand-dot{
  width:12px;height:12px;border-radius:50%;
  background:#fff;display:inline-block;opacity:.9;
}
.hero{
  background: #ffffff;
  border:1px solid #e9edf3;
  border-radius:14px;
  padding:20px;
}
.card-channel{
  border:1px solid #e9edf3;
  border-radius:14px;
  overflow:hidden;
}
.card-channel .thumb{
  aspect-ratio: 1 / 1;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}
.card-channel img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.badge-soft{
  background:var(--app-primary-soft);
  color:var(--app-primary);
  border:1px solid #d8e2f0;
}