/* styles.fixed.css */
:root{
  --bg: #142f33;
  --panel: #25484a;
  --panel2: #3b6764;
  --accent: #70bda2;
  --accent2: #36709b;
  --accent3: #aee1c8;
  --text: #e9f4f1;
  --muted: rgba(233,244,241,.72);
  --line: rgba(174,225,200,.16);

  --danger: #e36a6a;

  --radius: 16px;
  --radius2: 22px;
  --shadow: 0 18px 40px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 600px at 18% -10%, rgba(112,189,162,.18), transparent 60%),
    radial-gradient(900px 520px at 92% 10%, rgba(54,112,155,.20), transparent 62%),
    linear-gradient(180deg, #0f2327 0%, var(--bg) 55%, #0f2327 100%);
}

a{ color:inherit; text-decoration:none; }
.container{ width:min(1120px, calc(100% - 40px)); margin:0 auto; }

.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(20,47,51,.65);
  border-bottom: 1px solid rgba(174,225,200,.10);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand__logo{
  width:50px; height:50px; border-radius:10px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.4));
}

.nav{ display:flex; gap:18px; }
.nav__link{
  padding:8px 10px;
  border-radius:12px;
  color: rgba(233,244,241,.78);
}
.nav__link:hover{
  background: rgba(174,225,200,.10);
  color: var(--text);
}

.shell{ padding:26px 0 40px; }

.grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  align-items:start;
  margin:0;
}

.card{
  background: linear-gradient(180deg, rgba(37,72,74,.86), rgba(37,72,74,.62));
  border: 1px solid rgba(174,225,200,.14);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding:18px;
}

.notice{
  background: rgba(20,47,51,.55);
  border: 1px solid rgba(174,225,200,.14);
  border-radius: 14px;
  padding:14px 14px 12px;
  margin-bottom: 14px;
}
.notice__head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:10px;
  border-bottom: 1px solid rgba(174,225,200,.12);
}
.notice__title{ display:flex; align-items:center; gap:10px; font-weight:650; }
.notice__dot{
  width:10px; height:10px; border-radius:99px;
  background: linear-gradient(180deg, var(--accent3), var(--accent));
  box-shadow: 0 0 0 4px rgba(112,189,162,.10);
}
.notice__body{ color: rgba(233,244,241,.78); margin-top:10px; }
.notice__body p{ margin:6px 0; }

.iconbtn{
  width:30px; height:30px;
  border-radius:10px;
  border: 1px solid rgba(174,225,200,.14);
  background: rgba(37,72,74,.35);
  color: rgba(233,244,241,.72);
  cursor: default;
}
.iconbtn--active{ cursor:pointer; }
.iconbtn--active:hover{ background: rgba(174,225,200,.10); }

.section{ margin-top: 12px; }
.section__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.section__title{ margin:0; font-size:22px; letter-spacing:.2px; }
.section__rate{ color: rgba(233,244,241,.62); font-size:12px; }

.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.field{ display:block; }
.field__label{
  display:block;
  font-size:12px;
  color: rgba(233,244,241,.62);
  margin: 0 0 6px 2px;
}
.field__hint{
  display:block;
  margin:6px 0 0 2px;
  font-size:12px;
  color: rgba(233,244,241,.58);
}
.field__error{
  display:block;
  margin:6px 0 0 2px;
  font-size:12px;
  color: var(--danger);
  min-height: 16px;
}

.control{
  width:100%;
  height:44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(174,225,200,.14);
  background: rgba(20,47,51,.45);
  color: var(--text);
  outline: none;
}
.control::placeholder{ color: rgba(233,244,241,.38); }
.control:focus{
  border-color: rgba(112,189,162,.65);
  box-shadow:
    0 0 0 4px rgba(112,189,162,.14),
    0 0 0 1px rgba(112,189,162,.30) inset;
}

.control.is-invalid,
.coincontrol.is-invalid{
  border-color: rgba(227,106,106,.85) !important;
  box-shadow: 0 0 0 4px rgba(227,106,106,.14);
}

.meta{
  margin-top:8px;
  color: rgba(233,244,241,.58);
  font-size:12px;
}

.swapline{
  display:flex;
  justify-content:center;
  padding:14px 0 6px;
}
.swapbtn{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius: 16px;
  border: 1px solid rgba(174,225,200,.18);
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(174,225,200,.22), transparent 60%),
    linear-gradient(180deg, rgba(54,112,155,.26), rgba(112,189,162,.14));
  color: rgba(233,244,241,.9);
  box-shadow: 0 12px 26px rgba(0,0,0,.30);
  cursor:pointer;
}
.swapbtn:hover{ filter: brightness(1.04); }

.paneltitle{
  margin: 2px 0 14px;
  font-size:22px;
  letter-spacing:.2px;
}

.form{ display:flex; flex-direction:column; gap:14px; }

.primary{
  height:52px;
  border-radius: 16px;
  border: 1px solid rgba(174,225,200,.18);
  cursor:pointer;
  color: #071517;
  font-weight: 700;
  letter-spacing:.2px;
  background:
    linear-gradient(90deg, var(--accent) 0%, rgba(112,189,162,.85) 35%, rgba(54,112,155,.85) 100%);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
}
.primary:hover{ filter: brightness(1.03); }
.primary:active{ transform: translateY(1px); }

.footnote{
  margin-top: -6px;
  font-size:12px;
  color: rgba(233,244,241,.56);
}

/* === coin control === */
.coincontrol{
  width:100%;
  height:44px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(174,225,200,.14);
  background: rgba(20,47,51,.45);
  color: var(--text);
  outline: none;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  text-align:left;
}
.coincontrol:hover{
  border-color: rgba(174,225,200,.22);
  background: rgba(20,47,51,.52);
}
.coincontrol:focus{
  border-color: rgba(112,189,162,.65);
  box-shadow:
    0 0 0 4px rgba(112,189,162,.14),
    0 0 0 1px rgba(112,189,162,.30) inset;
}
.coincontrol__left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.coincontrol__chev{
  color: rgba(233,244,241,.65);
  flex: 0 0 auto;
}
.cointext{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  min-width:0;
}
.cointext__name{
  font-weight:650;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cointext__code{
  margin-top:4px;
  font-size:12px;
  color: rgba(233,244,241,.62);
}

/* icons */
.coinicon{
  width:34px; height:34px;
  border-radius: 999px;
  display:grid; place-items:center;
  font-weight:800;
  letter-spacing:.2px;
  border: 1px solid rgba(174,225,200,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.coinicon--btc{ background: #f7931a; color:#0b0b0b; border-color: rgba(0,0,0,.18); }
.coinicon--xmr{ background: #ff6600; color:#0b0b0b; border-color: rgba(0,0,0,.18); }
.coinicon--ltc{ background: #345d9d; color:#e9f4f1; }
.coinicon--eth{ background: #3c3c3d; color:#e9f4f1; }
.coinicon--usdt{ background: #26a17b; color:#071517; border-color: rgba(0,0,0,.18); }
.coinicon--ton{ background: #1b8bd3; color:#e9f4f1; }
.coinicon--zec{ background: #f4b728; color:#071517; border-color: rgba(0,0,0,.18); }
.coinicon--apt{ background: #101a1c; color:#e9f4f1; }
.coinicon--tao{ background: #1b2140; color:#e9f4f1; }
.coinicon--bnb{ background: #f3ba2f; color:#071517; border-color: rgba(0,0,0,.18); }

/* === modal coin picker (клики + непрозрачность) === */
body.modal-open{ overflow:hidden; }

.modal[hidden]{ display:none; }
.modal{
  position: fixed;
  inset: 0;
  z-index: 60;
  display:grid;
  place-items:center;
  padding: 18px;
}

/* backdrop НЕ перекрывает dialog */
.modal__backdrop{
  position:absolute;
  inset:0;
  border:0;
  background: rgba(0,0,0,.62);
  z-index: 0;
}
.modal__dialog{
  position:relative;
  z-index: 1;

  width: min(420px, 100%);
  max-height: calc(100vh - 36px);
  display:flex;
  flex-direction:column;
  overflow:hidden;

  border-radius: 18px;
  border: 1px solid rgba(174,225,200,.16);

  background: linear-gradient(180deg, rgba(37,72,74,.98), rgba(37,72,74,.94));
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}

.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(174,225,200,.12);
}
.modal__title{
  font-size:18px;
  font-weight:700;
  letter-spacing:.2px;
}
.modal__body{
  padding: 12px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.modal__search{ height:44px; }

.coinlist{
  overflow:auto;
  border-radius: 14px;
  border: 1px solid rgba(174,225,200,.12);
  background: rgba(20,47,51,.55);
}
.coinitem{
  width:100%;
  border:0;
  background: transparent;
  color: var(--text);
  text-align:left;
  cursor:pointer;

  display:flex;
  gap:12px;
  align-items:center;

  padding: 12px 12px;
  border-bottom: 1px solid rgba(174,225,200,.10);
}
.coinitem:last-child{ border-bottom:0; }
.coinitem:hover{ background: rgba(174,225,200,.08); }
.coinitem__icon{ flex: 0 0 auto; }
.coinitem__text{ display:flex; flex-direction:column; line-height:1.1; }
.coinitem__name{ font-weight:650; }
.coinitem__code{
  margin-top:4px;
  font-size:12px;
  color: rgba(233,244,241,.62);
}
.coinempty{
  padding: 14px 12px;
  color: rgba(233,244,241,.70);
}

/* === reviews === */
.sectionblock{ padding: 30px 0 30px; }

.reviews{
  display:grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 1.55fr);
  gap:18px;
  align-items:start;
  margin-top: 18px;
}
.reviews__right{ min-width:0; }

.badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  letter-spacing:.3px;
  color: rgba(233,244,241,.82);
  border: 1px solid rgba(174,225,200,.14);
  background: rgba(37,72,74,.35);
}

.reviews__title{
  margin: 14px 0 6px;
  font-size: 28px;
  letter-spacing:.2px;
}
.reviews__desc{
  margin: 0 0 18px;
  color: rgba(233,244,241,.68);
  max-width: 34ch;
}

.reviews__nav{ display:flex; gap:10px; margin-top: 10px; }
.navbtn{
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid rgba(174,225,200,.18);
  background: rgba(37,72,74,.35);
  color: rgba(233,244,241,.85);
  cursor:pointer;
}
.navbtn:hover{ background: rgba(174,225,200,.10); }

.reviewlist{
  display:flex;
  min-width:0;
  gap:14px;
  overflow:auto;
  padding: 6px 2px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.reviewlist::-webkit-scrollbar{ display:none; }

.reviewcard{
  scroll-snap-align: start;
  flex: 0 0 320px;
  min-width: 320px;

  background: linear-gradient(180deg, rgba(37,72,74,.86), rgba(37,72,74,.62));
  border: 1px solid rgba(174,225,200,.14);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  padding: 16px;
}
.reviewcard__text{
  color: rgba(233,244,241,.88);
  margin-bottom: 14px;
  min-height: 42px;
}
.stars{
  font-size: 18px;
  letter-spacing: 2px;
  color: #f4b728;
  margin-bottom: 10px;
}
.reviewcard__date{
  font-size: 12px;
  color: rgba(233,244,241,.60);
}

.partners{ margin-top: 22px; }
.partners__line{
  height: 1px;
  background: rgba(174,225,200,.14);
  margin: 0 0 16px;
}
.partners__logos{
  display:flex;
  justify-content:center;
  gap: 22px;
  flex-wrap: wrap;
  padding-bottom: 10px;
}
.partner{
  color: rgba(233,244,241,.55);
  font-weight: 700;
  letter-spacing:.4px;
}

/* === footer === */
.footer{
  margin-top: 34px;
  padding: 34px 0 18px;
  background:
    radial-gradient(900px 420px at 12% 30%, rgba(112,189,162,.12), transparent 60%),
    radial-gradient(900px 420px at 92% 40%, rgba(54,112,155,.12), transparent 62%),
    rgba(15,35,39,.55);
  border-top: 1px solid rgba(174,225,200,.10);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr .8fr;
  gap: 18px;
  align-items:start;
}
.footer__brandhead{
  display:flex;
  align-items:center;
  gap: 10px;
}
.footer__logo{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
.footer__brandname{
  font-size: 20px;
  font-weight: 800;
  letter-spacing:.2px;
}
.footer__brandtext{
  margin-top: 10px;
  color: rgba(233,244,241,.68);
}
.footer__title{
  font-weight: 750;
  margin: 6px 0 10px;
}
.footer__link{
  display:block;
  padding: 8px 0;
  color: rgba(233,244,241,.72);
}
.footer__link:hover{ color: rgba(233,244,241,.92); }

.social{ display:flex; gap:10px; margin-top: 14px; }
.social__link{
  width: 36px;
  height: 36px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  border: 1px solid rgba(174,225,200,.14);
  background: rgba(37,72,74,.28);
  color: rgba(233,244,241,.82);
}
.social__link:hover{ background: rgba(174,225,200,.10); }

.footer__bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(174,225,200,.10);
}
.footer__copy{
  color: rgba(233,244,241,.55);
  font-size: 12px;
}

/* responsive */
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
  .nav{ display:none; }
  .row{ grid-template-columns: 1fr; }

  .reviews{ grid-template-columns: 1fr; }
  .reviewcard{ min-width: 280px; flex-basis: 280px; }

  .footer__grid{ grid-template-columns: 1fr; }
}

.reviewcard{
  box-shadow: none;
}

/* === payment page === */
.topbar__actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.topbar__iconbtn{
  width:34px;
  height:34px;
  border-radius: 12px;
  border: 1px solid rgba(174,225,200,.14);
  background: rgba(37,72,74,.28);
  color: rgba(233,244,241,.82);
  cursor:pointer;
}
.topbar__iconbtn:hover{ background: rgba(174,225,200,.10); }

.topbar__login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(174,225,200,.18);
  background: rgba(54,112,155,.22);
  color: rgba(233,244,241,.88);
}
.topbar__login:hover{ background: rgba(174,225,200,.10); }

.steps{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 6px 0 18px;
}
.step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(174,225,200,.12);
  background: rgba(37,72,74,.22);
}
.step__num{
  width:28px;
  height:28px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(174,225,200,.16);
  background: rgba(20,47,51,.35);
  color: rgba(233,244,241,.85);
  font-weight: 800;
}
.step__title{ font-weight: 750; font-size: 12px; }
.step__sub{ font-size: 11px; color: rgba(233,244,241,.62); margin-top:2px; }
.step--active{
  border-color: rgba(112,189,162,.45);
  background: linear-gradient(180deg, rgba(112,189,162,.18), rgba(54,112,155,.10));
}

.paygrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:start;
}
.paytitle{
  margin: 6px 0 16px;
  font-size: 34px;
  letter-spacing:.2px;
}

.subhead{
  margin: 14px 0 10px;
  font-size: 16px;
  color: rgba(233,244,241,.92);
}

.infobox{
  border-radius: 18px;
  border: 1px solid rgba(174,225,200,.14);
  background: rgba(20,47,51,.34);
  overflow:hidden;
}
.inforow{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:12px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(174,225,200,.10);
}
.inforow:last-child{ border-bottom:0; }
.infolabel{
  font-size: 12px;
  color: rgba(233,244,241,.62);
}
.infovalue{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: rgba(233,244,241,.86);
  word-break: break-all;
}

.copybtn{
  width:32px;
  height:32px;
  border-radius: 12px;
  border: 1px solid rgba(174,225,200,.14);
  background: rgba(37,72,74,.28);
  color: rgba(233,244,241,.82);
  cursor:pointer;
  flex: 0 0 auto;
}
.copybtn:hover{ background: rgba(174,225,200,.10); }
.copybtn:disabled{ opacity:.7; cursor:default; }

.qrwrap{
  display:flex;
  justify-content:center;
  padding: 14px 12px 16px;
  background: rgba(15,35,39,.22);
}
.qrsvg{
  width: 220px;
  height: 220px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}

.payactions{
  display:flex;
  gap:12px;
  margin-top: 16px;
}
.secondary{
  height:52px;
  flex: 1 1 auto;
  border-radius: 16px;
  border: 1px solid rgba(174,225,200,.18);
  background: rgba(37,72,74,.25);
  color: rgba(233,244,241,.84);
  cursor:pointer;
}
.secondary:hover{ background: rgba(174,225,200,.10); }

@media (max-width: 980px){
  .paygrid{ grid-template-columns: 1fr; }
  .inforow{ grid-template-columns: 120px 1fr; }
}

/* === creating payment page === */
.loaderpage{
  min-height: calc(100vh - 92px);
  display:grid;
  place-items:center;
  padding: 30px 0 50px;
}

.loadcard{
  width: min(520px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 14px;
  padding: 34px 18px;
  text-align:center;
}

.spinner{
  width: 66px;
  height: 66px;
  border-radius: 999px;
  border: 4px solid rgba(174,225,200,.18);
  border-top-color: var(--accent);
  border-right-color: rgba(54,112,155,.85);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  animation: spin 0.95s linear infinite;
}

.loadtext{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(233,244,241,.9);
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .spinner{ animation: none; }
}

/* === flow pages (payment/confirmations) === */
.topbar__actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.topbar__iconbtn{
  width:34px;
  height:34px;
  border-radius: 12px;
  border: 1px solid rgba(174,225,200,.14);
  background: rgba(37,72,74,.28);
  color: rgba(233,244,241,.82);
  cursor:pointer;
}
.topbar__iconbtn:hover{ background: rgba(174,225,200,.10); }

.topbar__login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(174,225,200,.18);
  background: rgba(54,112,155,.22);
  color: rgba(233,244,241,.88);
}
.topbar__login:hover{ background: rgba(174,225,200,.10); }

.steps{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 6px 0 18px;
}
.step{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(174,225,200,.12);
  background: rgba(37,72,74,.22);
}
.step__num{
  width:28px;
  height:28px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(174,225,200,.16);
  background: rgba(20,47,51,.35);
  color: rgba(233,244,241,.85);
  font-weight: 800;
}
.step__title{ font-weight: 750; font-size: 12px; }
.step__sub{ font-size: 11px; color: rgba(233,244,241,.62); margin-top:2px; }
.step--active{
  border-color: rgba(112,189,162,.45);
  background: linear-gradient(180deg, rgba(112,189,162,.18), rgba(54,112,155,.10));
}

.paygrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:start;
}
.paytitle{
  margin: 6px 0 16px;
  font-size: 34px;
  letter-spacing:.2px;
}

.subhead{
  margin: 14px 0 10px;
  font-size: 16px;
  color: rgba(233,244,241,.92);
}

/* table-like boxes */
.infobox{
  border-radius: 18px;
  border: 1px solid rgba(174,225,200,.14);
  background: rgba(20,47,51,.34);
  overflow:hidden;
}
.inforow{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:12px;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(174,225,200,.10);
}
.inforow:last-child{ border-bottom:0; }
.infolabel{
  font-size: 12px;
  color: rgba(233,244,241,.62);
}
.infovalue{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: 12px;
  color: rgba(233,244,241,.86);
  word-break: break-all;
}

.copybtn{
  width:32px;
  height:32px;
  border-radius: 12px;
  border: 1px solid rgba(174,225,200,.14);
  background: rgba(37,72,74,.28);
  color: rgba(233,244,241,.82);
  cursor:pointer;
  flex: 0 0 auto;
}
.copybtn:hover{ background: rgba(174,225,200,.10); }
.copybtn:disabled{ opacity:.7; cursor:default; }

.explink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(174,225,200,.18);
  background: rgba(37,72,74,.22);
  color: rgba(233,244,241,.84);
}
.explink:hover{ background: rgba(174,225,200,.10); }

.payactions{
  display:flex;
  gap:12px;
  margin-top: 16px;
}
.secondary{
  height:52px;
  flex: 1 1 auto;
  border-radius: 16px;
  border: 1px solid rgba(174,225,200,.18);
  background: rgba(37,72,74,.25);
  color: rgba(233,244,241,.84);
  cursor:pointer;
}
.secondary:hover{ background: rgba(174,225,200,.10); }

/* confirmations specific */
.confirmhead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing:.3px;
  border: 1px solid rgba(174,225,200,.16);
  background: rgba(37,72,74,.30);
  color: rgba(233,244,241,.88);
}
.chip--warn{
  border-color: rgba(244,183,40,.35);
  background: rgba(244,183,40,.10);
}
.chip--ok{
  border-color: rgba(112,189,162,.45);
  background: rgba(112,189,162,.14);
}

.confsub{
  color: rgba(233,244,241,.72);
  margin: 6px 0 14px;
}

.confprogress{
  border: 1px solid rgba(174,225,200,.14);
  background: rgba(20,47,51,.34);
  border-radius: 18px;
  padding: 12px;
}
.confprogress__top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}
.confprogress__label{ color: rgba(233,244,241,.68); font-size:12px; }
.confprogress__count{ font-weight: 800; }
.confprogress__bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(174,225,200,.12);
  overflow:hidden;
  border: 1px solid rgba(174,225,200,.10);
}
.confprogress__fill{
  height:100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(54,112,155,.85) 100%);
}
.confprogress__hint{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(233,244,241,.58);
}

.statusbox{
  margin-top: 14px;
  border: 1px solid rgba(174,225,200,.14);
  background: rgba(20,47,51,.30);
  border-radius: 18px;
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.statusitem{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(233,244,241,.70);
}
.statusdot{
  width:10px;
  height:10px;
  border-radius:999px;
  background: rgba(233,244,241,.25);
  box-shadow: 0 0 0 4px rgba(233,244,241,.05);
}
.statusitem--active{ color: rgba(233,244,241,.88); }
.statusitem--active .statusdot{
  background: rgba(244,183,40,.95);
  box-shadow: 0 0 0 4px rgba(244,183,40,.12);
}
.statusitem--done{ color: rgba(233,244,241,.88); }
.statusitem--done .statusdot{
  background: rgba(112,189,162,.95);
  box-shadow: 0 0 0 4px rgba(112,189,162,.12);
}

.confhelp{
  margin-top: 12px;
  font-size: 12px;
  color: rgba(233,244,241,.58);
}

/* === mobile адаптация === */
@media (max-width: 980px){
  .paygrid{ grid-template-columns: 1fr; }
}

/* очень узкие экраны */
@media (max-width: 640px){
  /* шаги — лучше горизонтальный скролл, а не переносы */
  .steps{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom: 6px;
    scrollbar-width:none;
  }
  .steps::-webkit-scrollbar{ display:none; }
  .step{ flex: 0 0 auto; }

  /* верхняя панель — меньше места */
  .topbar__actions{ gap:8px; }
  .topbar__login{ padding: 0 10px; }
}

@media (max-width: 520px){
  .paytitle{ font-size: 24px; margin-bottom: 10px; }
  .confirmhead{ flex-direction:column; align-items:flex-start; }

  /* строки таблицы — label сверху, value снизу */
  .inforow{
    grid-template-columns: 1fr;
    gap:6px;
  }
  .infovalue{
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .copybtn{ margin-left:auto; }

  /* кнопки — в колонку */
  .payactions{ flex-direction:column; }
  .secondary,.primary{ width:100%; height:50px; }

  /* в хедере можно скрыть текст логина, чтобы не ломало ширину */
  .topbar__login{ display:none; }
}

/* my-transactions page */
.tx-state{
  border: 1px solid rgba(174,225,200,.14);
  border-radius: 14px;
  padding: 14px;
  color: rgba(233,244,241,.82);
  background: rgba(10,34,40,.35);
}
.tx-list{
  display: grid;
  gap: 12px;
}
.tx-item{
  border: 1px solid rgba(174,225,200,.14);
  border-radius: 14px;
  padding: 14px;
  background: rgba(10,34,40,.33);
}
.tx-item__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.tx-item__id{
  font-weight: 700;
  font-size: 18px;
}
.tx-item__pair{
  color: rgba(233,244,241,.92);
  margin-bottom: 6px;
}
.tx-item__meta{
  color: rgba(233,244,241,.66);
  font-size: 13px;
}
.tx-item__actions{
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.tx-btn{
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(174,225,200,.18);
  background: rgba(37,72,74,.25);
  color: rgba(233,244,241,.9);
  cursor: pointer;
  text-decoration: none;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.tx-btn:hover{
  background: rgba(174,225,200,.1);
}
.tx-btn--primary{
  color: #0a1115;
  font-weight: 700;
  border: 1px solid rgba(174,225,200,.45);
  background: linear-gradient(135deg,var(--accent),#5da6d7);
}
.tx-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(174,225,200,.24);
  background: rgba(37,72,74,.3);
}
.tx-pill--active{
  border-color: rgba(244,183,40,.4);
  background: rgba(244,183,40,.14);
}
.tx-pill--done{
  border-color: rgba(112,189,162,.45);
  background: rgba(112,189,162,.14);
}
.tx-pill--error{
  border-color: rgba(214,105,105,.45);
  background: rgba(214,105,105,.14);
}

@media (max-width: 520px){
  .tx-item__actions{
    flex-direction: column;
  }
  .tx-btn{
    width: 100%;
  }
}