/* ===== Slovekiza Mini-App UI ===== */
:root{
  --bg:#0e1013; --bg-2:#12151a;
  --surface:#15181d; --surface-2:#181c22; --elev:#0f1216;

  --text:#e9edf3; --muted:#9aa3af;

  --brand:#ff6b6b;           /* акцент */
  --brand-d:#e25a5a;

  --stroke:#222833; --stroke-2:#2b3240;

  --radius:16px; --shadow:0 8px 24px rgba(0,0,0,.25);

  --headerH:84px;
  --headerPadTop:6px;
  --headerPadBottom:18px;
  --tabbarH:74px;

  /* высота клавы из JS */
  --kb: 0px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg),var(--bg-2) 85%);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ===== Header ===== */
.app-header{
  position:fixed; top:0; left:0; right:0; z-index:10;
  height:var(--headerH);

  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:12px;

  padding:var(--headerPadTop) 16px var(--headerPadBottom);
  background:rgba(16,18,22,.88);
  backdrop-filter:saturate(140%) blur(8px);

  border:1px solid var(--stroke);
  border-radius:0 0 var(--radius) var(--radius);
  overflow:hidden;
}
.app-header::after{
  content:""; position:absolute; left:10px; right:10px; bottom:0; height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  pointer-events:none;
}
.hdr-left,.hdr-right{display:flex; align-items:center; gap:10px}
.hdr-left{min-width:0; cursor:pointer}
.avatar{ width:32px; height:32px; border-radius:50%; object-fit:cover; background:linear-gradient(135deg,#23262d,#1b1e24); border:1px solid var(--stroke); }
.nick-wrap{min-width:0}
.nick{font-weight:600; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px}
.nick-sub{font-size:10px; color:var(--muted)}
.hdr-right{ gap:10px }
.balance{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.05 }
.balance-label{ font-size:10px; letter-spacing:.2px; color:var(--muted) }
.balance-value{ font-size:12px; font-weight:500; color:#fff }
.btn-plus{
  width:32px; height:32px; border-radius:10px; border:0; cursor:pointer;
  display:inline-grid; place-items:center;
  color:#fff;
  background:linear-gradient(180deg,var(--brand) 0%, var(--brand-d) 100%);
  transition:transform .06s ease, filter .2s ease;
}
.btn-plus:active{ transform:translateY(1px) }
.btn-plus svg{ width:18px; height:18px; display:block }

/* ===== Контент ===== */
.app-main{
  padding: calc(var(--headerH) + 12px) 16px
           calc(var(--tabbarH) + env(safe-area-inset-bottom) + 24px + var(--kb));
  min-height:100dvh;
}
.page{display:none}
.page.active{display:block}

/* Универсальные мелочи */
.label{font-size:12px; color:var(--muted); margin-bottom:8px}
.hint{color:var(--muted); font-size:12px; margin-top:10px}
.muted{color:var(--muted); font-size:12px}
.empty{color:var(--muted); text-align:center; padding:20px 8px}

/* Универсальная карточка */
.card{
  background:linear-gradient(180deg,#15181d,#111419);
  border:1px solid var(--stroke);
  border-radius:14px; padding:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

/* ===== Категории ===== */
.cats-list{display:flex; flex-direction:column; gap:12px;}
.cat{
  display:flex; align-items:center; gap:14px;
  padding:16px; border-radius:16px;
  background:linear-gradient(180deg,#15181d,#111419);
  border:1px solid var(--stroke);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  text-decoration:none; color:var(--text);
  transition:transform .08s ease, border-color .2s ease, background .2s ease;
  cursor:pointer;
}
.cat:hover{transform:translateY(-1.5px); border-color:var(--stroke-2)}
.cat:active{transform:translateY(0)}
.cat-icon, .cat__icon{
  width:48px; height:48px; border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#1a1e24,#14181e);
  border:1px solid var(--stroke);
  overflow:hidden;
}
.cat-icon img, .cat__icon img{
  width:100%; height:100%;
  object-fit:cover; /* во весь квадратик */
  display:block; padding:0;
}
.cat-body, .cat__body{display:flex; flex-direction:column; gap:2px}
.cat-name, .cat__name{font-weight:700; font-size:15px}
.cat-desc, .cat__desc{font-size:12px; color:var(--muted)}
.cats-list::after{
  content:"Скоро добавим ещё категорий";
  display:block; text-align:center; color:var(--muted);
  font:500 13px/1.4 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  opacity:.95; padding:18px 8px 12px;
}
/* активная категория (добавь .cat--active или .active при выборе) */
.cat--active, .cat.active{
  border-color:transparent;
  background:linear-gradient(180deg,rgba(255,107,107,.10),rgba(255,62,62,.06));
  box-shadow:0 8px 22px rgba(255,107,107,.16), inset 0 0 0 1px rgba(255,107,107,.25);
}

/* ===== Сервисы ===== */
.subheader{display:flex; align-items:center; gap:10px; margin:6px 0 10px}
.subheader .back{appearance:none; border:1px solid var(--stroke); background:var(--surface-2); color:var(--text); border-radius:10px; padding:8px 10px; cursor:pointer;}
.subheader-title{margin:0; font-size:16px; font-weight:600}

/* Поиск в шапке услуг */
.subheader .search{
  margin-left:auto;
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,#15181d,#111419);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:8px 10px;
  min-width:180px; max-width:100%;
  flex:1;
}
.subheader .search-ico{width:16px; height:16px; color:var(--muted); flex:0 0 16px}
.subheader .search input{all:unset; font-size:12px; color:var(--text); width:100%}
.subheader .search input::placeholder{color:var(--muted)}
.subheader .search input:focus{outline:none}

/* Список услуг */
.services-list{
  display:flex; flex-direction:column;
  gap:14px; margin-bottom:12px;
}
.service{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  min-height:76px;
  border-radius:16px;
  background:linear-gradient(180deg,#15181d,#111419);
  border:1px solid var(--stroke);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  cursor:pointer;
  transition:transform .08s ease, border-color .2s ease, background .2s ease;
}
.service:hover{ transform:translateY(-1px); border-color:var(--stroke-2) }
.service .left, .service__left{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px }
.service .name, .service__name{
  font-weight:700;
  font-size:clamp(13px, 3.5vw, 14px);
  line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.service .meta, .service__meta{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.service .right, .service__right{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:0 0 auto}
.service .price, .service__price{
  font-weight:700; font-size:12px; line-height:1;
  padding:8px 10px; border-radius:999px;
  background:linear-gradient(180deg,rgba(255,107,107,.12),rgba(255,62,62,.06));
  box-shadow:inset 0 0 0 1px rgba(255,107,107,.25);
  color:#ff6b6b; white-space:nowrap;
}
.service .btn, .service__buy{
  appearance:none; cursor:pointer;
  padding:8px 12px; min-width:96px;
  border-radius:10px; border:1px solid var(--stroke);
  background:var(--surface-2); color:var(--text);
}
.service .btn:active, .service__buy:active{ transform:translateY(1px) }

/* ===== Страница отдельной услуги ===== */
.service-details{display:flex; flex-direction:column; gap:12px}
.svc{display:flex; flex-direction:column; gap:14px}
.svc .card{
  background:linear-gradient(180deg,#15181d,#111419);
  border:1px solid var(--stroke);
  border-radius:14px; padding:14px;
}
.svc .label{font-size:12px; color:var(--muted); margin-bottom:8px}

/* Пресеты количества */
.svc .qty-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.svc .qty{display:flex; flex-direction:column; gap:6px; align-items:flex-start;
  border:1px solid var(--stroke); border-radius:12px; padding:12px;
  background:linear-gradient(180deg,#14181e,#10141a); cursor:pointer}
.svc .qty .num, .qty__num{font-weight:600; color:#ffffff}
.svc .qty .price, .qty__price{font-size:12px; color:var(--muted)}
.svc .qty.active{outline:2px solid rgba(255,255,255,.14); background:linear-gradient(180deg,#17202a,#12171d)}

/* Поле ручного ввода количества + чипы */
.svc .qty-input{display:flex; flex-direction:column; gap:8px}
.svc .qty-input input{background:var(--elev); border:1px solid var(--stroke); color:var(--text); border-radius:12px; padding:12px; margin-top:10px}
.svc .chips{display:flex; gap:8px}
.svc .chip{appearance:none; border:1px solid var(--stroke); background:var(--surface-2); color:var(--text);
  border-radius:10px; padding:8px 10px; cursor:pointer; font-size:12px}

.svc .qty-input input[type="number"]::-webkit-outer-spin-button,
.svc .qty-input input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.svc .qty-input input[type="number"] { -moz-appearance:textfield; appearance:textfield; }

/* Ссылка и промокод */
.svc .field{display:flex; flex-direction:column; gap:8px}
.svc .field input[type="url"], .svc .field input[type="text"]{
  background:var(--elev); border:1px solid var(--stroke); color:var(--text);
  border-radius:12px; padding:12px
}
.svc .field .error{font-size:12px; color:#ff6b6b; display:none}
.svc .field .error.show{display:block}
.svc .promo-toggle{appearance:none; border:1px solid var(--stroke); background:var(--surface-2); color:var(--text);
  border-radius:10px; padding:8px 10px; cursor:pointer; width:max-content; margin-top:8px}
.svc .promo-wrap{display:none; gap:8px; align-items:center; margin-top:10px}
.svc .promo-wrap.show{display:flex}
.svc .promo-wrap input{flex:1; min-width:0; background:var(--elev); border:1px solid var(--stroke); color:var(--text); border-radius:12px; padding:12px}
.svc .promo-wrap .chip{appearance:none; border:1px solid var(--stroke); background:var(--surface-2); color:#ff6e6e;
  border-radius:10px; padding:10px 12px; cursor:pointer; font-weight:600}

/* Итого + кнопка */
.svc .summary{display:flex; flex-direction:column; gap:10px}
.svc .sum-row{display:flex; align-items:center; justify-content:space-between; font-size:14px}
.svc .sum-row b{font-weight:600}
.svc .btn-primary, .btn.btn-primary{width:100%; padding:12px 16px; border-radius:14px; border:0; cursor:pointer;
  background:linear-gradient(180deg,#ff6b6b 0%, #ff3e3e 100%); color:#fff; font:700 14px/1 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* Описание */
.svc .desc{font-size:12px; color:var(--muted)}

/* Избранное */
.svc .fav-row{display:flex; align-items:center; justify-content:space-between}
.svc .fav-left{display:flex; align-items:center; gap:8px}
.svc .heart{width:16px; height:16px; display:inline-block; filter:grayscale(1) brightness(1.5)}
.svc .switch{position:relative; width:46px; height:26px}
.svc .switch input{opacity:0; width:0; height:0}
.svc .slider{position:absolute; cursor:pointer; inset:0; background:#2a2f36; border-radius:50px; transition:.2s}
.svc .slider:before{content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s}
.svc .switch input:checked + .slider{background:var(--brand);}
.svc .switch input:checked + .slider:before{transform:translateX(20px)}

/* ===== Skeleton ===== */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--stroke); background:linear-gradient(180deg,#15181d,#111419); height:64px;}
.skeleton::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); background-size:200% 100%; animation:shimmer 1.4s infinite linear;}
.skel-row, .skeleton__row{display:flex; align-items:center; gap:12px; padding:14px}
.skel-avatar, .skeleton__avatar{width:42px;height:42px;border-radius:12px;background:#1b2028}
.skel-lines, .skeleton__lines{flex:1}
.skel-line, .skeleton__line{height:10px;border-radius:8px;background:#1b2028;margin:6px 0; width:70%}
.skel-line.short, .skeleton__line--short{width:35%}

/* ====================================================================== */
/* ===== Referrals page ================================================= */
.ref{display:flex; flex-direction:column; gap:12px}

/* Hero */
.ref-hero{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  padding:22px 16px;
}
.ref-ico{
  width:56px;height:56px;border-radius:30%;
  display:grid;place-items:center;color:#fff;margin-bottom:2px;
  background:radial-gradient(110px 110px at 30% 30%,#ff6b6b 0%,#ff3e3e 60%,#b62828 100%);
}
.ref-ico svg{width:28px;height:28px;display:block}
.ref-h1{font:600 15px/1.4 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:2px 0}
.ref-h1 .accent{color:var(--brand)}
.ref-h2{font:12px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#a8afbd;}

/* Ссылка */
.ref-linkbar,
.ref-link{
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  background:var(--elev); border:1px solid var(--stroke); border-radius:12px; padding:8px;
  cursor:pointer; transition:border-color .2s ease, background-color .2s ease, transform .05s ease;
}
.ref-linkbar:hover,
.ref-link:hover{ border-color:var(--stroke-2) }
.ref-linkbar:active,
.ref-link:active{ transform:scale(.998) }
.ref-linkbar.copied,
.ref-link.copied{ outline:2px solid rgba(255,255,255,.1) }

.ref-linkbar input,
.ref-link .ref-link-input{
  background:transparent; border:0; color:var(--text); font-size:13px; outline:none; padding:6px 8px; width:100%;
  cursor:pointer; user-select:all;
}
.ref-copy,
.ref-link .ref-link-copy{
  width:36px;height:36px;border-radius:10px;border:1px solid var(--stroke);
  background:var(--surface-2); display:grid; place-items:center; cursor:pointer;
}
.ref-copy svg,
.ref-link .ref-link-copy svg{width:18px;height:18px;display:block;color:#cfd5e1}

.ref-note{ color:var(--muted); font-size:12px; padding:0 2px; text-align:center }

/* Прогресс */
.ref-progress-card .row{ display:flex; align-items:center; gap:8px; }
.ref-progress{
  height:8px;background:rgba(255,255,255,.06);border:1px solid var(--stroke);border-radius:999px;overflow:hidden; margin-top:10px;
}
.ref-progress__bar{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff3e3e)}
.ref-progress-meta{
  margin-top:8px; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px;
}
.ref-dot{ width:8px; height:8px; border-radius:50%; background:#ff6b6b; box-shadow:0 0 0 2px rgba(255,107,107,.18) }

.ref-h3{font:600 16px Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:2px 0 6px}
.ref-stats{display:flex; flex-direction:column; gap:12px}
.ref-stat{
  background:var(--elev); border:1px solid var(--stroke); border-radius:12px; padding:12px 14px;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;
}
.ref-stat .sm{color:var(--muted); font-size:12px; margin-bottom:6px}
.ref-stat .lg{font-weight:700; font-size:18px}

/* ====================================================================== */

/* ===== Profile page (профиль) ===== */
#page-profile .card + .card{ margin-top:12px; }
#page-profile .avatar{ width:48px; height:48px; }
#page-profile .profile-row{ display:flex; gap:12px; align-items:center; }
#page-profile .profile-row .right{ margin-left:auto; text-align:right; }
#page-profile #profBalance{ font-weight:700; }
#page-profile #profMarkup{ font-weight:600; }

/* Универсальные инпуты/промо-строка вне .svc */
.promo-wrap{ display:flex; gap:8px; align-items:center; }
.promo-wrap input{
  flex:1; min-width:0;
  background:var(--elev); border:1px solid var(--stroke); color:var(--text);
  border-radius:12px; padding:12px;
}
.promo-wrap .chip{
  appearance:none; border:1px solid var(--stroke); background:var(--surface-2);
  color:#ff6e6e; border-radius:10px; padding:10px 12px; cursor:pointer; font-weight:600;
}

/* ===== Tabbar ===== */
.tabbar{
  position:fixed; left:0; right:0; bottom:env(safe-area-inset-bottom); z-index:20;
  height:var(--tabbarH);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; padding:10px 12px calc(80px + var(--kb)) 12px;
  background:rgba(14,16,20,.92);
  backdrop-filter:blur(8px) saturate(140%);
  border:1px solid var(--stroke);
  border-radius:var(--radius) var(--radius) 0 0;
  overflow:hidden;
}
.tabbar::before{
  content:""; position:absolute; left:10px; right:10px; top:0; height:1px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
  pointer-events:none;
}
.tabbar .tab{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  padding:8px 6px;
  border:0 !important;
  background:transparent !important;
  border-radius:12px;
  color: var(--text);
  font-size:10px; font-weight:300;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,transform .08s ease,opacity .2s ease;
}
.tabbar .tab:active{ transform:scale(.98) }
.tabbar .tab:hover{ background:rgba(255,255,255,.035) }
.tabbar .tab .tab-icon{ width:20px; height:20px; display:block; opacity:.9 }
.tabbar .tab span{ white-space:nowrap }
.tabbar .tab.active{
  color:var(--text);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.18);
}
.tabbar .tab.active .tab-icon{ opacity:1 }

/* ===== Modal ===== */
.modal{position:fixed; inset:0; display:none}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5)}
.modal-card{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(520px,92vw); background:linear-gradient(180deg,#16191e,#12151a); border:1px solid var(--stroke); border-radius:16px; box-shadow:var(--shadow); padding:16px;}
.modal-card h3{margin:0 0 12px}
.modal-row{display:flex; flex-direction:column; gap:6px; margin-bottom:10px}
.modal-row input{background:var(--elev); border:1px solid var(--stroke); color:var(--text); border-radius:10px; padding:10px}
.modal-info{color:var(--muted); margin:6px 0 12px}
.modal-actions{display:flex; gap:10px; justify-content:flex-end}

/* ===== Overlay (успешное пополнение) ===== */
.overlay{
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(10,12,16,.92); backdrop-filter:blur(4px);
}
.overlay--show{display:flex}
.overlay__dialog{
  width:min(440px,92vw); background:var(--surface);
  border-radius:20px; box-shadow:var(--shadow);
  padding:28px; text-align:center; color:var(--text);
  border:1px solid rgba(255,255,255,.06);
}
.overlay__icon{
  width:88px;height:88px;margin:0 auto 16px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:radial-gradient(110px 110px at 30% 30%,#2ed47a 0%,#1a9f55 60%,#117a3f 100%);
  box-shadow:0 10px 30px rgba(46,212,122,.35),inset 0 0 18px rgba(255,255,255,.15);
}
.overlay__icon svg{width:44px;height:44px;display:block}
.overlay__title{font:600 20px/1.3 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:6px 0 8px}
.overlay__subtitle{font:400 14px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#a8afbd;margin-bottom:18px}
.overlay__amount{font:600 16px/1.4 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin-bottom:16px}

/* ===== Buttons ===== */
.btn{cursor:pointer; border:0; background:var(--surface-2); color:var(--text); border-radius:12px; padding:10px 12px; font-weight:600; line-height:1}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,#ff6b6b 0%, #ff3e3e 100%); color:#fff}
.btn-secondary{background:var(--surface-2); border:1px solid var(--stroke); color:var(--text)}
.btn-lg{padding:12px 16px; border-radius:14px}

/* Чипы */
.chip{
  appearance:none; border:1px solid var(--stroke); background:var(--surface-2);
  color:var(--text); border-radius:10px; padding:8px 10px; cursor:pointer; font-size:12px
}

/* Fav list */
.fav-list{ display:flex; flex-direction:column; gap:14px; }

/* ===== Детализация (Заказы / Платежи) ===== */
.details-head{ margin:6px 0 10px; }
.details-head--center{ display:flex; justify-content:center; }

/* segmented */
.seg{ display:flex; gap:8px; padding:0; border:0; background:transparent; }
.seg__btn{
  appearance:none; border:1px solid transparent; background:transparent; color:var(--text);
  padding:6px 10px; border-radius:10px; font-size:13px; line-height:1; cursor:pointer;
}
.seg__btn--active{ border-color:var(--stroke); }

/* Segmented control — акцентный */
.seg--accent{
  display:inline-grid; grid-auto-flow:column; gap:6px;
  padding:4px; border-radius:12px;
  background:linear-gradient(180deg,#15181d,#111419);
  border:1px solid var(--stroke);
}
.seg--accent .seg__btn{
  border:1px solid var(--stroke);
  background:var(--surface-2); color:var(--text);
  border-radius:10px; padding:8px 12px; font-weight:600;
  transition:.15s ease;
}
.seg--accent .seg__btn:hover{ filter:brightness(1.05) }
.seg--accent .seg__btn.seg__btn--active{
  color:#fff;
  background:linear-gradient(180deg,var(--brand) 0%, var(--brand-d) 100%);
  border-color:transparent;
  box-shadow:0 6px 16px rgba(255,107,107,.25), inset 0 0 0 1px rgba(255,255,255,.12);
}

/* фильтры — одна строка, горизонтальный скролл */
#detailsFilters{ margin-bottom:8px }
.filters{
  display:flex; gap:8px; flex-wrap:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:2px 2px 6px;
  scroll-snap-type:x proximity;
}
.filters::-webkit-scrollbar{ display:none; }
.filters .filter{
  flex:0 0 auto; scroll-snap-align:start;
  appearance:none; border:1px solid var(--stroke); background:var(--surface-2); color:var(--text);
  border-radius:10px; padding:8px 10px; cursor:pointer; font-size:12px; line-height:1;
  transition:filter .2s ease, transform .06s ease, border-color .2s ease;
}
.filters .filter:hover{ filter:brightness(1.04); border-color:var(--stroke-2) }
.filters .filter:active{ transform:translateY(1px) }
/* Активный фильтр — акцент (без дублей) */
.filters .filter.active{
  color:#fff;
  background:linear-gradient(180deg,rgba(255,107,107,.16),rgba(255,62,62,.10));
  box-shadow:inset 0 0 0 1px rgba(255,107,107,.35);
  border-color:transparent;
}

/* Список */
.list{ display:flex; flex-direction:column; gap:12px }

/* Карточка заказа */
.order{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; border-radius:14px;
  background:linear-gradient(180deg,#15181d,#111419);
  border:1px solid var(--stroke);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .08s ease, border-color .2s ease, background .2s ease;
  cursor:pointer;
}
.order:hover{ transform:translateY(-1px); border-color:var(--stroke-2) }

.order__avatar{
  width:40px; height:40px; flex:0 0 40px;
  display:grid; place-items:center; border-radius:12px;
  background:linear-gradient(180deg,#1a1e24,#14181e);
  border:1px solid var(--stroke); color:#cfd5e1; font-weight:700;
}
.order__body{ flex:1; min-width:0 }
.order__head{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.order__title{
  font-weight:700; font-size:14px; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.order__meta{
  margin-top:4px; color:var(--muted); font-size:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.order__foot{ margin-top:8px; display:flex; align-items:center; justify-content:space-between }
.order__sum{ font-weight:700; font-size:13px }
.order__id{ font-size:12px; color:var(--muted) }

/* Иконка сети — во весь квадрат */
.order__ico{
  width:40px; height:40px; flex:0 0 40px;
  border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,#1a1e24,#14181e);
  border:1px solid var(--stroke);
}
.order__ico-img{
  width:100%; height:100%;
  object-fit:cover; display:block; border-radius:inherit;
}

/* Карточка платежа */
.pay{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; border-radius:14px;
  background:linear-gradient(180deg,#15181d,#111419);
  border:1px solid var(--stroke);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:transform .08s ease, border-color .2s ease, background .2s ease;
  cursor:pointer;
}
.pay:hover{ transform:translateY(-1px); border-color:var(--stroke-2) }

/* иконка провайдера — во весь квадрат */
.pay__ico{
  width:40px; height:40px; flex:0 0 40px;
  border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg,#1a1e24,#14181e);
  border:1px solid var(--stroke);
  display:block;
}
.pay__ico-img{
  width:100%; height:100%; display:block; object-fit:cover; border-radius:inherit;
}

.pay__body{ flex:1; min-width:0 }
.pay__top{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.pay__sum{ font-weight:700; font-size:14px }
.pay__sub{
  margin-top:4px; color:var(--muted); font-size:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Бейджи статусов */
.badge{
  display:inline-block; padding:6px 8px; border-radius:999px; line-height:1;
  font-size:11px; font-weight:600; white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.badge--processing{
  color:#cfd5e1;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
}
.badge--completed{
  color:#2ed47a;
  background:linear-gradient(180deg,rgba(46,212,122,.12),rgba(46,212,122,.06));
  box-shadow:inset 0 0 0 1px rgba(46,212,122,.25);
}
.badge--pending{
  color:#ffd146;
  background:linear-gradient(180deg,rgba(255,209,70,.14),rgba(255,209,70,.07));
  box-shadow:inset 0 0 0 1px rgba(255,209,70,.25);
}
.badge--failed{
  color:#ff6b6b;
  background:linear-gradient(180deg,rgba(255,107,107,.12),rgba(255,62,62,.06));
  box-shadow:inset 0 0 0 1px rgba(255,107,107,.25);
}

/* Небольшие адаптивные правки */
@media (max-width: 380px){
  .order__title, .pay__sum{ font-size:13px }
  .order__sum{ font-size:12px }
}

/* Responsive */
@media (min-width:520px){
  .nick{max-width:220px}
}

/* Скрыть скроллбары */
body, .page, .app-main, .cats-list, .services-list{ -ms-overflow-style:none; scrollbar-width:none; }
body::-webkit-scrollbar, .page::-webkit-scrollbar, .app-main::-webkit-scrollbar, .cats-list::-webkit-scrollbar, .services-list::-webkit-scrollbar{ width:0; height:0 }

/* === Прячем таббар при открытой клавиатуре и убираем лишний паддинг снизу === */
.kb-open .tabbar{
  display:none !important;
}

.kb-open .app-main{
  /* без места под таббар, только безопасная зона и небольшой зазор */
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px) !important;
}

/* Рулетка/страницы без хедера и таббара */
body.no-chrome .app-header,
body.no-chrome .tabbar { display:none !important; }

/* Чтобы не было пустых отступов под спрятанный хедер/таббар */
body.no-chrome .app-main {
  padding-top: 16px;
  padding-bottom: 16px;
}

body.roulette-open .app-header{ display:none !important; }
body.roulette-open .tabbar{ display:none !important; }
body.roulette-open .subheader,
body.roulette-open .details-head{ display:none !important; }
body.roulette-open .app-main{
  padding: 16px 16px calc(env(safe-area-inset-bottom) + 140px);
  min-height: 100dvh;
}

/* Панель рулетки */
#page-roulette .rbar{ /* см. значения в ensureRouletteStyles() */ }