/* KPPF Referral — оформление вкладки кабинета (тёмная тема сайта). */
.ref-intro{color:#8b8380;line-height:1.55;margin:6px 0 4px}
.ref-accent{color:#0cb563}

.ref-code-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#262626;border:1px solid #313131;border-radius:12px;padding:14px 18px;margin:18px 0 14px}
.ref-code-box .lbl{color:#8b8380;font-size:13px}
.ref-code-box .code{font-size:22px;font-weight:700;letter-spacing:2px;color:#0cb563}

.ref-linkrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ref-input{flex:1;min-width:240px;padding:13px 15px;border:1px solid #313131;border-radius:10px;background:#262626;color:#f2f2f2;font-size:14px}
.ref-note{color:#7a7272;font-size:13px;line-height:1.5;margin-top:8px}
.ref-copied{display:none;margin-top:8px;color:#0cb563;font-size:13px}

.ref-share{margin-top:20px;padding-top:16px;border-top:1px solid #262626}
.ref-share__row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:10px}
.ref-saved{display:none;color:#0cb563;font-size:13px}
.ref-share__pct{display:inline-block;min-width:52px;text-align:center;background:rgba(12,181,99,.14);color:#0cb563;font-weight:700;border-radius:8px;padding:4px 10px;font-size:15px}

/* красивый ползунок доли */
.ref-range-wrap{display:inline-block;width:100%;max-width:280px}
.ref-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:6px;background:#313131;background-image:linear-gradient(#0cb563,#0cb563);background-repeat:no-repeat;background-size:var(--ref-fill,0%) 100%;outline:none;cursor:pointer}
.ref-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#0cb563;border:3px solid #1a1a1a;box-shadow:0 0 0 1px #0cb563,0 2px 7px rgba(0,0,0,.5);cursor:pointer;transition:transform .12s}
.ref-range::-webkit-slider-thumb:hover{transform:scale(1.12)}
.ref-range::-webkit-slider-thumb:active{transform:scale(1.05)}
.ref-range::-moz-range-track{height:8px;border-radius:6px;background:#313131}
.ref-range::-moz-range-progress{height:8px;border-radius:6px;background:#0cb563}
.ref-range::-moz-range-thumb{width:20px;height:20px;border:3px solid #1a1a1a;border-radius:50%;background:#0cb563;box-shadow:0 0 0 1px #0cb563;cursor:pointer}
.ref-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(12,181,99,.35),0 0 0 1px #0cb563}
.ref-range-ticks{display:flex;justify-content:space-between;margin-top:7px;color:#7a7272;font-size:12px}

/* уровни вознаграждения */
.ref-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.ref-tier{background:#262626;border:1px solid #313131;border-radius:12px;padding:16px 16px 14px}
.ref-tier .ln{color:#8b8380;font-size:13px;margin-bottom:8px}
.ref-tier .pct{color:#0cb563;font-size:28px;font-weight:800;line-height:1;letter-spacing:-.5px}
.ref-tier .sub{color:#7a7272;font-size:12px;margin-top:8px;line-height:1.4}
.ref-repeat{margin-top:14px;color:#c9c9c9;font-size:14px}
.ref-repeat b{color:#0cb563}

/* статистика */
.ref-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:6px}
.ref-stat{background:#262626;border:1px solid #313131;border-radius:12px;padding:16px}
.ref-stat .k{color:#8b8380;font-size:13px;margin-bottom:8px}
.ref-stat .v{color:#f2f2f2;font-size:24px;font-weight:700;line-height:1}

/* выплаты */
.ref-pay-note{color:#8b8380;line-height:1.55;margin-bottom:14px}
.ref-pay-input{width:170px;padding:12px 14px;border:1px solid #313131;border-radius:10px;background:#262626;color:#f2f2f2;font-size:15px}
.ref-a{color:#0cb563;text-decoration:none;border-bottom:1px solid rgba(12,181,99,.4)}
.ref-a:hover{border-bottom-color:#0cb563}
.ref-msg{display:none;margin-left:10px;font-size:14px}

/* история / заявки */
.ref-tablewrap{overflow-x:auto;margin-top:8px;border:1px solid #262626;border-radius:12px}
.ref-tbl{width:100%;border-collapse:collapse;font-size:14px}
.ref-tbl th{color:#8b8380;font-weight:500;text-align:left;padding:13px 16px;border-bottom:1px solid #313131;white-space:nowrap}
.ref-tbl td{padding:14px 16px;border-bottom:1px solid #222;color:#e7e2e2}
.ref-tbl tr:last-child td{border-bottom:0}
.ref-pill{display:inline-block;padding:3px 11px;border-radius:20px;font-size:12px;background:rgba(12,181,99,.14);color:#0cb563;white-space:nowrap}
.ref-pill--muted{background:rgba(122,114,114,.18);color:#9a9490}

/* пошаговая инструкция */
.ref-steps{display:grid;gap:12px;margin-top:14px}
.ref-step{display:flex;gap:14px;align-items:flex-start;background:#262626;border:1px solid #313131;border-radius:12px;padding:15px 16px}
.ref-step__n{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:rgba(12,181,99,.16);color:#0cb563;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px}
.ref-step__t{color:#c9c9c9;line-height:1.5;font-size:14px;padding-top:3px}
.ref-step__t b{color:#f2f2f2}

@media (max-width:640px){
  .ref-tiers,.ref-stats{grid-template-columns:1fr 1fr}
  .ref-tier .pct{font-size:24px}
}

/* ===== публичный лендинг реф-программы ===== */
.rl-wrap{max-width:1000px;margin:0 auto;padding:0 20px}
.rl-hero{text-align:center;padding:56px 0 40px}
.rl-hero h1{font-size:40px;line-height:1.1;margin:0 0 16px;color:#f2f2f2;font-weight:800;letter-spacing:-.5px}
.rl-hero p{font-size:18px;color:#8b8380;max-width:640px;margin:0 auto 26px;line-height:1.5}
.rl-cta{display:inline-block;background:#0cb563;color:#fff;font-weight:700;font-size:16px;padding:15px 34px;border-radius:12px;text-decoration:none;transition:background .15s}
.rl-cta:hover{background:#119455}
.rl-cta--ghost{background:transparent;color:#0cb563;border:1px solid #0cb563}
.rl-cta--ghost:hover{background:rgba(12,181,99,.1)}
.rl-sec{padding:34px 0;border-top:1px solid #232323}
.rl-sec h2{font-size:26px;color:#f2f2f2;margin:0 0 6px;font-weight:700}
.rl-sec .rl-sub{color:#8b8380;margin:0 0 22px;font-size:15px}
.rl-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.rl-stepc{background:#1a1a1a;border:1px solid #262626;border-radius:14px;padding:20px 16px}
.rl-stepc .n{width:34px;height:34px;border-radius:50%;background:rgba(12,181,99,.16);color:#0cb563;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:12px}
.rl-stepc .h{color:#f2f2f2;font-weight:600;font-size:15px;margin-bottom:6px}
.rl-stepc .d{color:#8b8380;font-size:13px;line-height:1.45}
.rl-final{text-align:center;padding:44px 0 60px}
@media (max-width:820px){
  .rl-hero h1{font-size:30px}
  .rl-steps{grid-template-columns:1fr 1fr}
}