:root{
  --app:#16c964;
  --appSoft: rgba(22,201,100,.12);
  --appSoft2: rgba(22,201,100,.18);
  --appBorder: rgba(22,201,100,.35);
}

/* =========================
   PRIMARY BUTTON
========================= */
.btn.primary{
  background: linear-gradient(180deg,#22e07a,#10b85a);
  color:#001a0d;
  box-shadow: 0 10px 26px rgba(22,201,100,.28);
}
.btn.primary:hover{
  filter: brightness(1.05);
}

/* ghost hover */
.btn:hover{
  border-color: var(--appBorder);
}

/* =========================
   TABS / SIDEBAR ACTIVE
========================= */
.segBtn.active{
  background: var(--appSoft);
  border-color: var(--appBorder);
  box-shadow: inset 0 0 0 1px var(--appSoft2);
}

/* =========================
   KPI BOX
========================= */
.kpiMini{
  border-color: rgba(22,201,100,.18);
}
.kpiMini .v{
  color: #9ef3c4;
}

/* =========================
   PANELS
========================= */
.panel{
  border-color: rgba(22,201,100,.18);
}

.hero{
  border-color: rgba(22,201,100,.20);
  box-shadow: 0 0 0 1px rgba(22,201,100,.05), var(--shadow2);
}

.detailsBlock{
  border-color: rgba(22,201,100,.18);
}

.srAppCta{
  border-color: rgba(22,201,100,.18);
}

.artSug{
  border-color: rgba(22,201,100,.18);
}

/* =========================
   SWITCH
========================= */
.switch input:checked + .switchKnob{
  background: var(--appSoft);
  border-color: var(--appBorder);
}
.switch input:checked + .switchKnob::after{
  background: #e9fff3;
}

/* =========================
   REPORT BUTTONS
========================= */
.btn.report{
  border-color: rgba(22,201,100,.18);
}
.btn.report:hover{
  background: var(--appSoft);
}

/* =========================
   LIST BADGES
========================= */
.badge{
  border-color: rgba(22,201,100,.25);
  background: rgba(22,201,100,.10);
}

/* =========================
   INPUTS
========================= */
.waitInput:focus,
.textarea:focus{
  border-color: var(--appBorder);
  box-shadow: 0 0 0 3px rgba(22,201,100,.18);
}

/* =========================
   FOCUS RING GLOBAL
========================= */
.btn:focus,
.btn:focus-visible,
.sideBtn:focus,
.sideBtn:focus-visible,
.tab:focus,
.tab:focus-visible,
.waitInput:focus,
.textarea:focus,
.iconBtn:focus,
.iconBtn:focus-visible{
  box-shadow: 0 0 0 3px rgba(22,201,100,.18);
  border-color: rgba(22,201,100,.55);
}

/* =========================
   SLIDER
========================= */
input[type="range"]{
  accent-color: var(--app);
}