/* Playerok mini-app skin. Liquid-glass surfaces: translucent fill,
   bright top rim, short transform motion. No backdrop-filter and no loops. */

html.floor-skin {
  --rd-bg: #14161a;
  --rd-text: #ebecf0;
  --rd-muted: #9aa3b5;
  --rd-card: #1c1e26;
  --rd-field: #282933;
  --rd-accent: #2663f0;
  --rd-line: rgba(255, 255, 255, 0.08);
  --blue: #2663f0;
  --tg-bg: #101218;
  --tg-section: #232733;
  --tg-text: #ebecf0;
  --tg-hint: #b4bccb;
  --tg-accent: #2663f0;
  --tg-btn: #2663f0;
  --brand-indigo: #2663f0;
  --brand-grad: #2663f0;
  --m-accent: #2663f0;
  --m-blue: #2663f0;
  --m-violet: #2663f0;
  --m-violet-wash: rgba(38, 99, 240, 0.16);
  background: #101218 !important;
  color-scheme: dark;
}

html.floor-skin body {
  background:
    radial-gradient(88% 42% at 100% -8%, rgba(38, 99, 240, 0.30), transparent 54%),
    radial-gradient(70% 36% at -12% 8%, rgba(38, 99, 240, 0.14), transparent 50%),
    #101218 !important;
  color: #ebecf0 !important;
  font-family: Inter, sans-serif !important;
}

html.floor-skin #pk-ambient,
html.floor-skin #pk-glow,
html.floor-skin #pk-hw,
html.floor-skin .pk-orb,
html.floor-skin .pk-beam,
html.floor-skin .pk-grain {
  display: none !important;
}

html.floor-skin *,
html.floor-skin *::before,
html.floor-skin *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent;
}

html.floor-skin .ios-card,
html.floor-skin .home-menu__card,
html.floor-skin .nav-list,
html.floor-skin .wallet-method,
html.floor-skin .tx-card,
html.floor-skin .subcard,
html.floor-skin .review-card-item,
html.floor-skin .deal-cell,
html.floor-skin .pk-chat-row,
html.floor-skin .home-quick__tile,
html.floor-skin .profile-stat,
html.floor-skin .p-bonus {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 28%, rgba(28, 32, 42, 0.88) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
  filter: none !important;
}

html.floor-skin .nav-row {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}
html.floor-skin .nav-list .nav-row:last-child { border-bottom: 0 !important; }

html.floor-skin .nav-row__ico {
  background: rgba(38, 99, 240, 0.18) !important;
  color: #8eb0ff !important;
  border-radius: 12px !important;
}
html.floor-skin #b-reviews .nav-row__ico {
  background: rgba(255, 186, 64, 0.16) !important;
  color: #ffc56b !important;
}
html.floor-skin #b-help .nav-row__ico {
  background: rgba(52, 199, 138, 0.16) !important;
  color: #5ee0a8 !important;
}

html.floor-skin .home-dashboard,
html.floor-skin .wallet-card {
  background: linear-gradient(165deg, rgba(120, 164, 255, 0.42) 0%, rgba(38, 99, 240, 0.22) 36%, rgba(20, 28, 46, 0.92) 100%) !important;
  border: 1px solid rgba(170, 198, 255, 0.38) !important;
  border-radius: 24px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}
html.floor-skin .avatar {
  box-shadow: 0 0 0 2px rgba(142, 176, 255, 0.7);
}

html.floor-skin .home-dashboard__chip,
html.floor-skin .segment,
html.floor-skin .segment button {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05)) !important;
  color: #ebecf0 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

html.floor-skin .segment button.on,
html.floor-skin .tab.on {
  color: #ffffff !important;
}

html.floor-skin .top-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(16, 18, 24, 0.72)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
}

html.floor-skin .tabbar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(28, 32, 44, 0.82)) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38) !important;
}

html.floor-skin .tab.on {
  background: rgba(38, 99, 240, 0.34) !important;
  border-radius: 16px !important;
}

html.floor-skin .sheet {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(18, 20, 28, 0.96) 18%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

html.floor-skin .tab.on {
  color: #ffffff !important;
}

html.floor-skin .tab-create {
  background: linear-gradient(180deg, rgba(122, 166, 255, 0.72) 0%, rgba(38, 99, 240, 0.55) 58%, rgba(29, 78, 216, 0.46) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

html.floor-skin .btn-ios,
html.floor-skin .btn-blue {
  background: linear-gradient(180deg, rgba(122, 166, 255, 0.72) 0%, rgba(38, 99, 240, 0.55) 58%, rgba(29, 78, 216, 0.46) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

html.floor-skin .btn-gray {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

html.floor-skin .home-quick__ico--violet,
html.floor-skin .nav-row__ico--violet {
  background: rgba(38, 99, 240, 0.16) !important;
  color: #2663f0 !important;
}

html.floor-skin .btn-green {
  background: linear-gradient(180deg, rgba(122, 166, 255, 0.72) 0%, rgba(38, 99, 240, 0.55) 58%, rgba(29, 78, 216, 0.46) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

html.floor-skin .btn-red {
  background: linear-gradient(180deg, rgba(255, 139, 142, 0.7) 0%, rgba(229, 72, 77, 0.55) 60%, rgba(193, 51, 56, 0.46) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

html.floor-skin .ios-input,
html.floor-skin input,
html.floor-skin textarea,
html.floor-skin select {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)) !important;
  color: #f6f6f7 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

html.floor-skin .home-promo__slide,
html.floor-skin .home-promo__image {
  border-radius: 20px !important;
}

html.floor-skin .home-halloween {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent !important;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: none !important;
  line-height: 0;
  cursor: pointer;
}
html.floor-skin .home-tools {
  margin: 0 0 14px;
}
html.floor-skin .home-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)) !important;
  color: #d5dbe8 !important;
  font: 500 15px/1 Inter, sans-serif;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}
html.floor-skin .home-search svg { flex: 0 0 auto; color: #8eb0ff; }
html.floor-skin .home-chips {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent);
}
html.floor-skin .home-chips::-webkit-scrollbar { display: none; }
html.floor-skin .home-chips button {
  flex: 0 0 auto;
  height: 38px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.03)) !important;
  color: #ebecf0 !important;
  font: 600 13px/1 Inter, sans-serif;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}
html.floor-skin .home-chips button:first-child {
  background: linear-gradient(180deg, rgba(122, 166, 255, 0.72) 0%, rgba(38, 99, 240, 0.55) 100%) !important;
  border-color: transparent;
  color: #fff !important;
}
@media (min-width: 1000px) {
  html.floor-skin #p-home.panel--split.on > .home-halloween,
  html.floor-skin #p-home.panel--split.on > .home-tools {
    grid-column: 1 / -1;
    margin: 0 0 16px;
  }
}
html.floor-skin .home-halloween img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 210;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
}
html.floor-skin .home-halloween:active {
  transform: scale(0.985);
}

html.floor-skin .section-label {
  color: #9aa3b5 !important;
}

html.floor-skin .hint-text,
html.floor-skin .home-dashboard__label,
html.floor-skin .home-quick__s {
  color: #9aa3b5 !important;
}

html.floor-skin .home-dashboard__amount,
html.floor-skin .balance-big {
  color: #ffffff !important;
  background: none !important;
  filter: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Motion: one short compositor slide. No blur, no stagger, no loops. */
html.floor-skin *,
html.floor-skin *::before,
html.floor-skin *::after {
  animation: none !important;
  will-change: auto !important;
}

@keyframes pk-screen {
  from { opacity: 0.82; transform: translate3d(16px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

html.floor-skin .panel.tab-enter-right,
html.floor-skin .panel.tab-enter-left,
html.floor-skin .sheet-overlay.on .sheet {
  animation: pk-screen 0.22s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

html.floor-skin .ios-card,
html.floor-skin .btn-ios,
html.floor-skin .tab,
html.floor-skin .nav-row,
html.floor-skin .deal-cell,
html.floor-skin .wallet-method,
html.floor-skin .home-quick__tile,
html.floor-skin .home-search,
html.floor-skin .home-chips button,
html.floor-skin .home-halloween {
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.18s linear !important;
}

html.floor-skin .btn-ios:active,
html.floor-skin .home-quick__tile:active,
html.floor-skin .nav-row:active,
html.floor-skin .tab:active,
html.floor-skin .home-search:active,
html.floor-skin .home-chips button:active {
  transform: scale(0.975);
}

html.floor-skin #main {
  margin-left: auto !important;
  margin-right: auto !important;
}

html.floor-skin #main,
html.floor-skin .panel.on,
html.floor-skin .deal-chat-msgs {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Три шага отступа: внутри, между элементами, между секциями. */
html.floor-skin {
  --s-in: 12px;
  --s-item: 16px;
  --s-section: 28px;
}
html.floor-skin .panel {
  padding-top: var(--s-section);
  padding-bottom: var(--s-section);
}
html.floor-skin .home-dashboard,
html.floor-skin .home-menu__section,
html.floor-skin .screen-head,
html.floor-skin .section-label {
  margin-bottom: var(--s-section) !important;
}
html.floor-skin .ios-card,
html.floor-skin .home-quick__tile,
html.floor-skin .wallet-method,
html.floor-skin .cashier-row {
  padding: var(--s-in) !important;
  margin-bottom: var(--s-item) !important;
}
html.floor-skin .p-bonus,
html.floor-skin .hint-text,
html.floor-skin .pk-flat,
html.floor-skin .profile-stats,
html.floor-skin #admin-stats {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
html.floor-skin .cashier-list { display: flex; flex-direction: column; gap: var(--s-item); }
html.floor-skin .cashier-row {
  background: #1c1e26 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 16px !important;
}
html.floor-skin .cashier-total {
  margin: 0 0 var(--s-item);
  color: #d5dbe8;
  font-size: 15px;
}
html.floor-skin .cashier-total b {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html.floor-skin .cashier-row__main { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-in); }
html.floor-skin .cashier-row__name { color: #fff; font-size: 16px; }
html.floor-skin .cashier-row__sum {
  flex: 0 0 auto;
  text-align: right;
  color: #fff;
}
html.floor-skin .cashier-row__sum span {
  display: block;
  color: #9aa3b5;
  font-size: 12px;
  font-weight: 500;
}
html.floor-skin .cashier-row__sum b {
  display: block;
  color: #fff;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
html.floor-skin .cashier-row__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-in);
  margin-top: var(--s-item);
}
html.floor-skin .cashier-row__mail,
html.floor-skin .cashier-row__meta { margin-top: 8px; color: #9aa3b5; font-size: 13px; word-break: break-all; }
html.floor-skin .pk-state { margin: 8px 0 0; font-size: 14px; line-height: 1.35; }
html.floor-skin .pk-state[data-state="loading"],
html.floor-skin .pk-state[data-state="idle"],
html.floor-skin .pk-state[data-state="empty"] { color: #9aa3b5; }
html.floor-skin .pk-state[data-state="error"] { color: #ff8d8d; }
html.floor-skin .pk-state[data-state="done"] { color: #5ee0a8; }

@media (max-width: 430px) {
  html.floor-skin #p-home .home-dashboard__actions .btn-ios,
  html.floor-skin .cashier-code,
  html.floor-skin .sheet .btn-ios:not(#deal-chat-send):not(#support-send):not(#support-adm-send) {
    min-height: 48px;
    width: 100%;
  }
}

/* Чат на телефоне. Правило выше (`.sheet .btn-ios { width: 100% }` до 430px)
   отдавало кнопку «отправить» на всю строку, а поле сжималось до одной буквы
   и «Сообщение» вставало столбиком. Строка ввода всегда горизонтальная:
   скрепка, поле, круглая кнопка. */
html.floor-skin .deal-chat-compose {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 10px calc(8px + var(--safe-b));
  background: #101218 !important;
}
html.floor-skin .deal-chat-compose .deal-chat-attach {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 22px;
  font-size: 22px;
  line-height: 1;
  background: #232733;
  color: #ebecf0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
html.floor-skin .deal-chat-compose .deal-chat-ta,
html.floor-skin .deal-chat-compose textarea.ios-input {
  flex: 1 1 0% !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto;
  min-height: 44px;
  max-height: 120px;
  margin: 0 !important;
  padding: 10px 14px;
  font-size: 16px !important;
  line-height: 1.35;
  border-radius: 22px !important;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: pre-wrap;
}
html.floor-skin .sheet .deal-chat-compose .btn-ios,
html.floor-skin .deal-chat-compose .btn-ios {
  flex: 0 0 44px !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 22px !important;
  font-size: 18px;
  line-height: 1;
}
/* Лист сделки непрозрачный: список чатов не просвечивает сквозь переписку. */
html.floor-skin #sheet-deal.sheet-overlay,
html.floor-skin #sheet-deal.sheet-overlay.on {
  background: #101218 !important;
}
html.floor-skin #sheet-deal .sheet.sheet-deal-layout,
html.floor-skin #sheet-deal .deal-pane--chat,
html.floor-skin #sheet-deal .deal-chat-wrap,
html.floor-skin #sheet-deal .deal-chat-msgs,
html.floor-skin .support-chat-shell,
html.floor-skin #support-msgs,
html.floor-skin #support-adm-msgs {
  background: #101218 !important;
}
/* Клавиатура: лист сделки садится в видимую область, поле остаётся над ней. */
html.floor-skin #sheet-deal.sheet-overlay.on {
  top: var(--vv-top, 0px);
  bottom: auto;
  height: var(--app-vh, 100dvh);
}
html.floor-skin #sheet-deal.sheet-overlay.on .sheet.sheet-deal-layout {
  height: 100%;
  min-height: 0 !important;
  max-height: 100% !important;
}
@media (max-width: 390px) {
  html.floor-skin { --s-in: 12px; --s-item: 16px; --s-section: 24px; }
  html.floor-skin .home-dashboard__amount { font-size: 32px !important; }
}
@media (max-width: 360px) {
  html.floor-skin #p-home .home-dashboard__actions { flex-direction: column; }
  html.floor-skin .cashier-row__actions { grid-template-columns: 1fr; }
  html.floor-skin .home-chips button { min-height: 44px; }
}