/* ── Tapu NFT — Professional Marketplace ────────────────────────────────── */
:root {
  --tn-bg:      #080b12;
  --tn-bg2:     #0d1117;
  --tn-surface: #111827;
  --tn-surf2:   #1a2236;
  --tn-border:  #1e2d4a;
  --tn-border2: #2a3f5f;
  --tn-purple:  #7c5cfc;
  --tn-purple2: #5b3de8;
  --tn-cyan:    #00d2ff;
  --tn-gold:    #f59e0b;
  --tn-green:   #22c55e;
  --tn-text:    #e2e8f0;
  --tn-text2:   #94a3b8;
  --tn-text3:   #475569;
}
#tn-marketplace {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--tn-bg);
  min-height: 100vh;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--tn-text);
  overflow-x: hidden;
}
.tn-hero {
  position: relative;
  padding: 80px 40px 60px;
  text-align: center;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(124,92,252,.25) 0%, transparent 70%),
              linear-gradient(180deg, #0d1117 0%, var(--tn-bg) 100%);
  overflow: hidden;
}
.tn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(124,92,252,.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(0,210,255,.06) 0%, transparent 35%);
  pointer-events: none;
}
.tn-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(124,92,252,.12);
  border: 1px solid rgba(124,92,252,.25);
  border-radius: 999px;
  color: #a78bfa;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: .35rem 1rem;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.tn-hero-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: #7c5cfc;
  border-radius: 50%;
  animation: tn-pulse 2s infinite;
}
@keyframes tn-pulse {
  0%, 100% { opacity:1; transform:scale(1); }
  50%       { opacity:.5; transform:scale(.8); }
}
.tn-hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 1rem;
  background: linear-gradient(135deg, #e2e8f0 0%, #a78bfa 50%, #00d2ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.tn-hero-sub {
  font-size: 1.05rem;
  color: var(--tn-text2);
  max-width: 520px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}
.tn-stats-bar {
  display: flex;
  justify-content: center;
  max-width: 760px;
  margin: 0 auto;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--tn-border);
  border-radius: 16px;
  overflow: hidden;
}
.tn-stat-item { flex:1; padding:1.25rem 1.5rem; text-align:center; border-right:1px solid var(--tn-border); }
.tn-stat-item:last-child { border-right:none; }
.tn-stat-item-val { font-size:1.8rem; font-weight:800; line-height:1; margin-bottom:.35rem; }
.tn-stat-item-lbl { font-size:.7rem; color:var(--tn-text3); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.tn-stat-purple { color:var(--tn-purple); }
.tn-stat-green  { color:var(--tn-green); }
.tn-stat-gold   { color:var(--tn-gold); }
.tn-stat-cyan   { color:var(--tn-cyan); }
.tn-toolbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8,11,18,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--tn-border);
  padding: .875rem 40px;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.tn-filters { display:flex; gap:.375rem; flex-wrap:wrap; }
.tn-filter-btn { background:transparent; border:1px solid var(--tn-border); border-radius:8px; color:var(--tn-text2); cursor:pointer; font-size:.8rem; font-weight:600; padding:.45rem .9rem; transition:all .2s; white-space:nowrap; }
.tn-filter-btn:hover  { border-color:var(--tn-purple); color:#a78bfa; }
.tn-filter-btn.active { background:rgba(124,92,252,.15); border-color:var(--tn-purple); color:#a78bfa; }
.tn-search-box { margin-left:auto; display:flex; gap:.5rem; align-items:center; }
.tn-search-field { background:var(--tn-surface); border:1px solid var(--tn-border); border-radius:10px; color:var(--tn-text); font-size:.875rem; outline:none; padding:.55rem 1rem; width:240px; transition:border-color .2s; }
.tn-search-field:focus { border-color:var(--tn-purple); }
.tn-search-field::placeholder { color:var(--tn-text3); }
.tn-search-go { background:linear-gradient(135deg,var(--tn-purple),var(--tn-purple2)); border:none; border-radius:10px; color:#fff; cursor:pointer; font-size:.875rem; font-weight:700; padding:.55rem 1.1rem; transition:opacity .2s; }
.tn-search-go:hover { opacity:.88; }
.tn-grid-wrap { padding:2rem 40px; max-width:1600px; margin:0 auto; }
.tn-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem; }
.tn-card { background:var(--tn-surface); border:1px solid var(--tn-border); border-radius:18px; overflow:hidden; transition:transform .25s,border-color .25s,box-shadow .25s; }
.tn-card:hover { transform:translateY(-4px); border-color:rgba(124,92,252,.45); box-shadow:0 12px 40px rgba(124,92,252,.12); }
.tn-card.tn-card-minted { border-color:rgba(34,197,94,.2); }
.tn-card.tn-card-minted:hover { border-color:rgba(34,197,94,.5); box-shadow:0 12px 40px rgba(34,197,94,.1); }
.tn-card.tn-card-requested { border-color:rgba(245,158,11,.2); }
.tn-card-art { position:relative; height:140px; background:linear-gradient(135deg,#0d1117 0%,#1a1a2e 50%,#16213e 100%); overflow:hidden; display:flex; align-items:flex-end; padding:1rem; }
.tn-card-art::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 40%,rgba(124,92,252,.2) 0%,transparent 55%),radial-gradient(ellipse at 75% 60%,rgba(0,210,255,.1) 0%,transparent 45%); }
.tn-card-art-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(124,92,252,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(124,92,252,.06) 1px,transparent 1px); background-size:28px 28px; }
.tn-card-art-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-58%); font-size:3rem; opacity:.18; filter:blur(.5px); pointer-events:none; }
.tn-card-badge { position:absolute; top:.75rem; right:.75rem; font-size:.68rem; font-weight:700; padding:.25rem .65rem; border-radius:999px; letter-spacing:.04em; }
.tn-badge-available { background:rgba(124,92,252,.18); color:#a78bfa; border:1px solid rgba(124,92,252,.3); }
.tn-badge-minted    { background:rgba(34,197,94,.15);  color:#22c55e; border:1px solid rgba(34,197,94,.3); }
.tn-badge-requested { background:rgba(245,158,11,.15); color:#f59e0b; border:1px solid rgba(245,158,11,.3); }
.tn-card-id { position:relative; font-size:.72rem; font-weight:700; color:rgba(255,255,255,.3); letter-spacing:.05em; }
.tn-card-location { position:relative; margin-left:auto; font-size:.75rem; color:var(--tn-cyan); font-weight:600; }
.tn-card-body { padding:1rem 1.125rem .875rem; }
.tn-card-title { font-size:.95rem; font-weight:700; color:var(--tn-text); margin-bottom:.5rem; line-height:1.3; }
.tn-card-attrs { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.25rem; }
.tn-attr-tag { background:rgba(255,255,255,.05); border:1px solid var(--tn-border); border-radius:6px; color:var(--tn-text2); font-size:.7rem; font-weight:600; padding:.2rem .55rem; }
.tn-card-foot { padding:.75rem 1.125rem; border-top:1px solid var(--tn-border); display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; min-height:52px; }
.tn-card-tx { font-size:.68rem; color:var(--tn-text3); font-family:monospace; }
.tn-meta-link { font-size:.72rem; color:var(--tn-text3); text-decoration:none; transition:color .2s; }
.tn-meta-link:hover { color:var(--tn-purple); }
.tn-action-btn { border:none; border-radius:9px; cursor:pointer; font-size:.8rem; font-weight:700; padding:.5rem 1rem; transition:all .2s; text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap; }
.tn-btn-mint { background:linear-gradient(135deg,var(--tn-purple),var(--tn-purple2)); color:#fff; box-shadow:0 4px 14px rgba(124,92,252,.3); }
.tn-btn-mint:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(124,92,252,.45); }
.tn-btn-mint:disabled { opacity:.55; transform:none; cursor:not-allowed; }
.tn-btn-request { background:rgba(124,92,252,.12); border:1px solid rgba(124,92,252,.3); color:#a78bfa; }
.tn-btn-request:hover { background:rgba(124,92,252,.2); border-color:var(--tn-purple); }
.tn-btn-login { background:transparent; border:1px solid var(--tn-border2); color:var(--tn-text2); }
.tn-btn-login:hover { border-color:var(--tn-purple); color:#a78bfa; }
.tn-btn-confirm { background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; font-size:.78rem; padding:.45rem .875rem; }
.tn-btn-confirm:hover { opacity:.88; }
.tn-btn-confirm:disabled { opacity:.55; cursor:not-allowed; }
.tn-status-txt { font-size:.72rem; color:var(--tn-text3); width:100%; }
.tn-inline-form { padding:.875rem 1.125rem; background:rgba(124,92,252,.04); border-top:1px solid var(--tn-border); display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.tn-inline-input { flex:1; min-width:120px; background:var(--tn-bg2); border:1px solid var(--tn-border2); border-radius:8px; color:var(--tn-text); font-size:.82rem; outline:none; padding:.5rem .75rem; transition:border-color .2s; }
.tn-inline-input:focus { border-color:var(--tn-purple); }
.tn-inline-input::placeholder { color:var(--tn-text3); }
.tn-inline-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:600; padding:.35rem .75rem; border-radius:8px; }
.tn-ib-orange { background:rgba(245,158,11,.12); color:#f59e0b; border:1px solid rgba(245,158,11,.2); }
.tn-ib-green  { background:rgba(34,197,94,.12);  color:#22c55e; border:1px solid rgba(34,197,94,.2); }
.tn-ib-grey   { background:rgba(71,85,105,.12);  color:var(--tn-text2); border:1px solid var(--tn-border); }
.tn-loadmore-wrap { text-align:center; padding:2rem 40px 3rem; }
.tn-loadmore-btn { background:transparent; border:1px solid var(--tn-border2); border-radius:12px; color:var(--tn-text2); cursor:pointer; font-size:.875rem; font-weight:600; padding:.75rem 2rem; transition:all .2s; }
.tn-loadmore-btn:hover { background:rgba(124,92,252,.08); border-color:var(--tn-purple); color:#a78bfa; }
.tn-counter-txt { margin-top:.75rem; font-size:.78rem; color:var(--tn-text3); }
.tn-loading, .tn-empty-state { grid-column:1/-1; text-align:center; padding:4rem 2rem; color:var(--tn-text3); }
.tn-loading-spinner { display:inline-block; width:36px; height:36px; border:3px solid var(--tn-border); border-top-color:var(--tn-purple); border-radius:50%; animation:tn-spin .8s linear infinite; margin-bottom:1rem; }
@keyframes tn-spin { to { transform:rotate(360deg); } }
.tn-empty-icon { font-size:3rem; margin-bottom:1rem; opacity:.4; }
.tn-empty-txt  { font-size:.9rem; }
@media (max-width:768px) {
  .tn-hero { padding:50px 20px 40px; }
  .tn-toolbar { padding:.75rem 20px; }
  .tn-grid-wrap { padding:1.5rem 20px; }
  .tn-stats-bar { flex-wrap:wrap; }
  .tn-stat-item { min-width:50%; border-bottom:1px solid var(--tn-border); }
  .tn-search-box { margin-left:0; width:100%; }
  .tn-search-field { width:100%; flex:1; }
  .tn-loadmore-wrap { padding:1.5rem 20px 2.5rem; }
}
.tn-search-wrap { margin:1.5rem 0; }
.tn-search-form { display:flex; gap:.6rem; flex-wrap:wrap; }
.tn-search-input { flex:1; min-width:180px; background:#1e2535; border:1px solid #2a3245; border-radius:8px; color:#e2e8f0; font-size:.9rem; padding:.6rem 1rem; outline:none; }
.tn-search-input:focus { border-color:#7c5cfc; }
.tn-search-btn { background:linear-gradient(135deg,#7c5cfc,#5b3de8); border:none; border-radius:8px; color:#fff; cursor:pointer; font-size:.875rem; font-weight:700; padding:.6rem 1.1rem; white-space:nowrap; }
.tn-lazy-card { font-family:'Segoe UI',system-ui,sans-serif; background:#1e2535; border:1px solid #2a3245; border-radius:16px; overflow:hidden; max-width:540px; margin:1.5rem 0; }
.tn-lc-header { display:flex; align-items:center; gap:.875rem; padding:1rem 1.25rem; background:linear-gradient(135deg,#1a1f30,#221a40); }
.tn-lc-icon { font-size:2rem; }
.tn-lc-title { font-size:1rem; font-weight:700; color:#e2e8f0; }
.tn-lc-sub { font-size:.75rem; color:#00d2ff; margin-top:.15rem; }
.tn-lc-badge { margin-left:auto; font-size:.72rem; font-weight:700; padding:.3rem .75rem; border-radius:999px; white-space:nowrap; }
.tn-lc-minted { background:rgba(34,197,94,.15); color:#22c55e; border:1px solid rgba(34,197,94,.3); }
.tn-lc-pending { background:rgba(245,158,11,.15); color:#f59e0b; border:1px solid rgba(245,158,11,.3); }
.tn-lc-body { padding:.75rem 1.25rem; }
.tn-lc-row { display:flex; justify-content:space-between; font-size:.8rem; padding:.3rem 0; border-bottom:1px solid rgba(255,255,255,.05); }
.tn-lc-key { color:#6b7a99; }
.tn-lc-val { color:#e2e8f0; text-align:right; max-width:60%; }
.tn-lc-foot { padding:.875rem 1.25rem; border-top:1px solid #2a3245; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.tn-lc-btn { background:linear-gradient(135deg,#7c5cfc,#5b3de8); border:none; border-radius:8px; color:#fff; cursor:pointer; font-size:.82rem; font-weight:700; padding:.55rem 1.1rem; transition:.2s; }
.tn-lc-btn:hover { opacity:.88; }
.tn-lc-btn:disabled { opacity:.55; cursor:not-allowed; }
.tn-lc-btn-request { background:rgba(124,92,252,.12); border:1px solid rgba(124,92,252,.3); color:#a78bfa; }
.tn-lc-status { font-size:.8rem; color:#6b7a99; }
.tn-lc-meta-link { margin-left:auto; font-size:.72rem; color:#6b7a99; text-decoration:none; }
.tn-lc-meta-link:hover { color:#7c5cfc; }
.tn-lc-tx { font-family:monospace; font-size:.7rem; color:#6b7a99; }
.tn-tc-form { display:flex; gap:.5rem; flex-wrap:wrap; width:100%; }
.tn-tc-input { background:#0d0f14; border:1px solid #2a3245; border-radius:7px; color:#e2e8f0; font-size:.82rem; padding:.5rem .75rem; outline:none; flex:1; min-width:100px; }
.tn-tc-input:focus { border-color:#7c5cfc; }

/* ── Login Modal ──────────────────────────────────────────────────────────── */
.tn-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(10px);
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.tn-modal-overlay.active { display: flex; }
.tn-modal {
  background: #111827;
  border: 1px solid #1e2d4a;
  border-radius: 20px;
  padding: 2.5rem 2rem;
  max-width: 420px; width: 100%;
  position: relative;
  animation: tn-modal-in .25s ease;
}
@keyframes tn-modal-in {
  from { opacity:0; transform:translateY(-16px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.tn-modal-close { position:absolute; top:1rem; right:1rem; background:rgba(255,255,255,.06); border:1px solid #1e2d4a; border-radius:8px; color:#94a3b8; cursor:pointer; font-size:.9rem; line-height:1; padding:.4rem .55rem; transition:all .2s; }
.tn-modal-close:hover { background:rgba(124,92,252,.15); color:#a78bfa; border-color:#7c5cfc; }
.tn-modal-logo { font-size:2.5rem; text-align:center; margin-bottom:1rem; }
.tn-modal-title { font-size:1.2rem; font-weight:800; text-align:center; color:#e2e8f0; margin:0 0 .4rem; }
.tn-modal-sub { font-size:.82rem; text-align:center; color:#94a3b8; margin:0 0 1.5rem; line-height:1.5; }
.tn-modal-form { display:flex; flex-direction:column; gap:.875rem; }
.tn-modal-group label { display:block; font-size:.73rem; color:#475569; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:.35rem; }
.tn-modal-input { width:100%; background:#0d1117; border:1px solid #2a3f5f; border-radius:10px; color:#e2e8f0; font-size:.9rem; outline:none; padding:.65rem 1rem; box-sizing:border-box; transition:border-color .2s; }
.tn-modal-input:focus { border-color:#7c5cfc; }
.tn-modal-input::placeholder { color:#475569; }
.tn-modal-msg { font-size:.82rem; min-height:1.2rem; text-align:center; }
.tn-modal-msg.error   { color:#ef4444; }
.tn-modal-msg.success { color:#22c55e; }
.tn-modal-btn { background:linear-gradient(135deg,#7c5cfc,#5b3de8); border:none; border-radius:12px; color:#fff; cursor:pointer; font-size:.9rem; font-weight:700; padding:.8rem; transition:all .2s; box-shadow:0 4px 14px rgba(124,92,252,.35); }
.tn-modal-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(124,92,252,.5); }
.tn-modal-btn:disabled { opacity:.6; transform:none; cursor:not-allowed; }
.tn-modal-links { display:flex; justify-content:space-between; padding-top:.25rem; }
.tn-modal-link { font-size:.78rem; color:#475569; text-decoration:none; transition:color .2s; }
.tn-modal-link:hover { color:#7c5cfc; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.tn-footer { background:#0d1117; border-top:1px solid #1e2d4a; padding:3rem 40px 0; margin-top:2rem; }
.tn-footer-inner { display:flex; gap:3rem; max-width:1600px; margin:0 auto; padding-bottom:2.5rem; flex-wrap:wrap; }
.tn-footer-brand { flex:1; min-width:240px; }
.tn-footer-logo { font-size:1.25rem; font-weight:800; color:#e2e8f0; margin-bottom:.75rem; }
.tn-footer-desc { font-size:.85rem; color:#94a3b8; line-height:1.65; max-width:320px; }
.tn-footer-links { display:flex; gap:3rem; flex-wrap:wrap; }
.tn-footer-col { display:flex; flex-direction:column; gap:.6rem; }
.tn-footer-col h4 { font-size:.72rem; color:#475569; text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin:0 0 .25rem; }
.tn-footer-col a { font-size:.85rem; color:#94a3b8; text-decoration:none; transition:color .2s; }
.tn-footer-col a:hover { color:#7c5cfc; }
.tn-footer-bottom { border-top:1px solid #1e2d4a; padding:1.25rem 0; max-width:1600px; margin:0 auto; font-size:.78rem; color:#475569; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
@media (max-width:768px) {
  .tn-footer { padding:2rem 20px 0; }
  .tn-footer-links { gap:2rem; }
}