/* ============================================================
   Kassa-new — стили модальной кассы goldera (порт с zabkabet)
   Палитра: тёмно-янтарная под сайт goldera, акцент — фирменный
   слоистый золотой градиент (как кнопки шапки) + рамка #eec248.
   Адаптив: desktop / tablet / mobile / small-mobile.
   ============================================================ */

:root {
  --kn-bg-page:        #0e0a01;
  --kn-bg-card:        #1f1704;
  --kn-bg-card-2:      #251c06;
  --kn-bg-elev:        #2b2008;
  --kn-border:         #3a2c10;
  --kn-border-active:  #eec248;
  --kn-text:           #f5eeda;
  --kn-text-muted:     #9a8d68;
  --kn-text-dim:       #b3a682;
  --kn-accent:         #D28D29;
  --kn-accent-2:       #E8B21D;
  --kn-accent-bright:  #FFD700;
  --kn-accent-grad:    radial-gradient(68.61% 223.81% at 93.07% 3.57%, rgba(249, 176, 26, 0.3) 0%, rgba(249, 176, 26, 0) 63.51%), linear-gradient(177.78deg, rgba(249, 176, 26, 0.1) 0.9%, rgba(255, 255, 255, 0.1) 38.79%, rgba(249, 176, 26, 0.1) 97.18%), linear-gradient(0deg, rgba(249, 176, 26, 0.4), rgba(249, 176, 26, 0.4)), #1f1704;
  --kn-accent-glow:    0 0 0 1px #eec248 inset, 0 0 12.37px rgba(232, 177, 29, 0.3);
  --kn-radius-s:       8px;
  --kn-radius-m:       12px;
  --kn-radius-l:       16px;
  --kn-shadow-card:    0 8px 22px rgba(0,0,0,.35);
  --kn-shadow-deep:    0 24px 64px rgba(0,0,0,.6);
  --kn-trans:          200ms cubic-bezier(.2,.7,.2,1);
}

.kn-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* === Modal shell === */
.kn-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  font-family: 'Gilroy', Arial, sans-serif;
  color: var(--kn-text);
  overflow: hidden;          /* fixed-меню не должно создавать body-скролл */
}
.kn-modal.is-open { display: flex; }
.kn-modal[hidden]:not(.is-open) { display: none; }

.kn-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: kn-fade-in 220ms ease both;
}

.kn-dialog {
  position: relative;
  width: 100%; max-width: 1080px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column;
  background: var(--kn-bg-card);
  border-radius: var(--kn-radius-l);
  box-shadow: var(--kn-shadow-deep);
  overflow: hidden;
  animation: kn-pop-in 240ms cubic-bezier(.2,.7,.2,1) both;
}

/* Красивый scrollbar у тела модалки (только Y) */
.kn-body { scrollbar-width: thin; scrollbar-color: rgba(232,178,29,.35) transparent; }
.kn-body::-webkit-scrollbar { width: 10px; height: 10px; }
.kn-body::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.kn-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(232,178,29,.35), rgba(210,141,41,.45));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.kn-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(232,178,29,.55), rgba(210,141,41,.65));
  background-clip: padding-box;
  border: 2px solid transparent;
}

@keyframes kn-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kn-pop-in {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* === Background SVG decoration === */
.kn-bg-deco {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(232,178,29,.10) 0%, transparent 38%),
    radial-gradient(circle at 0% 100%, rgba(210,141,41,.08) 0%, transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
}
.kn-bg-grid { display: none; }
.kn-bg-art {
  position: absolute; top: 0; right: 0;
  width: 360px; height: 280px;
  opacity: .10;
  display: none;
}
.kn-modal[data-active-tab="deposite"] .kn-bg-art--deposite,
.kn-modal[data-active-tab="withdraw"] .kn-bg-art--withdraw,
.kn-modal[data-active-tab="history"]  .kn-bg-art--history { display: block; }
/* Floating coins animation */
.kn-bg-art--deposite .kn-bg-art-coin { transform-origin: center; animation: kn-float 9s ease-in-out infinite; }
.kn-bg-art--deposite .kn-bg-art-coin:nth-child(2) { animation-delay: -3s; animation-duration: 11s; }
.kn-bg-art--deposite .kn-bg-art-coin:nth-child(3) { animation-delay: -6s; animation-duration: 13s; }
@keyframes kn-float {
  0%, 100% { transform: translate(80px, 80px); }
  50%      { transform: translate(80px, 76px); }
}
/* для остальных позиции из transform у group уже заданы — поэтому отдельные правила */

/* === Header / Tabs === */
.kn-head {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--kn-border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.kn-tabs {
  display: flex; gap: 4px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--kn-border);
  border-radius: 999px;
  padding: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.kn-tabs::-webkit-scrollbar { display: none; }
.kn-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 18px;
  border: 0; background: transparent;
  color: var(--kn-text-dim);
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: color var(--kn-trans), background var(--kn-trans), transform var(--kn-trans);
}
.kn-tab:hover { color: var(--kn-text); }
.kn-tab.is-active {
  background: var(--kn-accent-grad);
  color: #fff; font-weight: 600;
  box-shadow: var(--kn-accent-glow);
}
.kn-tab-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .55;
}
.kn-tab.is-active .kn-tab-dot { background: #fff; opacity: .85; }
.kn-close {
  margin-left: auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--kn-border);
  background: transparent;
  color: var(--kn-text-muted);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--kn-trans);
}
.kn-close:hover { color: var(--kn-text); border-color: var(--kn-text-muted); transform: rotate(90deg); }

/* === Body grid === */
.kn-body {
  position: relative; z-index: 1;
  flex: 1; overflow-y: auto;
  padding: 20px;
}
.kn-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 20px;
}
.kn-section { display: none; animation: kn-section-fade 180ms ease both; }
.kn-section.is-active { display: block; }
@keyframes kn-section-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kn-h2 {
  margin: 0 0 18px;
  font-size: 22px; font-weight: 600;
  color: var(--kn-text);
  letter-spacing: -.01em;
}

/* === Method cards === */
.kn-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
/* Категории на Пополнить остаются 2×2; платёжки на Вывести — 3 в ряд, контент центрирован */
.kn-method-grid[data-role="withdraw-paysys"] {
  grid-template-columns: repeat(3, 1fr);
}
.kn-method-grid[data-role="withdraw-paysys"] .kn-method {
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 8px;
}
.kn-method-grid[data-role="withdraw-paysys"] .kn-method-icon { margin-bottom: 0; }
.kn-method {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius-m);
  text-align: left;
  cursor: pointer;
  color: var(--kn-text);
  transition: all var(--kn-trans);
  position: relative;
  overflow: hidden;
  min-height: 86px;
}
.kn-method::before {
  content: ''; position: absolute; inset: 0;
  background: var(--kn-accent-grad);
  opacity: 0; transition: opacity var(--kn-trans);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.kn-method:hover {
  transform: translateY(-2px);
  border-color: var(--kn-text-muted);
  background: rgba(255,255,255,.04);
}
.kn-method.is-active {
  border-color: var(--kn-border-active);
  box-shadow: var(--kn-accent-glow);
  background: linear-gradient(135deg, rgba(210,141,41,.10), rgba(232,178,29,.04));
}
.kn-method.is-active::before { opacity: .04; }
.kn-method-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(232,178,29,.10);
  color: var(--kn-accent-bright);
  margin-bottom: 4px;
}
.kn-method.is-active .kn-method-icon {
  background: var(--kn-accent-grad);
  color: #fff;
}
.kn-method-name { font-size: 15px; font-weight: 600; }
.kn-method-sub  { font-size: 12px; color: var(--kn-text-muted); }

.kn-paysys-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.kn-paysys-row[hidden] { display: none; }
.kn-paysys-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 18px 12px 14px;
  min-height: 96px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius-m);
  cursor: pointer;
  color: var(--kn-text);
  font-size: 13px;
  text-align: center;
  transition: all var(--kn-trans);
  position: relative;
}
.kn-paysys-card:hover {
  transform: translateY(-2px);
  border-color: var(--kn-text-muted);
  background: rgba(255,255,255,.05);
}
.kn-paysys-card.is-active {
  border-color: var(--kn-border-active);
  box-shadow: var(--kn-accent-glow);
  background: linear-gradient(135deg, rgba(210,141,41,.10), rgba(232,178,29,.04));
}
.kn-paysys-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 36px;
  position: relative;
}
.kn-paysys-logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.kn-paysys-logo img.is-broken { display: none; }
.kn-paysys-fallback {
  color: var(--kn-accent-bright);
  display: inline-flex; align-items: center; justify-content: center;
}
.kn-paysys-name { font-size: 14px; font-weight: 600; color: var(--kn-text); }
.kn-paysys-meta { font-size: 11px; color: var(--kn-text-muted); }

/* withdraw method icons — show logo on top, fallback to SVG */
.kn-method-icon--logo {
  background: rgba(255,255,255,.04);
  width: 56px; height: 36px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.kn-method-icon--logo img {
  max-width: 80%; max-height: 80%;
  object-fit: contain;
}
.kn-method-icon--logo img.is-broken { display: none; }
.kn-method-fallback {
  color: var(--kn-accent-bright);
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; position: absolute; inset: 0;
}
.kn-method.is-active .kn-method-icon--logo { background: rgba(232,178,29,.18); }

/* === Amount block === */
.kn-amount-block { margin-bottom: 16px; }
.kn-label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--kn-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.kn-curr { color: var(--kn-text); font-weight: 700; }
.kn-amount-input {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius-s);
  padding: 0 14px;
  display: flex; align-items: center;
  transition: border-color var(--kn-trans);
}
.kn-amount-input:focus-within { border-color: var(--kn-border-active); }
.kn-amount-input input {
  width: 100%; height: 52px;
  border: 0; outline: 0; background: transparent;
  color: var(--kn-text);
  font-size: 18px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kn-amount-input input::placeholder { color: var(--kn-text-dim); font-weight: 500; }

.kn-quick-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
}
.kn-chip {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--kn-border);
  background: rgba(255,255,255,.03);
  color: var(--kn-text);
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all var(--kn-trans);
  white-space: nowrap;
}
.kn-chip:empty,
.kn-chip[data-empty="1"] { display: none; }
.kn-chip[disabled] { display: none; }
.kn-chip:hover { border-color: var(--kn-text-muted); background: rgba(255,255,255,.06); }
.kn-chip.is-active {
  background: var(--kn-accent-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--kn-accent-glow);
}

/* === Bonus block === */
.kn-bonus-block { margin: 14px 0 18px; }
.kn-bonus-info {
  position: relative;
  margin-top: 10px;
  padding: 16px 18px 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(232,178,29,.18) 0%, transparent 60%),
    linear-gradient(135deg, rgba(232,178,29,.08) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(232,178,29,.35);
  border-radius: var(--kn-radius-s);
  box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
  animation: knBonusInfoIn .25s ease-out;
}
@keyframes knBonusInfoIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kn-bonus-info-close {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  color: var(--kn-text-muted);
  cursor: pointer;
  transition: all var(--kn-trans);
  padding: 0;
}
.kn-bonus-info-close:hover {
  background: rgba(248,113,113,.15);
  border-color: rgba(248,113,113,.5);
  color: #f87171;
  transform: rotate(90deg);
}
.kn-bonus-info-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
  padding-right: 36px;
}
.kn-bonus-info-icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #D28D29, #E8B21D);
  border-radius: 10px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(232,178,29,.35);
}
.kn-bonus-info-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kn-bonus-info-name {
  font-size: 15px; font-weight: 700;
  color: var(--kn-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kn-bonus-info-status {
  font-size: 11px; font-weight: 500;
  color: #4ade80;
  text-transform: uppercase; letter-spacing: .04em;
}
.kn-bonus-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.kn-bonus-info-cell {
  padding: 8px 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.kn-bonus-info-cell.is-accent {
  background: linear-gradient(135deg, rgba(232,178,29,.18), rgba(232,178,29,.06));
  border-color: rgba(232,178,29,.45);
}
.kn-bonus-info-cell-label {
  font-size: 10px; font-weight: 600;
  color: var(--kn-text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.kn-bonus-info-cell-val {
  font-size: 14px; font-weight: 700;
  color: var(--kn-text);
  font-variant-numeric: tabular-nums;
}
.kn-bonus-info-cell.is-accent .kn-bonus-info-cell-val { color: #4ade80; }
.kn-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  color: var(--kn-text);
  font-size: 14px;
  user-select: none;
}
.kn-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.kn-toggle-mark {
  width: 18px; height: 18px;
  border: 1.5px solid var(--kn-border);
  border-radius: 5px;
  background: rgba(255,255,255,.02);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--kn-trans);
  flex-shrink: 0;
}
.kn-toggle input:checked + .kn-toggle-mark {
  background: var(--kn-accent-grad);
  border-color: transparent;
}
.kn-toggle input:checked + .kn-toggle-mark::after {
  content: ''; width: 10px; height: 6px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px,-1px);
}
/* === Custom dropdown (на дивах) === */
.kn-dropdown {
  position: relative;
  margin-top: 10px;
  width: 100%;
}
.kn-dropdown[hidden] { display: none; }
.kn-dropdown-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 48px;
  padding: 0 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius-s);
  color: var(--kn-text);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--kn-trans);
}
.kn-dropdown-trigger:hover { border-color: var(--kn-text-muted); }
.kn-dropdown.is-open .kn-dropdown-trigger { border-color: var(--kn-border-active); }
.kn-dropdown-trigger-text {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kn-dropdown-caret {
  display: inline-flex; align-items: center;
  color: var(--kn-text-muted);
  margin-left: 8px;
  transition: transform var(--kn-trans);
}
.kn-dropdown.is-open .kn-dropdown-caret { transform: rotate(180deg); color: var(--kn-accent-2); }

.kn-dropdown-menu {
  position: fixed;            /* — выходит из overflow-контекста модалки */
  top: -9999px; left: -9999px; /* до позиционирования прячем за viewport */
  z-index: 10001;
  display: none;
  max-height: 240px; overflow-y: auto;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
  background: #1f2221;
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius-s);
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  padding: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(232,178,29,.35) transparent;
}
.kn-dropdown-menu::-webkit-scrollbar { width: 8px; }
.kn-dropdown-menu::-webkit-scrollbar-track { background: transparent; }
.kn-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(232,178,29,.4); border-radius: 999px;
}
.kn-dropdown.is-open .kn-dropdown-menu,
.kn-dropdown-menu.is-open { display: block; }
.kn-dropdown-item {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--kn-text);
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background var(--kn-trans);
}
.kn-dropdown-item:hover { background: rgba(255,255,255,.06); }
.kn-dropdown-item.is-active {
  background: linear-gradient(90deg, rgba(232,178,29,.18), rgba(232,178,29,.04));
  color: var(--kn-accent-bright);
}

/* === Submit button === */
.kn-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 52px;
  border: 0;
  background: var(--kn-accent-grad);
  box-shadow: var(--kn-accent-glow), inset 0px -3.76px 8.84px 0px rgba(14, 10, 1, 0.53);
  color: #fff;
  font-size: 16px; font-weight: 600;
  border-radius: var(--kn-radius-s);
  cursor: pointer;
  transition: all var(--kn-trans);
  position: relative; overflow: hidden;
  box-shadow: 0 6px 18px rgba(210,141,41,.30);
}
.kn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(210,141,41,.45);
}
.kn-submit:active { transform: translateY(0); }
.kn-submit[disabled] {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: none;
}
.kn-submit-arrow {
  display: inline-flex; align-items: center;
  transition: transform var(--kn-trans);
}
.kn-submit:hover .kn-submit-arrow { transform: translateX(4px); }

.kn-limits-line {
  margin-top: 12px;
  font-size: 12px; color: var(--kn-text-muted);
  text-align: center;
}

.kn-foot-note {
  margin-top: 14px;
  font-size: 12px; color: var(--kn-text-muted);
  line-height: 1.5;
}

/* === Right column cards === */
.kn-col-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kn-card {
  position: relative;
  padding: 20px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius-m);
  overflow: hidden;
}
.kn-card::before {
  content: ''; position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(210,141,41,.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.kn-card-title {
  margin: 0 0 12px;
  font-size: 14px; font-weight: 600;
  color: var(--kn-text);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kn-card-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--kn-text-muted);
  line-height: 1.5;
}

/* tips */
.kn-tips-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kn-tips-list li {
  font-size: 13px; color: var(--kn-text);
  padding-left: 16px;
  position: relative;
  line-height: 1.5;
}
.kn-tips-list li::before {
  content: ''; position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--kn-accent-2);
}

/* limits */
.kn-limits-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kn-limits-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 13px;
}
.kn-limits-list li:last-child { border-bottom: 0; }
.kn-limits-list li > span:first-child { color: var(--kn-text-muted); }
.kn-limits-list li > span:last-child  { color: var(--kn-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.kn-limits-empty { color: var(--kn-text-muted); font-size: 13px; padding: 8px 0; }

/* saved methods */
.kn-saved-list { display: flex; flex-direction: column; gap: 8px; }
.kn-saved-empty {
  font-size: 13px; color: var(--kn-text-muted);
  margin: 4px 0 0;
}
.kn-saved-list:not(:empty) + .kn-saved-empty { display: none; }
.kn-saved-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius-s);
  cursor: pointer;
  transition: all var(--kn-trans);
}
.kn-saved-item:hover { border-color: var(--kn-text-muted); background: rgba(255,255,255,.04); }
.kn-saved-item.is-default { border-color: var(--kn-border-active); }
.kn-saved-item.is-active  { box-shadow: var(--kn-accent-glow); }
.kn-saved-item-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(232,178,29,.10);
  color: var(--kn-accent-bright);
  flex-shrink: 0;
}
.kn-saved-item-mask {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 500;
  color: var(--kn-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kn-saved-item-meta {
  font-size: 11px; color: var(--kn-text-muted);
  white-space: nowrap;
}
.kn-saved-item-actions {
  display: flex; gap: 4px;
  opacity: 0; transition: opacity var(--kn-trans);
}
.kn-saved-item:hover .kn-saved-item-actions,
.kn-saved-item.is-default .kn-saved-item-actions { opacity: 1; }
.kn-saved-action-btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  color: var(--kn-text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--kn-trans);
}
.kn-saved-action-btn:hover { color: var(--kn-text); background: rgba(255,255,255,.06); }
.kn-saved-action-btn.is-active { color: var(--kn-accent-bright); }

/* === Withdraw requisites === */
.kn-requisites-block { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.kn-requisites-block:empty { display: none; }
.kn-field-label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--kn-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.kn-field-input,
.kn-field-select {
  width: 100%; height: 48px;
  padding: 0 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius-s);
  color: var(--kn-text);
  font-size: 14px;
  outline: 0;
  transition: border-color var(--kn-trans);
}
.kn-field-input:focus,
.kn-field-select:focus { border-color: var(--kn-border-active); }
.kn-field-input::placeholder { color: var(--kn-text-dim); }
.kn-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Карточные реквизиты — номер слева (широкое поле), срок действия справа (узкое) */
.kn-card-fields-row {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 10px;
  align-items: end;
}
.kn-card-fields-num input,
.kn-card-fields-exp input {
  width: 100%;
}

/* Подсветка поля «Сумма» при невалидном значении */
.kn-amount-input input.is-invalid {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248,113,113,.16);
  animation: knShake .35s ease-in-out;
}
@keyframes knShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-4px); }
  40%     { transform: translateX(4px); }
  60%     { transform: translateX(-2px); }
  80%     { transform: translateX(2px); }
}
.kn-card-fields-exp input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
@media (max-width: 480px) {
  .kn-card-fields-row { grid-template-columns: 1fr; }
}

/* === History === */
.kn-history-toolbar { margin-bottom: 14px; }
.kn-history-search {
  width: 100%; height: 44px;
  padding: 0 14px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius-s);
  color: var(--kn-text);
  font-size: 14px;
  outline: 0;
}
.kn-history-search:focus { border-color: var(--kn-border-active); }
.kn-history-search::placeholder { color: var(--kn-text-dim); }
.kn-history-content {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--kn-border);
  border-radius: var(--kn-radius-m);
  padding: 4px;
  min-height: 120px;
}
.kn-history-loading {
  text-align: center;
  color: var(--kn-text-muted);
  padding: 40px 20px;
}

/* === Структурированный рендер истории (.kn-tx-*) === */
.kn-tx-row {
  display: grid;
  grid-template-columns: 110px minmax(140px,1.3fr) 130px 110px 90px 120px;
  gap: 12px; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 13px;
}
.kn-tx-row:last-child { border-bottom: 0; }
.kn-tx-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
.kn-tx-label {
  font-size: 10px; font-weight: 600;
  color: var(--kn-text-muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.kn-tx-id-val {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--kn-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kn-tx-amt-val {
  font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--kn-text);
}
.kn-tx-amt-val.is-pos { color: #4ade80; }
.kn-tx-amt-val.is-neg { color: #f87171; }
.kn-tx-method-val { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kn-tx-method-val img,
.kn-tx-method-val .kn-tx-ps-logo { max-width: 28px; max-height: 18px; object-fit: contain; vertical-align: middle; }
.kn-tx-method-val .kn-tx-ps-name { font-size: 12px; color: var(--kn-text); }
.kn-tx-method-val .kn-tx-ps-net {
  font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  background: rgba(232,178,29,.15); color: #4ade80;
  letter-spacing: .04em;
}
.kn-tx-method-empty { color: var(--kn-text-muted); }
.kn-paysys-empty {
  flex: 1;
  padding: 18px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--kn-text-muted);
  background: rgba(255,255,255,.02);
  border: 1px dashed var(--kn-border);
  border-radius: var(--kn-radius-s);
}

/* badges */
.kn-tx-badge {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.kn-tx-badge.is-in  { background: rgba(232,178,29,.18); color: #4ade80; }
.kn-tx-badge.is-out { background: rgba(248,113,113,.18); color: #f87171; }

.kn-tx-status-badge {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.kn-tx-status-badge.is-ok      { background: rgba(232,178,29,.18); color: #4ade80; }
.kn-tx-status-badge.is-pending { background: rgba(251,191,36,.18); color: #fbbf24; }
.kn-tx-status-badge.is-fail    { background: rgba(248,113,113,.18); color: #f87171; }
.kn-tx-status-badge.is-neutral { background: rgba(255,255,255,.06); color: var(--kn-text-muted); }

.kn-history-content .tx-empty {
  text-align: center; padding: 50px 20px;
  color: var(--kn-text-muted);
}
.kn-history-content .tx-empty-icon { font-size: 36px; margin-bottom: 10px; }

.kn-history-pagination,
.kn-history-content .tx-pagination {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  padding: 14px 0 4px;
}
.kn-page-btn,
.kn-history-content .tx-page-btn {
  min-width: 32px; height: 32px;
  padding: 0 10px;
  border: 1px solid var(--kn-border);
  background: transparent;
  color: var(--kn-text); font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--kn-trans);
}
.kn-page-btn:hover,
.kn-history-content .tx-page-btn:hover { border-color: var(--kn-text-muted); }
.kn-page-btn.is-active,
.kn-history-content .tx-page-active {
  background: var(--kn-accent-grad);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--kn-accent-glow);
}
.kn-history-content .tx-page-dots { padding: 0 4px; color: var(--kn-text-muted); align-self: center; }

/* ============================================================
   АДАПТИВ — desktop / laptop / tablet / mobile / small / landscape
   ============================================================ */

/* очень большой десктоп — чуть шире, центрировано */
@media (min-width: 1440px) {
  .kn-dialog { max-width: 1180px; }
  .kn-grid   { grid-template-columns: 1fr 380px; gap: 24px; }
  .kn-body   { padding: 24px 28px; }
  .kn-method { min-height: 92px; }
}

/* стандартный ноутбук 1024–1279px — компактнее правую колонку */
@media (min-width: 1024px) and (max-width: 1279px) {
  .kn-dialog { max-width: 1040px; }
  .kn-grid   { grid-template-columns: 1fr 320px; }
}

/* tablet 768–1023px — одна колонка, контент шире */
@media (max-width: 1023px) {
  .kn-modal  { padding: 20px; }
  .kn-dialog { max-width: 92vw; }
  .kn-grid   { grid-template-columns: 1fr; gap: 16px; }
  .kn-bg-art { width: 260px; height: 200px; }
  .kn-method-grid[data-role="withdraw-paysys"] { grid-template-columns: repeat(3, 1fr); }
  /* на планшете показываем колонку «Лимиты»/«Подсказки» НАД формой/после — порядок остаётся естественным */
  .kn-col-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .kn-col-side > * { margin: 0; }
}

/* tablet portrait & narrow tablet (768–900px): правый блок в одну колонку */
@media (max-width: 900px) {
  .kn-col-side { grid-template-columns: 1fr; }
}

/* mobile ≤767px — fullscreen, sticky CTA, скроллируемые чипы */
@media (max-width: 767px) {
  .kn-modal { padding: 0; }
  .kn-dialog {
    width: 100vw;
    height: 100vh; height: 100dvh;
    max-width: none; max-height: none;
    border-radius: 0;
  }
  .kn-head {
    position: sticky; top: 0; z-index: 5;
    background: var(--kn-bg-card);
    padding: 14px 16px;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--kn-border);
  }
  .kn-tabs { flex: 1; min-width: 0; }
  .kn-tab  { padding: 7px 14px; font-size: 13px; }
  .kn-body { padding: 16px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .kn-h2   { font-size: 18px; margin-bottom: 14px; }
  .kn-method { padding: 14px; min-height: 78px; }
  .kn-method-name { font-size: 14px; }
  .kn-method-sub  { font-size: 11px; }
  /* chips — горизонтальный скролл без полосы прокрутки */
  .kn-quick-chips {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    margin: 10px -16px 0;
    padding: 0 16px 4px;
    scrollbar-width: none;
  }
  .kn-quick-chips::-webkit-scrollbar { display: none; }
  .kn-chip { flex: 0 0 auto; }
  .kn-amount-input input { font-size: 17px; }
  /* sticky CTA внизу экрана — на мобилке всегда виден главный action */
  .kn-section.is-active .kn-submit {
    position: sticky;
    bottom: env(safe-area-inset-bottom, 0px);
    z-index: 4;
    height: 56px; font-size: 16px;
    margin-top: 18px;
    box-shadow: 0 -8px 24px rgba(0,0,0,.35), 0 4px 16px rgba(232,178,29,.35);
  }
  .kn-bg-art { width: 200px; height: 160px; opacity: .07; }
  /* на мобиле «Лимиты»/«Подсказки» ужимаются и идут одной колонкой под формой */
  .kn-col-side { grid-template-columns: 1fr; }
  .kn-card { padding: 14px 16px; }
  /* транзакция — 2 колонки grid с лейблом сверху */
  .kn-tx-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
    margin-bottom: 8px;
  }
  .kn-tx-row .kn-tx-method { display: none; }
  /* Withdraw paysys: 2 в ряд на мобилке */
  .kn-method-grid[data-role="withdraw-paysys"] { grid-template-columns: repeat(2, 1fr); }
  /* Промежутки в саб-инфо BLIK */
  .kn-blik-card { padding: 18px 16px 16px; }
  .kn-blik-amount-val { font-size: 24px; }
  /* Карточка бонуса */
  .kn-bonus-info-grid { grid-template-columns: repeat(2, 1fr); }
  /* история — пагинация переносится */
  .kn-history-pagination { flex-wrap: wrap; gap: 4px; }
  /* поиск — ширина на всю строку */
  .kn-history-search { width: 100%; }
}

/* small mobile ≤480px — категории 1 в ряд, withdraw paysys 2 в ряд (тесно но читаемо) */
@media (max-width: 480px) {
  .kn-head { padding: 12px 14px; gap: 8px; }
  .kn-tab  { padding: 6px 12px; font-size: 12px; }
  .kn-close { width: 32px; height: 32px; }
  .kn-body { padding: 14px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .kn-h2   { font-size: 17px; margin-bottom: 12px; }
  /* категории — список 1 в ряд (горизонтальная полоска иконка+текст) */
  .kn-method-grid { grid-template-columns: 1fr; gap: 10px; }
  .kn-method {
    padding: 12px 14px; min-height: 60px;
    flex-direction: row; align-items: center; gap: 12px;
  }
  .kn-method-icon { width: 36px; height: 36px; margin: 0; flex-shrink: 0; }
  .kn-method-icon svg { width: 22px; height: 22px; }
  .kn-method .kn-method-name { font-size: 14px; }
  .kn-method .kn-method-sub  { font-size: 11px; }
  .kn-method > span:not(.kn-method-icon) { display: block; }
  /* paysys-карточки депозита — 2 в ряд */
  .kn-paysys-row { grid-template-columns: repeat(2, 1fr); }
  /* Withdraw paysys — 2 в ряд (как и общий грид методов) */
  .kn-method-grid[data-role="withdraw-paysys"] { grid-template-columns: repeat(2, 1fr); }
  .kn-method-grid[data-role="withdraw-paysys"] .kn-method {
    flex-direction: column; gap: 6px; padding: 12px 8px; min-height: 88px;
  }
  /* поля — в одну колонку */
  .kn-field-row { grid-template-columns: 1fr; }
  .kn-card-fields-row { grid-template-columns: 1fr; }
  .kn-card { padding: 14px; }
  .kn-card-title { font-size: 13px; }
  /* tx-row — 1 колонка */
  .kn-tx-row { grid-template-columns: 1fr; gap: 6px; }
  .kn-tx-row .kn-tx-cell { flex-direction: row; justify-content: space-between; }
  /* BLIK поля — стек */
  .kn-blik-fields li { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; }
  /* бонус-инфо — 1 колонка */
  .kn-bonus-info-grid { grid-template-columns: 1fr; }
}

/* very small ≤360px (старые телефоны) */
@media (max-width: 360px) {
  .kn-body { padding: 12px; }
  .kn-h2   { font-size: 16px; }
  .kn-tab  { padding: 6px 10px; font-size: 11px; }
  .kn-method-grid[data-role="withdraw-paysys"] { grid-template-columns: 1fr; }
  .kn-method-grid[data-role="withdraw-paysys"] .kn-method {
    flex-direction: row; min-height: 60px; padding: 10px 12px;
  }
  .kn-paysys-row { grid-template-columns: 1fr; }
  .kn-amount-input input { font-size: 16px; }
  .kn-blik-amount-val { font-size: 22px; }
}

/* ландшафт мобильника / низкие экраны — уменьшаем вертикальные паддинги */
@media (max-height: 560px) and (max-width: 900px) {
  .kn-head { padding: 10px 16px; }
  .kn-body { padding: 12px 16px; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .kn-h2   { margin-bottom: 10px; font-size: 16px; }
  .kn-method { padding: 10px 12px; min-height: 56px; }
  .kn-amount-block { margin-bottom: 10px; }
  .kn-section.is-active .kn-submit { height: 48px; margin-top: 10px; }
}

/* prefers-reduced-motion — отключаем анимации */
@media (prefers-reduced-motion: reduce) {
  .kn-dialog, .kn-section, .kn-bonus-info, .kn-blik-card {
    animation: none !important;
  }
  .kn-method, .kn-paysys-card, .kn-blik-copy, .kn-bonus-info-close, .kn-close {
    transition: none !important;
  }
  .kn-bg-art--deposite .kn-bg-art-coin { animation: none !important; }
}

/* ========= BLIK panel ========= */
.kn-blik-panel { margin-top: 4px; }
.kn-blik-card {
  position: relative;
  padding: 22px 22px 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(232,178,29,.18) 0%, transparent 60%),
    linear-gradient(135deg, rgba(232,178,29,.06) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(232,178,29,.35);
  border-radius: var(--kn-radius-m);
  box-shadow: 0 12px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
  animation: knBonusInfoIn .25s ease-out;
}
.kn-blik-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.kn-blik-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #D28D29, #E8B21D);
  border-radius: 12px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(232,178,29,.4);
}
.kn-blik-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kn-blik-title {
  font-size: 16px; font-weight: 700; color: var(--kn-text);
  letter-spacing: .01em;
}
.kn-blik-sub {
  font-size: 12px; color: var(--kn-text-muted);
}
.kn-blik-warn {
  font-size: 12px; font-weight: 600; color: #fbbf24;
  text-transform: uppercase; letter-spacing: .04em;
}

.kn-blik-amount {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px;
  margin-bottom: 12px;
  text-align: center;
}
.kn-blik-amount-lbl {
  font-size: 11px; font-weight: 600;
  color: var(--kn-text-muted);
  text-transform: uppercase; letter-spacing: .05em;
}
.kn-blik-amount-val {
  font-size: 28px; font-weight: 800; color: #4ade80;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.kn-blik-amount-val strong { font-weight: 800; }

.kn-blik-fields {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;
}
.kn-blik-fields li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--kn-border);
  border-radius: 10px;
}
.kn-blik-fld-accent {
  background: linear-gradient(135deg, rgba(232,178,29,.12), rgba(232,178,29,.04)) !important;
  border-color: rgba(232,178,29,.4) !important;
}
.kn-blik-fld-lbl {
  font-size: 11px; font-weight: 600;
  color: var(--kn-text-muted);
  text-transform: uppercase; letter-spacing: .04em;
  flex-shrink: 0;
}
.kn-blik-fld-val {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
}
.kn-blik-fld-text {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px; font-weight: 600;
  color: var(--kn-text);
  user-select: all;
}
.kn-blik-fld-accent .kn-blik-fld-text { color: #4ade80; }
.kn-blik-copy {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--kn-border);
  border-radius: 8px;
  color: var(--kn-text-muted);
  cursor: pointer;
  padding: 0;
  transition: all var(--kn-trans);
  flex-shrink: 0;
}
.kn-blik-copy:hover {
  background: rgba(232,178,29,.15);
  border-color: rgba(232,178,29,.5);
  color: #4ade80;
}
.kn-blik-copy.is-copied {
  background: var(--kn-accent-grad);
  border-color: transparent;
  color: #fff;
}

.kn-blik-warn-line {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.3);
  border-radius: 10px;
  font-size: 12px; line-height: 1.4;
  color: #fbbf24;
  margin-bottom: 14px;
}
.kn-blik-warn-line svg { flex-shrink: 0; margin-top: 1px; }

.kn-blik-actions { display: flex; justify-content: center; }
.kn-blik-cancel {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid rgba(248,113,113,.3);
  border-radius: 10px;
  color: #f87171;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all var(--kn-trans);
}
.kn-blik-cancel:hover {
  background: rgba(248,113,113,.12);
  border-color: rgba(248,113,113,.55);
}

@media (max-width: 480px) {
  .kn-blik-card { padding: 18px 16px 16px; }
  .kn-blik-amount-val { font-size: 24px; }
  .kn-blik-fields li { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; }
}