/* NFT Marketplace — page styles */
@import url("colors_and_type.css");

/* Hero — marketplace mock */
.nf-mp {
  background: linear-gradient(180deg, rgba(15,21,48,0.96), rgba(8,12,28,0.96));
  border: 1px solid rgba(255,138,80,0.25);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 80px rgba(255,138,80,0.14);
}
.nf-dot { background: #FF8A50 !important; box-shadow: 0 0 0 3px rgba(255,138,80,0.25) !important; }

.nf-collection { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nf-card { background: rgba(15,21,48,0.6); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; overflow: hidden; }
.nf-card-art { aspect-ratio: 1.05; background: linear-gradient(135deg, #FF8A50, #9b7cff 50%, #4FC8FF); position: relative; }
.nf-card-a .nf-card-art { background: conic-gradient(from 45deg, #FF8A50, #FFB020, #5EFFA4, #4FC8FF, #9b7cff, #FF8A50); }
.nf-card-b .nf-card-art { background: radial-gradient(circle at 30% 30%, #5EFFA4, #4FC8FF 40%, #0a1024); }
.nf-card-c .nf-card-art { background: linear-gradient(135deg, #9b7cff 0%, #ff4d4f 50%, #FFB020 100%); }
.nf-card-meta { padding: 8px 10px; }
.nf-card-n { font-family: var(--font-mono); font-size: 9.5px; color: var(--site-text-3); letter-spacing: 0.1em; }
.nf-card-t { font-size: 12px; color: var(--site-text); font-weight: 600; margin-top: 2px; }
.nf-card-p { font-family: var(--font-mono); font-size: 11px; color: var(--site-mint); margin-top: 4px; font-weight: 600; }

.nf-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.nf-detail-l { }
.nf-detail-h { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; color: var(--site-amber); margin-bottom: 6px; }
.nf-detail-art { aspect-ratio: 1; background: conic-gradient(from 0deg, #FF8A50, #FFB020 25%, #5EFFA4 50%, #4FC8FF 75%, #FF8A50); border-radius: 8px; box-shadow: inset 0 0 30px rgba(0,0,0,0.4); }
.nf-detail-r { display: flex; flex-direction: column; gap: 8px; }
.nf-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: rgba(15,21,48,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; font-family: var(--font-mono); font-size: 10.5px; }
.nf-detail-row span:first-child { color: var(--site-text-3); letter-spacing: 0.08em; text-transform: uppercase; font-size: 9.5px; }
.nf-detail-bid { color: var(--site-mint); font-weight: 600; font-size: 13px; }
.nf-detail-bidder { color: var(--site-cyan); }

.nf-timer { padding: 8px 10px; background: rgba(255,138,80,0.06); border: 1px solid rgba(255,138,80,0.25); border-radius: 6px; }
.nf-timer-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: #FF8A50; margin-bottom: 6px; }
.nf-timer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.nf-timer-cell { padding: 6px 0; text-align: center; background: rgba(15,21,48,0.6); border-radius: 4px; }
.nf-timer-v { display: block; font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--site-text); line-height: 1; }
.nf-timer-u { display: block; font-family: var(--font-mono); font-size: 8.5px; color: var(--site-text-3); margin-top: 2px; letter-spacing: 0.1em; }

.nf-bid-btn { padding: 10px; background: linear-gradient(180deg, #FF8A50, #ff6a30); border: none; border-radius: 6px; color: #0a1024; font-weight: 700; font-size: 12px; letter-spacing: 0.04em; cursor: pointer; }

.nf-foot { display: flex; justify-content: space-around; padding: 12px 14px; font-family: var(--font-mono); font-size: 11px; color: var(--site-text-2); }

/* Payments */
.nf-pay-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 48px; }
.nf-pay { padding: 24px 20px; border: 1px solid rgba(255,255,255,0.07); background: rgba(15,21,48,0.4); border-radius: 12px; }
.nf-pay-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--site-mint); margin-bottom: 12px; font-weight: 600; }
.nf-pay-icon { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, rgba(94,255,164,0.2), rgba(79,200,255,0.15)); border: 1px solid rgba(94,255,164,0.3); display: flex; align-items: center; justify-content: center; color: var(--site-mint); font-weight: 600; margin-bottom: 14px; font-family: var(--font-mono); }
.nf-pay-t { font-weight: 600; font-size: 14px; color: var(--site-text); margin-bottom: 6px; }
.nf-pay-d { font-size: 12px; color: var(--site-text-3); line-height: 1.5; }

/* Admin console */
.nf-admin-console { margin-top: 48px; border: 1px solid rgba(155,124,255,0.22); background: linear-gradient(180deg, rgba(15,21,48,0.6), rgba(15,21,48,0.25)); border-radius: 16px; overflow: hidden; }
.nf-admin-bar { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,0.06); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--site-text); }
.nf-admin-l { font-weight: 600; }
.nf-admin-tag { margin-left: auto; padding: 3px 8px; border: 1px solid rgba(155,124,255,0.4); color: var(--site-violet, #9b7cff); border-radius: 4px; font-size: 9.5px; }
.nf-admin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,0.06); }
.nf-admin { padding: 22px 20px; background: rgba(15,21,48,0.4); position: relative; transition: background 0.2s ease; cursor: default; }
.nf-admin:hover { background: rgba(155,124,255,0.06); }
.nf-admin-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--site-violet, #9b7cff); margin-bottom: 12px; font-weight: 600; }
.nf-admin-t { font-weight: 600; font-size: 14px; color: var(--site-text); margin-bottom: 6px; }
.nf-admin-d { font-size: 11.5px; color: var(--site-text-3); line-height: 1.5; }
.nf-admin-mark { position: absolute; top: 18px; right: 18px; color: var(--site-text-3); font-size: 14px; }

@media (max-width: 1100px) {
  .cx-hero-visual { margin: 0 auto; }
  .nf-pay-grid { grid-template-columns: repeat(2, 1fr); }
  .nf-admin-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .nf-pay-grid, .nf-admin-grid { grid-template-columns: 1fr; }
  .nf-detail { grid-template-columns: 1fr; }
}