/* p.4 - NFT v mini-appe: vitrina redkostey, drop i moya kollekciya */

#screen-nft { padding: 14px 12px 96px; }

.nft-hero {
  position: relative;
  border-radius: 18px;
  padding: 16px 16px 14px;
  margin-bottom: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(120,160,255,.16), rgba(190,120,255,.12));
  border: 1px solid rgba(255,255,255,.08);
}
.nft-hero h2 { margin: 0 0 4px; font-size: 19px; letter-spacing: .2px; }
.nft-hero p { margin: 0; font-size: 12.5px; opacity: .72; line-height: 1.45; }
.nft-hero .nft-bal { margin-top: 10px; font-size: 13px; opacity: .9; }

.nft-equipped {
  display: flex; gap: 12px; align-items: center;
  border-radius: 16px; padding: 10px 12px; margin-bottom: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}
.nft-equipped .nft-thumb { width: 62px; height: 62px; border-radius: 14px; flex: 0 0 auto; overflow: hidden; }
.nft-equipped .t { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; opacity: .55; }
.nft-equipped .n { font-size: 14.5px; font-weight: 600; margin-top: 2px; }
.nft-equipped .b { font-size: 11.5px; opacity: .7; margin-top: 3px; }
.nft-equipped button {
  margin-left: auto; border: 0; border-radius: 10px; padding: 8px 12px;
  font-size: 12px; cursor: pointer;
  background: rgba(255,255,255,.09); color: inherit;
}

.nft-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.nft-tabs button {
  flex: 1; border: 0; border-radius: 12px; padding: 9px 6px;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,.05); color: inherit; opacity: .65;
  transition: .18s;
}
.nft-tabs button.on { opacity: 1; }
.nft-tabs button[data-r="common"].on { background: linear-gradient(135deg,#2e9d63,#1f7a4b); color: #fff; }
.nft-tabs button[data-r="rare"].on { background: linear-gradient(135deg,#3f7fe0,#2a55b8); color: #fff; }
.nft-tabs button[data-r="legendary"].on { background: linear-gradient(135deg,#a05de0,#7136c0); color: #fff; }
.nft-tabs button[data-r="my"].on { background: linear-gradient(135deg,#e0a13f,#c07a1f); color: #fff; }

.nft-rhead {
  border-radius: 14px; padding: 11px 13px; margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.035);
}
.nft-rhead .row { display: flex; align-items: center; gap: 8px; }
.nft-rhead .price { margin-left: auto; font-weight: 700; font-size: 13px; }
.nft-rhead .buffs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.nft-rhead .buffs span {
  font-size: 11px; padding: 4px 8px; border-radius: 8px;
  background: rgba(255,255,255,.07); opacity: .9;
}
.nft-rhead .left { font-size: 11.5px; opacity: .6; margin-top: 8px; }

.nft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nft-card {
  position: relative; border-radius: 16px; overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column;
}
.nft-card.r-common { box-shadow: inset 0 0 0 1px rgba(46,157,99,.28); }
.nft-card.r-rare { box-shadow: inset 0 0 0 1px rgba(63,127,224,.32); }
.nft-card.r-legendary { box-shadow: inset 0 0 0 1px rgba(160,93,224,.36); }
.nft-card .media {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.07), rgba(0,0,0,.18));
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.nft-card .media video, .nft-card .media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.nft-card .badge {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  font-size: 10px; padding: 3px 7px; border-radius: 999px;
  background: rgba(0,0,0,.45); backdrop-filter: blur(4px); color: #fff;
}
.nft-card .badge.own { background: rgba(46,157,99,.85); }
.nft-card .badge.taken { background: rgba(0,0,0,.6); opacity: .8; }
.nft-card .body { padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 7px; }
.nft-card .nm { font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.nft-card .pr { font-size: 11.5px; opacity: .72; }
.nft-card button {
  border: 0; border-radius: 10px; padding: 8px 6px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg,#4a7de0,#2f4fb0);
}
.nft-card button.ghost { background: rgba(255,255,255,.08); color: inherit; }
.nft-card button:disabled { opacity: .4; cursor: default; }
.nft-card.is-taken .media { filter: grayscale(.85) brightness(.75); }

.nft-empty { text-align: center; padding: 32px 16px; opacity: .6; font-size: 13px; line-height: 1.5; }

.nft-modal {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; padding: 22px;
  background: rgba(0,0,0,.62); backdrop-filter: blur(6px);
}
.nft-modal.open { display: flex; }
.nft-modal .box {
  width: 100%; max-width: 340px; border-radius: 20px; overflow: hidden;
  background: #14161c; border: 1px solid rgba(255,255,255,.09); color: #eaf2ff;
}
html[data-theme="light"] .nft-modal .box { background: #fff; color: #14161c; }
.nft-modal .box video, .nft-modal .box img { width: 100%; display: block; }
.nft-modal .box .info { padding: 14px 16px 16px; }
.nft-modal .box .info h3 { margin: 0 0 6px; font-size: 16px; }
.nft-modal .box .info p { margin: 0 0 4px; font-size: 12.5px; opacity: .72; }
.nft-modal .box .info .acts { display: flex; gap: 8px; margin-top: 12px; }
.nft-modal .box .info .acts button {
  flex: 1; border: 0; border-radius: 12px; padding: 11px 8px;
  font-size: 13px; font-weight: 600; cursor: pointer; color: #fff;
  background: linear-gradient(135deg,#4a7de0,#2f4fb0);
}
.nft-modal .box .info .acts button.ghost { background: rgba(255,255,255,.08); color: inherit; }

/* shest knopok v nizhnem menyu - chut uzhe */
.sh-nav .navbtn span { font-size: 10px; }