/* ═══════════════════════════════════════════════════════════════
NAME WHISPER v3 — Six Rooms
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg: #08080a;
--bg-elevated: #0e0e12;
--surface: #131318;
--surface2: #1a1a22;
--surface3: #222230;
--border: #252530;
--border-subtle: #1c1c26;
--text: #eae8e4;
--text-secondary: #9b99a8;
--text-dim: #5c5a6a;
--accent: #d4a853;
--accent-bright: #f0c96e;
--accent-dim: #a07d2e;
--accent-glow: rgba(212, 168, 83, 0.12);
--accent-glow-strong: rgba(212, 168, 83, 0.25);
--green: #5ee6a0;
--green-dim: rgba(94, 230, 160, 0.12);
--red: #f07070;
--red-dim: rgba(240, 112, 112, 0.12);
--blue: #6cacf0;
--blue-dim: rgba(108, 172, 240, 0.12);
--purple: #b08cf0;
--purple-dim: rgba(176, 140, 240, 0.12);
--cyan: #5ec6e6;
--cyan-dim: rgba(94, 198, 230, 0.12);
--font-display: 'Space Grotesk', -apple-system, sans-serif;
--font-body: 'DM Sans', -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', monospace;
--radius: 12px;
--radius-sm: 8px;
--radius-xs: 6px;
--radius-pill: 100px;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
html { overflow-x: hidden; }
body {
font-family: var(--font-body);
font-size: 16px;
background: var(--bg);
color: var(--text);
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
/* Noise */
body::before {
content: '';
position: fixed;
inset: 0;
opacity: 0.02;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
}
/* Ambient glow — color shifts per mode */
.ambient {
position: fixed;
top: -30vh;
left: 50%;
transform: translateX(-50%);
width: 90vw;
height: 60vh;
background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(212,168,83,0.20) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
transition: background 0.8s var(--ease-out);
}
.ambient.mode-discover { background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(212,168,83,0.22) 0%, transparent 70%); }
.ambient.mode-create { background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(176,140,240,0.18) 0%, transparent 70%); }
.ambient.mode-value { background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(94,230,160,0.15) 0%, transparent 70%); }
.ambient.mode-portfolio{ background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(108,172,240,0.15) 0%, transparent 70%); }
.ambient.mode-market { background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(240,168,83,0.18) 0%, transparent 70%); }
.ambient.mode-check { background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(94,198,230,0.18) 0%, transparent 70%); }
.ambient.mode-categories { background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(230,180,94,0.18) 0%, transparent 70%); }
.ambient.mode-protocol { background: radial-gradient(ellipse 70% 55% at 50% 40%, rgba(94,198,230,0.16) 0%, transparent 70%); }
/* ─── Layout ───────────────────────────────────────────── */
.app {
position: relative;
z-index: 1;
max-width: 1060px;
margin: 0 auto;
padding: 0 24px;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ─── Header ───────────────────────────────────────────── */
.header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
border-bottom: 1px solid var(--border-subtle);
animation: fadeIn 0.5s var(--ease-out);
position: relative;
}
.header::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
opacity: 0.4;
}
/* ─── User Area / Wallet Connect ──────────────────────── */
.header-right {
display: flex;
align-items: center;
gap: 8px;
}
.nav-link-terminal {
color: var(--accent);
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
text-decoration: none;
padding: 6px 14px;
border-radius: var(--radius-pill);
border: 1px solid rgba(212, 168, 83, 0.4);
background: var(--accent-glow);
box-shadow: 0 0 12px rgba(212, 168, 83, 0.15), 0 0 4px rgba(212, 168, 83, 0.1);
transition: all 0.3s var(--ease-out);
position: relative;
overflow: hidden;
}
.nav-link-terminal::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 200%; height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(212, 168, 83, 0.12) 40%, rgba(240, 201, 110, 0.2) 50%, rgba(212, 168, 83, 0.12) 60%, transparent 100%);
animation: terminalShimmer 3.5s linear infinite;
}
@keyframes terminalShimmer {
0% { transform: translateX(-50%); }
100% { transform: translateX(100%); }
}
.nav-link-terminal:hover {
color: var(--accent-bright);
border-color: var(--accent);
background: var(--accent-glow-strong);
box-shadow: 0 0 20px rgba(212, 168, 83, 0.25), 0 0 8px rgba(212, 168, 83, 0.15);
}
.nav-link-agents {
color: var(--text-secondary);
font-family: var(--font-body);
font-size: 13px;
text-decoration: none;
padding: 6px 12px;
border-radius: var(--radius-pill);
transition: all 0.2s var(--ease-out);
}
.nav-link-agents:hover {
color: var(--accent);
background: var(--accent-glow);
}
.user-area {
position: relative;
}
.btn-connect {
display: flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px solid var(--border);
color: var(--text-secondary);
padding: 6px 14px;
border-radius: var(--radius-pill);
cursor: pointer;
font-family: var(--font-body);
font-size: 13px;
transition: all 0.2s var(--ease-out);
}
.btn-connect:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-glow);
}
.user-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--surface);
border: 1px solid var(--border);
padding: 6px 14px;
border-radius: var(--radius-pill);
cursor: pointer;
transition: all 0.2s var(--ease-out);
line-height: 1;
}
.user-badge:hover {
border-color: var(--accent-dim);
background: var(--surface2);
}
.user-ens {
font-family: var(--font-mono);
font-size: 13px;
color: var(--accent);
font-weight: 500;
line-height: 1;
}
.user-addr {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
line-height: 1;
}
.user-addr:empty, .user-ens:empty { display: none; }
.user-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px;
/* Raised from 100 → 1000 so the dropdown sits above sticky table headers,
mode pills, and anything else that could possibly create a stacking
context above the header. Still well below modal overlays (800+). */
z-index: 1000;
min-width: 160px;
box-shadow: 0 8px 32px rgba(0,0,0,0.4);
pointer-events: auto;
}
.user-menu button {
display: block;
width: 100%;
text-align: left;
background: transparent;
border: none;
color: var(--text-secondary);
padding: 8px 12px;
border-radius: var(--radius-xs);
cursor: pointer;
font-family: var(--font-body);
font-size: 13px;
}
.user-menu button:hover {
background: var(--surface2);
color: var(--text);
}
.logo {
display: flex;
align-items: baseline;
gap: 6px;
text-decoration: none;
cursor: pointer;
}
.logo-name {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
background: linear-gradient(135deg, #f5d98a, var(--accent-bright), var(--accent), var(--accent-dim));
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 6s ease-in-out infinite;
filter: drop-shadow(0 0 12px rgba(212,168,83,0.3));
}
@keyframes shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.logo-whisper {
font-family: var(--font-display);
font-size: 24px;
font-weight: 300;
letter-spacing: 2px;
background: linear-gradient(135deg, #999, #bbb, #888, #777);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 6s ease-in-out infinite;
animation-delay: 0.9s;
}
/* ─── Command Bar ──────────────────────────────────────── */
.command-bar {
padding: 24px 0 20px;
transition: padding 0.4s var(--ease-out);
}
.command-bar.compact { padding: 16px 0 12px; }
.search-row {
display: flex;
gap: 8px;
align-items: center;
}
.search-box {
flex: 1;
display: flex;
align-items: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 4px;
transition: all 0.3s var(--ease-out);
}
.search-box:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow), 0 0 24px rgba(212,168,83,0.08), 0 8px 32px rgba(0,0,0,0.3);
}
.search-icon {
display: flex;
align-items: center;
padding: 0 4px 0 14px;
color: var(--text-dim);
transition: color 0.3s;
}
.search-icon svg { width: 18px; height: 18px; }
.search-box input {
flex: 1;
background: none;
border: none;
padding: 14px 12px;
font-family: var(--font-body);
font-size: 16px;
color: var(--text);
outline: none;
}
.search-box input::placeholder { color: var(--text-dim); font-weight: 300; }
.search-actions { display: flex; gap: 4px; padding-right: 4px; }
.btn-search {
background: linear-gradient(180deg, rgba(212,168,83,0.32) 0%, rgba(212,168,83,0.16) 100%);
border: 1px solid rgba(212,168,83,0.35);
border-radius: var(--radius-sm);
padding: 11px 24px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: var(--accent-bright);
cursor: pointer;
transition: all 0.3s var(--ease-out);
letter-spacing: 0.5px;
position: relative;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.btn-search::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(212,168,83,0.1) 50%, transparent 100%);
background-size: 200% 100%;
animation: btnShimmer 5s ease-in-out infinite;
pointer-events: none;
}
@keyframes btnShimmer {
0%, 100% { background-position: -100% 0; }
50% { background-position: 200% 0; }
}
.btn-search:hover {
background: linear-gradient(180deg, rgba(212,168,83,0.35) 0%, rgba(212,168,83,0.18) 100%);
border-color: rgba(212,168,83,0.5);
box-shadow: 0 0 20px rgba(212,168,83,0.12), 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
transform: translateY(-1px);
}
.btn-search:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-reset {
background: none;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 8px 10px;
color: var(--text-dim);
cursor: pointer;
transition: all 0.2s;
display: none;
line-height: 1;
}
.btn-reset:hover { border-color: var(--text-secondary); color: var(--text-secondary); }
.btn-reset svg { display: block; }
/* ─── Mode Pills ───────────────────────────────────────── */
.mode-pills {
display: flex;
gap: 6px;
margin-top: 14px;
justify-content: center;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.mode-pill {
display: flex;
align-items: center;
gap: 7px;
background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid rgba(212,168,83,0.15);
border-radius: var(--radius-pill);
padding: 9px 20px;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
color: rgba(180,175,190,0.7);
cursor: pointer;
transition: all 0.3s var(--ease-out);
letter-spacing: 0.5px;
white-space: nowrap;
position: relative;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.07);
flex: 1 1 0;
min-width: 0;
justify-content: center;
}
.mode-pill span {
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.mode-pill::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);
background-size: 200% 100%;
animation: pillSheen 8s ease-in-out infinite;
pointer-events: none;
}
@keyframes pillSheen {
0%, 100% { background-position: -100% 0; }
50% { background-position: 200% 0; }
}
.mode-pill:hover {
color: rgba(230,225,240,0.95);
border-color: rgba(255,255,255,0.2);
background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 100%);
box-shadow: 0 3px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
transform: translateY(-1px);
}
.mode-pill.active {
background: linear-gradient(180deg, rgba(212,168,83,0.2) 0%, rgba(212,168,83,0.05) 100%);
border-color: rgba(212,168,83,0.4);
color: var(--accent-bright);
box-shadow: 0 0 24px rgba(212,168,83,0.12), 0 3px 10px rgba(0,0,0,0.35), inset 0 1px 0 rgba(212,168,83,0.2);
}
.mode-pill.active::before {
background: linear-gradient(90deg, transparent 0%, rgba(212,168,83,0.08) 50%, transparent 100%);
background-size: 200% 100%;
}
.mode-pill svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; }
.mode-pill:hover svg { opacity: 1; }
.mode-pill.active svg { opacity: 1; }
/* ─── Landing Hero ─────────────────────────────────────── */
.landing {
transition: all 0.4s var(--ease-out);
animation: fadeUp 0.6s var(--ease-out);
}
.landing.hidden {
opacity: 0;
height: 0;
overflow: hidden;
pointer-events: none;
margin: 0;
padding: 0;
}
/* ─── Market Ticker Bar ───────────────────────────────── */
.ticker-bar {
border-bottom: 1px solid var(--border-subtle);
padding: 6px 0;
overflow: hidden;
position: relative;
}
.ticker-bar::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
opacity: 0.4;
}
.ticker-bar::-webkit-scrollbar { display: none; }
.ticker-inner {
display: flex;
align-items: center;
gap: 0;
white-space: nowrap;
min-width: max-content;
}
.ticker-copy {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.ticker-item {
display: flex;
align-items: center;
gap: 6px;
padding: 0 14px;
}
.ticker-label {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
color: var(--text-dim);
letter-spacing: 0.8px;
}
.ticker-val {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
transition: color 0.3s;
}
.ticker-val.accent { color: var(--accent); }
.ticker-val.green { color: var(--green); }
.ticker-delta {
font-size: 9px;
font-family: var(--font-mono);
margin-left: 4px;
padding: 1px 4px;
border-radius: 3px;
}
.ticker-delta.up { color: #4ade80; background: rgba(74,222,128,0.1); }
.ticker-delta.down { color: #f87171; background: rgba(248,113,113,0.1); }
.ticker-delta.flat { color: var(--text-dim); }
.ticker-sep {
width: 1px;
height: 14px;
background: var(--border-subtle);
flex-shrink: 0;
}
.ticker-inner.scrolling {
animation: var(--ticker-animation);
}
/* ─── Landing (compact hero) ─────────────────────────── */
.landing-hero-compact {
text-align: center;
padding: 20px 0 8px;
position: relative;
}
.landing-hero-compact h1 {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
letter-spacing: -1px;
line-height: 1.1;
margin-bottom: 4px;
}
.landing-hero-compact .hl-rotate {
display: inline-block;
position: relative;
vertical-align: bottom;
transition: width 0.4s ease;
}
.landing-hero-compact .hl-word {
background: linear-gradient(135deg, #f5d98a, var(--accent-bright), var(--accent), #e8b84a);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 6s ease-in-out infinite;
filter: drop-shadow(0 0 20px rgba(212,168,83,0.25));
position: absolute;
left: 0;
bottom: 0;
opacity: 0;
transition: opacity 0.5s ease-in-out;
white-space: nowrap;
}
.landing-hero-compact .hl-word.active {
opacity: 1;
}
.landing-hero-compact p {
color: var(--text-dim);
font-size: 13px;
font-weight: 300;
letter-spacing: 0.3px;
}
/* ─── Capability Grid ──────────────────────────────────── */
.landing-footer-text {
text-align: center;
padding: 0 0 24px;
font-size: 13px;
color: var(--text-dim);
letter-spacing: 0.2px;
}
/* ─── Result Canvas ────────────────────────────────────── */
.result-canvas {
flex: 1;
display: none;
padding-bottom: 40px;
animation: fadeUp 0.35s var(--ease-out);
}
.result-canvas.active { display: block; }
/* Smooth show/hide for data-card */
.data-card.visible { display: block; animation: cardReveal 0.45s var(--ease-out); }
@keyframes cardReveal {
from { opacity: 0; transform: translateY(10px) scale(0.99); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes saleSlideIn {
from { opacity: 0; transform: translateX(-20px); background: rgba(212,168,83,0.08); }
to { opacity: 1; transform: translateX(0); background: transparent; }
}
.mp-sale-new { animation: saleSlideIn 0.5s ease-out both; }
/* ─── Loading ──────────────────────────────────────────── */
.loading-state { display: none; text-align: center; padding: 60px 20px; }
.loading-state.visible { display: block; animation: fadeUp 0.3s var(--ease-out); }
.loading-orb {
width: 44px; height: 44px; margin: 0 auto 20px; position: relative;
}
.loading-orb::before, .loading-orb::after {
content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent;
}
.loading-orb::before { border-top-color: var(--accent); animation: spin 1s linear infinite; }
.loading-orb::after { border-bottom-color: var(--accent-dim); animation: spin 1.5s linear infinite reverse; inset: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text {
font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
letter-spacing: 0.5px; animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
/* Search button loading spinner */
.btn-search.loading {
color: transparent;
pointer-events: none;
}
.btn-search.loading::after {
content: '';
position: absolute;
width: 16px; height: 16px;
top: 50%; left: 50%;
margin: -8px 0 0 -8px;
border: 2px solid transparent;
border-top-color: var(--accent-bright);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
/* ─── Skeleton Loading Screens ─────────────────────────── */
.skeleton {
background: linear-gradient(90deg,
var(--surface) 0%,
var(--surface2) 40%,
var(--surface3) 50%,
var(--surface2) 60%,
var(--surface) 100%
);
background-size: 300% 100%;
animation: skeletonShimmer 1.8s ease-in-out infinite;
border-radius: var(--radius-xs);
}
@keyframes skeletonShimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
.skeleton-inline {
display: inline-block;
width: 80px;
height: 1.1em;
vertical-align: middle;
border-radius: 4px;
background: linear-gradient(90deg,
var(--surface) 0%, var(--surface2) 40%, var(--surface3) 50%, var(--surface2) 60%, var(--surface) 100%
);
background-size: 300% 100%;
animation: skeletonShimmer 1.8s ease-in-out infinite;
}
.skeleton-card {
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
padding: 28px;
margin-bottom: 20px;
}
.skeleton-line {
height: 14px;
border-radius: 4px;
margin-bottom: 12px;
}
.skeleton-line.w100 { width: 100%; }
.skeleton-line.w80 { width: 80%; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w30 { width: 30%; }
.skeleton-line.tall { height: 32px; }
.skeleton-line.hero { height: 48px; width: 50%; margin: 12px auto; }
.skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
margin: 16px 0;
}
.skeleton-grid-item {
height: 72px;
border-radius: var(--radius-sm);
}
/* ─── Summary Card ─────────────────────────────────────── */
.summary-card {
display: none; padding: 16px 20px; background: var(--surface);
border: 1px solid var(--border); border-left: 3px solid var(--accent);
border-radius: var(--radius-sm); margin-bottom: 20px;
font-size: 14px; color: var(--text-secondary); line-height: 1.7;
animation: slideIn 0.4s var(--ease-out);
}
.summary-card .summary-header {
color: var(--text-primary); font-weight: 500; margin-bottom: 8px;
}
.summary-card .summary-header strong { color: var(--accent); }
.summary-card .summary-bullet {
padding-left: 16px; position: relative; margin-bottom: 3px;
}
.summary-card .summary-bullet::before {
content: '•'; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
.summary-card.visible { display: block; }
.summary-card.shimmer {
background: linear-gradient(90deg, var(--surface) 0%, var(--surface2) 50%, var(--surface) 100%);
background-size: 200% 100%; animation: shimmerSummary 2s ease-in-out infinite;
min-height: 60px; color: transparent;
}
@keyframes shimmerSummary { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* ─── Stats Bar ────────────────────────────────────────── */
.stats-bar { display: none; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.stats-bar.visible { display: flex; }
.stats-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); letter-spacing: 0.5px; }
.stats-count strong { color: var(--accent); font-weight: 600; }
/* ─── Results Table ────────────────────────────────────── */
.table-wrap {
overflow-x: auto; border: 1px solid var(--border);
border-radius: var(--radius); background: var(--surface);
}
.table-wrap:not(:has(.visible)) { display: none; }
.results-table { width: 100%; border-collapse: collapse; display: none; }
.results-table.visible { display: table; }
.results-table th {
text-align: left; padding: 12px 14px; font-family: var(--font-mono);
font-size: 10px; font-weight: 600; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 1px;
border-bottom: 1px solid var(--border); background: var(--bg-elevated);
position: sticky; top: 0; z-index: 1;
}
.results-table th.sortable { cursor: pointer; user-select: none; transition: color 0.15s; }
.results-table th.sortable:hover { color: var(--accent); }
.results-table th.sortable::after { content: ' \2195'; font-size: 9px; opacity: 0.3; }
.results-table th.sort-asc::after { content: ' \2191'; opacity: 1; color: var(--accent); }
.results-table th.sort-desc::after { content: ' \2193'; opacity: 1; color: var(--accent); }
.results-table td {
padding: 11px 14px; font-size: 13px;
border-bottom: 1px solid var(--border-subtle); vertical-align: middle;
}
.results-table tbody tr { transition: background 0.15s; }
.results-table tbody tr:hover { background: rgba(255,255,255,0.015); }
.results-table tbody tr:last-child td { border-bottom: none; }
.name-cell { font-family: var(--font-mono); font-weight: 600; font-size: 13px; }
.name-cell a { color: var(--text); text-decoration: none; transition: color 0.15s; }
.name-cell a:hover { color: var(--accent); }
.price-cell { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--accent); }
.price-cell.no-price { color: var(--text-dim); font-weight: 400; }
.expiry-cell.soon { color: var(--red); font-weight: 600; }
/* ─── Badges ───────────────────────────────────────────── */
.valuation-badges {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
margin: 0 0 12px 0;
}
.badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: var(--radius-xs);
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
letter-spacing: 0.3px; white-space: nowrap;
text-decoration: none; transition: all 0.15s;
}
.badge-clickable { cursor: pointer; }
.badge-clickable:hover { background: rgba(94,230,160,0.2); border-color: var(--green); }
.badge-collection { background: var(--green-dim); border: 1px solid rgba(94,230,160,0.2); color: var(--green); }
.badge-ai { background: var(--purple-dim); border: 1px solid rgba(176,140,240,0.25); color: var(--purple); text-transform: uppercase; letter-spacing: 0.8px; }
.badge-beta { background: rgba(255,160,50,0.1); border: 1px solid rgba(255,160,50,0.3); color: #ffa032; text-transform: uppercase; letter-spacing: 0.8px; font-size: 9px; }
.badge-available { background: var(--green-dim); border: 1px solid rgba(94,230,160,0.25); color: var(--green); text-transform: uppercase; letter-spacing: 0.8px; }
.badge-tag { background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim); }
.verified-icon { flex-shrink: 0; }
.verified-cell { max-width: 220px; }
.reg-cost { color: var(--green); font-size: 12px; font-weight: 600; }
.status-available { color: var(--green); font-weight: 600; }
.status-taken { color: var(--text-dim); }
/* Type badges */
.type-badge {
display: inline-block; padding: 3px 8px; border-radius: var(--radius-xs);
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.8px;
}
.type-badge.SALE { background: var(--green-dim); color: var(--green); }
.type-badge.LISTING_CREATED { background: var(--accent-glow); color: var(--accent); }
.type-badge.OFFER_CREATED { background: var(--blue-dim); color: var(--blue); }
.type-badge.MINT { background: var(--purple-dim); color: var(--purple); }
/* Rec badges */
.rec-badge {
display: inline-block; padding: 3px 10px; border-radius: var(--radius-xs);
font-family: var(--font-mono); font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.8px;
}
.rec-badge.renew { background: var(--green-dim); color: var(--green); }
.rec-badge.hold { background: var(--blue-dim); color: var(--blue); }
.rec-badge.consider_dropping { background: var(--red-dim); color: var(--red); }
.rec-badge.grace_period { background: rgba(255,165,0,0.12); color: #ffa500; }
.rec-badge.premium { background: rgba(255,80,80,0.12); color: #ff5050; }
.rec-badge.expired { background: var(--surface2); color: var(--text-dim); }
/* ─── Data Card (shared) ───────────────────────────────── */
.data-card {
display: none; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 28px; margin-bottom: 20px;
animation: slideIn 0.4s var(--ease-out);
position: relative;
}
.data-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: calc(var(--radius) + 1px);
background: linear-gradient(135deg, rgba(212,168,83,0.15), transparent 40%, transparent 60%, rgba(212,168,83,0.08));
z-index: -1;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
}
.data-card:hover::before { opacity: 1; }
.data-card h3 {
font-family: var(--font-display); font-size: 18px; font-weight: 600;
margin-bottom: 20px; color: var(--text); letter-spacing: -0.3px;
}
.data-card h3 .na { color: var(--accent); }
.data-card h3 .na a { color: var(--accent); text-decoration: none; }
.data-card h3 .na a:hover { color: var(--accent-bright); }
.st-name a { color: inherit; text-decoration: none; }
.st-name a:hover { color: var(--accent); }
.data-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px; margin-bottom: 20px;
}
.data-item {
background: var(--bg-elevated); border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm); padding: 16px 18px;
transition: border-color 0.2s, background 0.2s;
}
.data-item:hover {
border-color: var(--border);
background: var(--surface);
}
/* Hero value for estimated price (first data item in valuation) */
.data-item.hero {
grid-column: 1 / -1;
text-align: center;
padding: 24px 18px;
background: linear-gradient(180deg, var(--bg-elevated), rgba(14,14,18,0.6));
border-color: var(--border);
}
.data-item.hero .value {
font-size: 36px;
letter-spacing: -1px;
}
.data-item.hero .label {
font-size: 11px;
letter-spacing: 2px;
margin-bottom: 8px;
}
.data-item .label {
font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 6px;
}
.data-item .value {
font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.3px;
}
.data-item .value.accent { color: var(--accent); }
.data-item .value.green { color: var(--green); }
.data-item .value.red { color: var(--red); }
.data-item .value.blue { color: var(--blue); }
.verdict {
padding: 14px 18px; border-radius: var(--radius-sm); font-family: var(--font-display);
font-weight: 600; font-size: 14px; margin-bottom: 16px;
display: flex; align-items: center; gap: 10px;
}
.verdict.good { background: var(--green-dim); border: 1px solid rgba(94,230,160,0.25); color: var(--green); }
.verdict.fair { background: var(--accent-glow); border: 1px solid rgba(212,168,83,0.25); color: var(--accent); }
.verdict.low { background: var(--red-dim); border: 1px solid rgba(240,112,112,0.25); color: var(--red); }
/* Confidence bar */
.confidence-bar {
height: 4px; border-radius: 2px; background: var(--surface3);
overflow: hidden; flex: 1; max-width: 120px;
}
.confidence-bar-fill {
height: 100%; border-radius: 2px;
transition: width 0.6s var(--ease-out);
}
.confidence-bar-fill.high { background: var(--green); width: 90%; }
.confidence-bar-fill.medium { background: var(--accent); width: 60%; }
.confidence-bar-fill.low { background: var(--red); width: 30%; }
/* ── Valuation: Unified Stats Strip ──────────────────── */
.val-stats-strip {
display: flex;
align-items: stretch;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 16px;
overflow: hidden;
}
.val-stat {
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
padding: 12px 16px;
min-width: 0;
flex: 1;
border-right: 1px solid var(--border-subtle);
}
.val-stat:last-child { border-right: none; }
.val-stat.primary {
flex: 1.8;
background: linear-gradient(135deg, rgba(212,168,83,0.08), transparent);
padding: 16px 20px;
}
.val-stat-label {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
}
.val-stat-value {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: -0.2px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.val-stat.primary .val-stat-value {
font-size: 26px;
color: var(--accent);
text-shadow: 0 0 20px rgba(212,168,83,0.15);
white-space: normal;
overflow: visible;
}
.val-stat.primary .val-stat-label {
font-size: 10px;
margin-bottom: 2px;
}
.val-stat-sub {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-dim);
}
/* ── Valuation: Signal Pills ──────────────────────────── */
.signal-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.signal-pill {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 11px;
padding: 4px 10px;
border-radius: var(--radius-pill);
line-height: 1.4;
}
.signal-pill.blue {
background: var(--blue-dim);
color: var(--blue);
border: 1px solid rgba(108, 172, 240, 0.2);
}
.signal-pill.purple {
background: var(--purple-dim);
color: var(--purple);
border: 1px solid rgba(176, 140, 240, 0.2);
}
.signal-pill.green {
background: var(--green-dim);
color: var(--green);
border: 1px solid rgba(94, 230, 160, 0.2);
}
.signal-pill.gold {
background: var(--accent-glow);
color: var(--accent);
border: 1px solid rgba(212, 168, 83, 0.2);
}
.signal-lines { display: flex; flex-direction: column; }
.signal-line {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
padding: 6px 0;
line-height: 1.5;
border-bottom: 1px solid rgba(37, 37, 48, 0.4);
}
.signal-line:last-child { border-bottom: none; }
.signal-line.dim { color: var(--text-dim); font-size: 10px; }
/* ── Valuation: Consistent Section Spacing ────────────── */
.comp-section { margin-top: 16px; }
.data-card .about-name { margin-top: 16px; }
.data-card .collapsible { margin-top: 16px; }
.roast-text { font-size: 15px; line-height: 1.7; padding: 20px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); margin-bottom: 16px; color: var(--text-secondary); font-style: italic; }
.signal {
font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
padding: 4px 0; line-height: 1.5;
border-bottom: 1px solid rgba(37,37,48,0.5);
}
.signal:last-child { border-bottom: none; }
/* About This Name */
.about-name {
margin-top: 20px; padding: 18px 22px; background: var(--bg-elevated);
border: 1px solid var(--border); border-radius: var(--radius-sm);
animation: fadeUp 0.4s 0.1s var(--ease-out) both;
}
.about-name-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.about-name-header h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.2px; margin: 0; }
.entity-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.entity-badge.person { background: rgba(100,149,237,0.15); color: #6495ed; border: 1px solid rgba(100,149,237,0.25); }
.entity-badge.place { background: rgba(94,230,160,0.12); color: var(--green); border: 1px solid rgba(94,230,160,0.25); }
.entity-badge.organization { background: var(--accent-glow); color: var(--accent); border: 1px solid rgba(212,168,83,0.25); }
.entity-badge.crypto { background: rgba(167,139,250,0.12); color: #a78bfa; border: 1px solid rgba(167,139,250,0.25); }
.entity-badge.concept { background: rgba(148,163,184,0.12); color: var(--text-dim); border: 1px solid rgba(148,163,184,0.25); }
.about-headline { font-size: 14px; line-height: 1.6; color: var(--text-primary); margin-bottom: 8px; }
.about-background { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 8px; }
.about-crypto { font-size: 13px; line-height: 1.6; color: #a78bfa; margin-bottom: 8px; }
.about-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
.about-meta-item { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }
.about-meta-item a { color: var(--accent); text-decoration: none; }
.about-meta-item a:hover { text-decoration: underline; }
.fame-indicator { display: inline-block; padding: 1px 6px; border-radius: 3px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; background: var(--accent-glow); color: var(--accent); border: 1px solid rgba(212,168,83,0.2); }
/* Identity Strip — enrichment badges row */
.identity-strip {
display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px;
animation: fadeUp 0.3s 0.05s var(--ease-out) both;
}
.id-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: var(--radius-xs);
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
letter-spacing: 0.3px; white-space: nowrap;
background: var(--surface2); border: 1px solid var(--border);
color: var(--text-secondary); transition: all 0.15s;
}
.id-chip:hover { border-color: var(--accent-dim); background: var(--surface3); }
.id-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
.id-chip.has-content { background: var(--cyan-dim); border-color: rgba(94,198,230,0.25); color: var(--cyan); }
.id-chip.has-avatar { background: var(--green-dim); border-color: rgba(94,230,160,0.25); color: var(--green); }
.id-chip.has-social { background: var(--purple-dim); border-color: rgba(176,140,240,0.25); color: var(--purple); }
.id-chip.has-wrapper { background: rgba(255,150,60,0.12); border-color: rgba(255,150,60,0.25); color: #ff963c; }
.id-chip.has-efp { background: rgba(240,200,100,0.12); border-color: rgba(240,200,100,0.25); color: #f0c864; }
.id-chip.has-farcaster { background: rgba(131,92,232,0.12); border-color: rgba(131,92,232,0.25); color: #835ce8; }
.id-chip.has-twitter { background: rgba(29,155,240,0.12); border-color: rgba(29,155,240,0.25); color: #1d9bf0; }
.id-chip.reg-age { background: var(--accent-glow); border-color: rgba(212,168,83,0.2); color: var(--accent); }
a.id-chip.social-link { text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
a.id-chip.social-link:hover { background: var(--surface3); border-color: var(--accent-dim); filter: brightness(1.2); }
/* Share bar */
.share-bar {
display: flex; gap: 8px; margin: 10px 0 4px; flex-wrap: wrap;
animation: fadeUp 0.3s 0.1s var(--ease-out) both;
}
.share-btn {
display: flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: var(--radius-sm);
border: 1px solid var(--border); background: transparent;
color: var(--text-secondary); font-family: var(--font-body);
font-size: 12px; cursor: pointer;
transition: all 0.2s var(--ease-out);
}
.share-btn:hover {
border-color: var(--accent); color: var(--accent);
background: var(--accent-glow);
}
.share-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Comp lists */
.section-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.comp-list { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.comp { display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 12px; transition: background 0.15s; }
.comp:hover { background: rgba(255,255,255,0.015); }
.comp:last-child { border-bottom: none; }
/* Sales history */
.sales-history-list { }
.sales-history-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; transition: background 0.15s; }
.sales-history-row:hover { background: rgba(255,255,255,0.015); }
.sales-history-row:last-child { border-bottom: none; }
.sales-price { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--accent); min-width: 90px; flex-shrink: 0; }
.sales-parties { color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
/* Collapsible sections */
.collapsible { margin-top: 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.collapsible-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; cursor: pointer; background: var(--bg-elevated); user-select: none; transition: background 0.15s; }
.collapsible-header:hover { background: var(--surface2); }
.collapsible-header h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.collapsible-arrow { font-size: 12px; color: var(--text-dim); transition: transform 0.25s var(--ease-out); }
.collapsible-arrow.open { transform: rotate(180deg); }
.collapsible-body { padding: 16px; }
.collapsible-body.collapsed { display: none; }
.collapsible-body.no-pad { padding: 0; }
/* Metrics */
.metrics-row { display: flex; gap: 0; }
.metric { flex: 1; padding: 0 16px; border-left: 2px solid var(--border); }
.metric:first-child { padding-left: 0; border-left: none; }
.metric-val { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.metric-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 2px; letter-spacing: 0.5px; }
.sparkline-container { margin-top: 16px; }
.sparkline-container svg { width: 100%; height: 60px; display: block; }
.sparkline-dates { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 4px; }
/* Activity items */
.activity-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); font-size: 13px; transition: background 0.15s; }
.activity-item:hover { background: rgba(255,255,255,0.015); }
.activity-item:last-child { border-bottom: none; }
.activity-type {
display: inline-block;
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
padding: 2px 8px; border-radius: 4px;
text-transform: uppercase; letter-spacing: 0.5px;
width: 84px; text-align: center; flex-shrink: 0;
}
.activity-type.sale { color: var(--green); background: rgba(94,230,160,0.12); border: 1px solid rgba(94,230,160,0.2); }
.activity-type.listing { color: var(--accent); background: rgba(240,192,64,0.12); border: 1px solid rgba(240,192,64,0.2); }
.activity-type.offer { color: var(--blue); background: rgba(108,172,240,0.12); border: 1px solid rgba(108,172,240,0.2); }
.activity-type.og { color: #d9a66b; background: rgba(217,166,107,0.12); border: 1px solid rgba(217,166,107,0.28); }
.activity-type.other { color: var(--text-dim); background: var(--surface3); border: 1px solid var(--border); }
/* OG auction year badge — shown alongside "True Origin" date on Vickrey-era names */
.og-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
border-radius: 3px;
color: #d9a66b;
background: rgba(217,166,107,0.12);
border: 1px solid rgba(217,166,107,0.28);
vertical-align: middle;
}
.og-badge.og-2017 { color: #f0c040; background: rgba(240,192,64,0.14); border-color: rgba(240,192,64,0.32); }
.activity-price { font-family: var(--font-mono); font-weight: 600; font-size: 12px; color: var(--text); width: 100px; flex-shrink: 0; }
.activity-addr { color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-link { color: var(--text-dim); text-decoration: none; transition: color 0.15s; }
.activity-link:hover { color: var(--accent); text-decoration: underline; }
.activity-time { color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; width: 60px; flex-shrink: 0; text-align: right; }
/* ─── Create Mode: Name Card Grid ──────────────────────── */
.name-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.name-card {
background: linear-gradient(160deg, #13120f, var(--surface)); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 16px; transition: all 0.2s;
display: flex; flex-direction: column; gap: 8px;
}
.name-card:hover { border-color: var(--border); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.name-card.available { border-top: 2px solid var(--green); }
.name-card.listed { border-top: 2px solid var(--accent); }
.name-card .nc-name { font-family: var(--font-mono); font-size: 15px; font-weight: 700; }
.name-card .nc-name a { color: var(--text); text-decoration: none; }
.name-card .nc-name a:hover { color: var(--accent); }
.name-card .nc-status { font-family: var(--font-mono); font-size: 11px; }
/* ─── Check Mode: Status Tiles ─────────────────────────── */
.status-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.status-tile {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 20px; text-align: center;
}
.status-tile .st-name { font-family: var(--font-mono); font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.status-tile .st-icon { font-size: 28px; margin-bottom: 8px; }
.status-tile .st-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px; }
.status-tile.avail .st-icon { color: var(--green); }
.status-tile.avail .st-label { color: var(--green); }
.status-tile.taken .st-icon { color: var(--red); }
.status-tile.taken .st-label { color: var(--text-dim); }
.status-tile .st-owner { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); margin-top: 4px; word-break: break-all; }
/* ─── Name Profile Card ──────────────────────────────── */
.np-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0;
overflow: hidden;
animation: cardReveal 0.45s var(--ease-out);
position: relative;
}
.np-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: calc(var(--radius) + 1px);
background: linear-gradient(135deg, rgba(212,168,83,0.15), transparent 40%, transparent 60%, rgba(212,168,83,0.08));
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
}
.np-card:hover::before { opacity: 1; }
/* Hero: NFT + name info side by side */
.np-hero {
display: flex;
gap: 24px;
padding: 24px 28px;
border-bottom: 1px solid var(--border-subtle);
align-items: flex-start;
}
.np-nft-wrap {
width: 180px;
height: 180px;
flex-shrink: 0;
border-radius: 24px;
overflow: hidden;
background: var(--bg-elevated);
}
.np-nft-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Canvas fallback — rendered by js/ens-card.js (same code as sales bot) */
.np-nft-fallback {
width: 100%;
height: 100%;
border-radius: 24px;
overflow: hidden;
}
.np-nft-label { display: none; /* hidden — canvas draws the text */ }
.np-hero-info {
flex: 1;
min-width: 0;
}
.np-name-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
}
.np-name-row h2 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.3px;
margin: 0;
}
.np-name-row h2 a { color: inherit; text-decoration: none; }
.np-name-row h2 a:hover { color: var(--accent); }
.np-char-info {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
margin-bottom: 8px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.np-status-row {
display: flex;
gap: 6px;
margin-bottom: 10px;
}
.np-status-badge {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 3px 8px;
border-radius: var(--radius-xs);
border: 1px solid;
background: transparent;
}
.np-collections {
margin-bottom: 8px;
}
.np-collections .badge { margin-right: 4px; margin-bottom: 4px; }
/* Embedded summary — mirrors value page's About This Name */
.np-about {
padding: 20px 28px;
border-bottom: 1px solid var(--border-subtle);
animation: fadeUp 0.3s var(--ease-out);
}
.np-about-header { margin-bottom: 10px; }
.np-about-header h4 {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1.2px;
margin: 0;
}
.np-about-body { font-size: 14px; color: var(--text-secondary); line-height: 1.7; }
.np-about-body .summary-header { color: var(--text-primary); font-weight: 500; margin-bottom: 8px; }
.np-about-body .summary-header strong { color: var(--accent); }
.np-about-body .summary-bullet { padding-left: 16px; position: relative; margin-bottom: 3px; }
.np-about-body .summary-bullet::before {
content: '•'; position: absolute; left: 0; color: var(--accent); font-weight: 700;
}
/* Stats grid */
.np-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0;
border-bottom: 1px solid var(--border-subtle);
}
.np-stat {
padding: 14px 20px;
border-right: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.np-stat:last-child { border-right: none; }
.np-stat-label {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}
.np-stat-value {
font-family: var(--font-body);
font-size: 14px;
color: var(--text);
font-weight: 500;
}
/* Collapsible sections */
.np-section {
border-bottom: 1px solid var(--border-subtle);
}
.np-section:last-child { border-bottom: none; }
.np-section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
cursor: pointer;
user-select: none;
transition: background 0.15s;
}
.np-section-header:hover { background: var(--bg-elevated); }
.np-section-header h4 {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
margin: 0;
}
.np-section-body {
padding: 14px 20px 16px;
transition: max-height 0.3s var(--ease-out), opacity 0.2s;
overflow: hidden;
}
.np-section-body.collapsed {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
pointer-events: none;
}
.np-arrow {
font-size: 10px;
color: var(--text-dim);
transition: transform 0.2s;
display: inline-block;
}
.np-arrow.open { transform: rotate(0deg); }
.np-arrow:not(.open) { transform: rotate(-90deg); }
.np-count {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--accent);
background: var(--accent-glow);
padding: 1px 6px;
border-radius: var(--radius-xs);
}
/* Activity items */
.np-activity-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--border-subtle);
font-size: 12px;
}
.np-activity-item:last-child { border-bottom: none; }
.np-activity-price {
font-family: var(--font-mono);
font-weight: 600;
color: var(--accent);
min-width: 80px;
}
.np-activity-addrs {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.np-activity-time {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
white-space: nowrap;
}
/* Holder intelligence */
.np-holder-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
}
.np-holder-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.np-holder-label {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.np-holder-val {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: var(--text);
}
/* Name Details (Roles + Technical) */
.np-detail-subsection {
margin-bottom: 16px;
}
.np-detail-subsection:last-child { margin-bottom: 0; }
.np-detail-subtitle {
font-family: var(--font-display);
font-size: 11px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border-subtle);
}
.np-detail-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.np-detail-cell {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding: 10px 14px;
border: 1px solid var(--border-subtle);
margin: -0.5px;
cursor: pointer;
transition: background 0.15s;
position: relative;
}
.np-detail-cell:hover {
background: var(--bg-elevated);
}
.np-detail-cell:hover .np-copy-icon {
opacity: 1;
}
.np-detail-cell.copied {
background: rgba(0, 200, 120, 0.08);
}
.np-detail-val {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.np-detail-label {
display: block;
width: 100%;
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 2px;
}
.np-copy-icon {
opacity: 0.3;
color: var(--text-dim);
flex-shrink: 0;
transition: opacity 0.15s;
}
@media (max-width: 600px) {
.np-detail-grid { grid-template-columns: 1fr; }
}
/* Records */
.np-record-item {
display: flex;
gap: 12px;
padding: 6px 0;
border-bottom: 1px solid var(--border-subtle);
align-items: baseline;
}
.np-record-item:last-child { border-bottom: none; }
.np-record-key {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
min-width: 70px;
flex-shrink: 0;
}
.np-record-val {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
word-break: break-all;
}
/* Profile loader skeleton */
.np-profile-loader {
padding: 20px;
}
/* Mobile responsive */
@media (max-width: 640px) {
.np-hero {
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px 16px;
gap: 16px;
}
.np-nft-wrap {
width: 140px;
height: 140px;
}
.np-name-row {
flex-direction: column;
gap: 8px;
}
.np-status-row { justify-content: center; }
.np-collections { text-align: center; }
.identity-strip { justify-content: center; }
.np-stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.np-stat { padding: 10px 14px; }
.np-section-header { padding: 12px 16px; }
.np-section-body { padding: 12px 16px; }
.np-activity-addrs { display: none; }
.np-holder-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ─── Market Two-Column ────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
/* ─── Live Sales Feed ─────────────────────────────────── */
.live-feed { margin-top: 28px; }
.live-feed-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px; padding-bottom: 12px;
border-bottom: 1px solid var(--border-subtle);
}
.live-feed-header .lf-title {
font-family: var(--font-mono); font-size: 12px; color: rgba(240,168,83,0.6);
text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600;
display: flex; align-items: center;
}
.live-feed-header .lf-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--green);
animation: pulse-dot 2s ease-in-out infinite; margin-right: 8px; display: inline-block;
box-shadow: 0 0 6px rgba(94,230,160,0.4);
}
@keyframes pulse-dot { 0%,100% { opacity: 1; box-shadow: 0 0 6px rgba(94,230,160,0.4); } 50% { opacity: 0.3; box-shadow: none; } }
.live-feed-header .lf-refresh {
font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); cursor: pointer;
padding: 4px 10px; border-radius: var(--radius-xs);
transition: all 0.2s;
}
.live-feed-header .lf-refresh:hover { color: var(--accent); background: var(--accent-glow); }
.sale-card {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius); padding: 16px 18px; margin-bottom: 8px;
cursor: pointer; transition: all 0.25s var(--ease-out);
position: relative; overflow: hidden;
}
.sale-card::after {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px; background: transparent;
transition: background 0.25s;
}
.sale-card:hover {
border-color: var(--accent-dim); background: var(--surface2);
transform: translateX(2px);
}
.sale-card:hover::after { background: var(--accent); }
/* Entry animation for new sales */
.sale-card.entering {
animation: saleSlideIn 0.4s var(--ease-out);
}
@keyframes saleSlideIn {
from { opacity: 0; transform: translateY(-8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Color coded left stripe by valuation verdict */
.sale-card.below-estimate::after { background: var(--green); }
.sale-card.above-estimate::after { background: var(--red); }
.sale-card-row1 {
display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px;
}
.sale-card .sc-name {
font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text);
}
.sale-card .sc-price {
font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--green);
letter-spacing: -0.3px;
}
.sale-card-row2 {
display: flex; justify-content: space-between; align-items: center;
}
.sale-card .sc-meta {
font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
display: flex; gap: 10px; align-items: center;
}
.sale-card .sc-meta .sc-type {
color: #f0a853; text-transform: uppercase; font-weight: 600; font-size: 10px;
letter-spacing: 0.5px;
}
.sale-card .sc-meta .sc-usd { color: var(--text-secondary); }
.sale-card .sc-meta .sc-time {
color: var(--text-dim); font-size: 10px;
}
.sale-card .sc-buyer {
font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
max-width: 55%; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sale-card .sc-buyer .sc-whale { color: #6cacf0; }
.sale-card .sc-buyer .sc-new { color: var(--green); }
/* Notable sale highlight */
.sale-card.sale-card-notable::after { background: var(--accent-dim); }
.sale-card.sale-card-notable:hover::after { background: var(--accent); }
/* Deal rating badges */
.sc-deal {
font-size: 9px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.5px; padding: 1px 5px; border-radius: 3px;
font-family: var(--font-mono);
}
.sc-deal-steal { color: #1a1a2e; background: #5ee6a0; }
.sc-deal-under { color: #1a1a2e; background: #7bc8f6; }
.sc-deal-fair { color: var(--text-dim); background: var(--surface2); }
.sc-deal-premium { color: #1a1a2e; background: #f0a853; }
.sc-deal-moon { color: #1a1a2e; background: #f06292; }
/* Collection badges */
.sc-coll {
font-size: 9px; padding: 1px 5px; border-radius: 3px;
color: var(--text-secondary); background: var(--surface2);
border: 1px solid var(--border-subtle); font-family: var(--font-mono);
}
/* Price change indicator */
.sc-change { font-size: 11px; font-weight: 600; margin-left: 4px; font-family: var(--font-mono); }
.sc-change-up { color: var(--green); }
.sc-change-down { color: var(--red); }
/* Whale badge */
.sc-whale-badge { color: #6cacf0; font-weight: 600; }
/* Commentary — always visible for notable, hover for others */
.sale-card .sc-commentary {
font-size: 12px; color: var(--text-secondary);
line-height: 1.5; margin-top: 8px; padding-top: 8px;
border-top: 1px solid var(--border-subtle);
font-family: var(--font-mono);
}
.sale-card:not(.sale-card-notable) .sc-commentary {
display: none;
}
.sale-card:not(.sale-card-notable):hover .sc-commentary { display: block; }
/* Commentary toggle — hidden on desktop (hover works there) */
.sc-commentary-toggle { display: none; }
.sc-commentary-wrap { position: relative; }
.live-feed-empty {
text-align: center; padding: 40px 16px;
font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
}
.live-feed-loading {
display: flex; justify-content: center; padding: 24px;
}
.live-feed-loading .lf-spinner {
width: 20px; height: 20px; border: 2px solid var(--border);
border-top-color: var(--accent); border-radius: 50%;
animation: spin 0.8s linear infinite;
}
/* ─── Chip Buttons ──────────────────────────────────── */
.chip {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-pill); padding: 7px 16px;
font-family: var(--font-body); font-size: 12px; color: var(--text-secondary);
cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
/* ─── Mode Welcome Page ─────────────────────────────────── */
.mode-welcome {
animation: fadeUp 0.4s var(--ease-out);
padding: 32px 0 20px;
}
.mw-header {
display: flex; align-items: center; gap: 16px; margin-bottom: 28px;
}
.mw-icon {
width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
border-radius: var(--radius); flex-shrink: 0;
}
.mw-icon svg { width: 26px; height: 26px; }
.mw-icon.emoji { font-size: 28px; background: none; }
.mw-icon.find { background: var(--accent-glow); color: var(--accent); }
.mw-icon.create { background: var(--purple-dim); color: var(--purple); }
.mw-icon.value { background: var(--green-dim); color: var(--green); }
.mw-icon.portfolio{ background: var(--blue-dim); color: var(--blue); }
.mw-icon.market { background: rgba(240,168,83,0.12); color: #f0a853; }
.mw-icon.manage { background: rgba(240,168,83,0.12); color: #f0a853; }
.mw-icon.bulk { background: var(--cyan-dim); color: var(--cyan); }
.mw-icon.expiry { background: rgba(231,76,60,0.12); color: var(--red); }
.mw-icon.protocol { background: var(--cyan-dim); color: var(--cyan); }
.mw-icon.categories { background: rgba(155,89,182,0.12); color: var(--purple); }
.mw-icon.check { background: var(--cyan-dim); color: var(--cyan); }
.mw-title { font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.mw-subtitle { font-size: 14px; color: var(--text-secondary); margin-top: 2px; }
.mw-section-label {
font-family: var(--font-mono); font-size: 12px; color: rgba(212,168,83,0.5);
text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px; font-weight: 600;
}
.mw-actions {
display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px;
}
.mw-action-chip {
display: flex; align-items: center; gap: 10px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 12px 18px; cursor: pointer;
transition: all 0.25s var(--ease-out);
font-family: var(--font-mono); font-size: 13px; font-weight: 500;
color: var(--text); white-space: nowrap;
}
.mw-action-chip:hover {
border-color: var(--accent-dim); transform: translateY(-1px);
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
.mw-action-chip.dynamic {
border-color: rgba(212,168,83,0.2); background: rgba(212,168,83,0.04);
}
.mw-action-chip.dynamic:hover {
border-color: var(--accent-dim); background: rgba(212,168,83,0.08);
}
.mw-action-icon {
font-size: 16px; line-height: 1; flex-shrink: 0;
font-family: system-ui, -apple-system, sans-serif;
}
.mw-action-label {
font-family: var(--font-mono); font-size: 13px; font-weight: 500;
}
.mw-capabilities {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 24px;
}
.mw-cap {
display: flex; align-items: center; gap: 6px;
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill); padding: 6px 14px;
font-size: 12px; color: var(--text-secondary);
}
.mw-cap-dot {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
/* ─── Live Welcome: Loading ──────────────────────────────── */
.mw-loading {
font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
padding: 32px 0; text-align: center;
}
/* ─── Live Welcome: Value Spotlight ──────────────────────── */
.mw-value-spotlight {
display: flex; gap: 24px; align-items: stretch;
background: linear-gradient(135deg, rgba(94,230,160,0.04) 0%, rgba(212,168,83,0.04) 100%);
border: 1px solid rgba(94,230,160,0.15); border-radius: var(--radius);
padding: 24px; margin-bottom: 24px; cursor: pointer;
transition: all 0.25s var(--ease-out);
}
.mw-value-spotlight:hover {
border-color: var(--green); transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(94,230,160,0.06);
}
.mw-vs-card { flex-shrink: 0; }
.mw-vs-art {
width: 160px; height: 160px; border-radius: 16px; overflow: hidden;
}
.mw-vs-art canvas { border-radius: 16px; }
.mw-vs-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.mw-spot-badge {
font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
letter-spacing: 1.5px; color: var(--accent); margin-bottom: 8px; font-weight: 600;
}
.mw-spot-name {
font-family: var(--font-display); font-size: 24px; font-weight: 600;
color: var(--text); margin-bottom: 12px;
}
.mw-vs-row {
display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 10px;
}
.mw-vs-label {
font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
letter-spacing: 1px; color: var(--text-dim); margin-bottom: 3px;
}
.mw-vs-value {
font-family: var(--font-mono); font-size: 15px; font-weight: 600;
}
.mw-vs-value.sale { color: var(--green); }
.mw-vs-value.estimate { color: var(--accent); }
.mw-vs-value.range { color: var(--text-secondary); font-size: 13px; }
.mw-spot-cta {
font-family: var(--font-mono); font-size: 12px; color: var(--accent);
opacity: 0; transition: opacity 0.2s;
}
.mw-value-spotlight:hover .mw-spot-cta { opacity: 1; }
/* ─── Live Welcome: Portfolio Wallet Cards ───────────────── */
.mw-portfolio-prompt {
margin-bottom: 20px;
}
.mw-pp-text {
font-size: 14px; color: var(--text-secondary); line-height: 1.5;
}
.mw-wallet-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 10px; margin-bottom: 8px;
}
.mw-wallet-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 18px 20px;
cursor: pointer; transition: all 0.25s var(--ease-out);
}
.mw-wallet-card:hover {
border-color: var(--blue); transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(108,172,240,0.1);
}
.mw-wc-name {
font-family: var(--font-display); font-size: 16px; font-weight: 600;
color: var(--text); margin-bottom: 4px;
}
.mw-wc-desc {
font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
}
@media (max-width: 480px) {
.mw-actions { gap: 8px; }
.mw-action-chip { padding: 10px 14px; font-size: 12px; }
.mw-action-icon { font-size: 14px; }
.mw-action-label { font-size: 12px; }
.mw-header { gap: 12px; }
.mw-title { font-size: 22px; }
.mw-icon { width: 44px; height: 44px; }
.mw-icon svg { width: 22px; height: 22px; }
.mw-value-spotlight { flex-direction: column; gap: 16px; padding: 18px 20px; }
.mw-vs-art { width: 120px; height: 120px; }
.mw-spot-name { font-size: 20px; }
.mw-vs-row { gap: 14px; }
.mw-wallet-grid { grid-template-columns: 1fr 1fr; }
}
/* ─── Error / Empty ────────────────────────────────────── */
.error-msg { display: none; padding: 14px 18px; background: var(--red-dim); border: 1px solid rgba(240,112,112,0.25); border-radius: var(--radius-sm); color: var(--red); font-size: 14px; margin-bottom: 16px; }
.error-msg.visible { display: block; }
.empty-state { display: none; text-align: center; padding: 48px 20px; color: var(--text-dim); font-size: 14px; }
.empty-state.visible { display: block; }
/* ─── Footer ───────────────────────────────────────────── */
footer {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.5px;
border-top: 1px solid var(--border-subtle);
margin-top: auto;
padding: 16px 0 14px;
text-align: center;
position: relative;
}
footer::after {
content: '';
position: absolute;
top: -1px;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
opacity: 0.4;
}
footer a {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
text-decoration: none;
letter-spacing: 0.3px;
transition: color 0.2s;
}
footer a:hover { color: var(--accent); }
.footer-brand {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 10px;
}
.footer-logo {
width: 18px;
height: 18px;
border-radius: 3px;
opacity: 0.6;
}
.footer-name {
font-size: 11px;
font-weight: 500;
color: var(--text-secondary);
letter-spacing: 1.2px;
}
.footer-links {
display: flex;
row-gap: 8px;
column-gap: 18px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 10px;
max-width: 520px;
margin-left: auto;
margin-right: auto;
padding: 0 16px;
}
.footer-copyright {
font-size: 10px;
color: var(--text-dim);
opacity: 0.6;
}
/* ─── Animations ───────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* Shimmer + dot-pulse for buttons in a "waiting for signature" state.
Overrides disabled-button opacity so the user sees something is alive. */
@keyframes nwBtnShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes nwBtnDots {
0%, 20% { content: ''; }
40% { content: '.'; }
60% { content: '..'; }
80%, 100% { content: '...'; }
}
.btn-waiting {
cursor: progress !important;
opacity: 1 !important;
/* !important needed because most button styles use the `background:`
shorthand (e.g. .pf-modal-confirm, .btn-trade-confirm) which resets
background-image. Without this the shimmer sweep silently disappears. */
background-image: linear-gradient(
90deg,
transparent 0%,
transparent 40%,
rgba(255, 255, 255, 0.18) 50%,
transparent 60%,
transparent 100%
) !important;
background-size: 200% 100% !important;
animation: nwBtnShimmer 1.6s linear infinite;
}
.btn-waiting::after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
margin-left: 8px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
vertical-align: -2px;
animation: nwBtnSpin 0.7s linear infinite;
}
@keyframes nwBtnSpin { to { transform: rotate(360deg); } }
/* Staggered row animation for tables */
.results-table tbody tr {
animation: rowFadeIn 0.3s var(--ease-out) both;
}
@keyframes rowFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ─── Responsive ───────────────────────────────────────── */
/* Tablet */
@media (max-width: 768px) {
.app { padding: 0 16px; }
.name-card-grid { grid-template-columns: repeat(2, 1fr); }
.two-col { grid-template-columns: 1fr; }
.mode-pills { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mode-pills::-webkit-scrollbar { display: none; }
.mode-pill { padding: 9px 14px; font-size: 11px; gap: 5px; }
.mode-pill svg { width: 13px; height: 13px; }
.col-registered, .col-owner { display: none; }
.data-grid { grid-template-columns: 1fr 1fr; }
.data-card { padding: 22px; }
.data-item.hero .value { font-size: 30px; }
.val-stats-strip { flex-wrap: wrap; }
.val-stat { flex: 1 1 auto; min-width: 100px; }
.val-stat.primary { flex: 1 1 100%; border-right: none; border-bottom: 1px solid var(--border-subtle); }
.mw-actions { gap: 6px; }
.mw-action-chip { white-space: normal; }
/* Commentary: collapsed by default, toggle to expand */
.sale-card .sc-commentary { display: none !important; }
.sc-commentary-wrap.expanded .sc-commentary { display: block !important; }
.sc-commentary-toggle {
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface2); color: var(--accent); border: 1px solid var(--border-subtle);
border-radius: 4px; font-size: 10px; font-weight: 700; font-family: var(--font-mono);
padding: 2px 6px; margin-top: 6px; cursor: pointer; letter-spacing: 0.5px;
}
.sc-commentary-wrap.expanded .sc-commentary-toggle { color: var(--text-secondary); }
.sale-card:not(.sale-card-notable):hover .sc-commentary { display: none !important; }
.sale-card.sale-card-notable .sc-commentary { display: block !important; }
.sale-card.sale-card-notable .sc-commentary-toggle { display: none; }
/* Collapsible sections: more compact on tablet */
.collapsible-body { padding: 12px; }
.comp { padding: 8px 12px; font-size: 11px; }
}
/* Small tablet — compact pills but keep labels */
@media (max-width: 700px) {
.mode-pill { padding: 9px 14px; font-size: 11px; gap: 5px; }
.mode-pill svg { width: 13px; height: 13px; }
.mode-pills { gap: 4px; justify-content: center; }
}
/* Mobile */
@media (max-width: 480px) {
body { font-size: 14px; }
.mode-pill { padding: 10px 12px; gap: 0; justify-content: center; }
.mode-pill span { display: none; }
.mode-pill svg { width: 16px; height: 16px; }
.mode-pills { gap: 6px; }
.name-card-grid { grid-template-columns: 1fr; }
.status-tiles { grid-template-columns: 1fr; }
.data-grid { grid-template-columns: 1fr; }
.data-card { padding: 18px; }
.data-item .value { font-size: 16px; }
.data-item.hero .value { font-size: 26px; }
.data-item.hero { padding: 18px; }
.results-table th, .results-table td { padding: 8px 8px; font-size: 12px; }
.col-offer { display: none; }
.metrics-row { flex-direction: column; gap: 12px; }
.metric { padding: 0; border-left: none; }
.search-box input { font-size: 16px; padding: 12px 10px; }
.btn-search { padding: 10px 16px; font-size: 12px; }
/* Header: compact nav on mobile */
.logo-name, .logo-whisper { font-size: 18px; }
.nav-link-agents { display: none; }
.nav-link-terminal { font-size: 11px; padding: 4px 10px; }
.btn-connect span { display: none; }
.btn-connect svg { margin: 0; }
.btn-connect { padding: 8px; }
.header-right { min-width: 0; }
.user-badge { max-width: 110px; padding: 4px 10px; overflow: hidden; flex-shrink: 1; min-width: 0; }
.user-badge .user-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70px; font-size: 10px; }
.user-badge .user-ens { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Touch-friendly interactive targets */
.chip { padding: 10px 16px; font-size: 13px; }
.user-menu button { padding: 12px 14px; min-height: 44px; }
.collapsible-header { padding: 14px 16px; min-height: 44px; }
.activity-item { padding: 12px 14px; }
/* Sale cards on mobile */
.sale-card { padding: 14px; }
.sale-card .sc-name { font-size: 15px; }
.sale-card .sc-price { font-size: 14px; }
/* About section */
.about-meta { gap: 8px; flex-direction: column; }
.about-name { padding: 14px 16px; }
/* Valuation stats strip: mobile */
.val-stats-strip { flex-wrap: wrap; }
.val-stat { flex: 1 1 45%; min-width: 0; padding: 10px 12px; }
.val-stat.primary { flex: 1 1 100%; border-right: none; border-bottom: 1px solid var(--border-subtle); }
.val-stat.primary .val-stat-value { font-size: 22px; }
.val-stat-value { font-size: 13px; }
.signal-pill { font-size: 10px; padding: 3px 8px; }
/* Prevent iOS Safari auto-zoom on input focus (requires >= 16px) */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select { font-size: 16px !important; }
}
/* Tiny screens */
@media (max-width: 360px) {
.cap-grid { grid-template-columns: 1fr; }
.logo-name, .logo-whisper { font-size: 20px; }
.header { padding: 14px 0; }
}
/* ═══════════════════════════════════════════════════════
TERMINAL LAYOUT — Bloomberg-style panels
═══════════════════════════════════════════════════════ */
.terminal-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 12px;
padding: 12px 0 8px;
min-height: 420px;
}
.terminal-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
position: relative;
}
.terminal-panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212,168,83,0.15), transparent);
}
.tp-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
background: var(--bg-elevated);
border-bottom: 1px solid var(--border-subtle);
}
.tp-title {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1px;
display: flex;
align-items: center;
gap: 6px;
}
.tp-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 6px rgba(94,230,160,0.5);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.tp-sub {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-dim);
letter-spacing: 0.5px;
}
.tp-refresh {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
cursor: pointer;
padding: 2px 8px;
border-radius: var(--radius-xs);
transition: all 0.15s;
}
.tp-refresh:hover {
color: var(--accent);
background: var(--accent-glow);
}
.tp-body {
padding: 4px;
max-height: 480px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.tp-body::-webkit-scrollbar { width: 4px; }
.tp-body::-webkit-scrollbar-track { background: transparent; }
.tp-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.tp-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.terminal-right {
display: flex;
flex-direction: column;
gap: 12px;
}
/* ─── Compact Capability Cards ────────────────────────── */
.cap-grid-compact {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--border-subtle);
}
.cap-mini {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--surface);
cursor: pointer;
transition: all 0.2s var(--ease-out);
}
.cap-mini:hover {
background: var(--surface2);
}
.cap-mini:hover .cap-mini-name {
color: var(--accent);
}
.cap-mini-icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
flex-shrink: 0;
}
.cap-mini-icon svg { width: 14px; height: 14px; }
.cap-mini-icon.find { background: var(--accent-glow); color: var(--accent); }
.cap-mini-icon.create { background: var(--purple-dim); color: var(--purple); }
.cap-mini-icon.value { background: var(--green-dim); color: var(--green); }
.cap-mini-icon.portfolio{ background: var(--blue-dim); color: var(--blue); }
.cap-mini-icon.market { background: rgba(240,168,83,0.12); color: #f0a853; }
.cap-mini-icon.check { background: var(--cyan-dim); color: var(--cyan); }
.cap-mini-icon.protocol { background: rgba(56,189,248,0.12); color: #38bdf8; }
.cap-mini-icon.categories { background: rgba(168,85,247,0.12); color: #a855f7; }
.cap-mini-icon.terminal { background: var(--accent-glow); color: var(--accent); }
.cap-mini-icon.agents { background: rgba(251,146,60,0.12); color: #fb923c; }
.cap-mini-icon.manage { background: rgba(240,168,83,0.12); color: #f0a853; }
.cap-mini-icon.bulk { background: var(--cyan-dim); color: var(--cyan); }
.cap-mini-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.cap-mini-name {
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: var(--text);
transition: color 0.15s;
}
.cap-mini-desc {
font-size: 10px;
color: var(--text-dim);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ─── Floor Price Table (legacy) ──────────────────────── */
.floor-table { padding: 4px 0; }
.floor-row {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 12px; border-bottom: 1px solid var(--border-subtle); transition: background 0.15s;
}
.floor-row:last-child { border-bottom: none; }
.floor-row:hover { background: rgba(255,255,255,0.015); }
.floor-cat { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); letter-spacing: 0.3px; }
.floor-price { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); }
/* ─── Trending Categories Panel ──────────────────────── */
.trending-table { padding: 4px 0; }
.trending-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 12px;
border-bottom: 1px solid var(--border-subtle);
cursor: pointer;
transition: background 0.15s;
}
.trending-row:last-child { border-bottom: none; }
.trending-row:hover { background: rgba(212,168,83,0.04); }
.trending-row.shimmer {
height: 28px;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.02) 50%, transparent 100%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.trending-cat {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
letter-spacing: 0.3px;
}
.trending-stats {
display: flex;
align-items: center;
gap: 12px;
}
.trending-sales {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
}
.trending-vol {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
color: var(--accent);
}
.trending-empty {
padding: 12px;
font-size: 12px;
color: var(--text-dim);
text-align: center;
}
/* ─── Quick Query Chips ───────────────────────────────── */
/* ─── Enhanced Sale Cards (landing feed) ──────────────── */
.feed-panel .sale-card {
margin: 4px;
padding: 10px 12px;
border-radius: var(--radius-xs);
border-left: 2px solid var(--border);
}
.feed-panel .sale-card.tier-low { border-left-color: var(--text-dim); }
.feed-panel .sale-card.tier-mid { border-left-color: var(--accent); }
.feed-panel .sale-card.tier-high { border-left-color: var(--green); }
.feed-panel .sale-card.tier-whale { border-left-color: var(--blue); }
.sale-card .sc-marketplace {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 1px 5px;
border-radius: 3px;
background: rgba(255,255,255,0.04);
}
/* Pulse animation for new sales */
@keyframes salePulse {
0% { background: rgba(94,230,160,0.08); }
100% { background: transparent; }
}
.sale-card.new-sale {
animation: salePulse 2s ease-out;
}
/* ─── Terminal Responsive ─────────────────────────────── */
@media (max-width: 768px) {
.terminal-grid {
grid-template-columns: 1fr;
min-height: auto;
}
.feed-panel .tp-body {
max-height: 320px;
}
.cap-grid-compact {
grid-template-columns: 1fr 1fr;
}
.ticker-bar {
margin: 0 -16px;
padding: 6px 16px;
}
.landing-hero-compact h1 { font-size: 22px; }
.landing-hero-compact p { font-size: 12px; }
}
@media (max-width: 480px) {
.cap-grid-compact {
grid-template-columns: 1fr 1fr;
}
.cap-mini { padding: 8px 10px; }
.terminal-grid { gap: 8px; }
.ticker-item { padding: 0 10px; }
.ticker-label { font-size: 8px; }
.ticker-val { font-size: 11px; }
.ticker-bar { overflow: hidden; }
}
/* ═══════════════════════════════════════════════════════════════
TRADING UI
═══════════════════════════════════════════════════════════════ */
/* ─── Trade Action Buttons (unified across all pages) ─── */
.trade-actions {
display: flex;
gap: 6px;
margin: 12px 20px 16px;
flex-wrap: wrap;
}
.btn-trade {
/* flex-basis 0 with grow=1 so all visible buttons share width equally,
but a sane min-width so "LIST FOR SALE" doesn't overlap "RENEW" when the
name panel has 4+ action buttons. Buttons wrap to a second row when the
container can't fit them all at their min-width. */
flex: 1 1 auto;
min-width: 108px;
padding: 10px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
text-align: center;
white-space: nowrap;
}
.btn-buy {
background: rgba(112, 240, 160, 0.06);
color: var(--green, #70f0a0);
border-color: rgba(112, 240, 160, 0.2);
}
.btn-buy:hover { background: rgba(112, 240, 160, 0.14); border-color: var(--green, #70f0a0); }
.btn-register {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.15));
color: var(--green, #70f0a0);
border-color: rgba(34, 197, 94, 0.4);
}
.btn-register:hover { background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(22, 163, 74, 0.25)); border-color: var(--green, #70f0a0); }
.btn-register-premium {
display: inline-block;
margin-left: 6px;
padding: 2px 7px;
background: rgba(239, 68, 68, 0.18);
color: #ff8080;
border: 1px solid rgba(239, 68, 68, 0.4);
border-radius: 999px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
vertical-align: middle;
}
.btn-offer {
background: rgba(212, 168, 83, 0.12);
color: var(--accent);
border-color: rgba(212, 168, 83, 0.3);
}
.btn-offer:hover { background: rgba(212, 168, 83, 0.22); border-color: var(--accent); }
.btn-list {
background: rgba(112, 240, 160, 0.06);
color: var(--green, #70f0a0);
border-color: rgba(112, 240, 160, 0.2);
}
.btn-list:hover { background: rgba(112, 240, 160, 0.14); border-color: var(--green, #70f0a0); }
.btn-renew {
background: rgba(99, 102, 241, 0.10);
color: #a5b4fc;
border-color: rgba(99, 102, 241, 0.30);
}
.btn-renew:hover { background: rgba(99, 102, 241, 0.20); border-color: #a5b4fc; }
.btn-set-primary {
background: rgba(212, 168, 83, 0.08);
color: var(--accent);
border-color: rgba(212, 168, 83, 0.25);
}
.btn-set-primary:hover { background: rgba(212, 168, 83, 0.18); border-color: var(--accent); }
/* Trade Panel Overlay */
.trade-panel-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 900;
opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.trade-panel-overlay.visible {
opacity: 1;
pointer-events: auto;
}
/* Trade Panel (Slide-out) — visually harmonised with .pf-bulk-panel */
.trade-panel {
position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw;
background: var(--bg-elevated); border-left: 1px solid var(--border);
z-index: 910; transform: translateX(100%); transition: transform 0.3s var(--ease-out);
overflow-y: auto; overflow-x: hidden;
display: flex; flex-direction: column;
box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
}
.trade-panel.visible { transform: translateX(0); }
.tm-header {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 20px 20px 14px;
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 1;
background:
linear-gradient(135deg, rgba(212, 168, 83, 0.08) 0%, rgba(212, 168, 83, 0.00) 70%),
var(--bg-elevated);
}
.tm-header-text { flex: 1; min-width: 0; }
.tm-header h3 {
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.2px;
margin: 0;
}
.tm-subtitle {
margin-top: 2px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
text-transform: lowercase;
letter-spacing: 0.4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tm-subtitle:empty { display: none; }
.tm-close {
background: none;
border: none;
color: var(--text-dim);
font-size: 28px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
transition: color 0.15s;
}
.tm-close:hover { color: var(--text-primary); }
.tm-body {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Trade body is always wrapped in a single form container — push the
inter-section gap onto that wrapper so section labels don't bump
against the previous input. Mirrors the portfolio Manage panel. */
.tm-offer-form,
.tm-list-form,
.tm-confirm {
display: flex;
flex-direction: column;
gap: 20px;
}
.tm-footer {
display: flex;
gap: 8px;
justify-content: flex-end;
padding: 12px 20px;
border-top: 1px solid var(--border);
position: sticky; bottom: 0; background: var(--bg-elevated);
}
.tm-status {
display: none;
padding: 12px 20px;
font-size: 13px;
font-family: var(--font-mono);
border-top: 1px solid var(--border);
color: var(--text-secondary);
}
.tm-status.visible { display: block; }
.tm-status.pending { color: var(--accent); }
/* While the user is waiting on wallet/chain, show a small spinner inline
with the status text. Mirrors .btn-waiting::after so the visual language
for "pending" is consistent across modals and the trade-modal status row. */
.tm-status.pending::before {
content: '';
display: inline-block;
width: 11px;
height: 11px;
margin-right: 8px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
vertical-align: -2px;
animation: nwBtnSpin 0.7s linear infinite;
}
.tm-status.success { color: var(--green); }
.tm-status.error { color: var(--red); }
.tm-status a { color: var(--accent); text-decoration: underline; }
/* Modal content elements */
.tm-loading, .tm-empty, .tm-error {
text-align: center;
padding: 20px;
color: var(--text-dim);
font-size: 14px;
}
.tm-error { color: var(--red); }
.tm-name {
font-size: 20px;
font-weight: 700;
color: var(--accent);
margin-bottom: 8px;
}
.tm-price {
font-size: 24px;
font-weight: 700;
color: var(--text-primary);
font-family: var(--font-mono);
margin-bottom: 16px;
}
.tm-usd {
font-size: 14px;
font-weight: 400;
color: var(--text-secondary);
}
.tm-row .tm-usd {
font-size: 12px;
}
.tm-detail, .tm-context {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 14px;
margin-bottom: 0;
}
.tm-row {
display: flex;
justify-content: space-between;
padding: 4px 0;
font-size: 13px;
color: var(--text-secondary);
}
.tm-row span:last-child {
font-family: var(--font-mono);
color: var(--text-primary);
}
.tm-row.total {
border-top: 1px solid var(--border);
margin-top: 4px;
padding-top: 8px;
font-weight: 600;
}
.tm-row.total span:last-child { color: var(--accent); }
.tm-input-group {
margin-bottom: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.tm-input-group label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-dim);
margin-bottom: 0;
}
.tm-marketplace-checks {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 2px;
}
.tm-marketplace-checks label {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text);
text-transform: none;
letter-spacing: 0;
padding: 0;
cursor: pointer;
}
.tm-marketplace-checks label:has(input:disabled) {
color: var(--text-dim);
cursor: default;
}
.tm-input-group input,
.tm-input-group select {
width: 100%;
padding: 8px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 14px;
}
.tm-input-group input:focus,
.tm-input-group select:focus {
outline: none;
border-color: var(--accent);
}
/* Custom themed checkboxes for trade modal marketplace checks */
.tm-input-group input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 16px;
height: 16px;
min-width: 16px;
border: 1.5px solid var(--border);
border-radius: 3px;
background: var(--surface);
cursor: pointer;
display: inline-block;
vertical-align: middle;
position: relative;
transition: all 0.15s;
padding: 0;
}
.tm-input-group input[type="checkbox"]:hover {
border-color: var(--accent);
}
.tm-input-group input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
}
.tm-input-group input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4.5px;
top: 1.5px;
width: 4px;
height: 8px;
border: solid var(--bg);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.tm-input-group input[type="checkbox"]:disabled {
opacity: 0.6;
cursor: default;
}
.tm-note {
font-size: 11px;
color: var(--text-dim);
margin-top: 0;
line-height: 1.5;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--border-subtle, var(--border));
border-radius: 8px;
}
/* Modal buttons */
.btn-trade-cancel {
padding: 8px 16px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: transparent;
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: var(--font-sans);
}
.btn-trade-cancel:hover { background: rgba(255,255,255,0.05); }
.btn-trade-confirm {
padding: 8px 20px;
border: none;
border-radius: var(--radius-pill);
background: var(--accent);
color: #000;
font-size: 12px;
font-weight: 700;
cursor: pointer;
font-family: var(--font-sans);
transition: background 0.2s;
}
.btn-trade-confirm:hover { background: #e0b850; }
.btn-trade-confirm:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Registration steps */
.reg-steps {
display: flex;
gap: 4px;
margin: 16px 0;
}
.reg-step {
flex: 1;
text-align: center;
padding: 10px 8px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 12px;
color: var(--text-dim);
transition: all 0.3s;
}
.reg-step .step-num {
display: block;
font-size: 16px;
font-weight: 700;
margin-bottom: 2px;
color: var(--text-dim);
}
.reg-step.active {
border-color: var(--accent);
color: var(--accent);
}
.reg-step.active .step-num { color: var(--accent); }
.reg-step.done {
border-color: var(--green);
color: var(--green);
background: rgba(76, 175, 80, 0.05);
}
.reg-step.done .step-num { color: var(--green); }
/* ─── Name Profile Card ────────────────────────────────── */
.name-profile { margin-top: 20px; animation: fadeUp 0.4s 0.15s var(--ease-out) both; }
.name-profile .collapsible { margin-top: 12px; }
.name-profile .collapsible:first-child { margin-top: 0; }
/* Profile section header badge count */
.profile-count {
font-family: var(--font-mono); font-size: 10px;
background: var(--surface3); color: var(--text-dim);
padding: 2px 8px; border-radius: var(--radius-pill);
}
/* Marketplace badge */
.mp-badge {
display: inline-block;
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
padding: 2px 8px; border-radius: 4px;
text-transform: uppercase; letter-spacing: 0.5px;
min-width: 60px; text-align: center;
}
.mp-badge.opensea { background: rgba(108,172,240,0.12); color: var(--blue); border: 1px solid rgba(108,172,240,0.2); }
.mp-badge.grails { background: rgba(94,230,160,0.12); color: var(--green); border: 1px solid rgba(94,230,160,0.2); }
.mp-badge.vision { background: rgba(176,140,240,0.12); color: var(--purple); border: 1px solid rgba(176,140,240,0.2); }
.mp-badge.ensvision { background: rgba(176,140,240,0.12); color: var(--purple); border: 1px solid rgba(176,140,240,0.2); }
.mp-badge.namewhisper { background: var(--accent-glow); color: var(--accent-bright); border: 1px solid var(--accent-dim); }
.mp-badge.unknown { background: var(--surface3); color: var(--text-dim); border: 1px solid var(--border); }
.mp-badge + .mp-badge { margin-left: 3px; }
/* Listing / offer rows */
.profile-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border-subtle);
font-family: var(--font-mono); font-size: 12px;
transition: background 0.15s;
}
.profile-row:hover { background: rgba(255,255,255,0.015); }
.profile-row:last-child { border-bottom: none; }
.profile-row-price {
font-weight: 700; font-size: 13px; color: var(--text);
min-width: 100px;
}
.profile-row-price .usd { color: var(--text-dim); font-weight: 400; font-size: 11px; margin-left: 4px; }
.profile-row-addr {
color: var(--text-dim); font-size: 11px;
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-row-meta {
color: var(--text-dim); font-size: 10px;
text-align: right; min-width: 120px;
line-height: 1.5;
}
.profile-row-meta .expires { color: var(--accent-dim); }
/* Own order indicators */
.profile-row.own-order { border-left: 2px solid var(--green); background: rgba(94,230,160,0.04); }
.own-badge {
font-family: var(--font-mono); font-size: 9px; font-weight: 600;
color: var(--green); background: rgba(94,230,160,0.12);
padding: 1px 6px; border-radius: var(--radius-pill);
text-transform: uppercase; letter-spacing: 0.5px;
white-space: nowrap;
}
.btn-cancel-order {
font-family: var(--font-mono); font-size: 9px; font-weight: 500;
color: var(--red, #ff6b6b); background: transparent;
border: 1px solid rgba(255,107,107,0.3); border-radius: var(--radius-pill);
padding: 1px 8px; cursor: pointer;
transition: all 0.15s ease;
}
.btn-cancel-order:hover { background: rgba(255,107,107,0.12); border-color: rgba(255,107,107,0.5); }
/* Empty state */
.profile-empty {
padding: 20px 16px;
font-family: var(--font-mono); font-size: 12px;
color: var(--text-dim); text-align: center;
}
/* Registration info grid */
.reg-info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.reg-info-cell {
padding: 12px 14px;
border-right: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.reg-info-cell:nth-child(4n) { border-right: none; }
.reg-info-cell:nth-last-child(-n+4) { border-bottom: none; }
.reg-info-label {
font-family: var(--font-mono); font-size: 9px;
color: var(--text-dim); text-transform: uppercase;
letter-spacing: 1px; margin-bottom: 4px;
}
.reg-info-value {
font-family: var(--font-mono); font-size: 13px;
font-weight: 600; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reg-info-value.dim { color: var(--text-dim); font-weight: 400; }
.reg-info-detail {
grid-column: 1 / -1;
padding: 10px 14px;
font-family: var(--font-mono); font-size: 11px;
color: var(--text-dim);
border-top: 1px solid var(--border-subtle);
}
/* Profile skeleton */
.profile-skeleton {
padding: 20px;
display: flex; flex-direction: column; gap: 12px;
}
.skeleton-bar {
height: 14px; border-radius: 4px;
background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
}
.skeleton-bar.w60 { width: 60%; }
.skeleton-bar.w80 { width: 80%; }
.skeleton-bar.w40 { width: 40%; }
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Mobile responsive */
@media (max-width: 600px) {
.trade-panel { width: 100%; }
.trade-actions { justify-content: center; margin-left: 14px; margin-right: 14px; }
.btn-trade { padding: 8px 12px; font-size: 11px; }
.reg-info-grid { grid-template-columns: repeat(2, 1fr); }
.reg-info-cell:nth-child(2n) { border-right: none; }
.reg-info-cell:nth-child(4n) { border-right: 1px solid var(--border-subtle); }
.reg-info-cell:nth-last-child(-n+4) { border-bottom: 1px solid var(--border-subtle); }
.reg-info-cell:nth-last-child(-n+2) { border-bottom: none; }
.profile-row { flex-wrap: wrap; gap: 6px; }
.profile-row-meta { text-align: left; min-width: auto; }
}
/* ─── Records Management ──────────────────────────────────────── */
.records-section { display: flex; flex-direction: column; gap: 20px; }
.records-avatar-section {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.records-avatar-header {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px;
background: var(--bg-elevated);
border-bottom: 1px solid var(--border);
}
.records-avatar-header h4 {
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px;
margin: 0;
}
.records-owner-badge {
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
color: var(--green); background: var(--green-dim);
padding: 2px 8px; border-radius: var(--radius-pill);
text-transform: uppercase; letter-spacing: 0.5px;
}
.records-readonly-badge {
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
color: var(--text-dim); background: var(--surface2);
padding: 2px 8px; border-radius: var(--radius-pill);
text-transform: uppercase; letter-spacing: 0.5px;
}
.records-avatar-body {
display: flex; align-items: center; gap: 16px;
padding: 16px;
}
.records-avatar-preview {
width: 80px; height: 80px; min-width: 80px;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--surface2);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
}
.records-avatar-preview img {
width: 100%; height: 100%; object-fit: cover;
}
.avatar-placeholder {
font-family: var(--font-mono); font-size: 10px;
color: var(--text-dim); text-align: center;
padding: 8px;
}
.records-avatar-current { flex: 1; min-width: 0; }
.records-field-label {
font-family: var(--font-mono); font-size: 10px;
color: var(--text-dim); text-transform: uppercase;
letter-spacing: 0.5px; margin-bottom: 4px;
}
.records-field-value {
font-size: 13px; color: var(--text-secondary);
word-break: break-all; line-height: 1.4;
}
.records-field-value.mono { font-family: var(--font-mono); font-size: 11px; }
.text-dim { color: var(--text-dim); }
.records-avatar-editor {
border-top: 1px solid var(--border);
padding: 14px;
}
.records-avatar-tabs {
display: flex; gap: 4px; margin-bottom: 12px;
}
.records-tab {
font-family: var(--font-mono); font-size: 11px; font-weight: 500;
color: var(--text-dim); background: transparent;
border: 1px solid var(--border); border-radius: var(--radius-xs);
padding: 5px 14px; cursor: pointer; transition: all 0.15s;
}
.records-tab:hover { color: var(--text-secondary); border-color: var(--text-dim); }
.records-tab.active {
color: var(--accent); border-color: var(--accent);
background: var(--accent-glow);
}
.records-avatar-tab-content { margin-bottom: 12px; }
.records-avatar-live-preview {
margin-bottom: 12px;
}
.records-avatar-live-preview img {
width: 64px; height: 64px; object-fit: cover;
border-radius: var(--radius-xs);
border: 1px solid var(--border);
}
.records-general-section {
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.records-section-header {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px;
background: var(--bg-elevated);
border-bottom: 1px solid var(--border);
}
.records-section-header h4 {
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px;
margin: 0;
}
.records-resolver {
font-size: 10px; color: var(--text-dim);
}
.records-form {
padding: 14px;
display: flex; flex-direction: column; gap: 10px;
}
.records-input-group {
display: flex; flex-direction: column; gap: 4px;
position: relative;
}
.records-label {
font-family: var(--font-mono); font-size: 10px;
color: var(--text-dim); text-transform: uppercase;
letter-spacing: 0.5px;
}
.records-input {
background: var(--surface2); border: 1px solid var(--border);
color: var(--text-primary); padding: 8px 10px;
border-radius: var(--radius-xs); font-size: 13px;
font-family: inherit; outline: none;
transition: border-color 0.15s;
}
.records-input:focus { border-color: var(--accent); }
.records-input.mono { font-family: var(--font-mono); font-size: 11px; }
.records-input.records-changed {
border-color: var(--accent);
background: var(--accent-glow);
}
.records-input-hint {
font-size: 11px; color: var(--text-dim); font-style: italic;
}
.records-autofill {
position: absolute; right: 6px; top: 20px;
font-family: var(--font-mono); font-size: 9px;
color: var(--accent); background: var(--accent-glow);
border: 1px solid rgba(212,168,83,0.2); border-radius: var(--radius-xs);
padding: 3px 8px; cursor: pointer; text-transform: uppercase;
letter-spacing: 0.5px; transition: all 0.15s;
}
.records-autofill:hover {
background: var(--accent-glow-strong);
border-color: var(--accent);
}
.records-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.records-changes {
min-height: 16px;
}
.records-change-count {
font-family: var(--font-mono); font-size: 11px;
color: var(--accent); font-weight: 500;
}
.btn-records-save {
background: transparent;
border: 1px solid var(--accent);
color: var(--accent);
font-family: var(--font-mono); font-size: 12px; font-weight: 600;
padding: 10px 20px;
border-radius: var(--radius-xs);
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-records-save:hover:not(:disabled) {
background: var(--accent-glow);
}
.btn-records-save:disabled {
opacity: 0.4; cursor: not-allowed;
}
.records-tx-link {
margin-top: 8px;
font-family: var(--font-mono); font-size: 11px;
color: var(--text-dim);
}
.records-tx-link a { color: var(--accent); text-decoration: underline; }
.records-readonly {
padding: 14px;
display: flex; flex-direction: column; gap: 10px;
}
.records-ro-item {
display: flex; flex-direction: column; gap: 2px;
}
.records-ro-label {
font-family: var(--font-mono); font-size: 10px;
color: var(--text-dim); text-transform: uppercase;
letter-spacing: 0.5px;
}
.records-ro-value {
font-size: 13px; color: var(--text-secondary);
word-break: break-all; line-height: 1.4;
}
.records-ro-value.mono { font-family: var(--font-mono); font-size: 11px; }
.records-nft-picker {
display: flex; flex-direction: column; gap: 8px;
}
select.records-input {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c5a6a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 28px;
}
/* Compact read-only records view (value card) */
.records-compact {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px;
}
.records-compact-avatar {
display: flex; gap: 14px; align-items: flex-start; flex: 1; min-width: 0;
}
.records-compact-info {
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px;
padding-top: 2px;
}
.records-compact-desc {
font-size: 13px; color: var(--text-secondary); line-height: 1.4;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.records-compact-url a {
font-size: 12px; color: var(--accent); text-decoration: none;
opacity: 0.8; transition: opacity 0.15s;
}
.records-compact-url a:hover { opacity: 1; text-decoration: underline; }
.records-compact-socials {
display: flex; flex-wrap: wrap; gap: 8px;
}
.records-ro-social {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-mono); font-size: 11px;
color: var(--text-dim); transition: color 0.15s;
}
.records-ro-social svg { opacity: 0.6; }
.records-ro-social:hover { color: var(--text-secondary); }
.records-ro-social:hover svg { opacity: 1; }
.records-compact-addr {
font-family: var(--font-mono); font-size: 11px;
color: var(--text-dim);
}
.records-compact-email {
font-size: 12px; color: var(--text-secondary);
display: flex; align-items: center; gap: 5px;
}
.records-compact-badges {
display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px;
}
.records-badge {
display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-mono); font-size: 10px; font-weight: 600;
padding: 2px 8px; border-radius: var(--radius-pill);
text-transform: uppercase; letter-spacing: 0.5px;
text-decoration: none;
}
.records-badge-primary {
color: var(--green); border: 1px solid var(--green);
}
.records-badge-wrapped {
color: #ff963c; border: 1px solid rgba(255,150,60,0.4);
}
.records-badge-web {
color: var(--blue, #5b9bd5); border: 1px solid rgba(91,155,213,0.4);
}
.records-badge-web:hover { background: rgba(91,155,213,0.1); }
.records-compact-empty {
font-size: 12px; color: var(--text-dim); font-style: italic;
}
.records-compact-actions {
display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
flex-shrink: 0;
}
.btn-manage-records {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
color: var(--accent); background: var(--accent-glow);
border: 1px solid rgba(212,168,83,0.25); border-radius: var(--radius-xs);
padding: 6px 12px; cursor: pointer;
text-transform: uppercase; letter-spacing: 0.5px;
transition: all 0.2s;
}
.btn-manage-records:hover {
background: var(--accent-glow-strong);
border-color: var(--accent);
}
/* Avatar Upload Zone */
.avatar-upload-zone {
border: 2px dashed var(--border);
border-radius: var(--radius-sm);
padding: 28px 20px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
background: var(--surface2);
}
.avatar-upload-zone:hover {
border-color: var(--accent);
background: var(--accent-glow);
}
.avatar-upload-zone.drag-over {
border-color: var(--accent);
background: var(--accent-glow-strong);
transform: scale(1.01);
}
.avatar-upload-icon {
color: var(--text-dim);
margin-bottom: 8px;
transition: color 0.2s;
}
.avatar-upload-zone:hover .avatar-upload-icon { color: var(--accent); }
.avatar-upload-text {
font-size: 13px;
color: var(--text-secondary);
font-weight: 500;
margin-bottom: 4px;
}
.avatar-upload-hint {
font-size: 11px;
color: var(--text-dim);
}
.avatar-upload-progress {
padding: 12px 0;
}
.avatar-upload-bar {
height: 4px;
background: var(--surface2);
border-radius: 2px;
overflow: hidden;
margin-bottom: 8px;
}
.avatar-upload-bar-fill {
height: 100%;
background: var(--accent);
border-radius: 2px;
width: 0;
transition: width 0.4s ease;
}
.avatar-upload-status {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-secondary);
transition: color 0.2s;
}
.avatar-upload-result {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.avatar-upload-result-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.avatar-upload-result-value {
font-size: 11px;
color: var(--accent);
word-break: break-all;
}
/* Records Management Modal */
.records-modal-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(6px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
}
.records-modal-overlay.visible {
opacity: 1;
pointer-events: auto;
}
.records-modal {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
width: 92%;
max-width: 560px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}
.rm-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
background: var(--bg-card);
z-index: 1;
}
.rm-header-left {
display: flex; align-items: center; gap: 8px;
}
.rm-header-left svg { color: var(--accent); }
.rm-header h3 {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
font-family: var(--font-mono);
}
.rm-close {
background: none; border: none;
color: var(--text-dim); font-size: 22px;
cursor: pointer; padding: 4px 8px;
line-height: 1; transition: color 0.15s;
}
.rm-close:hover { color: var(--text-primary); }
.rm-body {
padding: 20px;
}
.rm-body .records-section { gap: 16px; }
@media (max-width: 600px) {
.records-row { grid-template-columns: 1fr; }
.records-avatar-body { flex-direction: column; align-items: flex-start; }
.records-compact { flex-direction: column; }
.records-compact-actions {
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-subtle);
}
.records-modal { width: 96%; max-width: none; margin: 8px; }
}
/* ─── Manage Names Page ───────────────────────────────────────── */
/* ─── Manage Names Page ─────────────────────────────────────── */
.manage-names-page {
margin: 0 auto;
padding: 8px 0 80px;
}
.manage-names-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding: 0 4px;
}
.manage-names-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.mn-select-all-wrap {
display: flex;
align-items: center;
}
.mn-select-all-wrap input[type="checkbox"] {
width: 16px; height: 16px;
accent-color: var(--accent);
cursor: pointer;
}
.manage-names-header h2 {
font-size: 18px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.manage-names-count {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-dim);
}
.manage-names-grid {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Name card */
.manage-name-card {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: var(--radius-sm);
transition: background 0.15s;
position: relative;
}
.manage-name-card:hover {
background: var(--surface2);
}
.manage-name-card.mn-selected {
background: rgba(108, 92, 231, 0.08);
}
/* Checkbox */
.mn-check {
display: flex;
align-items: center;
flex-shrink: 0;
}
.mn-checkbox {
width: 16px; height: 16px;
accent-color: var(--accent);
cursor: pointer;
}
/* Avatar */
.manage-name-avatar {
width: 42px;
height: 42px;
min-width: 42px;
border-radius: 8px;
overflow: hidden;
background: var(--surface2);
border: 1.5px solid rgba(212, 168, 83, 0.35);
cursor: pointer;
}
.manage-name-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.manage-name-avatar-fallback {
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
}
/* Name info */
.manage-name-info {
flex: 1;
min-width: 0;
cursor: pointer;
}
.manage-name-label {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.manage-name-tld {
font-weight: 400;
color: var(--text-dim);
}
.manage-name-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 3px;
}
.manage-name-expiry {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
}
.manage-name-expiry.expiry-warn { color: var(--accent); }
.manage-name-expiry.expiry-urgent { color: var(--red); }
.manage-name-expiry.expiry-expired { color: var(--red); opacity: 0.7; }
/* Status badges */
.mn-badge {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 1px 6px;
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.3px;
}
.mn-badge-wrapped {
background: rgba(108, 92, 231, 0.12);
color: var(--accent);
border: 1px solid rgba(108, 92, 231, 0.2);
}
.mn-badge-sub {
background: rgba(212, 168, 83, 0.1);
color: var(--gold);
border: 1px solid rgba(212, 168, 83, 0.2);
}
.mn-badge-grace {
background: rgba(240, 112, 112, 0.1);
color: var(--red);
border: 1px solid rgba(240, 112, 112, 0.2);
}
.mn-badge-primary {
background: rgba(112, 240, 160, 0.1);
color: var(--green);
border: 1px solid rgba(112, 240, 160, 0.2);
}
/* Actions column */
.manage-name-actions {
flex-shrink: 0;
}
.mn-menu-btn {
background: none;
border: none;
color: var(--text-dim);
cursor: pointer;
padding: 4px 6px;
border-radius: 4px;
transition: all 0.15s;
line-height: 1;
}
.mn-menu-btn:hover {
background: var(--bg-elevated);
color: var(--text);
}
/* Action dropdown menu */
.mn-action-menu {
position: absolute;
right: 12px;
top: calc(100% - 4px);
z-index: 100;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px;
min-width: 180px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
animation: fadeUp 0.15s var(--ease-out);
}
.mn-action-menu button {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
background: none;
border: none;
color: var(--text-secondary);
font-size: 12px;
font-family: var(--font-body);
cursor: pointer;
border-radius: 4px;
transition: all 0.1s;
text-align: left;
}
.mn-action-menu button:hover {
background: var(--surface);
color: var(--text);
}
.mn-action-menu button svg {
color: var(--text-dim);
flex-shrink: 0;
}
.mn-action-menu button:hover svg {
color: var(--accent);
}
/* Expired states */
.manage-name-card.expired { opacity: 0.5; }
.manage-name-card.expired:hover { opacity: 0.75; }
/* Expired section header */
.manage-names-expired-header {
display: flex; align-items: center; gap: 8px;
padding: 14px 14px 8px;
font-family: var(--font-mono); font-size: 12px;
color: var(--text-dim); text-transform: uppercase;
letter-spacing: 0.5px; cursor: pointer;
user-select: none; transition: color 0.15s;
}
.manage-names-expired-header:hover { color: var(--text-secondary); }
.manage-names-expired-header .chevron {
display: inline-block; transition: transform 0.2s;
font-size: 10px;
}
.manage-names-expired-header .chevron.open { transform: rotate(90deg); }
.manage-names-expired-count {
font-size: 11px; color: var(--text-dim);
background: var(--surface2); padding: 1px 6px;
border-radius: var(--radius-pill);
}
.manage-names-grid.collapsed { display: none; }
/* ─── Manage Tools Modal Extras ──────────────────────────────── */
.mn-modal-info {
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 12px 14px;
margin-bottom: 16px;
}
.mn-modal-info-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.mn-modal-info-label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-dim);
}
.mn-modal-info-value {
font-size: 13px;
color: var(--text);
}
.mn-modal-info-detail {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
}
.mn-modal-warning {
background: rgba(240, 112, 112, 0.06);
border: 1px solid rgba(240, 112, 112, 0.15);
border-radius: var(--radius-sm);
padding: 10px 14px;
margin-bottom: 16px;
font-size: 12px;
color: var(--red);
line-height: 1.5;
}
/* ─── Mint Subnames ──────────────────────────────────────────── */
.mn-subname-rows {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.mn-subname-row {
display: flex;
align-items: center;
gap: 8px;
}
.mn-subname-input-group {
display: flex;
align-items: center;
flex: 1;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.mn-subname-label-input {
flex: 1;
min-width: 0;
padding: 8px 10px;
background: transparent;
border: none;
color: var(--text);
font-family: var(--font-mono);
font-size: 13px;
outline: none;
}
.mn-subname-label-input::placeholder {
color: var(--text-dim);
}
.mn-subname-suffix {
padding: 8px 10px 8px 0;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-dim);
white-space: nowrap;
}
.mn-subname-remove {
background: none;
border: none;
color: var(--text-dim);
font-size: 18px;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: color 0.15s;
line-height: 1;
}
.mn-subname-remove:hover {
color: var(--red);
}
.mn-add-subname-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: none;
border: 1px dashed var(--border);
border-radius: var(--radius-sm);
color: var(--text-dim);
font-size: 12px;
font-family: var(--font-body);
cursor: pointer;
transition: all 0.15s;
margin-bottom: 12px;
}
.mn-add-subname-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.mn-subname-preview {
margin-bottom: 12px;
padding: 8px 12px;
background: var(--surface);
border-radius: var(--radius-sm);
display: none;
}
.mn-subname-preview-label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-dim);
margin-bottom: 4px;
}
.mn-subname-preview-name {
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent);
padding: 2px 0;
}
/* ─── Responsive: Manage Names ───────────────────────────────── */
@media (max-width: 600px) {
.manage-name-card { padding: 8px 10px; gap: 10px; }
.manage-name-avatar { width: 36px; height: 36px; min-width: 36px; }
.manage-name-label { font-size: 14px; }
.mn-action-menu { min-width: 160px; }
}
/* ─── Bloomberg Terminal Features ──────────────────────────────── */
/* Feed Filters */
.feed-filters {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-bottom: 1px solid var(--border-subtle);
}
.feed-filter-select,
.feed-filter-input {
background: var(--surface2);
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 10px;
padding: 3px 6px;
border-radius: var(--radius-sm);
outline: none;
}
.feed-filter-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.feed-filter-select { min-width: 90px; background-color: var(--surface2); }
.feed-filter-input { width: 70px; }
.feed-filter-select:focus,
.feed-filter-input:focus { border-color: var(--accent-dim); }
.feed-filter-whale {
display: flex;
align-items: center;
gap: 4px;
font-size: 10px;
color: var(--text-dim);
font-family: var(--font-mono);
cursor: pointer;
white-space: nowrap;
}
.feed-filter-whale input { accent-color: var(--blue); width: 12px; height: 12px; }
/* Market Sub-Tabs */
.market-tabs {
display: flex;
gap: 4px;
margin: 16px 0 12px;
}
.market-tab {
padding: 6px 14px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--text-dim);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.market-tab:hover { color: var(--text-secondary); border-color: var(--border); }
.market-tab.active {
color: var(--accent);
border-color: var(--accent);
background: rgba(212, 168, 83, 0.08);
}
/* Whale Tracker */
.whale-header, .cat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.whale-title, .cat-title {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.whale-period-toggle {
display: flex;
gap: 4px;
}
.whale-period {
padding: 3px 10px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill);
cursor: pointer;
transition: all 0.2s;
}
.whale-period:hover { color: var(--text-secondary); }
.whale-period.active {
color: var(--accent);
border-color: var(--accent);
background: rgba(212, 168, 83, 0.08);
}
.whale-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: 11px;
}
.whale-table thead th {
text-align: left;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-dim);
padding: 6px 8px;
border-bottom: 1px solid var(--border-subtle);
font-weight: 500;
}
.whale-table tbody td {
padding: 8px;
border-bottom: 1px solid var(--border-subtle);
color: var(--text-secondary);
}
.whale-table tbody tr {
cursor: pointer;
transition: background 0.15s;
}
.whale-table tbody tr:hover {
background: var(--surface2);
}
.whale-rank {
color: var(--accent);
font-weight: 600;
font-size: 13px;
width: 30px;
}
.whale-addr { max-width: 180px; }
.whale-ens {
color: var(--accent);
font-weight: 500;
display: block;
}
.whale-hex {
color: var(--text-dim);
font-size: 10px;
}
.whale-spent, .cat-vol { color: var(--green); font-weight: 500; }
.whale-count { color: var(--text-primary); font-weight: 600; }
/* Whale Detail */
.whale-detail-back {
font-size: 11px;
color: var(--accent);
cursor: pointer;
margin-bottom: 12px;
font-family: var(--font-mono);
}
.whale-detail-back:hover { text-decoration: underline; }
.whale-detail-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background: var(--surface2);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
margin-bottom: 12px;
}
.whale-detail-ens {
font-size: 16px;
font-weight: 600;
color: var(--accent);
font-family: var(--font-sans);
}
.whale-detail-hex {
font-size: 11px;
color: var(--text-dim);
font-family: var(--font-mono);
}
.whale-detail-stats {
display: flex;
gap: 20px;
}
.wds-item { text-align: center; }
.wds-val {
display: block;
font-size: 16px;
font-weight: 600;
color: var(--green);
font-family: var(--font-mono);
}
.wds-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.whale-purchase-name { color: var(--accent); font-weight: 500; }
.whale-purchase-price { color: var(--green); font-weight: 500; }
/* Category Analytics */
.cat-summary {
display: flex;
gap: 16px;
margin-bottom: 12px;
}
.cat-summary-item {
flex: 1;
padding: 10px 12px;
background: var(--surface2);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
text-align: center;
}
.cat-sum-val {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--green);
font-family: var(--font-mono);
}
.cat-sum-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cat-name { color: var(--accent); font-weight: 500; }
.cat-sparkline {
width: 80px;
height: 24px;
display: inline-block;
}
.cat-sparkline svg { display: block; }
.cat-chart-row td {
padding: 0 !important;
border-bottom: 1px solid var(--border-subtle);
}
.cat-chart-wrap {
padding: 12px;
background: var(--surface2);
}
/* Charts */
.chart-container { padding: 4px; }
.chart-label {
font-size: 12px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 8px;
font-family: var(--font-sans);
}
.chart-sublabel {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-dim);
margin-bottom: 6px;
}
.chart-dual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.chart-svg-wrap { width: 100%; }
.chart-svg {
width: 100%;
height: auto;
}
/* Portfolio P&L */
.pnl-dashboard { margin-top: 4px; }
.pnl-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.pnl-title {
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.snapshot-btn {
padding: 4px 12px;
font-family: var(--font-mono);
font-size: 10px;
color: var(--accent);
background: transparent;
border: 1px solid var(--accent-dim);
border-radius: var(--radius-pill);
cursor: pointer;
transition: all 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.snapshot-btn:hover { background: rgba(212, 168, 83, 0.08); }
.snapshot-btn:disabled { opacity: 0.5; cursor: default; }
.pnl-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.pnl-sum-item {
padding: 10px 12px;
background: var(--surface2);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
text-align: center;
}
.pnl-sum-val {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
font-family: var(--font-mono);
}
.pnl-sum-label {
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pnl-positive { color: var(--green) !important; }
.pnl-negative { color: var(--red) !important; }
.pnl-performers {
display: flex;
gap: 12px;
margin-bottom: 12px;
font-family: var(--font-mono);
font-size: 11px;
}
.pnl-perf {
padding: 4px 10px;
background: var(--surface2);
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
}
.pnl-name { color: var(--accent); font-weight: 500; }
.pnl-pct { font-size: 10px; }
.pnl-chart-section { margin-bottom: 16px; }
.portfolio-chart {
width: 100%;
min-height: 120px;
background: var(--surface2);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
padding: 12px;
}
/* P&L Auth Gate */
.pnl-auth-gate {
text-align: center;
padding: 40px 20px;
}
.pnl-auth-icon { font-size: 32px; margin-bottom: 8px; }
.pnl-auth-title {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 6px;
}
.pnl-auth-desc {
font-size: 12px;
color: var(--text-dim);
margin-bottom: 16px;
}
.pnl-connect-btn {
padding: 8px 20px;
background: var(--accent);
color: #000;
border: none;
border-radius: var(--radius-pill);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.pnl-connect-btn:hover { background: #e0b850; }
/* Whale badge for feed cards */
.sc-whale-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
color: var(--blue);
font-weight: 600;
background: rgba(108, 172, 240, 0.1);
padding: 1px 6px;
border-radius: var(--radius-pill);
}
.sc-whale-badge::before {
content: '';
width: 5px;
height: 5px;
background: var(--blue);
border-radius: 50%;
display: inline-block;
}
/* Wash trade badges */
.sc-wash-badge {
display: inline-flex;
align-items: center;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 1px 6px;
border-radius: var(--radius-pill);
margin-left: 6px;
font-family: var(--font-mono);
cursor: help;
}
.sc-wash-likely {
color: #1a1a2e;
background: var(--red, #e74c3c);
}
.sc-wash-suspicious {
color: #1a1a2e;
background: #f0a853;
}
/* Event type badges (offer, premium reg) */
.sc-event-badge {
display: inline-flex;
align-items: center;
font-size: 9px;
padding: 1px 5px;
border-radius: 3px;
margin-left: 6px;
letter-spacing: 0.5px;
font-weight: 600;
font-family: var(--font-mono);
vertical-align: middle;
}
.sc-event-offer {
color: #0a1628;
background: #4ecdc4;
}
.sc-event-premreg {
color: #0a1628;
background: #a78bfa;
}
.sale-card-offer {
border-left: 2px solid #4ecdc420;
}
.sale-card-premreg {
border-left: 2px solid #a78bfa20;
}
/* Bloomberg Mobile Responsive */
@media (max-width: 768px) {
.feed-filters { flex-wrap: wrap; }
.market-tabs { flex-wrap: wrap; }
.pnl-summary { grid-template-columns: repeat(2, 1fr); }
.cat-summary { flex-wrap: wrap; }
.cat-summary-item { min-width: 80px; }
.chart-dual { grid-template-columns: 1fr; }
.whale-detail-header { flex-direction: column; gap: 12px; }
.whale-detail-stats { justify-content: center; }
.pnl-performers { flex-direction: column; gap: 6px; }
.col-hide-mobile { display: none; }
}
/* ─── Categories Mode ─────────────────────────────────── */
.cat-loading, .cat-error, .cat-empty {
text-align: center; padding: 60px 20px;
color: var(--text-dim); font-family: var(--font-mono); font-size: 13px;
}
.cat-loading .spinner { margin: 0 auto 16px; }
.cat-grid-container { max-width: 1060px; margin: 0 auto; padding-top: 32px; animation: fadeUp 0.4s var(--ease-out); }
.cat-grid-header {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 16px; padding: 0 4px;
}
.cat-grid-title {
font-family: var(--font-mono); font-size: 16px; font-weight: 700;
color: var(--text-primary); text-transform: uppercase; letter-spacing: 1px;
}
.cat-grid-count {
font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
}
.cat-grid-controls {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
margin-bottom: 16px; padding: 0 4px;
}
.cat-filter-input {
background: var(--surface); border: 1px solid var(--border-subtle);
color: var(--text-primary); font-family: var(--font-mono); font-size: 12px;
padding: 6px 12px; border-radius: 6px; width: 200px; outline: none;
}
.cat-filter-input:focus { border-color: var(--accent); }
.cat-group-tabs {
display: flex; gap: 4px; flex-wrap: wrap;
}
.cat-group-tab {
background: transparent; border: 1px solid var(--border-subtle);
color: var(--text-dim); font-family: var(--font-mono); font-size: 10px;
padding: 4px 10px; border-radius: 4px; cursor: pointer; text-transform: uppercase;
transition: all 0.15s ease;
}
.cat-group-tab:hover { border-color: var(--text-secondary); color: var(--text-secondary); }
.cat-group-tab.active { background: var(--accent); border-color: var(--accent); color: var(--bg-primary); font-weight: 600; }
.cat-sort-controls {
display: flex; align-items: center; gap: 4px; margin-left: auto;
}
.cat-sort-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); text-transform: uppercase; }
.cat-sort-btn {
background: transparent; border: 1px solid transparent;
color: var(--text-dim); font-family: var(--font-mono); font-size: 10px;
padding: 3px 8px; border-radius: 3px; cursor: pointer; text-transform: uppercase;
}
.cat-sort-btn:hover { color: var(--text-secondary); }
.cat-sort-btn.active { color: var(--accent); border-color: var(--accent); }
.cat-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.cat-card {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: 8px; padding: 14px; cursor: pointer;
transition: all 0.2s ease;
}
.cat-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.cat-card.inactive { opacity: 0.5; }
.cat-card-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 10px;
}
.cat-card-name {
font-family: var(--font-mono); font-size: 13px; font-weight: 600;
color: var(--text-primary);
}
.cat-card-group {
font-family: var(--font-mono); font-size: 9px; color: var(--text-dim);
text-transform: uppercase; background: var(--bg-secondary); padding: 2px 6px; border-radius: 3px;
}
.cat-card-stats {
display: flex; gap: 16px; margin-bottom: 8px;
}
.cat-stat { display: flex; flex-direction: column; }
.cat-stat-val {
font-family: var(--font-mono); font-size: 14px; font-weight: 700;
color: var(--accent);
}
.cat-stat-label {
font-family: var(--font-mono); font-size: 9px; color: var(--text-dim);
text-transform: uppercase;
}
.cat-card-footer {
display: flex; justify-content: space-between; align-items: center;
border-top: 1px solid var(--border-subtle); padding-top: 8px; margin-top: 4px;
}
.cat-card-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.cat-card-top { font-family: var(--font-mono); font-size: 10px; color: var(--green); }
.cat-card-floor { font-family: var(--font-mono); font-size: 10px; color: var(--accent); font-weight: 600; }
/* Category Overview Grid */
.cat-overview-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(--border-subtle); border: 1px solid var(--border-subtle);
border-radius: 10px; overflow: hidden; margin-bottom: 24px;
}
.cat-ov-cell {
background: var(--surface); padding: 16px 18px;
}
.cat-ov-label {
font-family: var(--font-mono); font-size: 16px; color: var(--text-dim);
margin-top: 6px;
}
.cat-ov-value {
font-family: var(--font-mono); font-size: 16px; font-weight: 700;
color: var(--text-primary); line-height: 1.2;
}
.cat-ov-eth { color: var(--accent); font-size: 12px; }
.cat-ov-pct { font-size: 12px; font-weight: 400; color: var(--text-dim); }
/* Category Detail */
.cat-detail { max-width: 900px; margin: 0 auto; }
.cat-detail-nav {
display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.cat-back-btn {
background: transparent; border: 1px solid var(--border-subtle);
color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px;
padding: 6px 14px; border-radius: 6px; cursor: pointer;
}
.cat-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.cat-detail-group {
font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
text-transform: uppercase; background: var(--bg-secondary); padding: 3px 8px; border-radius: 4px;
}
.cat-detail-header {
display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px;
}
.cat-detail-title {
font-family: var(--font-primary); font-size: 28px; font-weight: 700;
color: var(--accent); margin: 0;
}
.cat-detail-count {
font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
}
.cat-stats-row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px;
}
.cat-period-card {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: 8px; padding: 14px;
}
.cat-period-label {
font-family: var(--font-mono); font-size: 12px; font-weight: 700;
color: var(--accent); margin-bottom: 8px; text-transform: uppercase;
}
.cat-period-stats { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.cpv { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.cpl { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); }
.cat-chart-wrap {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: 8px; padding: 14px; margin-bottom: 20px;
}
.cat-chart-label {
font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
text-transform: uppercase; margin-bottom: 8px;
}
.cat-chart-wrap .cat-sparkline { width: 100%; height: 200px; display: block; }
.cat-section { margin-bottom: 20px; }
.cat-section-title {
font-family: var(--font-mono); font-size: 13px; font-weight: 700;
color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px;
margin-bottom: 10px; display: flex; align-items: center; gap: 10px;
}
.cat-sale-row, .cat-buyer-row {
display: flex; align-items: center; gap: 12px; padding: 8px 12px;
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: 6px; margin-bottom: 4px; font-family: var(--font-mono); font-size: 12px;
}
.cat-sale-name { color: var(--accent); cursor: pointer; min-width: 120px; }
.cat-sale-name:hover { text-decoration: underline; }
.cat-sale-price { color: var(--text-primary); font-weight: 600; min-width: 100px; }
.cat-sale-date { color: var(--text-dim); font-size: 11px; }
.cat-sale-mp { color: var(--text-dim); font-size: 10px; text-transform: uppercase; margin-left: auto; }
.cat-buyer-addr { color: var(--text-secondary); min-width: 120px; }
.cat-buyer-stat { color: var(--text-dim); }
/* AI Report */
.cat-ai-loading { padding: 20px; text-align: center; color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; }
.cat-ai-loading .spinner { margin: 0 auto 10px; }
.cat-ai-error { color: var(--red); font-family: var(--font-mono); font-size: 12px; padding: 12px; }
.cat-ai-signal {
font-size: 11px; padding: 3px 10px; border-radius: 4px; font-weight: 700;
}
.signal-bull { background: rgba(74,222,128,0.15); color: #4ade80; }
.signal-bear { background: rgba(248,113,113,0.15); color: #f87171; }
.signal-neutral { background: rgba(148,163,184,0.15); color: #94a3b8; }
.cat-ai-report {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: 8px; padding: 20px;
}
.cat-ai-headline {
font-family: var(--font-primary); font-size: 18px; font-weight: 700;
color: var(--accent); margin-bottom: 16px; line-height: 1.3;
}
.cat-ai-block { margin-bottom: 14px; }
.cat-ai-block-title {
font-family: var(--font-mono); font-size: 11px; font-weight: 700;
color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;
margin-bottom: 4px;
}
.cat-ai-block p {
margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}
.cat-ai-reasoning {
font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
font-style: italic; padding-top: 10px; border-top: 1px solid var(--border-subtle);
margin-top: 14px;
}
.cat-ai-meta {
font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
margin-top: 12px;
}
/* Category Browse */
.cat-browse-controls {
display: flex; gap: 10px; margin-bottom: 12px;
}
.cat-browse-search {
flex: 1; background: var(--bg-secondary); border: 1px solid var(--border-subtle);
color: var(--text-primary); font-family: var(--font-mono); font-size: 13px;
padding: 8px 12px; border-radius: 6px; outline: none;
}
.cat-browse-search:focus { border-color: var(--accent); }
.cat-browse-sort {
background: var(--bg-secondary); border: 1px solid var(--border-subtle);
color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px;
padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.cat-browse-header {
display: grid; grid-template-columns: 2fr 1.5fr 1fr 0.8fr 1.2fr;
gap: 8px; padding: 6px 12px; font-family: var(--font-mono); font-size: 10px;
color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.3px;
border-bottom: 1px solid var(--border-subtle);
}
.cat-browse-row {
display: grid; grid-template-columns: 2fr 1.5fr 1fr 0.8fr 1.2fr;
gap: 8px; padding: 10px 12px; font-family: var(--font-mono); font-size: 13px;
border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer;
transition: background 0.15s;
}
.cat-browse-row:hover { background: rgba(255,255,255,0.03); }
.cat-br-name { color: var(--accent); font-weight: 600; }
.cat-br-price { color: var(--text-primary); }
.cat-br-offer { color: var(--text-secondary); }
.cat-br-expires { color: var(--text-dim); }
.cat-br-owner { color: var(--text-dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.cat-br-mp { font-size: 10px; color: var(--text-dim); margin-left: 4px; }
.cat-br-unlisted { color: var(--text-dim); }
.cat-browse-status {
display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--text-dim);
}
.cat-browse-more {
background: transparent; border: 1px solid var(--border-subtle);
color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px;
padding: 8px 20px; border-radius: 6px; cursor: pointer;
}
.cat-browse-more:hover { border-color: var(--accent); color: var(--accent); }
.cat-browse-info { color: var(--text-dim); }
.cat-browse-empty { color: var(--text-dim); text-align: center; padding: 20px; }
@media (max-width: 768px) {
.cat-grid { grid-template-columns: repeat(2, 1fr); }
.cat-overview-grid { grid-template-columns: repeat(2, 1fr); }
.cat-filter-input { width: 100%; }
.cat-sort-controls { margin-left: 0; }
.cat-browse-header, .cat-browse-row {
grid-template-columns: 1.5fr 1fr 0.8fr;
}
.cat-bh-offer, .cat-bh-owner, .cat-br-offer, .cat-br-owner { display: none; }
.cat-browse-controls { flex-direction: column; }
}
@media (max-width: 480px) {
.cat-grid { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════════
PROTOCOL ANALYTICS DASHBOARD
═══════════════════════════════════════════════════════════════ */
.pa-dashboard {
max-width: 1060px;
margin: 0 auto;
padding: 32px 0 60px;
animation: fadeUp 0.4s var(--ease-out);
}
.pa-section { margin-bottom: 40px; }
.pa-section-header {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 14px; gap: 12px;
}
.pa-section-title {
font-family: var(--font-display); font-weight: 600; font-size: 17px;
color: var(--text); letter-spacing: -0.2px; margin-bottom: 14px;
}
.pa-section-header .pa-section-title { margin-bottom: 0; }
.pa-section-note {
font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
}
.pa-section-note-line {
margin-bottom: 10px; min-height: 16px;
}
/* TradingView-style timeframe buttons */
.pa-tf-bar {
display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius-pill); padding: 3px; flex-shrink: 0;
}
.pa-tf-btn {
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
color: var(--text-dim); background: transparent; border: none;
padding: 5px 12px; border-radius: var(--radius-pill); cursor: pointer;
transition: all 0.2s var(--ease-out); letter-spacing: 0.5px;
white-space: nowrap;
}
.pa-tf-btn:hover {
color: var(--text); background: var(--surface2);
}
.pa-tf-btn.pa-tf-active {
color: var(--bg); background: var(--accent); font-weight: 700;
}
.pa-card {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius); padding: 24px;
}
.pa-subsection-label {
font-family: var(--font-body); font-size: 11px; font-weight: 400;
color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.5px;
margin-bottom: 14px;
}
/* ─── Hero Stats ─────────────────────────────────────────────── */
.pa-hero {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.pa-stat-card {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius); padding: 24px 20px; text-align: center;
position: relative; transition: all 0.3s var(--ease-out);
}
.pa-stat-card:hover {
border-color: var(--accent-dim); transform: translateY(-2px);
}
.pa-stat-indicator {
width: 6px; height: 6px; border-radius: 50%; position: absolute;
top: 14px; right: 14px;
}
.pa-indicator-active { background: var(--green); box-shadow: 0 0 8px var(--green); }
.pa-indicator-grace { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.pa-indicator-expired { background: var(--text-dim); }
.pa-indicator-expiring {
background: var(--red);
animation: paPulse 2s ease-in-out infinite;
}
@keyframes paPulse {
0%, 100% { box-shadow: 0 0 4px var(--red); }
50% { box-shadow: 0 0 12px var(--red); }
}
.pa-stat-number {
font-family: var(--font-display); font-weight: 700; font-size: 34px;
color: var(--text); line-height: 1.1; margin-bottom: 6px;
}
.pa-stat-label {
font-family: var(--font-body); font-size: 11px; font-weight: 400;
color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.5px;
}
.pa-stat-sub {
font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
margin-top: 4px;
}
/* ─── Entrance Animations ────────────────────────────────────── */
.pa-enter {
opacity: 0; transform: translateY(16px);
animation: paFadeUp 0.5s var(--ease-out) forwards;
animation-delay: calc(var(--delay, 0) * 80ms);
}
.pa-enter.pa-visible { /* animation handles it */ }
@keyframes paFadeUp {
to { opacity: 1; transform: translateY(0); }
}
/* ─── Charts ─────────────────────────────────────────────────── */
.pa-chart-container { position: relative; }
.pa-area-fill { opacity: 0; }
.pa-chart-dot { transition: opacity 0.2s; }
.pa-tooltip {
position: absolute; pointer-events: none; z-index: 10;
background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius-xs); padding: 8px 12px;
font-family: var(--font-mono); font-size: 11px; color: var(--text);
white-space: nowrap;
}
.pa-tooltip strong { color: var(--accent); }
/* ─── Stacked Bar ────────────────────────────────────────────── */
.pa-stacked-bar {
display: flex; height: 36px; border-radius: var(--radius-xs);
overflow: hidden; gap: 2px;
}
.pa-stack-seg {
display: flex; align-items: center; justify-content: center;
transition: opacity 0.2s; cursor: default;
}
.pa-stack-seg span {
font-family: var(--font-mono); font-size: 9px; color: #000;
font-weight: 600; text-transform: uppercase;
}
.pa-stacked-bar:hover .pa-stack-seg { opacity: 0.5; }
.pa-stacked-bar:hover .pa-stack-seg:hover { opacity: 1; }
.pa-stack-legend {
display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap;
}
.pa-legend-item {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
}
.pa-legend-dot {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.pa-legend-value {
color: var(--text-dim); margin-left: 2px;
}
/* ─── Two Column Layout ──────────────────────────────────────── */
.pa-two-col {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
margin-bottom: 40px;
}
/* ─── Adoption Rows ──────────────────────────────────────────── */
.pa-adoption-row {
display: flex; align-items: center; gap: 12px; padding: 12px 0;
border-bottom: 1px solid var(--border-subtle);
}
.pa-adoption-row:last-child { border-bottom: none; }
.pa-adoption-info {
display: flex; justify-content: space-between; width: 180px; flex-shrink: 0;
}
.pa-adoption-label {
font-family: var(--font-body); font-size: 13px; color: var(--text);
}
.pa-adoption-value {
font-family: var(--font-mono); font-size: 12px; color: var(--accent);
}
.pa-adoption-bar-bg {
flex: 1; height: 6px; background: var(--border-subtle);
border-radius: 3px; overflow: hidden;
}
.pa-adoption-bar-fill {
height: 100%; border-radius: 3px;
transition: width 0.8s var(--ease-out);
}
.pa-adoption-pct {
font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);
width: 50px; text-align: right; flex-shrink: 0;
}
/* Partial data indicators (social sync in progress) */
.pa-adoption-divider {
display: flex; align-items: center; gap: 8px;
padding: 10px 0 6px; margin-top: 8px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.pa-adoption-divider-label {
font-family: var(--font-label); font-size: 10px; text-transform: uppercase;
letter-spacing: 1.5px; color: var(--text-dim); white-space: nowrap;
}
.pa-partial-badge {
font-family: var(--font-mono); font-size: 9px;
color: #f0a030; background: rgba(240,160,48,0.1);
border: 1px solid rgba(240,160,48,0.25);
border-radius: 10px; padding: 2px 8px; white-space: nowrap;
animation: paPulseBadge 2s ease-in-out infinite;
}
@keyframes paPulseBadge {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
.pa-adoption-partial .pa-adoption-label { color: var(--text-dim); }
.pa-adoption-denom {
font-size: 9px; color: var(--text-dim); margin-left: 4px; font-family: var(--font-mono);
}
/* ─── Ownership Grid ─────────────────────────────────────────── */
.pa-ownership-grid {
display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px;
}
.pa-ownership-stats { padding: 20px 24px; }
.pa-ownership-row {
display: flex; flex-direction: column; padding: 14px 0;
border-bottom: 1px solid var(--border-subtle);
}
.pa-ownership-row:last-child { border-bottom: none; }
.pa-own-value {
font-family: var(--font-display); font-weight: 700; font-size: 26px;
color: var(--text); line-height: 1.2;
}
.pa-own-value-plain {
font-family: var(--font-display); font-weight: 700; font-size: 26px;
color: var(--text); line-height: 1.2;
}
.pa-own-label {
font-family: var(--font-body); font-size: 11px; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 1px; margin-top: 2px;
}
.pa-ownership-ring {
display: flex; flex-direction: column; align-items: center;
justify-content: center; padding: 20px 32px;
}
.pa-ring-label {
font-family: var(--font-body); font-size: 11px; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
}
.pa-ring-legend {
display: flex; gap: 16px; margin-top: 12px;
}
.pa-ring-leg-item {
display: flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
}
.pa-top-holders { padding: 20px 24px; }
.pa-holder-row {
display: flex; align-items: center; gap: 10px; padding: 8px 0;
border-bottom: 1px solid var(--border-subtle);
}
.pa-holder-row:last-child { border-bottom: none; }
.pa-holder-rank {
font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
width: 18px; text-align: right;
}
.pa-holder-addr {
font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
flex: 1;
}
.pa-holder-count {
font-family: var(--font-mono); font-size: 12px; color: var(--accent);
font-weight: 600;
}
.pa-holder-clickable {
cursor: pointer; transition: background 0.15s ease, padding-left 0.15s ease;
border-radius: var(--radius-xs); margin: 0 -8px; padding-left: 8px; padding-right: 8px;
}
.pa-holder-clickable:hover { background: var(--surface2); }
.pa-holder-clickable:hover .pa-holder-addr { color: var(--text); }
.pa-holder-has-ens { color: var(--text) !important; font-weight: 500; }
.pa-holder-arrow {
font-size: 12px; color: var(--text-dim); opacity: 0;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.pa-holder-clickable:hover .pa-holder-arrow {
opacity: 1; transform: translateX(2px);
}
/* ─── Expiry Forecast ────────────────────────────────────────── */
.pa-expiry-grid { display: flex; flex-direction: column; gap: 14px; }
.pa-expiry-row {
display: flex; align-items: center; gap: 14px;
}
.pa-expiry-label {
font-family: var(--font-body); font-size: 13px; color: var(--text);
width: 80px; flex-shrink: 0;
}
.pa-expiry-bar-bg {
flex: 1; height: 10px; background: var(--border-subtle);
border-radius: 5px; overflow: hidden;
}
.pa-expiry-bar-fill {
height: 100%; border-radius: 5px;
transition: width 0.8s var(--ease-out);
}
.pa-expiry-value {
font-family: var(--font-mono); font-size: 13px; color: var(--text);
width: 60px; text-align: right; flex-shrink: 0;
}
.pa-expiry-sub {
display: flex; gap: 24px; margin-top: 18px;
padding-top: 16px; border-top: 1px solid var(--border-subtle);
}
.pa-expiry-note {
font-family: var(--font-body); font-size: 12px; color: var(--text-dim);
}
.pa-expiry-highlight {
font-family: var(--font-mono); font-weight: 600; color: var(--accent);
}
/* ─── Loading / Error ────────────────────────────────────────── */
.pa-loading {
display: flex; flex-direction: column; align-items: center;
justify-content: center; padding: 80px 0; gap: 16px;
}
.pa-loading-shimmer {
width: 48px; height: 48px; border-radius: 50%;
background: conic-gradient(var(--accent), transparent);
animation: paSpin 1s linear infinite;
}
@keyframes paSpin {
to { transform: rotate(360deg); }
}
.pa-loading-text {
font-family: var(--font-body); font-size: 13px; color: var(--text-dim);
}
.pa-error {
text-align: center; padding: 60px 20px;
font-family: var(--font-body); font-size: 14px; color: var(--red);
}
/* ─── Protocol Analytics Responsive ──────────────────────────── */
@media (max-width: 768px) {
.pa-hero { grid-template-columns: repeat(2, 1fr); }
.pa-two-col { grid-template-columns: 1fr; }
.pa-ownership-grid { grid-template-columns: 1fr; }
.pa-stat-number { font-size: 28px; }
.pa-adoption-info { width: 140px; }
.pa-expiry-sub { flex-direction: column; gap: 8px; }
.pa-section-header { flex-direction: column; gap: 8px; align-items: flex-start; }
.pa-tf-btn { padding: 4px 10px; font-size: 10px; }
}
@media (max-width: 480px) {
.pa-hero { grid-template-columns: 1fr 1fr; gap: 8px; }
.pa-stat-card { padding: 16px 12px; }
.pa-stat-number { font-size: 24px; }
.pa-card { padding: 16px; }
.pa-adoption-info { width: 120px; }
.pa-own-value, .pa-own-value-plain { font-size: 22px; }
}
/* ═══════════════════════════════════════════════════════════════
PORTFOLIO P&L DASHBOARD
═══════════════════════════════════════════════════════════════ */
/* ── Empty / Connect State ─────────────────────────────── */
.pf-empty {
text-align: center;
padding: 60px 20px;
}
.pf-empty-icon {
color: var(--text-dim);
margin-bottom: 20px;
opacity: 0.5;
}
.pf-empty-title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
color: var(--text);
margin-bottom: 8px;
}
.pf-empty-desc {
font-size: 14px;
color: var(--text-dim);
max-width: 360px;
margin: 0 auto 24px;
line-height: 1.6;
}
.pf-connect-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: 1px solid var(--accent);
color: var(--accent);
padding: 10px 24px;
border-radius: var(--radius-pill);
cursor: pointer;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
transition: all 0.2s var(--ease-out);
}
.pf-connect-btn:hover {
background: var(--accent-glow);
color: var(--accent-bright);
border-color: var(--accent-bright);
}
/* ── Loading Skeletons ─────────────────────────────────── */
.pf-loading-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.pf-skel-card {
height: 90px;
border-radius: var(--radius-sm);
}
.pf-skel-chart {
height: 220px;
border-radius: var(--radius-sm);
margin-bottom: 16px;
}
.pf-skel-table {
height: 300px;
border-radius: var(--radius-sm);
}
/* ── Summary Cards ─────────────────────────────────────── */
.pf-summary {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-bottom: 24px;
}
.pf-card {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 16px 18px;
transition: border-color 0.2s, background 0.2s;
}
.pf-card:hover {
border-color: var(--border);
background: var(--surface);
}
.pf-card-hero {
grid-column: 1 / -1;
text-align: center;
padding: 24px 18px;
background: linear-gradient(180deg, var(--bg-elevated), rgba(14,14,18,0.6));
border-color: var(--border);
}
.pf-card-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 6px;
}
.pf-card-value {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.3px;
color: var(--text);
}
.pf-card-hero .pf-card-value {
font-size: 32px;
letter-spacing: -1px;
}
.pf-card-value.accent { color: var(--accent); }
.pf-card-value.green { color: var(--green); }
.pf-card-value.red { color: var(--red); }
.pf-card-value.dim { color: var(--text-dim); }
.pf-eth {
font-size: 14px;
font-weight: 400;
color: var(--text-secondary);
}
.pf-card-hero .pf-eth {
font-size: 18px;
}
.pf-pct {
font-size: 13px;
font-weight: 500;
opacity: 0.85;
}
.pf-card-sub {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
margin-top: 4px;
}
/* Manage Names intel cards */
.pf-intel-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.pf-intel-card {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 16px 18px;
}
.pf-intel-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 6px;
}
.pf-intel-value {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.3px;
color: var(--text);
}
.pf-intel-value.accent { color: var(--accent); }
.pf-intel-value.red { color: var(--red); }
.pf-intel-sub {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
margin-top: 4px;
}
/* ── Chart Section ─────────────────────────────────────── */
.pf-chart-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
margin-bottom: 20px;
}
.pf-section-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.pf-section-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--text);
letter-spacing: -0.2px;
}
.pf-section-count {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
margin-right: auto;
}
.pf-chart-wrap {
position: relative;
height: 220px;
}
.pf-chart-wrap canvas {
width: 100% !important;
height: 100% !important;
}
.pf-chart-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-dim);
text-align: center;
padding: 20px;
background: var(--bg-elevated);
border-radius: var(--radius-sm);
}
/* ── Holdings Table ────────────────────────────────────── */
.pf-holdings-section {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
}
/* ── View Toggle ─────────────────────────────────────── */
.pf-view-toggle {
display: flex; gap: 2px; margin-left: 8px;
background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs);
padding: 2px;
}
.pf-view-btn {
background: none; border: none; padding: 5px 8px; cursor: pointer;
color: var(--text-dim); border-radius: 4px; transition: all 0.15s;
display: flex; align-items: center; justify-content: center;
}
.pf-view-btn:hover { color: var(--text-secondary); }
.pf-view-btn.active { background: var(--surface2); color: var(--accent); }
.pf-view-btn svg { width: 14px; height: 14px; }
.pf-card-sort {
display: none;
font-family: var(--font-mono); font-size: 11px;
background: var(--bg); color: var(--text-secondary);
border: 1px solid var(--border); border-radius: var(--radius-xs);
padding: 4px 8px; margin-left: auto; cursor: pointer;
}
.pf-holdings-section[data-view="grid"] .pf-card-sort { display: inline-block; }
/* ── Card Grid ───────────────────────────────────────── */
.pf-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
gap: 12px;
}
.pf-holdings-section[data-view="table"] .pf-grid { display: none; }
.pf-holdings-section[data-view="grid"] .pf-table-wrap { display: none; }
.pf-name-card {
background: var(--surface);
border: 1px solid rgba(212, 168, 83, 0.25);
border-radius: 16px;
cursor: pointer;
overflow: hidden;
transition: all 0.25s var(--ease-out);
animation: cardReveal 0.4s var(--ease-out) both;
}
.pf-name-card:hover {
border-color: var(--accent-bright);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(212,168,83,0.08);
}
.pf-nc-artwork {
width: 100%; aspect-ratio: 1;
background: var(--bg-elevated);
overflow: hidden;
position: relative;
}
.pf-nc-artwork canvas {
width: 100% !important; height: 100% !important;
border-radius: 0 !important;
}
.pf-nc-artwork .pf-nc-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Enable container queries so the overlay font can scale with card width,
matching the canvas fallback which uses ~11% of card width as its font
size. */
.pf-name-card { container-type: inline-size; }
/* Name overlay on cards that render a real ENS avatar image. Styled to match
drawEnsCardFallback() exactly — same font ("Space Grotesk" bold), same
off-white color, same left-aligned bottom-left placement with ~13% / ~12%
padding, and the same subtle black drop shadow. */
.pf-nc-name-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: 0 8cqi 12cqi 13cqi;
font-family: "Space Grotesk", Arial, sans-serif;
font-weight: 700;
font-size: clamp(14px, 11cqi, 28px);
line-height: 1.1;
color: #eae8e4;
text-shadow:
0 3px 8px rgba(0, 0, 0, 0.34),
0 1px 2px rgba(0, 0, 0, 0.85),
0 0 4px rgba(0, 0, 0, 0.7);
white-space: nowrap;
overflow: hidden;
pointer-events: none;
letter-spacing: 0;
}
/* In the overlay the TLD should read as one word with the label (the canvas
renderer doesn't dim it), so override the dimmed pf-nc-tld styling. */
.pf-nc-name-overlay .pf-nc-tld {
color: #eae8e4;
font-weight: 700;
}
.pf-nc-body { padding: 10px 14px 12px; }
.pf-nc-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
}
.pf-nc-name {
font-family: var(--font-mono); font-size: 13px; font-weight: 600;
color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-nc-tld { color: var(--text-dim); font-weight: 400; }
.pf-nc-row {
display: flex; justify-content: space-between;
font-size: 12px; font-family: var(--font-mono);
padding: 2px 0; color: var(--text);
}
.pf-nc-footer {
font-size: 11px; color: var(--text-dim);
font-family: var(--font-mono); margin-top: 6px;
}
.pf-table-wrap {
overflow-x: auto;
margin: 0 -20px -20px;
padding: 0 20px 20px;
}
.pf-table {
width: 100%;
border-collapse: collapse;
}
.pf-table th {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
text-align: left;
white-space: nowrap;
vertical-align: middle;
}
.pf-th-right { text-align: right !important; }
.pf-th-sortable {
cursor: pointer;
user-select: none;
transition: color 0.15s;
}
.pf-th-sortable:hover { color: var(--accent); }
.pf-sort-icon {
font-size: 10px;
opacity: 0.3;
margin-left: 2px;
}
.pf-sort-icon.active {
opacity: 1;
color: var(--accent);
}
.pf-row {
cursor: pointer;
transition: background 0.15s;
}
.pf-row:hover {
background: rgba(255,255,255,0.02);
}
.pf-row td {
padding: 14px 16px;
border-bottom: 1px solid var(--border-subtle);
font-size: 13px;
vertical-align: middle;
}
.pf-row:last-child td { border-bottom: none; }
.pf-name-cell {
font-family: var(--font-display);
font-weight: 500;
color: var(--text);
}
.pf-tld {
color: var(--text-dim);
font-weight: 400;
}
.pf-val-cell {
font-family: var(--font-mono);
font-size: 12px;
text-align: right;
color: var(--text-secondary);
}
.pf-val-cell.green { color: var(--green); }
.pf-val-cell.red { color: var(--red); }
.pf-val-cell.dim { color: var(--text-dim); }
/* ── Portfolio Section Labels & Variants ─────────────── */
.pf-section-label {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--text);
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-subtle);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pf-summary-sm {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.pf-summary-sm .pf-card {
padding: 12px 14px;
}
.pf-summary-sm .pf-card-value {
font-size: 18px;
}
.pf-summary-sm .pf-card-label {
font-size: 10px;
}
.pf-reg-badge {
font-size: 9px;
color: var(--text-dim);
background: var(--bg-card);
padding: 1px 4px;
border-radius: 3px;
margin-left: 4px;
vertical-align: middle;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.pf-empty-inline {
text-align: center;
color: var(--text-dim);
padding: 32px 16px;
font-size: 14px;
font-style: italic;
}
/* ── Category pills (summary row) ──────────────────────── */
.pf-cat-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 12px 0 20px;
}
.pf-cat-pill {
font-size: 11px;
font-weight: 500;
color: var(--text-dim);
background: var(--bg-card);
border: 1px solid var(--border-subtle);
border-radius: 12px;
padding: 3px 10px;
letter-spacing: 0.2px;
}
.pf-cat-count {
color: var(--accent);
font-weight: 600;
margin-left: 2px;
}
/* ── Category badges (table rows) ──────────────────────── */
.pf-name-label {
font-weight: 500;
}
.pf-cat-badge {
font-size: 9px;
font-weight: 500;
color: var(--text-dim);
letter-spacing: 0.3px;
text-transform: uppercase;
}
.pf-cat-badge.pf-cat-999club { color: #f0c060; }
.pf-cat-badge.pf-cat-10kclub { color: #6cacf0; }
.pf-cat-badge.pf-cat-100kclub { color: #8a8af0; }
.pf-cat-badge.pf-cat-palindrome { color: #b08cf0; }
.pf-cat-badge.pf-cat-emoji { color: #f09060; }
.pf-cat-badge.pf-cat-word { color: #60c090; }
.pf-cat-badge.pf-cat-3l, .pf-cat-badge.pf-cat-4l { color: #f06080; }
.pf-sub { font-size: 11px; }
/* ── Smart Alerts Bar ────────────────────────────────────── */
.pf-alerts {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: rgba(240, 112, 112, 0.06);
border: 1px solid rgba(240, 112, 112, 0.15);
border-radius: var(--radius-sm);
margin-bottom: 16px;
flex-wrap: wrap;
animation: fadeUp 0.3s var(--ease-out);
}
.pf-alert-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
}
.pf-alert-urgent { color: var(--red); }
.pf-alert-warn { color: var(--accent); }
.pf-alert-offer { color: var(--green); }
.pf-alert-sep {
color: var(--text-dim);
font-size: 14px;
opacity: 0.4;
}
/* ── Portfolio Owner Identity Bar ────────────────────────── */
/* The owner bar and the stats bar below it share a single gold-tinted
card: the owner bar opens the card (rounded top, flat bottom), and
.pf-stats-bar closes it (flat top, rounded bottom). A thin internal
divider replaces the outer gap between them. */
.pf-owner {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
background: linear-gradient(135deg, var(--bg-elevated) 0%, color-mix(in srgb, var(--bg-elevated) 85%, var(--accent)) 100%);
border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, var(--accent) 30%);
border-bottom: none;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.pf-owner-avatar {
width: 56px;
height: 56px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
background: var(--bg);
position: relative;
}
.pf-owner-avatar canvas,
.pf-owner-img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.pf-owner-body {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.pf-owner-eyebrow {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 1.4px;
color: var(--text-dim);
text-transform: uppercase;
margin-bottom: 4px;
}
.pf-owner-name {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pf-owner-addr {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
margin-top: 2px;
}
.pf-owner-you {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.6px;
color: var(--blue);
background: color-mix(in srgb, var(--blue) 18%, transparent);
border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent);
padding: 2px 8px;
border-radius: var(--radius-pill);
text-transform: uppercase;
}
/* ── Portfolio Stats Bar ─────────────────────────────────── */
.pf-stats-bar {
display: flex;
align-items: stretch;
background: linear-gradient(135deg, var(--bg-elevated) 0%, color-mix(in srgb, var(--bg-elevated) 85%, var(--accent)) 100%);
border: 1px solid color-mix(in srgb, var(--border-subtle) 70%, var(--accent) 30%);
border-top: none;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
margin-bottom: 16px;
overflow: hidden;
}
.pf-stat {
flex: 1;
padding: 18px 18px 16px;
min-width: 0;
transition: background 0.2s;
}
.pf-stat:hover {
background: rgba(255, 255, 255, 0.03);
}
.pf-stat-label {
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1.4px;
margin-bottom: 6px;
white-space: nowrap;
}
.pf-stat-value {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--text);
white-space: nowrap;
line-height: 1.1;
}
.pf-stat-value .pf-eth {
font-size: 11px;
font-weight: 500;
color: var(--text-dim);
letter-spacing: 0.3px;
margin-left: 2px;
}
.pf-stat-value.green { color: var(--green); }
.pf-stat-value.red { color: var(--red); }
.pf-stat-sub {
font-family: var(--font-mono);
font-size: 9px;
color: color-mix(in srgb, var(--text-dim) 80%, var(--accent));
margin-top: 4px;
white-space: nowrap;
}
.pf-stat-sep {
width: 1px;
background: linear-gradient(to bottom, transparent, var(--border-subtle), transparent);
align-self: stretch;
flex-shrink: 0;
}
.pf-stat-group-sep {
width: 1px;
background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--border-subtle) 50%, var(--accent) 50%), transparent);
align-self: stretch;
flex-shrink: 0;
margin: 0 6px;
}
/* Health grade colors */
.pf-health-grade { font-size: 28px; letter-spacing: -0.5px; }
.pf-health-Aplus, .pf-health-A { color: var(--green); }
.pf-health-Bplus, .pf-health-B { color: var(--accent); }
.pf-health-Cplus, .pf-health-C { color: #f0c060; }
.pf-health-D, .pf-health-F { color: var(--red); }
.pf-intel-card-health {
border-color: var(--border);
text-align: center;
}
/* ── Collection Chips ────────────────────────────────────── */
.pf-collection-section {
margin-bottom: 16px;
}
.pf-section-title-sm {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
}
.pf-collection-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pf-cat-chip {
font-size: 11px;
font-weight: 500;
color: var(--text-dim);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 14px;
padding: 4px 12px;
cursor: pointer;
transition: all 0.15s;
font-family: var(--font-body);
}
.pf-cat-chip:hover {
border-color: var(--chip-color, var(--accent));
color: var(--chip-color, var(--accent));
}
.pf-cat-chip.active {
background: color-mix(in srgb, var(--chip-color, var(--accent)) 15%, transparent);
border-color: var(--chip-color, var(--accent));
color: var(--chip-color, var(--accent));
}
/* Activity-section type filter chips — mirror .pf-cat-chip styling so the
two chip rows read as one system. The wrapper sits between the section
header and the activity table, with a little breathing room so it
doesn't crowd either. */
.pf-activity-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 2px 0 14px;
}
.pf-activity-chips:empty { display: none; }
.pf-tx-chip {
font-size: 11px;
font-weight: 500;
color: var(--text-dim);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: 14px;
padding: 4px 12px;
cursor: pointer;
transition: all 0.15s;
font-family: var(--font-body);
}
.pf-tx-chip:hover {
border-color: var(--accent);
color: var(--accent);
}
.pf-tx-chip.active {
background: color-mix(in srgb, var(--accent) 15%, transparent);
border-color: var(--accent);
color: var(--accent);
}
/* ── Checkbox Column ─────────────────────────────────────── */
.pf-th-check {
width: 36px;
text-align: center !important;
padding: 12px 8px !important;
}
.pf-check-cell {
width: 36px;
text-align: center;
padding: 14px 8px !important;
}
.pf-check-cell input[type="checkbox"],
.pf-th-check input[type="checkbox"] {
width: 14px;
height: 14px;
accent-color: var(--accent);
cursor: pointer;
display: block;
margin: 0 auto;
}
/* ── Thumbnail Column ────────────────────────────────────── */
.pf-th-thumb {
width: 36px;
padding: 12px 4px !important;
}
.pf-thumb-cell {
width: 36px;
padding: 8px 4px !important;
}
.pf-thumb {
width: 28px;
height: 28px;
border-radius: 4px;
object-fit: cover;
background: var(--bg-elevated);
display: block;
}
.pf-thumb-empty {
width: 28px;
height: 28px;
border-radius: 4px;
background: var(--bg-elevated);
display: block;
}
.pf-thumb-fallback {
width: 28px;
height: 28px;
border-radius: 4px;
display: block;
overflow: hidden;
}
/* ── Category Badge (in table) ───────────────────────────── */
.pf-th-cat {
width: 90px;
}
.pf-cat-cell {
padding: 14px 8px !important;
}
.pf-cat-badge {
font-size: 9px;
font-weight: 600;
color: var(--cat-color);
letter-spacing: 0.3px;
text-transform: uppercase;
background: color-mix(in srgb, var(--cat-color) 12%, transparent);
padding: 2px 7px;
border-radius: 4px;
white-space: nowrap;
}
/* ── Expiry Badges ───────────────────────────────────────── */
.pf-expiry-badge {
display: inline-block;
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: 4px;
letter-spacing: 0.2px;
white-space: nowrap;
}
.pf-expiry-grace {
color: #f07070;
background: rgba(240, 112, 112, 0.12);
}
.pf-expiry-premium {
color: #f0a060;
background: rgba(240, 160, 96, 0.12);
}
.pf-expiry-expired {
color: var(--text-dim);
background: rgba(100, 100, 120, 0.12);
}
/* ── Row Selection ───────────────────────────────────────── */
.pf-row-selected {
background: rgba(108, 92, 231, 0.06) !important;
}
.pf-row-selected:hover {
background: rgba(108, 92, 231, 0.1) !important;
}
/* ── Three-dot Row Menu ──────────────────────────────────── */
.pf-th-actions {
width: 36px;
padding: 12px 8px !important;
}
.pf-actions-cell {
width: 36px;
padding: 14px 8px !important;
position: relative;
}
.pf-row-menu-btn {
background: none;
border: none;
color: var(--text-dim);
font-size: 18px;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
transition: all 0.15s;
line-height: 1;
}
.pf-row-menu-btn:hover {
background: var(--bg-elevated);
color: var(--text);
}
.pf-row-menu {
position: absolute;
right: 8px;
top: 100%;
z-index: 100;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px;
min-width: 160px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
animation: fadeUp 0.15s var(--ease-out);
}
.pf-row-menu button {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 12px;
background: none;
border: none;
color: var(--text-secondary);
font-size: 12px;
font-family: var(--font-body);
cursor: pointer;
border-radius: 4px;
transition: all 0.1s;
text-align: left;
}
.pf-row-menu button:hover {
background: var(--surface);
color: var(--text);
}
.pf-row-menu-divider {
height: 1px;
background: var(--border-subtle);
margin: 4px 8px;
}
/* Wrapped badge */
.pf-wrapped-badge {
display: inline-block;
padding: 1px 6px;
border-radius: 6px;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.3px;
background: rgba(176, 140, 240, 0.12);
color: var(--purple);
margin-left: 6px;
vertical-align: middle;
}
/* ── Bottom Action Bar ───────────────────────────────────── */
.pf-action-bar {
position: fixed;
bottom: -80px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
background: linear-gradient(135deg, rgba(212, 168, 83, 0.12) 0%, rgba(212, 168, 83, 0.06) 100%);
border: 1px solid rgba(212, 168, 83, 0.3);
border-radius: var(--radius);
box-shadow: 0 -4px 32px rgba(212, 168, 83, 0.1), 0 -2px 16px rgba(0,0,0,0.4);
z-index: 200;
transition: bottom 0.3s var(--ease-out);
max-width: 600px;
width: auto;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.pf-action-bar.visible {
bottom: 24px;
}
.pf-action-count {
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent);
font-weight: 600;
flex-shrink: 0;
white-space: nowrap;
}
.pf-action-divider {
width: 1px;
height: 20px;
background: rgba(212, 168, 83, 0.25);
flex-shrink: 0;
}
.pf-action-buttons {
display: flex;
gap: 6px;
flex: 1;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.pf-action-buttons::-webkit-scrollbar { display: none; }
.pf-action-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: rgba(212, 168, 83, 0.06);
border: 1px solid rgba(212, 168, 83, 0.2);
border-radius: var(--radius-pill);
color: var(--accent);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
flex-shrink: 0;
}
.pf-action-btn svg { flex-shrink: 0; }
.pf-action-btn:hover {
border-color: var(--accent);
color: var(--accent-bright);
background: rgba(212, 168, 83, 0.15);
}
.pf-action-clear {
background: none;
border: none;
color: rgba(212, 168, 83, 0.5);
font-size: 18px;
cursor: pointer;
padding: 2px 4px;
border-radius: 4px;
transition: color 0.15s;
flex-shrink: 0;
line-height: 1;
}
.pf-action-clear:hover {
color: var(--red);
}
/* More menu — positioned above the action bar */
.pf-action-more-menu {
position: absolute;
bottom: calc(100% + 8px);
right: 16px;
min-width: 180px;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
padding: 6px;
display: none;
z-index: 210;
}
.pf-action-more-menu.open { display: flex; flex-direction: column; }
.pf-action-more-menu button {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
background: none;
border: none;
border-radius: var(--radius-xs);
color: var(--text-secondary);
font-family: var(--font-body);
font-size: 13px;
cursor: pointer;
transition: all 0.12s;
text-align: left;
white-space: nowrap;
}
.pf-action-more-menu button:hover { background: var(--surface); color: var(--text); }
.pf-action-more-menu button:disabled { opacity: 0.35; cursor: not-allowed; }
.pf-action-more-menu button:disabled:hover { background: none; color: var(--text-secondary); }
.pf-action-more-menu button svg { flex-shrink: 0; opacity: 0.6; }
/* ── Bulk Manage Panel (side drawer) ───────────────────── */
.pf-bulk-panel {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 420px; max-width: 100vw;
background: var(--bg-elevated);
border-left: 1px solid var(--border);
z-index: 910;
transform: translateX(100%);
transition: transform 0.3s var(--ease-out);
display: flex;
flex-direction: column;
box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
}
.pf-bulk-panel.visible { transform: translateX(0); }
.pf-bulk-header {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 20px 20px 14px;
border-bottom: 1px solid var(--border);
background: linear-gradient(135deg, rgba(212, 168, 83, 0.08) 0%, rgba(212, 168, 83, 0.00) 70%);
}
.pf-bulk-header-text { flex: 1; min-width: 0; }
.pf-bulk-title {
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.2px;
}
.pf-bulk-subtitle {
margin-top: 2px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 1px;
}
.pf-bulk-close {
background: none;
border: none;
color: var(--text-dim);
font-size: 28px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
transition: color 0.15s;
}
.pf-bulk-close:hover { color: var(--text-primary); }
.pf-bulk-body {
flex: 1;
overflow-y: auto;
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Selected-name chip strip */
.pf-bulk-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
max-height: 120px;
overflow-y: auto;
}
.pf-bulk-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 6px 3px 9px;
background: rgba(212, 168, 83, 0.08);
border: 1px solid rgba(212, 168, 83, 0.22);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-primary);
max-width: 100%;
}
.pf-bulk-chip-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 140px;
}
.pf-bulk-chip-remove {
background: none;
border: none;
color: var(--text-dim);
font-size: 14px;
line-height: 1;
cursor: pointer;
padding: 0 2px;
margin-left: 2px;
border-radius: 4px;
transition: color 0.12s;
}
.pf-bulk-chip-remove:hover { color: var(--red); }
.pf-bulk-chip-more {
display: inline-flex;
align-items: center;
padding: 3px 9px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
}
/* Action list */
.pf-bulk-section-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1.2px;
margin: 4px 0 -4px;
}
.pf-bulk-actions {
display: flex;
flex-direction: column;
gap: 6px;
}
.pf-bulk-action {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text-primary);
font-family: var(--font-body);
font-size: 13px;
cursor: pointer;
text-align: left;
transition: all 0.15s var(--ease-out);
}
.pf-bulk-action:hover:not(:disabled) {
border-color: var(--accent);
background: rgba(212, 168, 83, 0.06);
transform: translateX(-2px);
}
.pf-bulk-action:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pf-bulk-action-icon {
flex-shrink: 0;
width: 36px; height: 36px;
display: grid;
place-items: center;
border-radius: 8px;
background: rgba(212, 168, 83, 0.08);
color: var(--accent);
border: 1px solid rgba(212, 168, 83, 0.2);
}
.pf-bulk-action-icon svg { width: 16px; height: 16px; }
.pf-bulk-action-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.pf-bulk-action-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.pf-bulk-action-desc {
font-size: 11px;
color: var(--text-dim);
line-height: 1.35;
}
.pf-bulk-action-arrow {
flex-shrink: 0;
color: var(--text-dim);
transition: transform 0.15s, color 0.15s;
}
.pf-bulk-action:hover:not(:disabled) .pf-bulk-action-arrow {
color: var(--accent);
transform: translateX(3px);
}
.pf-bulk-action-note {
margin-left: auto;
font-size: 10px;
color: var(--text-dim);
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.6px;
padding-left: 8px;
}
.pf-bulk-footer {
padding: 12px 20px;
border-top: 1px solid var(--border);
background: var(--bg-elevated);
}
.pf-bulk-deselect {
width: 100%;
padding: 10px 12px;
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-secondary);
font-family: var(--font-body);
font-size: 12px;
cursor: pointer;
transition: all 0.15s;
}
.pf-bulk-deselect:hover {
border-color: var(--red);
color: var(--red);
}
/* Grid card selection checkbox overlay */
.pf-nc-check {
position: absolute;
top: 10px; right: 10px;
z-index: 3;
width: 24px; height: 24px;
display: grid;
place-items: center;
border-radius: 6px;
background: rgba(10, 10, 10, 0.72);
border: 1px solid rgba(255, 255, 255, 0.16);
cursor: pointer;
opacity: 0;
transform: scale(0.92);
transition: opacity 0.15s, transform 0.15s, border-color 0.15s, background 0.15s;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.pf-name-card:hover .pf-nc-check,
.pf-grid.pf-has-selection .pf-nc-check,
.pf-name-card.pf-card-selected .pf-nc-check {
opacity: 1;
transform: scale(1);
}
.pf-nc-check:hover {
border-color: var(--accent);
background: rgba(10, 10, 10, 0.88);
}
.pf-nc-check input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 14px; height: 14px;
border: 1.5px solid rgba(255, 255, 255, 0.55);
border-radius: 3px;
background: transparent;
cursor: pointer;
position: relative;
margin: 0;
padding: 0;
transition: all 0.12s;
}
.pf-nc-check input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
}
.pf-nc-check input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 3.5px;
top: 0.5px;
width: 4px;
height: 8px;
border: solid var(--bg);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
/* Highlight selected cards */
.pf-name-card.pf-card-selected {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(212, 168, 83, 0.18);
}
@media (max-width: 520px) {
.pf-bulk-panel {
top: auto;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
max-height: 50vh;
border-left: none;
border-top: 1px solid var(--border);
border-radius: 16px 16px 0 0;
transform: translateY(100%);
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
}
.pf-bulk-panel.visible { transform: translateY(0); }
.pf-bulk-header {
padding: 14px 16px 10px;
border-bottom: none;
background: transparent;
}
.pf-bulk-body { padding: 4px 16px 16px; gap: 10px; }
.pf-bulk-chips {
padding: 0;
background: transparent;
border: none;
border-radius: 0;
max-height: none;
overflow: visible;
}
.pf-bulk-footer { padding: 10px 16px; }
}
/* ── Portfolio Modals ─────────────────────────────────── */
.pf-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 500;
animation: fadeIn 0.15s;
}
.pf-modal {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px 32px;
width: 440px;
max-width: 90vw;
max-height: 80vh;
overflow-y: auto;
box-shadow: 0 16px 48px rgba(0,0,0,0.5);
animation: modalSlideUp 0.2s var(--ease-out);
}
@keyframes modalSlideUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Header */
.pf-modal-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.pf-modal-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: var(--accent-glow);
color: var(--accent);
flex-shrink: 0;
}
.pf-modal-icon svg { width: 20px; height: 20px; }
.pf-modal-close {
margin-left: auto;
background: none;
border: none;
color: var(--text-dim);
font-size: 22px;
cursor: pointer;
padding: 0 4px;
line-height: 1;
transition: color 0.15s;
flex-shrink: 0;
}
.pf-modal-close:hover { color: var(--text); }
.pf-modal-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--text);
margin-bottom: 0;
flex: 1;
}
.pf-modal-title.gradient {
background: linear-gradient(135deg, #f5d98a, var(--accent-bright), var(--accent), var(--accent-dim));
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 6s ease-in-out infinite;
filter: drop-shadow(0 0 10px rgba(212,168,83,0.25));
}
/* Step indicator */
.pf-modal-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 20px;
padding: 12px 0;
overflow: hidden;
}
.pf-modal-step {
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
min-width: 0;
}
.pf-modal-step-dot {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono);
transition: all 0.2s;
}
.pf-modal-step.pending .pf-modal-step-dot {
background: var(--surface);
color: var(--text-dim);
border: 1px solid var(--border);
}
.pf-modal-step.active .pf-modal-step-dot {
background: var(--accent);
color: #fff;
border: 1px solid var(--accent);
box-shadow: 0 0 12px var(--accent-glow-strong);
}
.pf-modal-step.completed .pf-modal-step-dot {
background: var(--green-dim);
color: var(--green);
border: 1px solid rgba(94, 230, 160, 0.3);
}
.pf-modal-step-label {
font-size: 10px;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.pf-modal-step.pending .pf-modal-step-label { color: var(--text-dim); }
.pf-modal-step.active .pf-modal-step-label { color: var(--accent); }
.pf-modal-step.completed .pf-modal-step-label { color: var(--green); }
.pf-modal-step-line {
flex: 1;
height: 1px;
background: var(--border);
margin: 0 6px;
min-width: 12px;
transition: background 0.2s;
}
.pf-modal-step-line.completed { background: var(--green); opacity: 0.4; }
/* Body */
.pf-modal-body { margin-bottom: 4px; }
/* Footer */
.pf-modal-footer {
padding: 12px 0;
border-top: 1px solid var(--border-subtle);
margin-bottom: 8px;
}
/* Cost row */
.pf-modal-cost-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: 13px;
}
.pf-modal-cost-row .cost-label { color: var(--text-secondary); }
.pf-modal-cost-row .cost-value { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.pf-modal-cost-row.total { border-top: 1px solid var(--border-subtle); padding-top: 8px; margin-top: 4px; }
.pf-modal-cost-row.total .cost-value { color: var(--accent); }
/* Warning box */
.pf-modal-warning {
background: rgba(240, 180, 60, 0.08);
border: 1px solid rgba(240, 180, 60, 0.2);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: 12px;
color: #e8b84b;
margin-bottom: 16px;
line-height: 1.5;
}
/* Success state */
.pf-modal-success {
text-align: center;
padding: 20px 0;
}
.pf-modal-success-icon {
margin-bottom: 16px;
}
.pf-modal-success-icon svg { width: 56px; height: 56px; }
.pf-check-circle { animation: checkCircle 0.4s var(--ease-out) forwards; stroke-dasharray: 150; stroke-dashoffset: 150; }
.pf-check-path { animation: checkDraw 0.3s 0.3s var(--ease-out) forwards; stroke-dasharray: 40; stroke-dashoffset: 40; }
@keyframes checkCircle { to { stroke-dashoffset: 0; } }
@keyframes checkDraw { to { stroke-dashoffset: 0; } }
.pf-modal-success-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
color: var(--green);
margin-bottom: 6px;
}
.pf-modal-success-msg {
font-size: 13px;
color: var(--text-secondary);
}
/* Error state */
.pf-modal-error {
text-align: center;
padding: 20px 0;
}
.pf-modal-error-icon { margin-bottom: 12px; }
.pf-modal-error-msg {
font-size: 13px;
color: var(--text-secondary);
max-width: 300px;
margin: 0 auto;
}
/* Segmented control */
.pf-modal-segmented {
display: flex;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.pf-modal-segmented button {
flex: 1;
padding: 8px 12px;
background: var(--surface);
border: none;
color: var(--text-dim);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
border-right: 1px solid var(--border);
}
.pf-modal-segmented button:last-child { border-right: none; }
.pf-modal-segmented button:hover { color: var(--text-secondary); }
.pf-modal-segmented button.active {
background: var(--accent-glow);
color: var(--accent);
}
/* Quick-pick chips */
.pf-modal-chips {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.pf-modal-chip {
padding: 5px 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
color: var(--text-secondary);
font-size: 11px;
font-family: var(--font-mono);
cursor: pointer;
transition: all 0.15s;
}
.pf-modal-chip:hover { border-color: var(--accent); color: var(--accent); }
.pf-modal-chip.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
/* Input overhaul */
/* Custom themed checkboxes for modal forms */
.pf-modal-field input[type="checkbox"],
.pf-modal input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 16px;
height: 16px;
min-width: 16px;
border: 1.5px solid var(--border);
border-radius: 3px;
background: var(--surface);
cursor: pointer;
display: inline-block;
vertical-align: middle;
position: relative;
transition: all 0.15s;
padding: 0;
}
.pf-modal-field input[type="checkbox"]:hover,
.pf-modal input[type="checkbox"]:hover {
border-color: var(--accent);
}
.pf-modal-field input[type="checkbox"]:checked,
.pf-modal input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
}
.pf-modal-field input[type="checkbox"]:checked::after,
.pf-modal input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4.5px;
top: 1.5px;
width: 4px;
height: 8px;
border: solid var(--bg);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.pf-modal-field input[type="checkbox"]:disabled,
.pf-modal input[type="checkbox"]:disabled {
opacity: 0.6;
cursor: default;
}
.pf-modal-field input[type="text"],
.pf-modal-field input[type="number"],
.pf-modal-field input[type="url"] {
width: 100%;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-family: var(--font-body);
font-size: 13px;
transition: border-color 0.15s, box-shadow 0.15s;
box-sizing: border-box;
}
.pf-modal-field input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.pf-modal-field input::placeholder { color: var(--text-dim); }
.pf-modal-desc {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 16px;
}
.pf-modal-names {
max-height: 120px;
overflow-y: auto;
margin-bottom: 16px;
padding: 8px 0;
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
}
.pf-modal-name {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
padding: 3px 0;
}
.pf-modal-field {
margin-bottom: 20px;
}
.pf-pricing-toggle {
margin-bottom: 12px;
}
.pf-modal-field label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-dim);
margin-bottom: 6px;
}
.pf-modal-field select {
width: 100%;
padding: 8px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-family: var(--font-body);
font-size: 13px;
}
.pf-modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.pf-modal-cancel {
padding: 8px 18px;
background: none;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
color: var(--text-dim);
font-size: 13px;
cursor: pointer;
transition: all 0.15s;
}
.pf-modal-cancel:hover { border-color: var(--text-dim); color: var(--text); }
.pf-modal-confirm {
padding: 8px 18px;
background: var(--accent);
border: none;
border-radius: var(--radius-pill);
color: #fff;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.pf-modal-confirm:hover { background: var(--accent-bright); }
.pf-modal-confirm:disabled { opacity: 0.5; cursor: not-allowed; }
/* ── Load More Button ────────────────────────────────── */
.pf-load-more {
text-align: center;
padding: 16px 0 8px;
}
.pf-load-more-btn {
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 12px;
padding: 8px 24px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.15s;
}
.pf-load-more-btn:hover {
border-color: var(--accent);
color: var(--accent);
}
.pf-load-more-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ── Activity Feed ───────────────────────────────────── */
.pf-activity-section {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
padding: 20px 24px;
margin-top: 16px;
}
.pf-activity-section .pf-table { width: 100%; }
.pf-activity-section .pf-table td,
.pf-activity-section .pf-table th { white-space: nowrap; }
.pf-tx-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 2px 8px;
border-radius: 4px;
min-width: 34px;
text-align: center;
}
.pf-tx-buy {
color: #ef6c6c;
background: rgba(239, 108, 108, 0.12);
}
.pf-tx-sell {
color: #6cdc96;
background: rgba(108, 220, 150, 0.12);
}
.pf-tx-reg {
color: #6cacf0;
background: rgba(108, 172, 240, 0.12);
}
/* Premium Dutch-auction / grace-period registrations — gold accent to
separate them from regular .eth base-rent registrations. */
.pf-tx-premium {
color: #f0c56c;
background: rgba(240, 197, 108, 0.12);
}
.pf-tx-renew {
color: #c89fef;
background: rgba(200, 159, 239, 0.12);
}
.pf-tx-self {
color: var(--text-dim);
background: rgba(155, 153, 168, 0.12);
}
/* ── Portfolio Responsive ──────────────────────────────── */
@media (max-width: 768px) {
.pf-summary {
grid-template-columns: repeat(2, 1fr);
}
.pf-stats-bar {
flex-wrap: wrap;
}
.pf-stat {
flex: 1 1 30%;
}
.pf-stat-sep {
display: none;
}
.pf-stat-group-sep {
display: none;
}
.pf-card-hero {
grid-column: 1 / -1;
}
.pf-loading-grid {
grid-template-columns: repeat(2, 1fr);
}
.pf-chart-wrap {
height: 180px;
}
.pf-summary-sm {
grid-template-columns: repeat(2, 1fr);
}
.pf-th-thumb, .pf-thumb-cell { display: none; }
.pf-th-cat, .pf-cat-cell { display: none; }
.pf-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pf-table { min-width: 580px; }
.pf-table td, .pf-table th { white-space: nowrap; }
}
@media (max-width: 480px) {
.pf-summary {
grid-template-columns: 1fr;
gap: 8px;
}
.pf-stats-bar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.pf-stat {
padding: 12px 14px;
}
/* Reg & Renewals row: divider only */
.pf-stat#pfRegCostCard,
.pf-stat#pfRenewalCostCard {
border-top: 1px solid color-mix(in srgb, var(--border-subtle) 60%, var(--accent) 15%);
}
.pf-stat-value {
font-size: 18px;
}
.pf-summary-sm {
grid-template-columns: 1fr;
gap: 8px;
}
.pf-card { padding: 14px 16px; }
.pf-card-hero .pf-card-value { font-size: 26px; }
.pf-intel-cards { grid-template-columns: repeat(2, 1fr); }
.pf-loading-grid { grid-template-columns: repeat(2, 1fr); }
.pf-chart-section, .pf-holdings-section { padding: 16px; }
.pf-table-wrap { margin: 0 -16px -16px; padding: 0 16px 16px; }
.pf-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.pf-nc-name { font-size: 11px; }
.pf-nc-row { font-size: 11px; }
.pf-chart-wrap { height: 160px; }
.pf-action-bar { padding: 8px 12px; gap: 6px; }
.pf-action-btn span { display: none; }
.pf-action-btn { gap: 0; padding: 7px 9px; }
.pf-action-divider { display: none; }
.pf-action-more-menu { right: 8px; }
/* Mobile bottom-sheet modals */
.pf-modal-overlay { align-items: flex-end; }
.pf-modal {
width: 100%;
max-width: 100vw;
border-radius: 16px 16px 0 0;
max-height: 85vh;
padding: 24px 20px;
animation: modalSheetUp 0.25s var(--ease-out);
}
@keyframes modalSheetUp {
from { opacity: 0; transform: translateY(100%); }
to { opacity: 1; transform: translateY(0); }
}
.pf-modal-steps { overflow-x: auto; flex-wrap: nowrap; }
.pf-modal-step-label { font-size: 9px; }
}
/* ═══════════════════════════════════════════════════════════════
EXPIRY CALENDAR MODE
═══════════════════════════════════════════════════════════════ */
.exp-calendar { animation: fadeUp 0.4s var(--ease-out); padding-top: 32px; }
/* Title */
.exp-title-row { padding: 8px 0; }
.exp-page-title {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--text);
}
.exp-page-title .hl { color: var(--red); }
.exp-page-subtitle {
font-size: 14px;
color: var(--text-dim);
margin-top: 6px;
line-height: 1.5;
}
/* Summary Cards */
.exp-summary-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin: 20px 0;
}
.exp-stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 18px 16px;
position: relative;
overflow: hidden;
transition: border-color 0.2s, background 0.2s;
}
.exp-stat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
}
.exp-stat-card:hover {
border-color: var(--border);
background: var(--surface2);
}
.exp-stat-card.urgent::before { background: linear-gradient(90deg, transparent, var(--red), transparent); }
.exp-stat-card.warning::before { background: linear-gradient(90deg, transparent, var(--orange), transparent); }
.exp-stat-card.grace::before { background: linear-gradient(90deg, transparent, var(--orange), transparent); }
.exp-stat-card.premium::before { background: linear-gradient(90deg, transparent, var(--red), transparent); }
.exp-stat-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 10px;
}
.exp-stat-value {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
letter-spacing: -0.5px;
}
.exp-stat-value.urgent { color: var(--red); }
.exp-stat-value.warning { color: var(--orange); }
.exp-stat-value.grace { color: var(--orange); }
.exp-stat-value.premium { color: var(--red); }
.exp-stat-detail {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
margin-top: 6px;
letter-spacing: 0.3px;
}
.exp-dict-count {
color: var(--green);
font-weight: 600;
}
/* Filter Bar */
.exp-filter-bar {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-bottom: 16px;
}
.exp-filter-group {
display: flex;
align-items: center;
gap: 2px;
}
.exp-filter-group-label {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1px;
margin-right: 6px;
white-space: nowrap;
}
.exp-filter-sep {
width: 1px;
height: 24px;
background: var(--border);
margin: 0 4px;
}
/* Tab buttons */
.exp-ftab {
background: transparent;
border: 1px solid transparent;
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
padding: 6px 12px;
border-radius: var(--radius-xs);
cursor: pointer;
transition: all 0.15s var(--ease-out);
letter-spacing: 0.3px;
white-space: nowrap;
}
.exp-ftab:hover {
color: var(--text-secondary);
background: rgba(255,255,255,0.03);
}
.exp-ftab.active {
color: var(--accent);
background: var(--accent-glow);
border-color: rgba(212,168,83,0.2);
}
/* Dropdowns */
.exp-filter-select {
background: var(--bg-elevated);
border: 1px solid var(--border);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 11px;
padding: 6px 28px 6px 10px;
border-radius: var(--radius-xs);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%235c5a6a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
transition: border-color 0.15s;
}
.exp-filter-select:hover { border-color: var(--accent-dim); }
.exp-filter-select:focus { border-color: var(--accent); outline: none; }
/* Toggle switch */
.exp-toggle-wrap {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.exp-toggle-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--text-dim);
letter-spacing: 0.5px;
white-space: nowrap;
user-select: none;
}
.exp-toggle-track {
width: 34px;
height: 18px;
background: var(--surface3);
border: 1px solid var(--border);
border-radius: 10px;
position: relative;
transition: all 0.2s var(--ease-out);
}
.exp-toggle-track::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 12px;
height: 12px;
background: var(--text-dim);
border-radius: 50%;
transition: all 0.2s var(--ease-out);
}
.exp-toggle-wrap.active .exp-toggle-track {
background: var(--green-dim);
border-color: rgba(94,230,160,0.3);
}
.exp-toggle-wrap.active .exp-toggle-track::after {
left: 18px;
background: var(--green);
}
/* Results Count */
.exp-results-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.exp-results-count {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0.5px;
}
.exp-results-count strong {
color: var(--accent);
font-weight: 600;
}
/* Results Table */
.exp-table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
}
.exp-table {
width: 100%;
border-collapse: collapse;
}
.exp-table th {
text-align: left;
padding: 12px 14px;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid var(--border);
background: var(--bg-elevated);
position: sticky;
top: 0;
z-index: 1;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: color 0.15s;
}
.exp-table th:hover { color: var(--accent); }
.exp-table th.sort-active { color: var(--accent); }
.exp-table th .sort-arrow {
font-size: 9px;
margin-left: 4px;
opacity: 0.3;
}
.exp-table th.sort-active .sort-arrow { opacity: 1; }
.exp-table td {
padding: 11px 14px;
font-size: 13px;
border-bottom: 1px solid var(--border-subtle);
vertical-align: middle;
}
.exp-table tbody tr {
transition: background 0.15s;
animation: rowFadeIn 0.3s var(--ease-out) both;
}
.exp-table tbody tr:hover { background: rgba(255,255,255,0.015); }
.exp-table tbody tr:last-child td { border-bottom: none; }
/* Name cell */
.exp-name-cell {
font-family: var(--font-mono);
font-weight: 600;
font-size: 13px;
}
.exp-name-cell .label { color: var(--text); }
.exp-name-cell .tld { color: var(--text-dim); font-weight: 400; }
/* Badges */
.exp-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--radius-xs);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.3px;
white-space: nowrap;
}
.exp-badge-letters { background: var(--blue-dim); border: 1px solid rgba(108,172,240,0.2); color: var(--blue); }
.exp-badge-numbers { background: var(--purple-dim); border: 1px solid rgba(176,140,240,0.2); color: var(--purple); }
.exp-badge-emoji { background: rgba(255,200,50,0.12); border: 1px solid rgba(255,200,50,0.2); color: #ffc832; }
.exp-badge-mixed { background: var(--surface3); border: 1px solid var(--border); color: var(--text-dim); }
/* Status badges */
.exp-status-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--radius-xs);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.exp-status-badge .dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.exp-status-active { background: var(--green-dim); color: var(--green); }
.exp-status-active .dot { background: var(--green); box-shadow: 0 0 6px rgba(94,230,160,0.5); }
.exp-status-grace { background: var(--orange-dim); color: var(--orange); }
.exp-status-grace .dot { background: var(--orange); box-shadow: 0 0 6px rgba(255,165,0,0.5); }
.exp-status-premium { background: var(--red-dim); color: var(--red); }
.exp-status-premium .dot { background: var(--red); box-shadow: 0 0 6px rgba(240,112,112,0.5); animation: pulse 2s ease-in-out infinite; }
/* Days cell */
.exp-days-cell {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
}
.exp-days-urgent { color: var(--red); }
.exp-days-soon { color: var(--orange); }
.exp-days-ok { color: var(--text-secondary); }
.exp-days-grace { color: var(--orange); }
/* Dict badge */
.exp-dict-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 4px;
font-size: 12px;
background: var(--green-dim);
border: 1px solid rgba(94,230,160,0.2);
color: var(--green);
}
/* Price cells */
.exp-price-premium { color: var(--red); font-family: var(--font-mono); font-size: 12px; }
.exp-price-listing { color: var(--accent); font-family: var(--font-mono); font-size: 12px; }
.exp-price-na { color: var(--text-dim); font-size: 11px; }
/* Length cell */
.exp-len-cell {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
text-align: center;
}
/* Collections cell */
.exp-collections-cell { max-width: 200px; }
.exp-coll-badge {
display: inline-flex;
padding: 1px 6px;
border-radius: 3px;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.3px;
background: var(--surface3);
border: 1px solid var(--border);
color: var(--text-dim);
margin: 1px 2px 1px 0;
}
/* Load More */
.exp-load-more-wrap {
display: flex;
justify-content: center;
padding: 24px 0;
}
.exp-btn-load-more {
background: linear-gradient(180deg, rgba(212,168,83,0.18) 0%, rgba(212,168,83,0.08) 100%);
border: 1px solid rgba(212,168,83,0.25);
border-radius: var(--radius-sm);
padding: 12px 32px;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
color: var(--accent-bright);
cursor: pointer;
transition: all 0.3s var(--ease-out);
letter-spacing: 0.5px;
}
.exp-btn-load-more:hover {
background: linear-gradient(180deg, rgba(212,168,83,0.25) 0%, rgba(212,168,83,0.12) 100%);
border-color: rgba(212,168,83,0.4);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(212,168,83,0.1);
}
.exp-btn-load-more:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}
/* Loading / Empty / Error */
.exp-loading-state {
display: none;
text-align: center;
padding: 60px 20px;
}
.exp-loading-state.visible { display: block; }
.exp-loading-spinner {
width: 32px;
height: 32px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
margin: 0 auto 16px;
animation: spin 0.8s linear infinite;
}
.exp-loading-text {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0.5px;
}
.exp-empty-state {
display: none;
text-align: center;
padding: 60px 20px;
color: var(--text-dim);
font-size: 14px;
}
.exp-empty-state.visible { display: block; }
.exp-error-msg {
display: none;
padding: 14px 18px;
background: var(--red-dim);
border: 1px solid rgba(240,112,112,0.25);
border-radius: var(--radius-sm);
color: var(--red);
font-size: 14px;
margin-bottom: 16px;
}
.exp-error-msg.visible { display: block; }
/* Responsive */
@media (max-width: 900px) {
.exp-summary-grid { grid-template-columns: repeat(2, 1fr); }
.exp-filter-bar { gap: 8px; }
.exp-calendar .col-collections,
.exp-calendar .col-listing,
.exp-calendar .col-social { display: none; }
}
@media (max-width: 600px) {
.exp-summary-grid { grid-template-columns: 1fr; }
.exp-page-title { font-size: 22px; }
.exp-stat-value { font-size: 24px; }
.exp-table th, .exp-table td { padding: 8px 8px; font-size: 12px; }
.exp-calendar .col-type,
.exp-calendar .col-dict,
.exp-calendar .col-premium,
.exp-calendar .col-collections,
.exp-calendar .col-listing,
.exp-calendar .col-social { display: none; }
.exp-filter-bar { padding: 10px 12px; }
}
/* ═══════════════════════════════════════════════════════════════
MARKETPLACE
═══════════════════════════════════════════════════════════════ */
.mp-container { max-width: 1400px; margin: 0 auto; overflow-x: hidden; }
/* ═══════════════════════════════════════════════════════════════
MARKETPLACE LANDING — Featured + Category Grid
═══════════════════════════════════════════════════════════════ */
.mp-landing { padding-top: 32px; animation: fadeUp 0.4s var(--ease-out); }
/* Featured trending categories */
.mp-landing-featured { margin-bottom: 28px; }
.mp-featured-header {
margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.mp-featured-title {
font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em;
color: var(--text-secondary); font-family: var(--font-mono); font-weight: 500;
}
.mp-featured-row {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.mp-featured-card {
background:
radial-gradient(ellipse 120% 80% at 20% 110%, rgba(212,168,83,0.14) 0%, transparent 60%),
radial-gradient(ellipse 80% 60% at 90% -10%, rgba(212,168,83,0.08) 0%, transparent 50%),
linear-gradient(160deg, rgba(19,18,15,0.9) 0%, var(--surface) 100%);
border: 1px solid rgba(212,168,83,0.15);
border-radius: var(--radius); padding: 22px 24px; cursor: pointer;
transition: all 0.25s var(--ease-out); position: relative; overflow: hidden;
}
.mp-featured-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0.5;
}
.mp-featured-card::after {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(212,168,83,0.04) 0%, transparent 70%);
opacity: 0; transition: opacity 0.3s;
pointer-events: none;
}
.mp-featured-card:hover {
border-color: rgba(212,168,83,0.3); transform: translateY(-3px);
box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 20px rgba(212,168,83,0.06);
}
.mp-featured-card:hover::after { opacity: 1; }
.mp-featured-name {
font-family: var(--font-display); font-size: 17px; font-weight: 600;
color: var(--text); margin-bottom: 6px;
}
.mp-featured-floor {
font-family: var(--font-mono); font-size: 22px; font-weight: 700;
color: var(--accent); margin-bottom: 14px;
}
.mp-featured-floor-label {
font-size: 10px; color: var(--text-dim); font-family: var(--font-mono);
text-transform: uppercase; letter-spacing: 0.06em; margin-left: 6px;
font-weight: 400;
}
.mp-featured-stats { display: flex; gap: 20px; }
.mp-featured-stat { display: flex; flex-direction: column; gap: 2px; }
.mp-featured-stat-val {
font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text);
}
.mp-featured-stat-label {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-dim); font-family: var(--font-mono);
}
.mp-trend-up { color: var(--green); }
.mp-trend-down { color: var(--red); }
/* Section headers */
.mp-section-header {
display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.mp-section-title {
font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em;
color: var(--text-secondary); font-family: var(--font-mono); font-weight: 500;
}
.mp-section-count {
font-size: 11px; color: var(--text-dim); font-family: var(--font-mono);
background: var(--surface2); padding: 2px 8px; border-radius: var(--radius-pill);
}
/* Landing controls */
.mp-landing-grid-section { }
.mp-landing-controls {
display: flex; gap: 12px; align-items: center; margin-bottom: 16px;
flex-wrap: wrap;
}
.mp-landing-search {
background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs);
color: var(--text); padding: 8px 12px; font-size: 13px; font-family: var(--font-body);
width: 200px; outline: none; transition: border-color 0.15s;
}
.mp-landing-search:focus { border-color: var(--accent-dim); }
.mp-landing-tabs {
display: flex; gap: 4px; flex-wrap: wrap; flex: 1;
overflow-x: auto; scrollbar-width: none;
}
.mp-landing-tabs::-webkit-scrollbar { display: none; }
.mp-landing-tab {
padding: 5px 12px; font-size: 12px; background: none;
border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
color: var(--text-dim); cursor: pointer; font-family: var(--font-body);
transition: all 0.15s; white-space: nowrap;
}
.mp-landing-tab:hover { border-color: var(--accent-dim); color: var(--text-secondary); }
.mp-landing-tab.active { background: var(--accent-glow); border-color: var(--accent-dim); color: var(--accent); }
/* Category grid */
.mp-landing-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
}
.mp-cat-card {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm); padding: 14px 16px 12px; cursor: pointer;
transition: all 0.2s var(--ease-out);
display: flex; flex-direction: column;
}
.mp-cat-card:hover { border-color: var(--accent-dim); transform: translateY(-1px); }
.mp-cat-card.inactive { opacity: 0.5; }
.mp-cat-card.mp-cat-hot { border-left: 3px solid var(--green); }
.mp-cat-card.mp-cat-cold { border-left: 3px solid var(--red); }
.mp-cat-spark { vertical-align: middle; margin-left: 6px; opacity: 0.8; }
.mp-cat-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mp-cat-card-name { font-size: 14px; font-weight: 600; color: var(--text); }
.mp-cat-card-group {
font-size: 10px; color: var(--text-dim); font-family: var(--font-mono);
text-transform: uppercase; letter-spacing: 0.05em;
}
.mp-cat-card-floor {
font-family: var(--font-mono); font-size: 15px; font-weight: 700;
color: var(--accent); margin-bottom: 8px;
}
.mp-cat-card-stats {
display: flex; gap: 12px; margin-bottom: 0; font-size: 12px; color: var(--text-secondary);
font-family: var(--font-mono);
}
.mp-cat-stat strong { color: var(--text); font-weight: 600; }
.mp-cat-card-footer {
margin-top: auto; padding-top: 10px;
}
.mp-cat-card-bar {
height: 3px; background: var(--surface3); border-radius: 2px;
margin-bottom: 6px; overflow: hidden;
}
.mp-cat-card-bar-fill {
height: 100%; border-radius: 2px;
background: linear-gradient(90deg, var(--accent-dim), var(--accent));
transition: width 0.4s var(--ease-out);
}
.mp-cat-card-count { font-size: 11px; color: var(--text-dim); }
/* ─── Best Deals Carousel ────────────────────────────────────── */
.mp-deals-carousel { margin-bottom: 28px; }
.mp-deals-carousel:empty { display: none; }
.mp-deal-overflow {
overflow: hidden; position: relative;
}
.mp-deal-track {
display: flex; gap: 12px; padding: 4px 0 12px;
animation: mp-deal-scroll 60s linear infinite;
width: max-content;
}
@keyframes mp-deal-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.mp-deal-card {
flex: 0 0 160px; background: var(--surface);
border-radius: 14px; cursor: pointer; overflow: hidden;
transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
box-shadow: 0 0 0 1px rgba(212, 168, 83, 0.25);
}
.mp-deal-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.3), 0 0 0 1px var(--accent-bright);
}
.mp-deal-artwork {
width: 100%; aspect-ratio: 1; background: var(--bg-elevated);
position: relative; overflow: hidden;
}
.mp-deal-artwork canvas {
width: 100% !important; height: 100% !important; border-radius: 0 !important;
}
.mp-deal-card { container-type: inline-size; }
.mp-deal-body { padding: 8px 12px 10px; }
.mp-deal-name {
font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;
}
.mp-deal-eth { color: var(--text-dim); font-weight: 400; }
.mp-deal-price {
font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent);
}
.mp-deal-cat {
font-size: 10px; color: var(--text-dim); font-family: var(--font-mono);
margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 768px) {
.mp-deal-card { flex: 0 0 140px; }
.mp-deal-name { font-size: 11px; }
.mp-deal-price { font-size: 12px; }
}
/* ═══════════════════════════════════════════════════════════════
CATEGORY VIEW — Hero + Filters + Gold Cards
═══════════════════════════════════════════════════════════════ */
.mp-category-view { padding-top: 32px; animation: fadeUp 0.4s var(--ease-out); }
.mp-cat-back { margin-bottom: 12px; }
.mp-back-btn {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: none; color: var(--accent);
font-size: 14px; cursor: pointer; padding: 4px 0;
font-family: var(--font-mono); font-weight: 600; transition: color 0.15s;
letter-spacing: 0.3px;
}
.mp-back-btn:hover { color: var(--accent-bright, #f5c542); }
/* Hero section */
.mp-hero {
margin-bottom: 16px;
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm); overflow: hidden;
}
.mp-hero-loading { padding: 30px; text-align: center; color: var(--text-dim); }
.mp-hero-inner { padding: 18px 24px; }
.mp-hero-title {
font-size: 18px; font-family: var(--font-display); font-weight: 600;
color: var(--text); margin-bottom: 16px;
}
.mp-hero-stats {
display: flex; gap: 0;
}
.mp-hero-stat {
padding: 0 24px 0 0; margin-right: 24px;
border-right: 1px solid var(--border-subtle);
}
.mp-hero-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.mp-hero-stat-label {
font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
color: var(--text-dim); font-family: var(--font-mono); margin-bottom: 5px;
}
.mp-hero-stat-value {
font-size: 18px; font-family: var(--font-mono); font-weight: 700; color: var(--text);
}
.mp-hero-accent { color: var(--accent); }
.mp-hero-up { color: var(--green); }
.mp-hero-down { color: var(--red); }
.mp-hero-neutral { color: var(--text-dim); }
.mp-hero-warn { color: var(--orange, #f97316); }
/* Contextual filters */
.mp-context-filters { margin-bottom: 16px; }
.mp-sibling-tabs {
display: flex; align-items: center; gap: 4px; margin-bottom: 10px;
flex-wrap: wrap; padding: 0 2px;
}
.mp-sibling-label {
font-size: 11px; color: var(--text-dim); font-family: var(--font-mono);
text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px;
}
.mp-sibling-tab {
padding: 4px 10px; font-size: 11px; background: var(--surface);
border: 1px solid var(--border-subtle); border-radius: var(--radius-xs);
color: var(--text-dim); cursor: pointer; font-family: var(--font-mono);
transition: all 0.15s; white-space: nowrap;
}
.mp-sibling-tab:hover { border-color: var(--accent-dim); color: var(--text-secondary); }
.mp-sibling-tab.active { background: var(--accent-glow); border-color: var(--accent-dim); color: var(--accent); }
.mp-filter-row {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
padding: 10px 14px; background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
}
.mp-ctx-search {
background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs);
color: var(--text); padding: 7px 12px; font-size: 13px; font-family: var(--font-body);
flex: 1; min-width: 140px; max-width: 280px; outline: none; transition: border-color 0.15s;
}
.mp-ctx-search:focus { border-color: var(--accent-dim); }
.mp-ctx-price { display: flex; align-items: center; gap: 4px; }
.mp-ctx-length { display: flex; align-items: center; gap: 4px; }
.mp-ctx-input {
background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs);
color: var(--text); padding: 7px 8px; font-size: 12px; font-family: var(--font-mono);
width: 80px; outline: none;
}
.mp-ctx-input:focus { border-color: var(--accent-dim); }
.mp-ctx-input-sm { width: 50px; }
.mp-ctx-sep { color: var(--text-dim); font-size: 12px; }
.mp-ctx-label { color: var(--text-dim); font-size: 11px; margin-left: 2px; }
.mp-ctx-trait {
padding: 6px 12px; font-size: 11px; background: var(--bg);
border: 1px solid var(--border); border-radius: var(--radius-xs);
color: var(--text-dim); cursor: pointer; font-family: var(--font-body);
transition: all 0.15s; white-space: nowrap;
}
.mp-ctx-trait:hover { color: var(--text-secondary); border-color: var(--border); }
.mp-ctx-trait.active { background: var(--accent-glow); border-color: var(--accent-dim); color: var(--accent); }
.mp-ctx-sort {
background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs);
color: var(--text-secondary); padding: 7px 8px; font-size: 12px;
font-family: var(--font-body); cursor: pointer; outline: none;
margin-left: auto;
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 8px center;
padding-right: 24px;
}
.mp-ctx-sort:hover { border-color: var(--accent-dim); }
.mp-ctx-sort option { background: var(--surface); color: var(--text); }
/* ─── Category Tab Bar ──────────────────────────────────────── */
.mp-tab-bar {
display: flex; gap: 4px; margin-bottom: 16px;
border-bottom: 1px solid var(--border-subtle); padding-bottom: 0;
}
.mp-tab {
padding: 8px 20px; font-size: 13px; font-family: var(--font-body);
background: none; border: none; border-bottom: 2px solid transparent;
color: var(--text-dim); cursor: pointer; transition: all 0.15s;
margin-bottom: -1px;
}
.mp-tab:hover { color: var(--text-secondary); }
.mp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.mp-tab-badge {
display: inline-block; background: var(--accent); color: var(--bg);
font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-pill);
font-family: var(--font-mono); vertical-align: middle; margin-left: 4px;
animation: pulse 2s ease-in-out infinite;
}
/* ─── Activity View ─────────────────────────────────────────── */
.mp-activity { }
.mp-act-chart {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm); padding: 16px 20px; margin-bottom: 16px;
}
.mp-act-chart-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
}
.mp-act-chart-label {
font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text); font-family: var(--font-mono);
font-weight: 700;
}
.mp-act-chart-toggle { display: flex; gap: 4px; }
.mp-chart-range {
background: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
padding: 2px 10px; font-size: 11px; font-family: var(--font-mono); color: var(--text-dim);
cursor: pointer; transition: all 0.15s;
}
.mp-chart-range:hover { color: var(--text); border-color: var(--text-dim); }
.mp-chart-range.active { color: var(--accent); border-color: var(--accent); background: rgba(212,168,83,0.1); }
.mp-sparkline { width: 100%; height: auto; }
.mp-activity-stats {
display: flex; gap: 12px; margin-bottom: 16px;
}
.mp-act-stat {
flex: 1; background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm); padding: 12px 16px; text-align: center;
}
.mp-act-stat-val {
font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--text);
display: block; margin-bottom: 2px;
}
.mp-act-stat-label {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-secondary); font-family: var(--font-mono);
}
.mp-act-section { margin-bottom: 20px; }
.mp-act-section-title {
font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text); font-family: var(--font-mono); margin-bottom: 10px;
font-weight: 700;
}
.mp-act-buyer { color: var(--text-dim); font-size: 12px; }
.mp-act-bottom {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.mp-act-buyers {
display: flex; flex-direction: column; gap: 6px;
}
.mp-act-buyer-card {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs); padding: 10px 14px;
display: flex; justify-content: space-between; align-items: center;
}
.mp-act-buyer-name {
font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text);
}
.mp-act-buyer-stats {
display: flex; gap: 12px; font-size: 12px; color: var(--text-dim); font-family: var(--font-mono);
}
.mp-act-buyer-link { cursor: pointer; transition: color 0.15s; }
.mp-act-buyer-link:hover { color: var(--accent); text-decoration: underline; }
.mp-act-buyer-clickable { cursor: pointer; transition: border-color 0.15s; }
.mp-act-buyer-clickable:hover { border-color: var(--accent-dim); }
.mp-act-buyer-clickable:hover .mp-act-buyer-name { color: var(--accent); }
.mp-act-buyer-arrow {
color: var(--text-dim); font-size: 14px; opacity: 0; transition: opacity 0.15s;
margin-left: 8px;
}
.mp-act-buyer-clickable:hover .mp-act-buyer-arrow { opacity: 1; color: var(--accent); }
.mp-act-ai-loading {
padding: 20px; text-align: center;
}
.mp-act-ai-shimmer {
color: var(--text-dim); font-size: 13px; font-style: italic;
animation: pulse 2s ease-in-out infinite;
}
.mp-act-ai-dim { color: var(--text-dim); font-size: 13px; }
.mp-act-ai-text {
font-size: 13px; color: var(--text-secondary); line-height: 1.6;
font-family: var(--font-body);
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm); padding: 16px 20px;
}
.mp-activity-loading { text-align: center; padding: 60px 0; }
.mp-load-more {
display: block; width: 100%; margin-top: 12px; padding: 10px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-xs); color: var(--text-secondary);
font-size: 13px; font-family: var(--font-body); cursor: pointer;
transition: all 0.15s;
}
.mp-load-more:hover { border-color: var(--accent-dim); color: var(--accent); }
.mp-load-more:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 768px) {
.mp-activity-stats { flex-wrap: wrap; }
.mp-act-stat { flex: 1 1 45%; }
.mp-act-bottom { grid-template-columns: 1fr; }
}
/* ─── Market Intelligence Bar ────────────────────────────────── */
.mp-intel {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
margin-bottom: 20px;
}
.mp-intel-loading {
display: flex; gap: 0; padding: 14px 0;
}
.mp-intel-skel {
flex: 1; padding: 0 20px;
border-right: 1px solid var(--border-subtle);
}
.mp-intel-skel:last-child { border-right: none; }
.mp-intel-skel .mp-skel-line {
height: 10px; border-radius: 3px; margin-bottom: 6px;
background: linear-gradient(90deg, var(--surface) 0%, var(--surface2) 40%, var(--surface3) 50%, var(--surface2) 60%, var(--surface) 100%);
background-size: 300% 100%; animation: skeletonShimmer 1.8s ease-in-out infinite;
}
.mp-intel-skel .mp-skel-line:last-child { margin-bottom: 0; }
.mp-intel-skel .mp-skel-line.w80 { width: 80%; }
.mp-intel-skel .mp-skel-line.w60 { width: 60%; }
.mp-intel-empty {
padding: 16px 20px; color: var(--text-dim); font-size: 13px;
font-family: var(--font-mono); font-style: italic;
}
.mp-intel-inner {
display: flex; align-items: stretch;
}
.mp-intel-segment {
flex: 1; padding: 14px 16px;
border-right: 1px solid var(--border-subtle);
cursor: pointer; transition: background 0.15s;
}
.mp-intel-segment:hover { background: rgba(255,255,255,0.03); }
.mp-intel-segment:last-child { border-right: none; }
.mp-intel-header {
display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.mp-intel-icon {
color: var(--accent); display: flex; align-items: center;
}
.mp-intel-icon svg { width: 12px; height: 12px; }
.mp-intel-label {
font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--accent); font-family: var(--font-mono); font-weight: 600;
}
.mp-intel-text {
font-size: 13px; color: var(--text-secondary); line-height: 1.5;
font-family: var(--font-body);
}
/* ─── View Toggle ────────────────────────────────────────────── */
.mp-view-toggle {
display: flex; gap: 2px; margin-left: auto;
background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs);
padding: 2px;
}
.mp-view-btn {
background: none; border: none; padding: 5px 8px; cursor: pointer;
color: var(--text-dim); border-radius: 4px; transition: all 0.15s;
display: flex; align-items: center; justify-content: center;
}
.mp-view-btn:hover { color: var(--text-secondary); }
.mp-view-btn.active { background: var(--surface2); color: var(--accent); }
.mp-view-btn svg { width: 14px; height: 14px; }
/* ─── Gold Card Grid ─────────────────────────────────────────── */
.mp-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
gap: 12px;
}
.mp-card {
background: var(--surface); border: 1px solid rgba(212, 168, 83, 0.25);
border-radius: 16px; cursor: pointer; overflow: hidden;
transition: all 0.25s var(--ease-out);
animation: cardReveal 0.4s var(--ease-out) both;
}
.mp-card:hover {
border-color: var(--accent-bright); transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px rgba(212,168,83,0.08);
}
.mp-card-artwork {
width: 100%; aspect-ratio: 1; border-radius: 0;
background: var(--bg-elevated);
position: relative; overflow: hidden;
}
.mp-card-artwork canvas {
width: 100% !important; height: 100% !important;
border-radius: 0 !important;
}
.mp-card { container-type: inline-size; }
/* Shared ENS artwork container — lets enhanceEnsArtwork() insert a real
![]()
+ name overlay on top of mp-card, mp-deal, and any future
consumers. Styled to match the portfolio .pf-nc-img / .pf-nc-name-overlay
pair so cards across the app read identically. */
.ens-card-img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* ENS diamond mark — drawn on top-left of the real-avatar image so the
card frames identically to the canvas fallback (which draws the mark
in the same spot via drawEnsCardFallback). Only applied when the
artwork container is holding a real ![]()
; the canvas path already
paints its own mark. Geometry matches the canvas: ~15% width, ~13%
left, ~9% top, 0.55 alpha, soft drop shadow. */
.pf-nc-artwork:has(> img.pf-nc-img)::before,
.mp-card-artwork:has(> img.ens-card-img)::before,
.mp-deal-artwork:has(> img.ens-card-img)::before,
.mp-expiry-artwork:has(> img.ens-card-img)::before {
content: "";
position: absolute;
top: 9cqi;
left: 13cqi;
width: 15cqi;
height: 15cqi;
background-image: url('/assets/ens-mark-gold.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: top left;
opacity: 0.55;
filter: drop-shadow(0 1.2cqi 3.6cqi rgba(0, 0, 0, 0.5));
pointer-events: none;
z-index: 1;
}
.ens-card-name-overlay {
position: absolute; inset: 0;
display: flex; align-items: flex-end;
padding: 0 8cqi 12cqi 13cqi;
font-family: "Space Grotesk", Arial, sans-serif;
font-weight: 700;
font-size: clamp(12px, 11cqi, 28px);
line-height: 1.1;
color: #eae8e4;
text-shadow:
0 3px 8px rgba(0, 0, 0, 0.34),
0 1px 2px rgba(0, 0, 0, 0.85),
0 0 4px rgba(0, 0, 0, 0.7);
white-space: nowrap;
overflow: hidden;
pointer-events: none;
letter-spacing: 0;
}
.mp-card-body { padding: 10px 14px 12px; }
.mp-card-name {
font-family: var(--font-mono); font-size: 13px; font-weight: 600;
color: var(--text); margin-bottom: 6px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-card-eth { color: var(--text-dim); font-weight: 400; }
.mp-card-info {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 4px;
}
.mp-card-info .mp-badge { font-size: 9px; padding: 1px 6px; }
.mp-card-price {
font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent);
}
.mp-card-offer {
font-size: 11px; color: var(--text-dim); font-family: var(--font-mono);
margin-bottom: 2px;
}
.mp-card-expiry { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
.mp-expiry-warn { color: var(--orange, #f97316); }
.mp-expiry-critical { color: var(--red); font-weight: 600; }
/* ─── Expiring Soon Section ──────────────────────────────────── */
.mp-expiring-section { margin-bottom: 20px; }
.mp-section-subtitle { font-size: 12px; color: var(--text-dim); margin-left: 8px; }
.mp-expiry-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.mp-expiry-card {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s;
}
.mp-expiry-card:hover { border-color: var(--orange, #f97316); box-shadow: 0 2px 12px rgba(249,115,22,0.15); }
.mp-expiry-artwork { aspect-ratio: 1; background: var(--bg); position: relative; overflow: hidden; }
.mp-expiry-artwork canvas { width: 100% !important; height: 100% !important; }
.mp-expiry-card { container-type: inline-size; }
.mp-expiry-body { padding: 8px 12px 10px; }
.mp-expiry-name {
font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.mp-expiry-price { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-bottom: 4px; }
.mp-expiry-countdown {
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}
.mp-expiry-countdown.critical { color: var(--red); }
.mp-expiry-countdown.warn { color: var(--orange, #f97316); }
.mp-expiry-countdown.soon { color: var(--text-dim); }
/* ─── Card Watch (Heart) Button ─────────────────────────────── */
.mp-card { position: relative; }
.mp-card-watch {
position: absolute; top: 8px; right: 8px; z-index: 2;
background: rgba(0,0,0,0.5); border: none; border-radius: 50%;
width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--text-dim); opacity: 0;
transition: opacity 0.15s, color 0.15s, background 0.15s;
backdrop-filter: blur(4px);
}
.mp-card-watch svg { width: 14px; height: 14px; }
.mp-card:hover .mp-card-watch { opacity: 1; }
.mp-card-watch:hover { color: var(--red); background: rgba(0,0,0,0.7); }
.mp-card-watch.watched { opacity: 1; color: var(--red); }
.mp-card-watch.watched svg { fill: currentColor; }
/* ─── Panel Watch Button ────────────────────────────────────── */
.np-header-actions { display: flex; align-items: center; gap: 8px; }
.np-watch-btn {
display: flex; align-items: center; gap: 5px;
background: none; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
padding: 4px 10px; cursor: pointer; color: var(--text-dim);
font-size: 12px; font-family: var(--font-body);
transition: color 0.15s, border-color 0.15s;
}
.np-watch-btn:hover { color: var(--red); border-color: var(--red); }
.np-watch-btn.watched { color: var(--red); border-color: rgba(240,80,80,0.4); }
.np-watch-btn.watched svg { fill: currentColor; }
/* ─── List View ──────────────────────────────────────────────── */
.mp-list-wrap {
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); overflow-x: auto;
}
.mp-list {
width: 100%; border-collapse: collapse;
}
.mp-list th {
padding: 10px 14px; font-family: var(--font-mono);
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text-dim); text-align: left; font-weight: 500;
background: var(--bg-elevated); border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
.mp-list td {
padding: 10px 14px; font-size: 13px; font-family: var(--font-mono);
border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary);
white-space: nowrap;
}
.mp-list tbody tr { cursor: pointer; transition: background 0.12s; }
.mp-list tbody tr:hover { background: rgba(255,255,255,0.02); }
.mp-list tbody tr:last-child td { border-bottom: none; }
.mp-list .mp-list-name { color: var(--text); font-weight: 600; }
.mp-list .mp-list-eth { color: var(--text-dim); font-weight: 400; }
.mp-list .mp-list-price { color: var(--accent); font-weight: 600; }
.mp-list .mp-list-unlisted { color: var(--text-dim); font-weight: 400; font-style: italic; }
.mp-list .mp-list-offer { color: var(--text-secondary); }
.mp-list .mp-list-expiry-warn { color: var(--orange, #f97316); }
.mp-list .mp-list-expiry-critical { color: var(--red); font-weight: 600; }
.mp-list .mp-badge { font-size: 9px; padding: 1px 6px; }
/* ─── Select Mode Toggle ──────────────────────────────────────── */
.mp-select-toggle {
display: flex; align-items: center; gap: 6px;
background: none; border: 1px solid var(--border); border-radius: var(--radius-xs);
padding: 5px 12px; cursor: pointer; font-size: 12px; font-family: var(--font-mono);
color: var(--text-dim); transition: all 0.2s; white-space: nowrap;
margin-left: auto;
}
.mp-select-toggle:hover { color: var(--text-secondary); border-color: var(--accent-dim); }
.mp-select-toggle.active {
background: var(--accent-glow); color: var(--accent); border-color: var(--accent-dim);
}
.mp-select-toggle svg { width: 13px; height: 13px; flex-shrink: 0; }
/* ─── Selected States ─────────────────────────────────────────── */
.mp-card.mp-card-selected {
border-color: var(--accent) !important;
box-shadow: 0 0 0 1px var(--accent), 0 4px 20px rgba(212,168,83,0.15);
transform: translateY(-2px);
}
.mp-card.mp-card-selected::after {
content: '';
position: absolute; top: 10px; right: 10px;
width: 22px; height: 22px; border-radius: 50%;
background: var(--accent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23131318'%3E%3Cpath d='M6.5 11.5L3 8l1-1 2.5 2.5 5-5 1 1z'/%3E%3C/svg%3E");
background-size: 14px; background-repeat: no-repeat; background-position: center;
z-index: 2; pointer-events: none;
animation: cartCheckPop 0.2s var(--ease-out);
}
.mp-card { position: relative; }
@keyframes cartCheckPop {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.2); }
100% { transform: scale(1); opacity: 1; }
}
.mp-list tbody tr.mp-row-selected {
background: rgba(212,168,83,0.06) !important;
box-shadow: inset 3px 0 0 var(--accent);
}
.mp-list tbody tr.mp-row-selected td:first-child { padding-left: 17px; }
/* ─── Cart Bar ────────────────────────────────────────────────── */
.mp-cart-bar {
position: fixed; bottom: 0; left: 50%; z-index: 800;
transform: translateX(-50%) translateY(100%);
width: min(680px, calc(100vw - 32px));
background: var(--bg-elevated); border: 1px solid var(--border);
border-bottom: none; border-radius: 16px 16px 0 0;
box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
transition: transform 0.35s var(--ease-out);
font-family: var(--font-mono);
}
.mp-cart-bar.visible { transform: translateX(-50%) translateY(0); }
.mp-cart-summary {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; cursor: pointer; user-select: none;
}
.mp-cart-count {
font-size: 13px; color: var(--text); font-weight: 600;
}
.mp-cart-total {
font-size: 13px; color: var(--accent); font-weight: 600;
}
.mp-cart-dot { color: var(--text-dim); font-size: 11px; }
.mp-cart-expand {
margin-left: auto; background: none; border: none; cursor: pointer;
color: var(--text-dim); padding: 4px; display: flex; transition: transform 0.2s;
}
.mp-cart-expand svg { width: 14px; height: 14px; }
.mp-cart-bar.expanded .mp-cart-expand { transform: rotate(180deg); }
.mp-cart-actions {
display: flex; gap: 8px; align-items: center;
}
.mp-cart-clear {
background: none; border: none; cursor: pointer;
color: var(--text-dim); font-size: 11px; font-family: var(--font-mono);
padding: 4px 8px; transition: color 0.15s;
}
.mp-cart-clear:hover { color: var(--red); }
.mp-cart-buy {
background: var(--accent); color: var(--bg); border: none;
padding: 8px 18px; border-radius: var(--radius-xs); cursor: pointer;
font-size: 12px; font-weight: 700; font-family: var(--font-mono);
transition: all 0.15s; letter-spacing: 0.02em;
}
.mp-cart-buy:hover { background: var(--accent-bright); }
.mp-cart-items {
max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease-out);
border-top: 1px solid transparent;
}
.mp-cart-bar.expanded .mp-cart-items {
max-height: 240px; overflow-y: auto;
border-top-color: var(--border-subtle);
}
.mp-cart-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 18px; font-size: 12px;
border-bottom: 1px solid var(--border-subtle);
}
.mp-cart-item:last-child { border-bottom: none; }
.mp-cart-item-name { color: var(--text); font-weight: 600; flex: 1; }
.mp-cart-item-eth { color: var(--text-dim); font-weight: 400; }
.mp-cart-item-price { color: var(--accent); font-weight: 600; min-width: 80px; text-align: right; }
.mp-cart-item-remove {
background: none; border: none; cursor: pointer;
color: var(--text-dim); padding: 2px 4px; font-size: 14px; line-height: 1;
transition: color 0.15s;
}
.mp-cart-item-remove:hover { color: var(--red); }
/* ─── Batch Buy Status (in trade panel) ───────────────────────── */
.tm-batch-list { margin: 12px 0; }
.tm-batch-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; font-size: 13px; font-family: var(--font-mono);
border-bottom: 1px solid var(--border-subtle);
}
.tm-batch-item:last-child { border-bottom: none; }
.tm-batch-item-name { color: var(--text); font-weight: 600; flex: 1; }
.tm-batch-item-price { color: var(--accent); min-width: 80px; text-align: right; }
.tm-batch-item-status {
width: 18px; height: 18px; flex-shrink: 0; display: flex;
align-items: center; justify-content: center;
}
.tm-batch-pending .tm-batch-item-status { color: var(--text-dim); }
.tm-batch-success .tm-batch-item-name { color: var(--green, #22c55e); }
.tm-batch-success .tm-batch-item-status { color: var(--green, #22c55e); }
.tm-batch-error .tm-batch-item-name { color: var(--red); text-decoration: line-through; }
.tm-batch-error .tm-batch-item-status { color: var(--red); }
/* ─── Loading & Empty ─────────────────────────────────────────── */
.mp-loading-grid { text-align: center; padding: 60px 0; color: var(--text-dim); }
.mp-skeleton-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px;
}
.mp-skeleton-card {
background: var(--surface); border: 1px solid var(--border-subtle);
border-radius: 16px; overflow: hidden;
}
.mp-skeleton-card .mp-skel-img {
width: 100%; aspect-ratio: 1;
background: linear-gradient(90deg, var(--surface) 0%, var(--surface2) 40%, var(--surface3) 50%, var(--surface2) 60%, var(--surface) 100%);
background-size: 300% 100%; animation: skeletonShimmer 1.8s ease-in-out infinite;
}
.mp-skeleton-card .mp-skel-body { padding: 10px 14px 12px; }
.mp-skeleton-card .mp-skel-line {
height: 12px; border-radius: 4px; margin-bottom: 8px;
background: linear-gradient(90deg, var(--surface) 0%, var(--surface2) 40%, var(--surface3) 50%, var(--surface2) 60%, var(--surface) 100%);
background-size: 300% 100%; animation: skeletonShimmer 1.8s ease-in-out infinite;
}
.mp-skeleton-card .mp-skel-line.w60 { width: 60%; }
.mp-skeleton-card .mp-skel-line.w40 { width: 40%; }
.mp-skeleton-card .mp-skel-line:last-child { margin-bottom: 0; }
.mp-skeleton-list {
border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.mp-skeleton-list .mp-skel-row {
display: flex; gap: 20px; padding: 12px 14px;
border-bottom: 1px solid var(--border-subtle);
}
.mp-skeleton-list .mp-skel-row:last-child { border-bottom: none; }
.mp-skeleton-list .mp-skel-cell {
height: 14px; border-radius: 4px; flex-shrink: 0;
background: linear-gradient(90deg, var(--surface) 0%, var(--surface2) 40%, var(--surface3) 50%, var(--surface2) 60%, var(--surface) 100%);
background-size: 300% 100%; animation: skeletonShimmer 1.8s ease-in-out infinite;
}
.mp-empty { text-align: center; padding: 60px 20px; }
.mp-empty-text { color: var(--text-dim); font-size: 15px; }
/* ─── Pagination ──────────────────────────────────────────────── */
.mp-pagination {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 0; margin-top: 8px;
}
.mp-page-info { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }
.mp-page-btns { display: flex; align-items: center; gap: 4px; }
.mp-page-btn {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xs);
color: var(--text-secondary); padding: 6px 12px; font-size: 12px; cursor: pointer;
transition: all 0.15s; font-family: var(--font-mono);
}
.mp-page-btn:hover { border-color: var(--accent-dim); color: var(--accent); }
.mp-page-btn.active { background: var(--accent-glow); border-color: var(--accent-dim); color: var(--accent); font-weight: 600; }
.mp-page-btn.mp-page-arrow { padding: 6px 10px; }
.mp-page-ellipsis { color: var(--text-dim); font-size: 12px; padding: 0 4px; font-family: var(--font-mono); }
/* ─── Marketplace Responsive ─────────────────────────────────── */
@media (max-width: 960px) {
.mp-hero-stats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px;
}
.mp-hero-stat { border-right: none; margin-right: 0; padding-right: 0; }
.mp-featured-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.mp-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
.mp-hero-stat-value { font-size: 15px; }
}
@media (max-width: 768px) {
.mp-intel-inner { flex-direction: column; }
.mp-intel-segment { border-right: none; border-bottom: 1px solid var(--border-subtle); padding: 12px 16px; }
.mp-intel-segment:last-child { border-bottom: none; }
.mp-landing-controls { flex-direction: column; align-items: stretch; }
.mp-landing-search { width: 100%; }
.mp-landing-tabs { order: -1; }
.mp-filter-row { flex-direction: column; align-items: stretch; }
.mp-ctx-search { width: 100%; }
.mp-ctx-price { width: 100%; }
.mp-ctx-sort { margin-left: 0; width: 100%; }
.mp-view-toggle { margin-left: 0; }
.mp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.mp-grid .mp-card-name { font-size: 11px; }
.mp-grid .mp-card-price { font-size: 11px; }
.mp-skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.mp-featured-row { grid-template-columns: 1fr; }
.mp-landing-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.mp-list .mp-col-marketplace,
.mp-list .mp-col-offer { display: none; }
.mp-primary-row { flex-wrap: wrap; }
.mp-search-input { width: 100%; }
.mp-drawer-inner { flex-direction: column; gap: 12px; }
.mp-chips-row { max-height: 64px; }
.name-panel { width: 100%; }
.mp-catpicker { width: 95vw; }
.mp-list-table .mp-list-colls { display: none; }
/* Category tabs: horizontal scroll on mobile */
.mp-landing-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; max-width: 100%; }
.mp-landing-tab { white-space: nowrap; flex-shrink: 0; }
/* Filter bar: keep sort + bulk select inline */
.mp-filter-row { gap: 6px; }
.mp-select-toggle { font-size: 11px; padding: 6px 10px; }
/* Cart bar: full width on mobile */
.mp-cart-bar { width: calc(100vw - 16px); }
.mp-cart-summary { padding: 10px 14px; gap: 8px; font-size: 12px; }
.mp-cart-count { font-size: 12px; }
.mp-cart-total { font-size: 12px; }
/* Category hero: compact padding */
.mp-hero-inner { padding: 14px 16px; }
.mp-hero-stat-label { font-size: 9px; }
/* Name panel: bottom sheet style on mobile */
.name-panel { border-radius: 16px 16px 0 0; max-height: 85vh; overflow-y: auto; }
.np-header { padding: 16px 16px 10px; }
.np-body { padding: 0 16px 16px; }
/* Tab bar: full width on mobile */
.mp-tab-bar { gap: 0; }
.mp-tab { flex: 1; text-align: center; }
/* Activity chart */
.mp-act-chart { padding: 12px; }
.mp-activity-stats { gap: 8px; }
.mp-act-stat { padding: 10px 8px; }
/* Back button */
.mp-cat-back { margin-bottom: 8px; }
/* Card watch button: always visible on mobile (no hover) */
.mp-card-watch { opacity: 0.7; }
}
@media (max-width: 480px) {
/* Cards: 2-column minimum */
.mp-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
.mp-card-body { padding: 8px 10px 10px; }
/* Landing grid: tighter */
.mp-landing-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mp-cat-card { padding: 10px; }
.mp-cat-card-name { font-size: 12px; }
/* Pagination compact */
.mp-page-btns { gap: 2px; }
.mp-page-btn { padding: 4px 8px; font-size: 11px; }
.mp-page-info { font-size: 11px; }
}
/* ═══════════════════════════════════════════════════════════════
NAME PANEL (Slide-out)
═══════════════════════════════════════════════════════════════ */
.name-panel-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 800;
opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.name-panel-overlay.open { opacity: 1; pointer-events: auto; }
.name-panel {
position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100vw;
background: var(--bg-elevated); border-left: 1px solid var(--border);
z-index: 810; transform: translateX(100%); transition: transform 0.3s var(--ease-out);
overflow-y: auto; overflow-x: hidden;
}
.name-panel.open { transform: translateX(0); }
.np-header {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 20px 12px; border-bottom: 1px solid var(--border-subtle);
position: sticky; top: 0; background: var(--bg-elevated); z-index: 1;
}
.np-name { font-family: var(--font-mono); font-size: 20px; font-weight: 600; }
.np-eth { color: var(--text-dim); font-weight: 400; }
.np-close { background: none; border: none; color: var(--text-dim); font-size: 28px; cursor: pointer; padding: 0; line-height: 1; }
.np-close:hover { color: var(--text); }
.np-body { padding: 16px 20px; }
.np-loading { text-align: center; padding: 40px 0; }
.np-error { color: var(--red); font-size: 13px; }
.np-price-block { margin-bottom: 16px; }
.np-price { font-family: var(--font-mono); font-size: 24px; color: var(--accent); font-weight: 600; }
.np-unlisted { color: var(--text-dim); font-size: 18px; }
.np-marketplace { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.np-offer-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.np-offer-label { font-size: 12px; color: var(--text-dim); }
.np-offer-val { font-family: var(--font-mono); font-size: 14px; color: var(--text-secondary); }
.np-deal { font-size: 12px; padding: 3px 10px; border-radius: var(--radius-xs); display: inline-block; margin-top: 6px; font-family: var(--font-mono); }
.np-deal-good { background: var(--green-dim); color: var(--green); }
.np-deal-above { background: var(--red-dim); color: var(--red); }
.np-btn-profile {
width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
font-size: 13px; font-weight: 500; cursor: pointer; text-align: center;
transition: all 0.15s; font-family: var(--font-body);
background: var(--surface); color: var(--text-secondary); margin-top: 16px;
}
.np-btn-profile:hover { border-color: var(--accent-dim); color: var(--accent); }
.np-collections { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.np-coll-badge {
font-size: 11px; padding: 3px 8px; border-radius: var(--radius-xs);
background: var(--blue-dim); color: var(--blue); cursor: pointer;
font-family: var(--font-mono); transition: opacity 0.15s;
}
.np-coll-badge:hover { opacity: 0.7; }
.np-traits { display: flex; gap: 4px; margin-bottom: 12px; }
.np-trait-pill {
font-size: 10px; padding: 2px 8px; border-radius: var(--radius-xs);
background: var(--purple-dim); color: var(--purple); font-family: var(--font-mono);
}
.np-section { margin-bottom: 16px; }
.np-section-label { font-size: 11px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; font-family: var(--font-mono); letter-spacing: 0.06em; }
.np-sales-table { width: 100%; border-collapse: collapse; }
.np-sales-table tr { border-bottom: 1px solid var(--border-subtle); }
.np-sales-table td { padding: 6px 0; font-size: 12px; }
.np-sale-price { font-family: var(--font-mono); color: var(--accent); }
.np-sale-mp { font-family: var(--font-mono); color: var(--text-dim); font-size: 10px; }
.np-sale-date { color: var(--text-dim); text-align: right; font-family: var(--font-mono); }
.np-owner { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.np-owner-label { font-size: 12px; color: var(--text-dim); }
.np-owner-addr { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.np-expiry { font-size: 12px; color: var(--text-dim); margin-bottom: 8px; }
.np-expiry-warn { color: var(--red); }
.np-full-profile { margin-top: 8px; }
/* ─── Bulk Check Enhancement ──────────────────────────── */
.bulk-check-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.bulk-check-header-actions {
display: flex;
gap: 8px;
align-items: center;
}
.bulk-check-summary {
font-family: var(--font-mono);
font-size: 14px;
color: var(--text-secondary);
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.bc-counts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bc-count-badge {
padding: 6px 12px;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
}
.bc-count-avail { background: var(--green-dim); color: var(--green); }
.bc-count-reg { background: var(--surface); color: var(--text-dim); border: 1px solid var(--border); }
.bc-count-exp { background: var(--red-dim); color: var(--red); }
.bulk-csv-btn {
padding: 8px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-pill);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 12px;
cursor: pointer;
transition: all 0.15s;
}
.bulk-csv-btn:hover { border-color: var(--accent); color: var(--text); }
.bulk-check-actions {
display: flex;
justify-content: center;
margin-top: 16px;
}
/* Bulk check table */
.bc-table-wrap {
overflow-x: auto;
margin-bottom: 16px;
}
.bc-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
font-family: var(--font-mono);
}
.bc-table thead th {
text-align: left;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-dim);
padding: 8px 10px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.bc-table tbody tr {
cursor: pointer;
transition: background 0.1s;
}
.bc-table tbody tr:hover { background: var(--surface); }
.bc-table td {
padding: 8px 6px;
border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
white-space: nowrap;
color: var(--text-secondary);
font-size: 11px;
}
.bc-table thead th {
padding: 8px 6px;
}
.bc-name { color: var(--text); font-weight: 600; font-size: 12px; }
.bc-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.3px;
}
.bc-badge.bc-avail { background: rgba(34,197,94,0.15); color: var(--green, #22c55e); }
.bc-badge.bc-grace { background: rgba(240,112,112,0.15); color: var(--red, #f07070); }
.bc-badge.bc-expired { background: rgba(240,112,112,0.1); color: var(--text-dim); }
.bc-badge:not(.bc-avail):not(.bc-grace):not(.bc-expired) { background: rgba(155,153,168,0.1); color: var(--text-dim); }
.bc-tag {
display: inline-block;
padding: 1px 6px;
border-radius: 6px;
font-size: 9px;
background: var(--surface);
color: var(--text-dim);
margin-right: 3px;
}
.bc-row.bc-avail .bc-name { color: var(--green); }
.bc-owner { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.bc-action { text-align: right; white-space: nowrap; }
.bc-link {
color: inherit;
text-decoration: none;
transition: color 0.15s;
}
.bc-link:hover { color: var(--accent-bright); }
.bc-name .bc-link { color: var(--text); }
.bc-row.bc-avail .bc-name .bc-link { color: var(--green); }
.bulk-register-btn {
padding: 8px 20px;
background: var(--accent);
border: none;
border-radius: var(--radius-pill);
color: #fff;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.bulk-register-btn:hover { background: var(--accent-bright); }
.bc-register-selected { background: var(--green-dim); color: var(--green); border: 1px solid rgba(94,230,160,0.3); }
.bc-register-selected:hover { background: rgba(94,230,160,0.2); }
.st-register-btn {
margin-top: 0;
padding: 4px 10px;
background: var(--accent);
border: none;
border-radius: var(--radius-pill);
color: #fff;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.st-register-btn:hover { background: var(--accent-bright); }
/* Bulk check row selection */
.bc-select-cell { width: 32px; text-align: center; }
.bc-row-selected { background: var(--accent-glow) !important; }
/* Custom themed checkboxes for bulk check table */
.bc-select-cell input[type="checkbox"],
.bc-table thead th input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border: 1.5px solid var(--border);
border-radius: 3px;
background: var(--surface);
cursor: pointer;
display: inline-block;
vertical-align: middle;
position: relative;
transition: all 0.15s;
}
.bc-select-cell input[type="checkbox"]:hover,
.bc-table thead th input[type="checkbox"]:hover {
border-color: var(--accent);
}
.bc-select-cell input[type="checkbox"]:checked,
.bc-table thead th input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
}
.bc-select-cell input[type="checkbox"]:checked::after,
.bc-table thead th input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4.5px;
top: 1.5px;
width: 4px;
height: 8px;
border: solid var(--bg);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.bc-view-link {
font-size: 11px;
color: var(--text-dim);
text-decoration: none;
transition: color 0.15s;
}
.bc-view-link:hover { color: var(--accent); }
.bc-name-text { font-weight: 600; }
@media (max-width: 600px) {
.bc-hide-mobile { display: none; }
}
/* ─── Available Name Card ─────────────────────────────── */
.np-nft-available {
border: 2px dashed rgba(34, 197, 94, 0.3);
background: linear-gradient(135deg, #1a2332, #0d1520);
}
.np-nft-available .np-nft-fallback {
align-items: center;
justify-content: center;
}
.np-nft-available .np-nft-canvas {
width: 100%;
height: 100%;
object-fit: contain;
}
.np-register-cta {
padding: 20px;
display: flex;
justify-content: center;
}
.btn-register-now {
padding: 14px 40px;
background: linear-gradient(135deg, #22c55e, #16a34a);
border: none;
border-radius: var(--radius-pill);
color: #fff;
font-family: var(--font-mono);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
letter-spacing: 0.3px;
}
.btn-register-now:hover {
filter: brightness(1.1);
transform: translateY(-1px);
box-shadow: 0 4px 20px rgba(34, 197, 94, 0.3);
}
/* ─── Registration Duration Picker ────────────────────── */
.tm-duration-picker {
margin: 16px 0 8px;
}
.tm-duration-picker > label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-dim);
margin-bottom: 8px;
font-family: var(--font-mono);
}
.tm-duration-controls {
display: flex;
gap: 8px;
}
.tm-duration-controls input {
flex: 0 0 80px;
padding: 10px 12px;
background: var(--bg-secondary, rgba(255,255,255,0.05));
border: 1px solid var(--border);
border-radius: var(--radius, 8px);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 15px;
font-weight: 600;
text-align: center;
}
.tm-duration-controls input:focus {
outline: none;
border-color: var(--accent);
}
.tm-duration-controls select {
flex: 1;
padding: 10px 12px;
background: var(--bg-secondary, rgba(255,255,255,0.05));
border: 1px solid var(--border);
border-radius: var(--radius, 8px);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 14px;
cursor: pointer;
}
.tm-duration-controls select:focus {
outline: none;
border-color: var(--accent);
}
.tm-duration-presets {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.tm-preset {
padding: 6px 12px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 11px;
cursor: pointer;
transition: all 0.15s;
}
.tm-preset:hover {
border-color: var(--accent);
color: var(--text-primary);
}
.tm-preset.selected {
border-color: var(--green, #22c55e);
background: rgba(34, 197, 94, 0.1);
color: var(--green, #22c55e);
}
.tm-register-form .tm-row.total {
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.tm-duration-hint {
margin-top: 8px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
opacity: 0.8;
}
/* ─── Registration Flow (pre-flight explainer card) ───── */
.tm-reg-flow {
margin-top: 16px;
padding: 14px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--border);
border-radius: var(--radius, 8px);
}
.tm-reg-flow-title {
font-family: var(--font-mono);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-dim);
margin-bottom: 12px;
}
.tm-reg-flow-steps {
display: flex;
flex-direction: column;
gap: 10px;
}
.tm-reg-flow-step {
display: flex;
gap: 12px;
align-items: flex-start;
}
.tm-reg-flow-num {
flex: 0 0 24px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(34, 197, 94, 0.12);
border: 1px solid rgba(34, 197, 94, 0.35);
color: var(--green, #22c55e);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
}
.tm-reg-flow-num-wait {
background: rgba(234, 179, 8, 0.12);
border-color: rgba(234, 179, 8, 0.4);
color: #eab308;
}
.tm-reg-flow-label {
font-family: var(--font-mono);
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
.tm-reg-flow-sub {
margin-top: 2px;
font-size: 11px;
color: var(--text-dim);
line-height: 1.4;
}
.tm-reg-flow-wait .tm-reg-flow-label {
color: #eab308;
}
/* ─── Registration Progress (during sign/wait/sign flow) ─── */
.tm-reg-progress {
display: flex;
flex-direction: column;
gap: 14px;
padding: 4px 2px;
}
.tm-reg-progress-name {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
text-align: center;
margin-bottom: 4px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.tm-reg-progress-step {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px;
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--border);
border-radius: var(--radius, 8px);
transition: all 0.2s ease;
}
.tm-reg-progress-icon {
flex: 0 0 36px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--border);
color: var(--text-dim);
font-family: var(--font-mono);
font-size: 15px;
font-weight: 700;
}
.tm-reg-progress-body {
flex: 1;
min-width: 0;
}
.tm-reg-progress-label {
font-family: var(--font-mono);
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
.tm-reg-progress-sub {
margin-top: 4px;
font-size: 12px;
color: var(--text-dim);
line-height: 1.45;
}
/* Step states */
.tm-reg-step-pending {
opacity: 0.55;
}
.tm-reg-step-active {
border-color: rgba(34, 197, 94, 0.55);
background: rgba(34, 197, 94, 0.06);
box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.25) inset, 0 0 24px rgba(34, 197, 94, 0.08);
}
.tm-reg-step-active .tm-reg-progress-icon {
background: rgba(34, 197, 94, 0.18);
border-color: rgba(34, 197, 94, 0.55);
color: var(--green, #22c55e);
animation: tm-reg-pulse 1.6s ease-in-out infinite;
}
.tm-reg-step-done {
opacity: 0.9;
}
.tm-reg-step-done .tm-reg-progress-icon {
background: rgba(34, 197, 94, 0.15);
border-color: rgba(34, 197, 94, 0.5);
color: var(--green, #22c55e);
}
.tm-reg-step-done .tm-reg-progress-label {
color: var(--green, #22c55e);
}
.tm-reg-step-error {
border-color: rgba(239, 68, 68, 0.5);
}
@keyframes tm-reg-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35); }
50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
/* Waiting step override — uses amber */
.tm-reg-progress-wait.tm-reg-step-active {
border-color: rgba(234, 179, 8, 0.55);
background: rgba(234, 179, 8, 0.06);
box-shadow: 0 0 0 1px rgba(234, 179, 8, 0.25) inset, 0 0 24px rgba(234, 179, 8, 0.1);
}
.tm-reg-progress-wait.tm-reg-step-active .tm-reg-progress-icon {
background: rgba(234, 179, 8, 0.18);
border-color: rgba(234, 179, 8, 0.55);
color: #eab308;
animation: tm-reg-pulse-wait 1.6s ease-in-out infinite;
}
.tm-reg-progress-wait.tm-reg-step-active .tm-reg-progress-label {
color: #eab308;
}
@keyframes tm-reg-pulse-wait {
0%, 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4); }
50% { box-shadow: 0 0 0 6px rgba(234, 179, 8, 0); }
}
.tm-reg-countdown {
display: inline-block;
min-width: 2.2em;
padding: 0 6px;
font-variant-numeric: tabular-nums;
font-weight: 700;
color: #eab308;
}
.tm-reg-progress-bar {
margin-top: 10px;
height: 5px;
background: rgba(234, 179, 8, 0.12);
border-radius: 999px;
overflow: hidden;
}
.tm-reg-progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, #eab308, #facc15);
border-radius: 999px;
transition: width 0.95s linear;
box-shadow: 0 0 12px rgba(234, 179, 8, 0.5);
}
/* ─── Tools Page ──────────────────────────────────────── */
.tools-page {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.tools-page-title {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
}
.tools-page-desc {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 32px;
}
/* Horizontal side-by-side layout: terminal hero + sidebar tools */
.tools-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 20px;
align-items: start;
}
.tools-terminal {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
}
.tools-sidebar {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.tools-sidebar .tool-card {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
}
.tools-sidebar .tool-card-icon {
font-size: 20px;
margin-bottom: 0;
flex-shrink: 0;
}
.tools-sidebar .tool-card-title {
margin-bottom: 0;
}
.tool-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
cursor: pointer;
transition: all 0.2s;
}
.tool-card:hover {
border-color: var(--accent);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.tool-card.active {
border-color: var(--accent);
background: var(--surface-hover, var(--surface));
transform: none;
box-shadow: 0 0 0 1px var(--accent);
}
.tool-card-icon {
font-size: 24px;
margin-bottom: 8px;
}
.tool-card-title {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
}
.tool-card-desc {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
/* ─── Tool form panel (swaps with terminal in main column) ─── */
.tools-main {
min-width: 0;
}
.tool-form-panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
}
.tool-expand-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.tool-expand-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.tool-expand-header-left .tool-card-icon {
margin-bottom: 0;
font-size: 28px;
}
.tool-expand-header-left .tool-card-title {
font-size: 20px;
margin-bottom: 0;
}
.tool-expand-desc {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 20px;
line-height: 1.5;
}
.tool-expand-close {
background: none;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-dim);
font-size: 16px;
cursor: pointer;
padding: 4px 10px;
line-height: 1;
transition: all 0.15s;
}
.tool-expand-close:hover { color: var(--text); border-color: var(--accent); }
.tool-textarea {
width: 100%;
min-height: 120px;
padding: 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-family: var(--font-mono);
font-size: 13px;
resize: vertical;
}
.tool-textarea::placeholder { color: var(--text-dim); }
.tool-btn {
margin-top: 12px;
padding: 10px 24px;
background: var(--accent);
border: none;
border-radius: var(--radius-pill);
color: #fff;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
}
.tool-btn:hover { background: var(--accent-bright); }
.tool-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.tool-results {
margin-top: 16px;
}
.tool-input {
width: 100%;
padding: 8px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-family: var(--font-mono);
font-size: 13px;
margin-bottom: 10px;
}
.tool-input::placeholder { color: var(--text-dim); }
.tool-field-label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-dim);
margin-bottom: 6px;
}
.tool-terminal-iframe {
width: 100%;
height: 520px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--bg);
margin-top: 16px;
}
@media (max-width: 900px) {
.tools-layout { grid-template-columns: 1fr; }
.tools-sidebar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.tools-sidebar { grid-template-columns: 1fr; }
.tools-page { padding: 24px 12px; }
.tools-page-title { font-size: 22px; }
.tool-terminal-iframe { height: 400px; }
.tool-form-panel { padding: 16px; }
}
/* ─── Bulk register — names list inside trade panel ───── */
.tm-bulk-names {
max-height: 180px;
overflow-y: auto;
border: 1px solid var(--border);
border-radius: 8px;
background: rgba(255, 255, 255, 0.015);
margin-bottom: 14px;
}
.tm-bulk-name {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 12px;
font-size: 13px;
border-bottom: 1px solid var(--border-subtle);
}
.tm-bulk-name:last-child { border-bottom: none; }
.tm-bulk-name-label {
font-family: var(--font-mono);
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tm-bulk-name-price {
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent);
flex-shrink: 0;
}
/* ─── Celebration Modal (post-register / post-buy) ─────── */
.nw-celebrate-overlay {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(ellipse 60% 45% at 50% 40%, rgba(212,168,83,0.18) 0%, transparent 60%),
rgba(4, 4, 8, 0.78);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
animation: nwCelebrateFadeIn 0.22s var(--ease-out);
overflow: hidden;
padding: 20px;
}
.nw-celebrate-overlay.nw-celebrate-closing {
animation: nwCelebrateFadeOut 0.18s ease forwards;
}
@keyframes nwCelebrateFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes nwCelebrateFadeOut { to { opacity: 0; } }
.nw-celebrate-confetti {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.nw-celebrate-confetti i {
position: absolute;
top: -6%;
display: block;
opacity: 0;
will-change: transform, opacity;
box-shadow: 0 0 6px rgba(0,0,0,0.25);
}
@keyframes nwConfettiFall {
0% { opacity: 0; transform: translate3d(0, -20px, 0) rotate(0deg); }
10% { opacity: 1; }
100% { opacity: 0; transform: translate3d(var(--nw-sway, 0), 105vh, 0) rotate(720deg); }
}
.nw-celebrate-card {
position: relative;
width: min(460px, 92vw);
padding: 40px 32px 28px;
background: linear-gradient(180deg, #141419 0%, #0c0c10 100%);
border: 1px solid rgba(212, 168, 83, 0.28);
border-radius: 18px;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.02) inset,
0 0 60px rgba(212, 168, 83, 0.12);
text-align: center;
animation: nwCelebratePop 0.5s var(--ease-spring);
overflow: hidden;
}
.nw-celebrate-card::before {
content: '';
position: absolute;
top: -1px; left: -1px; right: -1px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
opacity: 0.7;
}
.nw-celebrate-card::after {
content: '';
position: absolute;
inset: -40%;
background: radial-gradient(circle at 50% 0%, rgba(212,168,83,0.18), transparent 55%);
pointer-events: none;
z-index: 0;
}
.nw-celebrate-card > * { position: relative; z-index: 1; }
@keyframes nwCelebratePop {
0% { opacity: 0; transform: scale(0.9) translateY(8px); }
60% { opacity: 1; transform: scale(1.02) translateY(0); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
.nw-celebrate-close {
position: absolute;
top: 12px; right: 14px;
background: none;
border: none;
color: var(--text-dim);
font-size: 24px;
line-height: 1;
cursor: pointer;
padding: 4px 8px;
transition: color 0.15s;
z-index: 2;
}
.nw-celebrate-close:hover { color: var(--text); }
.nw-celebrate-art {
display: flex;
justify-content: center;
margin-bottom: 22px;
animation: nwCelebrateArt 0.6s 0.05s var(--ease-spring) both;
}
.nw-celebrate-art .np-nft-wrap {
width: 180px;
height: 180px;
border-radius: 18px;
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(212, 168, 83, 0.28),
0 0 40px rgba(212, 168, 83, 0.18);
}
.nw-celebrate-art .np-nft-fallback { border-radius: 18px; }
@keyframes nwCelebrateArt {
from { opacity: 0; transform: translateY(-8px) scale(0.92); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.nw-celebrate-badge {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 14px;
border-radius: 100px;
background: var(--green-dim);
border: 1px solid rgba(94, 230, 160, 0.3);
color: var(--green);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 1.6px;
margin-bottom: 22px;
animation: nwCelebrateBadge 0.6s 0.1s var(--ease-spring) both;
}
@keyframes nwCelebrateBadge {
from { opacity: 0; transform: translateY(-6px) scale(0.9); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.nw-celebrate-name {
font-family: var(--font-display);
font-size: clamp(28px, 7vw, 38px);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.5px;
color: var(--accent-bright);
word-break: break-all;
text-shadow: 0 0 30px rgba(212, 168, 83, 0.35);
margin-bottom: 14px;
animation: nwCelebrateName 0.7s 0.15s var(--ease-out) both;
}
@keyframes nwCelebrateName {
from { opacity: 0; transform: translateY(10px) scale(0.96); filter: blur(4px); }
to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.nw-celebrate-meta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
letter-spacing: 0.3px;
margin-bottom: 12px;
padding: 6px 14px;
border: 1px solid var(--border);
border-radius: 100px;
background: rgba(255, 255, 255, 0.02);
}
.nw-celebrate-meta i {
width: 3px; height: 3px;
background: var(--text-dim);
border-radius: 50%;
display: inline-block;
}
.nw-celebrate-meta span { font-style: normal; }
.nw-celebrate-sub {
font-size: 13px;
color: var(--text-secondary);
margin-bottom: 24px;
line-height: 1.5;
}
.nw-celebrate-actions {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 14px;
}
.nw-celebrate-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: all 0.15s var(--ease-out);
}
.nw-celebrate-btn:hover {
background: var(--surface2);
border-color: var(--text-dim);
transform: translateY(-1px);
}
.nw-celebrate-btn-primary {
background: linear-gradient(180deg, var(--accent-bright) 0%, var(--accent) 100%);
border-color: var(--accent);
color: #1a1408;
font-weight: 600;
box-shadow: 0 4px 16px rgba(212, 168, 83, 0.25);
}
.nw-celebrate-btn-primary:hover {
background: linear-gradient(180deg, #f5d57f 0%, var(--accent-bright) 100%);
color: #1a1408;
box-shadow: 0 6px 20px rgba(212, 168, 83, 0.35);
}
.nw-celebrate-btn-ghost {
background: transparent;
color: var(--text-dim);
}
.nw-celebrate-btn-ghost:hover { color: var(--text-secondary); background: var(--surface); }
.nw-celebrate-etherscan {
display: inline-block;
margin-top: 4px;
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-dim);
text-decoration: none;
letter-spacing: 0.4px;
transition: color 0.15s;
}
.nw-celebrate-etherscan:hover { color: var(--accent); }
@media (max-width: 520px) {
.nw-celebrate-card { padding: 32px 20px 22px; }
.nw-celebrate-actions { flex-direction: column; align-items: stretch; }
.nw-celebrate-btn { justify-content: center; }
}
/* ────────────────────────────────────────────────────────────
Portfolio: Holdings | Offers Received | Offers Made tabs
Sits above the holdings grid; switching swaps which mount
point renders (no re-fetch).
──────────────────────────────────────────────────────────── */
.pf-tabs {
display: flex;
gap: 4px;
margin: 20px 0 14px;
padding: 4px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
width: fit-content;
}
.pf-tab {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: transparent;
border: none;
border-radius: 6px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--text-dim);
cursor: pointer;
transition: color 0.15s, background 0.15s;
}
.pf-tab:hover { color: var(--text); }
.pf-tab.active {
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
}
.pf-tab-count {
font-family: var(--font-mono);
font-size: 11px;
color: inherit;
opacity: 0.75;
}
.pf-tab.active .pf-tab-count { opacity: 1; }
.pf-tab-dot {
display: inline-block;
width: 6px;
height: 6px;
background: var(--accent);
border-radius: 50%;
box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent);
}
@media (max-width: 520px) {
.pf-tabs { width: 100%; }
.pf-tab { flex: 1; justify-content: center; padding: 8px 6px; font-size: 12px; }
}
/* ── Clickable Offer row on grid card ───────────────────────
The offer amount itself is the affordance — clicking jumps to the
Offers Received tab and flashes the matching row. No extra button
chrome on the card so the dashboard stays readable when many names
carry bids. */
.pf-nc-offer-clickable {
cursor: pointer;
border-radius: 4px;
margin: 0 -4px;
padding: 0 4px;
transition: background 0.15s;
}
.pf-nc-offer-clickable:hover {
background: color-mix(in srgb, var(--green, #69db7c) 12%, transparent);
}
/* ── Flash animation for the offer card we just jumped to ──── */
@keyframes pf-offer-flash {
0% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--green, #69db7c) 90%, transparent), 0 0 18px color-mix(in srgb, var(--green, #69db7c) 50%, transparent); }
100% { box-shadow: 0 0 0 1px transparent, 0 0 0 transparent; }
}
.pf-offer-card-flash {
animation: pf-offer-flash 1.6s ease-out;
}
/* ── Offers Received / Offers Made panels ──────────────────── */
.pf-offers-section {
margin: 4px 0 28px;
}
.pf-offers-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.pf-offers-empty {
padding: 48px 24px;
text-align: center;
background: var(--bg-elevated);
border: 1px dashed var(--border-subtle);
border-radius: var(--radius);
}
.pf-offers-empty-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.pf-offers-empty-desc {
font-family: var(--font-body);
font-size: 13px;
color: var(--text-dim);
max-width: 420px;
margin: 0 auto;
}
.pf-offer-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius);
transition: border-color 0.15s;
}
.pf-offer-card:hover { border-color: var(--border); }
.pf-offer-name {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
cursor: pointer;
}
.pf-offer-name-label {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
color: var(--text);
}
.pf-offer-name-label .pf-tld { color: var(--text-dim); font-weight: 400; }
.pf-offer-mp {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--text-dim);
background: var(--bg);
border: 1px solid var(--border-subtle);
border-radius: 3px;
padding: 2px 6px;
}
/* Footnote on cards where the same logical bid is also live on another
marketplace (dual-order pattern). Small + dim so it's visible context but
doesn't compete with the canonical NW marketplace badge. */
.pf-offer-also {
font-family: var(--font-body);
font-size: 11px;
color: var(--text-dim);
font-style: italic;
}
.pf-offer-meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.pf-offer-meta-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-mono);
font-size: 12px;
}
.pf-offer-meta-row .dim { color: var(--text-dim); }
.pf-offer-price {
color: var(--green, #69db7c);
font-weight: 600;
}
.pf-offer-actions {
display: flex;
gap: 8px;
margin-top: 4px;
}
.pf-offer-accept {
flex: 1;
padding: 9px 12px;
background: var(--green, #69db7c);
color: var(--bg);
border: none;
border-radius: 6px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: filter 0.15s;
}
.pf-offer-accept:hover { filter: brightness(1.1); }
.pf-offer-cancel {
flex: 1;
padding: 9px 12px;
background: transparent;
color: var(--red, #ff6b6b);
border: 1px solid color-mix(in srgb, var(--red, #ff6b6b) 40%, transparent);
border-radius: 6px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s;
}
.pf-offer-cancel:hover {
background: color-mix(in srgb, var(--red, #ff6b6b) 12%, transparent);
}
.pf-offer-view {
padding: 9px 14px;
background: transparent;
color: var(--text-dim);
border: 1px solid var(--border-subtle);
border-radius: 6px;
font-family: var(--font-body);
font-size: 13px;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.pf-offer-view:hover { border-color: var(--accent); color: var(--accent); }