/* ABCT Portfolio Tracker - Styles */ /*=============================================================================== THEME SYSTEM Themes are applied via data-theme attribute on element. Default theme is applied when no data-theme is set. ===============================================================================*/ /* Dark Mode Theme - Original dark blue (default) */ :root, [data-theme="dark-mode"] { --bg-primary: #1a1a2e; --bg-secondary: #16213e; --bg-card: #0f3460; --text-primary: #eaeaea; --text-secondary: #a0a0a0; --accent-cardano: #0033ad; --accent-bitcoin: #f7931a; --accent-ethereum: #627eea; --accent-success: #00d26a; --accent-error: #ff6b6b; --border-color: #2a2a4a; --chart-line: #00d26a; --chart-fill: rgba(0, 210, 106, 0.1); --gradient-card: linear-gradient(135deg, #1e3a5f 0%, #0f3460 50%, #1a1a2e 100%); --gradient-header: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-card) 100%); } /* Light Mode Theme - Clean white/light palette */ [data-theme="light"] { --bg-primary: #ffffff; --bg-secondary: #f5f7fa; --bg-card: #ffffff; --text-primary: #1a1a2e; --text-secondary: #6b7280; --accent-cardano: #0052cc; --accent-bitcoin: #f7931a; --accent-ethereum: #627eea; --accent-success: #00b894; --accent-error: #d63031; --border-color: #e5e7eb; --chart-line: #00b894; --chart-fill: rgba(0, 184, 148, 0.1); --gradient-card: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); --gradient-header: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%); } /* Ocean Depths Theme - Deep blue oceanic palette */ [data-theme="ocean-depths"] { --bg-primary: #0a1628; --bg-secondary: #0d2137; --bg-card: #102a45; --text-primary: #e0f4ff; --text-secondary: #7ec8e3; --accent-cardano: #00b4d8; --accent-bitcoin: #ffd166; --accent-ethereum: #48cae4; --accent-success: #06d6a0; --accent-error: #ef476f; --border-color: #1a4a6e; --chart-line: #00b4d8; --chart-fill: rgba(0, 180, 216, 0.15); --gradient-card: linear-gradient(135deg, #0d2137 0%, #1a4a6e 50%, #0a1628 100%); --gradient-header: linear-gradient(135deg, #0d2137 0%, #102a45 100%); } /* Sunset Horizon Theme - Warm orange/purple sunset palette */ [data-theme="sunset-horizon"] { --bg-primary: #1a0a1a; --bg-secondary: #2d1233; --bg-card: #3d1a42; --text-primary: #ffe4e1; --text-secondary: #ffb4a2; --accent-cardano: #ff6b35; --accent-bitcoin: #ffc145; --accent-ethereum: #ff8c42; --accent-success: #06d6a0; --accent-error: #ff3366; --border-color: #5c2a5c; --chart-line: #ff6b35; --chart-fill: rgba(255, 107, 53, 0.15); --gradient-card: linear-gradient(135deg, #2d1233 0%, #5c2a5c 50%, #1a0a1a 100%); --gradient-header: linear-gradient(135deg, #2d1233 0%, #3d1a42 100%); } /* Cypherpunk 1 Theme - Neon cyberpunk palette */ [data-theme="cypherpunk1"] { --bg-primary: #030308; --bg-secondary: #08081a; --bg-card: #0c0c24; --text-primary: #e0f0ff; --text-secondary: #8ec8ff; --accent-cardano: #d946ef; --accent-bitcoin: #00d4ff; --accent-ethereum: #00d4ff; --accent-success: #00d4ff; --accent-error: #d946ef; --border-color: #7c3aed; --chart-line: #00d4ff; --chart-fill: rgba(0, 212, 255, 0.12); --gradient-card: linear-gradient(135deg, #0c0024 0%, #1a0a3a 50%, #030308 100%); --gradient-header: linear-gradient(135deg, #08081a 0%, #1a0a3a 100%); } /* Cypherpunk 1 specific overrides for neon glow effects */ /* Title Glow Effect */ [data-theme="cypherpunk1"] header h1 { background: linear-gradient(135deg, #00d4ff 0%, #d946ef 50%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.8)) drop-shadow(0 0 40px rgba(234, 0, 217, 0.6)); animation: titleGlow 3s ease-in-out infinite alternate; } @keyframes titleGlow { 0% { filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.8)) drop-shadow(0 0 40px rgba(234, 0, 217, 0.4)); } 100% { filter: drop-shadow(0 0 30px rgba(234, 0, 217, 0.8)) drop-shadow(0 0 50px rgba(0, 212, 255, 0.6)); } } /* Glassmorphism Base - Vibrant Glassy Effect */ [data-theme="cypherpunk1"] .total-portfolio-card { background: linear-gradient(135deg, rgba(12, 0, 36, 0.9) 0%, rgba(20, 8, 50, 0.8) 50%, rgba(3, 3, 8, 0.95) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 0 30px rgba(0, 212, 255, 0.3), 0 0 60px rgba(124, 58, 237, 0.2), 0 0 100px rgba(217, 70, 239, 0.1), inset 0 1px 0 rgba(0, 212, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.3); border: 1px solid rgba(0, 212, 255, 0.3); } [data-theme="cypherpunk1"] .total-value { text-shadow: 0 0 30px rgba(0, 212, 255, 1), 0 0 60px rgba(0, 212, 255, 0.5); } [data-theme="cypherpunk1"] .top-holding-item { background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.2); } [data-theme="cypherpunk1"] .portfolio-card-right { border-left-color: rgba(124, 58, 237, 0.3); } [data-theme="cypherpunk1"] .portfolio-divider { background: rgba(124, 58, 237, 0.3); } /* Glassy Summary Cards */ [data-theme="cypherpunk1"] .summary-card { background: linear-gradient(135deg, rgba(18, 18, 42, 0.8) 0%, rgba(26, 10, 46, 0.7) 100%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 0 25px rgba(124, 58, 237, 0.5), 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); border: 1px solid rgba(124, 58, 237, 0.5); } [data-theme="cypherpunk1"] .summary-card.cardano { border-top-color: #d946ef; } [data-theme="cypherpunk1"] .wallet-item.cardano { border-left-color: #d946ef; } [data-theme="cypherpunk1"] .summary-card.solana { border-top-color: #00d4ff; } [data-theme="cypherpunk1"] .wallet-item.solana { border-left-color: #00d4ff; } [data-theme="cypherpunk1"] .summary-card.base { border-top-color: #00d4ff; } [data-theme="cypherpunk1"] .wallet-item.base { border-left-color: #00d4ff; } [data-theme="cypherpunk1"] .chain-tab.active { background-color: #00d4ff; border-color: #00d4ff; color: #030308; } /* Cache indicator */ .cache-indicator { font-size: 0.75rem; color: var(--text-muted); opacity: 0.7; } [data-theme="cypherpunk1"] .btn-primary { background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%); box-shadow: 0 0 15px rgba(0, 212, 255, 0.3); } [data-theme="cypherpunk1"] .btn-primary:hover { background: linear-gradient(135deg, #7c3aed 0%, #d946ef 100%); box-shadow: 0 0 25px rgba(217, 70, 239, 0.5); } [data-theme="cypherpunk1"] .btn-refresh-small { border-color: rgba(0, 212, 255, 0.5); } [data-theme="cypherpunk1"] .btn-refresh-small:hover { background-color: rgba(0, 212, 255, 0.2); box-shadow: 0 0 10px rgba(0, 212, 255, 0.3); } [data-theme="cypherpunk1"] .btn-privacy.active { background-color: #00d4ff; border-color: #00d4ff; } [data-theme="cypherpunk1"] .toggle-option.active { background-color: #7c3aed; box-shadow: 0 0 10px rgba(124, 58, 237, 0.5); } [data-theme="cypherpunk1"] .range-btn.active { background-color: #00d4ff; border-color: #00d4ff; color: #030308; box-shadow: 0 0 10px rgba(0, 212, 255, 0.5); } [data-theme="cypherpunk1"] .source-tab.active { background-color: #00d4ff; border-color: #00d4ff; color: #030308; box-shadow: 0 0 10px rgba(0, 212, 255, 0.5); } /* Glassy Staking Cards */ [data-theme="cypherpunk1"] .staking-card { background: linear-gradient(135deg, rgba(10, 26, 36, 0.8) 0%, rgba(18, 18, 42, 0.75) 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-left: 3px solid #00d4ff; border-top: 1px solid rgba(0, 212, 255, 0.3); border-right: 1px solid rgba(0, 212, 255, 0.3); border-bottom: 1px solid rgba(0, 212, 255, 0.3); box-shadow: 0 0 25px rgba(0, 212, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Glassy NFT Collections */ [data-theme="cypherpunk1"] .nft-collection { background: linear-gradient(135deg, rgba(12, 0, 36, 0.8) 0%, rgba(8, 8, 26, 0.75) 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-left: 3px solid #d946ef; border-top: 1px solid rgba(217, 70, 239, 0.25); border-right: 1px solid rgba(217, 70, 239, 0.25); border-bottom: 1px solid rgba(217, 70, 239, 0.25); box-shadow: 0 0 20px rgba(217, 70, 239, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* Glassy Wallet Items */ [data-theme="cypherpunk1"] .wallet-item { background: linear-gradient(135deg, rgba(18, 18, 42, 0.6) 0%, rgba(10, 10, 26, 0.7) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Glassy DeFi Cards */ [data-theme="cypherpunk1"] .defi-protocol { background: linear-gradient(135deg, rgba(26, 10, 46, 0.75) 0%, rgba(18, 18, 42, 0.7) 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(124, 58, 237, 0.4); box-shadow: 0 0 18px rgba(124, 58, 237, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* Glassy Token Cards */ [data-theme="cypherpunk1"] .token-card, [data-theme="cypherpunk1"] .asset-item { background: linear-gradient(135deg, rgba(18, 18, 42, 0.7) 0%, rgba(10, 10, 26, 0.75) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(124, 58, 237, 0.3); box-shadow: 0 0 12px rgba(124, 58, 237, 0.2); } [data-theme="cypherpunk1"] header { border-bottom: 1px solid rgba(0, 212, 255, 0.2); box-shadow: 0 2px 20px rgba(0, 212, 255, 0.1); } [data-theme="cypherpunk1"] footer { border-top: 1px solid rgba(124, 58, 237, 0.2); box-shadow: 0 -2px 20px rgba(124, 58, 237, 0.1); } /* Glassy Chart Container */ [data-theme="cypherpunk1"] .history-chart-container { background: linear-gradient(180deg, rgba(3, 3, 8, 0.9) 0%, rgba(8, 8, 26, 0.85) 100%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(0, 212, 255, 0.2); box-shadow: 0 0 30px rgba(0, 212, 255, 0.15), 0 0 60px rgba(124, 58, 237, 0.1), inset 0 0 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(0, 212, 255, 0.05); } /* Glassy Section Headers */ [data-theme="cypherpunk1"] .collapsible-section .section-header { background: linear-gradient(135deg, rgba(18, 18, 42, 0.75) 0%, rgba(26, 10, 46, 0.65) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(124, 58, 237, 0.4); box-shadow: 0 0 15px rgba(124, 58, 237, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05); } [data-theme="cypherpunk1"] .collapsible-section .section-header:hover { background: linear-gradient(135deg, rgba(26, 10, 46, 0.85) 0%, rgba(45, 27, 78, 0.7) 100%); box-shadow: 0 0 25px rgba(234, 0, 217, 0.4); } /* Glassy Wallet Groups */ [data-theme="cypherpunk1"] .wallet-group { background: linear-gradient(135deg, rgba(18, 18, 42, 0.8) 0%, rgba(10, 10, 26, 0.85) 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(124, 58, 237, 0.4); box-shadow: 0 0 20px rgba(124, 58, 237, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); } [data-theme="cypherpunk1"] .wallet-group-header { background: linear-gradient(135deg, rgba(26, 10, 46, 0.6) 0%, rgba(18, 18, 42, 0.5) 100%); } [data-theme="cypherpunk1"] .wallet-group-header:hover { background: linear-gradient(135deg, rgba(45, 27, 78, 0.7) 0%, rgba(26, 10, 46, 0.6) 100%); } /* Glassy Exchange Section */ [data-theme="cypherpunk1"] .exchange-section { background: linear-gradient(135deg, rgba(10, 26, 36, 0.8) 0%, rgba(18, 18, 42, 0.75) 100%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(0, 212, 255, 0.4); box-shadow: 0 0 20px rgba(0, 212, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /*=============================================================================== CYPHER THEME - Minimal pure black aesthetic ===============================================================================*/ /* Cypher Theme Variables */ [data-theme="cypher"] { --bg-primary: #000000; --bg-secondary: #0a0a0a; --bg-card: #141414; --bg-hover: #1a1a1a; --text-primary: #ffffff; --text-secondary: #a0a0a0; --text-muted: #666666; --accent-cardano: #3b82f6; --accent-bitcoin: #f7931a; --accent-ethereum: #627eea; --accent-success: #00d26a; --accent-error: #ef4444; --border-color: #2a2a2a; --chart-line: #a855f7; --chart-fill: rgba(168, 85, 247, 0.05); --gradient-card: linear-gradient(135deg, #141414 0%, #0a0a0a 100%); --gradient-header: linear-gradient(135deg, #0a0a0a 0%, #141414 100%); } /* Cypher - Header */ [data-theme="cypher"] header { background: #141414; border: 1px solid #2a2a2a; border-radius: 16px; } [data-theme="cypher"] header h1 { color: #ffffff; } /* Cypher - Total Portfolio Card */ [data-theme="cypher"] .total-portfolio-card { background: #141414; border: 1px solid #2a2a2a; } [data-theme="cypher"] .total-value { color: #ffffff; } [data-theme="cypher"] .top-holding-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="cypher"] .portfolio-card-right { border-left-color: rgba(255, 255, 255, 0.08); } [data-theme="cypher"] .portfolio-divider { background: rgba(255, 255, 255, 0.08); } /* Cypher - Summary Cards */ [data-theme="cypher"] .summary-card { background: #141414; border: 1px solid #2a2a2a; } [data-theme="cypher"] .summary-card:hover { background: #1a1a1a; } /* Cypher - Section Headers */ [data-theme="cypher"] .collapsible-section .section-header { background: #141414; border: 1px solid #2a2a2a; } [data-theme="cypher"] .collapsible-section .section-header:hover { background: #1a1a1a; } /* Cypher - Wallet Groups */ [data-theme="cypher"] .wallet-group { background: #141414; border: 1px solid #2a2a2a; } [data-theme="cypher"] .wallet-group-header { background: #0a0a0a; } [data-theme="cypher"] .wallet-group-header:hover { background: #1a1a1a; } /* Cypher - Wallet Items */ [data-theme="cypher"] .wallet-item { background: #0a0a0a; } /* Cypher - Staking Cards */ [data-theme="cypher"] .staking-card { background: #141414; border: 1px solid #2a2a2a; } /* Cypher - Exchange Section */ [data-theme="cypher"] .exchange-section { background: #141414; border: 1px solid #2a2a2a; } /* Cypher - DeFi Cards */ [data-theme="cypher"] .defi-protocol { background: #141414; border: 1px solid #2a2a2a; } /* Cypher - NFT Collections */ [data-theme="cypher"] .nft-collection { background: #141414; border: 1px solid #2a2a2a; } /* Cypher - Token Cards */ [data-theme="cypher"] .token-card, [data-theme="cypher"] .asset-item { background: #0a0a0a; border: 1px solid #2a2a2a; } /* Cypher - Chart Container */ [data-theme="cypher"] .history-chart-container { background: #0a0a0a; border: 1px solid #2a2a2a; } /* Cypher - Buttons */ [data-theme="cypher"] .btn-primary { background: #ffffff; color: #000000; border: none; } [data-theme="cypher"] .btn-primary:hover { background: #e0e0e0; } [data-theme="cypher"] .btn-privacy.active { background: #ffffff; color: #000000; border-color: #ffffff; } /* Cypher - Range/Toggle Buttons */ [data-theme="cypher"] .toggle-option.active { background-color: #ffffff; color: #000000; } [data-theme="cypher"] .range-btn.active { background-color: #ffffff; color: #000000; border-color: #ffffff; } /* Cypher - Modals */ [data-theme="cypher"] .modal-content { background: #141414; border: 1px solid #2a2a2a; } /* Cypher - Tables */ [data-theme="cypher"] table { background: #141414; } [data-theme="cypher"] table tr:nth-child(even) { background: #0a0a0a; } [data-theme="cypher"] table tr:nth-child(odd) { background: #141414; } [data-theme="cypher"] table th { background: #0a0a0a; border-bottom: 1px solid #2a2a2a; } /* Cypher - Inputs */ [data-theme="cypher"] input, [data-theme="cypher"] select, [data-theme="cypher"] textarea { background: #0a0a0a; border: 1px solid #2a2a2a; color: #ffffff; } /* Cypher - Footer */ [data-theme="cypher"] footer { border-top: 1px solid #2a2a2a; } /* Cypher - Chain Count Badges */ [data-theme="cypher"] .chain-count { background: #1a1a1a; border: 1px solid #2a2a2a; } /* Cypher - Metric Cards */ [data-theme="cypher"] .metric-card { background: #0a0a0a; border: 1px solid #2a2a2a; } /* Cypher - Breakdown Stats */ [data-theme="cypher"] .breakdown-stats .stat { background: #0a0a0a; border: 1px solid #2a2a2a; } /*=============================================================================== CYPHER2 THEME - Black + subtle gloss/translucency ===============================================================================*/ [data-theme="cypher2"] { --bg-primary: #000000; --bg-secondary: #0a0a0a; --bg-card: #141414; --bg-hover: #1a1a1a; --text-primary: #ffffff; --text-secondary: #a0a0a0; --text-muted: #666666; --accent-cardano: #3b82f6; --accent-bitcoin: #f7931a; --accent-ethereum: #627eea; --accent-success: #00d26a; --accent-error: #ef4444; --border-color: #2a2a2a; --chart-line: #a855f7; --chart-fill: rgba(168, 85, 247, 0.05); --gradient-card: linear-gradient(135deg, rgba(20,20,20,0.9) 0%, rgba(10,10,10,0.95) 100%); --gradient-header: linear-gradient(135deg, rgba(10,10,10,0.9) 0%, rgba(20,20,20,0.95) 100%); } [data-theme="cypher2"] header { background: rgba(20, 20, 20, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="cypher2"] header h1 { color: #ffffff; } [data-theme="cypher2"] .total-portfolio-card { background: rgba(20, 20, 20, 0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="cypher2"] .total-value { color: #ffffff; } [data-theme="cypher2"] .top-holding-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="cypher2"] .portfolio-card-right { border-left-color: rgba(255, 255, 255, 0.06); } [data-theme="cypher2"] .portfolio-divider { background: rgba(255, 255, 255, 0.06); } [data-theme="cypher2"] .summary-card { background: rgba(20, 20, 20, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } [data-theme="cypher2"] .summary-card:hover { background: rgba(30, 30, 30, 0.75); border-color: rgba(255, 255, 255, 0.1); } [data-theme="cypher2"] .collapsible-section .section-header { background: rgba(20, 20, 20, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } [data-theme="cypher2"] .collapsible-section .section-header:hover { background: rgba(30, 30, 30, 0.75); border-color: rgba(255, 255, 255, 0.1); } [data-theme="cypher2"] .wallet-group { background: rgba(20, 20, 20, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } [data-theme="cypher2"] .wallet-group-header { background: rgba(10, 10, 10, 0.6); } [data-theme="cypher2"] .wallet-group-header:hover { background: rgba(30, 30, 30, 0.7); } [data-theme="cypher2"] .wallet-item { background: rgba(10, 10, 10, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="cypher2"] .staking-card { background: rgba(20, 20, 20, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } [data-theme="cypher2"] .exchange-section { background: rgba(20, 20, 20, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } [data-theme="cypher2"] .defi-protocol { background: rgba(20, 20, 20, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } [data-theme="cypher2"] .nft-collection { background: rgba(20, 20, 20, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } [data-theme="cypher2"] .token-card, [data-theme="cypher2"] .asset-item { background: rgba(10, 10, 10, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.05); } [data-theme="cypher2"] .history-chart-container { background: rgba(10, 10, 10, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); } [data-theme="cypher2"] .btn-primary { background: #ffffff; color: #000000; border: none; } [data-theme="cypher2"] .btn-primary:hover { background: #e0e0e0; } [data-theme="cypher2"] .btn-privacy.active { background: #ffffff; color: #000000; border-color: #ffffff; } [data-theme="cypher2"] .toggle-option.active { background-color: #ffffff; color: #000000; } [data-theme="cypher2"] .range-btn.active { background-color: #ffffff; color: #000000; border-color: #ffffff; } [data-theme="cypher2"] .modal-content { background: rgba(20, 20, 20, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="cypher2"] table { background: rgba(20, 20, 20, 0.6); } [data-theme="cypher2"] table tr:nth-child(even) { background: rgba(10, 10, 10, 0.5); } [data-theme="cypher2"] table tr:nth-child(odd) { background: rgba(20, 20, 20, 0.5); } [data-theme="cypher2"] table th { background: rgba(10, 10, 10, 0.7); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="cypher2"] input, [data-theme="cypher2"] select, [data-theme="cypher2"] textarea { background: rgba(10, 10, 10, 0.7); border: 1px solid rgba(255, 255, 255, 0.06); color: #ffffff; } [data-theme="cypher2"] footer { border-top: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="cypher2"] .chain-count { background: rgba(26, 26, 26, 0.7); border: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="cypher2"] .metric-card { background: rgba(10, 10, 10, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.06); } [data-theme="cypher2"] .breakdown-stats .stat { background: rgba(10, 10, 10, 0.6); border: 1px solid rgba(255, 255, 255, 0.06); } /*=============================================================================== CYPHER3 THEME - Indigo Protocol inspired, centered nav, dark purple ===============================================================================*/ /* Cypher3 Variables */ [data-theme="cypher3"] { --bg-primary: #0d0f1a; --bg-secondary: #131525; --bg-card: #1a1d2e; --bg-hover: #222540; --text-primary: #e8e8f0; --text-secondary: #8b8fa3; --text-muted: #5a5d70; --accent-cardano: #7c3aed; --accent-bitcoin: #f7931a; --accent-ethereum: #627eea; --accent-success: #4ade80; --accent-error: #ef4444; --border-color: rgba(100, 100, 200, 0.12); --chart-line: #4ade80; --chart-fill: rgba(74, 222, 128, 0.06); --gradient-card: linear-gradient(135deg, #1a1d2e 0%, #161829 100%); --gradient-header: linear-gradient(135deg, #131525 0%, #1a1d2e 100%); } /* Cypher3 - Purple aurora effect at top of page */ [data-theme="cypher3"] body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 500px; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 58, 237, 0.12) 0%, rgba(88, 28, 200, 0.06) 40%, transparent 70%); pointer-events: none; z-index: 0; } /* Cypher3 nav overrides are now handled by universal nav system above */ /* Cypher3 - Portfolio Card */ [data-theme="cypher3"] .total-portfolio-card { background: #1a1d2e; border: 1px solid rgba(100, 100, 200, 0.1); border-radius: 16px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); } [data-theme="cypher3"] .total-value { color: #ffffff; text-shadow: none; } [data-theme="cypher3"] .top-holding-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="cypher3"] .portfolio-card-right { border-left-color: rgba(100, 100, 200, 0.1); } [data-theme="cypher3"] .portfolio-divider { background: rgba(100, 100, 200, 0.1); } /* Cypher3 - Summary Cards */ [data-theme="cypher3"] .summary-card { background: #1a1d2e; border: 1px solid rgba(100, 100, 200, 0.1); border-radius: 12px; box-shadow: none; transition: border-color 0.2s ease; } [data-theme="cypher3"] .summary-card:hover { border-color: rgba(124, 58, 237, 0.3); } /* Cypher3 - Section Headers */ [data-theme="cypher3"] .collapsible-section .section-header { background: #1a1d2e; border: 1px solid rgba(100, 100, 200, 0.1); border-radius: 12px; box-shadow: none; } [data-theme="cypher3"] .collapsible-section .section-header:hover { border-color: rgba(124, 58, 237, 0.25); } /* Cypher3 - Wallet Groups */ [data-theme="cypher3"] .wallet-group { background: #1a1d2e; border: 1px solid rgba(100, 100, 200, 0.1); border-radius: 12px; } [data-theme="cypher3"] .wallet-group-header { border-bottom-color: rgba(100, 100, 200, 0.08); } [data-theme="cypher3"] .wallet-group-header:hover { background: rgba(124, 58, 237, 0.06); } [data-theme="cypher3"] .wallet-item { background: rgba(13, 15, 26, 0.5); border: 1px solid rgba(100, 100, 200, 0.06); border-radius: 10px; } /* Cypher3 - Staking Cards */ [data-theme="cypher3"] .staking-card { background: #1a1d2e; border: 1px solid rgba(100, 100, 200, 0.1); border-radius: 12px; box-shadow: none; } /* Cypher3 - Exchange Section */ [data-theme="cypher3"] .exchange-section { background: #1a1d2e; border: 1px solid rgba(100, 100, 200, 0.1); border-radius: 12px; box-shadow: none; } /* Cypher3 - DeFi Protocol Cards */ [data-theme="cypher3"] .defi-protocol { background: #1a1d2e; border: 1px solid rgba(100, 100, 200, 0.1); border-radius: 12px; box-shadow: none; } /* Cypher3 - NFT Collections */ [data-theme="cypher3"] .nft-collection { background: #1a1d2e; border: 1px solid rgba(100, 100, 200, 0.1); border-radius: 12px; box-shadow: none; } /* Cypher3 - Token & Asset Cards */ [data-theme="cypher3"] .token-card, [data-theme="cypher3"] .asset-item { background: #1a1d2e; border: 1px solid rgba(100, 100, 200, 0.08); border-radius: 10px; } /* Cypher3 - Chart Container */ [data-theme="cypher3"] .history-chart-container { background: #1a1d2e; border: 1px solid rgba(100, 100, 200, 0.1); border-radius: 16px; box-shadow: none; } /* Cypher3 - Buttons */ [data-theme="cypher3"] .btn-primary { background: linear-gradient(135deg, #7c3aed, #6d28d9); border: none; color: #ffffff; border-radius: 8px; font-weight: 500; } [data-theme="cypher3"] .btn-primary:hover { background: linear-gradient(135deg, #8b5cf6, #7c3aed); } /* Cypher3 - Privacy mode active */ [data-theme="cypher3"] .btn-privacy.active { background: rgba(124, 58, 237, 0.2); border-color: rgba(124, 58, 237, 0.5); color: #8b5cf6; } /* Cypher3 - Toggle & Range buttons */ [data-theme="cypher3"] .toggle-option.active { background: rgba(124, 58, 237, 0.25); border-color: rgba(124, 58, 237, 0.5); color: #e8e8f0; } [data-theme="cypher3"] .range-btn.active { background: rgba(124, 58, 237, 0.25); border-color: rgba(124, 58, 237, 0.5); color: #e8e8f0; } /* Cypher3 - Modal */ [data-theme="cypher3"] .modal-content { background: #131525; border: 1px solid rgba(100, 100, 200, 0.12); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } /* Cypher3 - Tables */ [data-theme="cypher3"] table { border-color: rgba(100, 100, 200, 0.08); } [data-theme="cypher3"] table tr:nth-child(even) { background: rgba(26, 29, 46, 0.5); } [data-theme="cypher3"] table th { background: #131525; border-bottom: 1px solid rgba(100, 100, 200, 0.12); color: #8b8fa3; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; } /* Cypher3 - Inputs */ [data-theme="cypher3"] input, [data-theme="cypher3"] select, [data-theme="cypher3"] textarea { background: #0d0f1a; border: 1px solid rgba(100, 100, 200, 0.12); color: #e8e8f0; border-radius: 8px; } [data-theme="cypher3"] input:focus, [data-theme="cypher3"] select:focus, [data-theme="cypher3"] textarea:focus { border-color: rgba(124, 58, 237, 0.5); box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1); } /* Cypher3 - Footer */ [data-theme="cypher3"] footer { border-top-color: rgba(100, 100, 200, 0.08); color: #5a5d70; } /* Cypher3 - Metric Cards & Chain Counts */ [data-theme="cypher3"] .chain-count { background: rgba(124, 58, 237, 0.15); color: #8b5cf6; } [data-theme="cypher3"] .metric-card { background: #1a1d2e; border: 1px solid rgba(100, 100, 200, 0.1); border-radius: 12px; } [data-theme="cypher3"] .breakdown-stats .stat { background: rgba(13, 15, 26, 0.6); border: 1px solid rgba(100, 100, 200, 0.08); } /* Cypher3 - Scrollbar */ [data-theme="cypher3"] ::-webkit-scrollbar-track { background: #0d0f1a; } [data-theme="cypher3"] ::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.3); border-radius: 4px; } [data-theme="cypher3"] ::-webkit-scrollbar-thumb:hover { background: rgba(124, 58, 237, 0.5); } /*=============================================================================== GREEN TERMINAL THEME - Specific Overrides ===============================================================================*/ /*=============================================================================== OCEAN DEPTHS THEME - Specific Overrides ===============================================================================*/ [data-theme="ocean-depths"] header h1 { background: linear-gradient(135deg, #00b4d8 0%, #48cae4 50%, #90e0ef 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 15px rgba(0, 180, 216, 0.6)); } [data-theme="ocean-depths"] .total-portfolio-card { background: linear-gradient(135deg, rgba(16, 42, 69, 0.9) 0%, rgba(26, 74, 110, 0.8) 100%); border: 1px solid rgba(0, 180, 216, 0.4); box-shadow: 0 0 30px rgba(0, 180, 216, 0.3), inset 0 0 40px rgba(0, 0, 0, 0.3); } [data-theme="ocean-depths"] .total-value { color: #48cae4; text-shadow: 0 0 20px rgba(72, 202, 228, 0.8); } [data-theme="ocean-depths"] .top-holding-item { background: rgba(0, 180, 216, 0.1); border: 1px solid rgba(0, 180, 216, 0.2); } [data-theme="ocean-depths"] .portfolio-card-right { border-left-color: rgba(0, 180, 216, 0.2); } [data-theme="ocean-depths"] .portfolio-divider { background: rgba(0, 180, 216, 0.2); } [data-theme="ocean-depths"] .summary-card { background: linear-gradient(135deg, rgba(13, 33, 55, 0.85) 0%, rgba(16, 42, 69, 0.8) 100%); border: 1px solid rgba(26, 74, 110, 0.5); box-shadow: 0 0 20px rgba(0, 180, 216, 0.15); } [data-theme="ocean-depths"] .summary-card.cardano { border-top-color: #00b4d8; } [data-theme="ocean-depths"] .summary-card.bitcoin { border-top-color: #ffd166; } [data-theme="ocean-depths"] .summary-card.ethereum { border-top-color: #48cae4; } [data-theme="ocean-depths"] .summary-card.solana { border-top-color: #06d6a0; } [data-theme="ocean-depths"] .summary-card.polygon { border-top-color: #90e0ef; } [data-theme="ocean-depths"] .summary-card.base { border-top-color: #00b4d8; } [data-theme="ocean-depths"] .wallet-item.cardano { border-left-color: #00b4d8; } [data-theme="ocean-depths"] .wallet-item.bitcoin { border-left-color: #ffd166; } [data-theme="ocean-depths"] .wallet-item.ethereum { border-left-color: #48cae4; } [data-theme="ocean-depths"] .btn-primary { background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%); box-shadow: 0 0 12px rgba(0, 180, 216, 0.4); } [data-theme="ocean-depths"] .btn-primary:hover { background: linear-gradient(135deg, #48cae4 0%, #00b4d8 100%); box-shadow: 0 0 20px rgba(72, 202, 228, 0.5); } [data-theme="ocean-depths"] .btn-privacy.active { background-color: #00b4d8; border-color: #00b4d8; } [data-theme="ocean-depths"] .toggle-option.active, [data-theme="ocean-depths"] .range-btn.active, [data-theme="ocean-depths"] .chain-tab.active { background-color: #00b4d8; box-shadow: 0 0 10px rgba(0, 180, 216, 0.5); } [data-theme="ocean-depths"] .history-chart-container { background: linear-gradient(180deg, #0a1628 0%, #0d2137 100%); border: 1px solid rgba(26, 74, 110, 0.6); box-shadow: 0 0 25px rgba(0, 180, 216, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.4); } [data-theme="ocean-depths"] .collapsible-section .section-header { border: 1px solid rgba(26, 74, 110, 0.4); } [data-theme="ocean-depths"] header { border-bottom-color: #1a4a6e; } [data-theme="ocean-depths"] footer { border-top-color: #1a4a6e; } [data-theme="ocean-depths"] .staking-card { border-left-color: #06d6a0; box-shadow: 0 0 15px rgba(6, 214, 160, 0.2); } [data-theme="ocean-depths"] .nft-collection { border-left-color: #00b4d8; box-shadow: 0 0 12px rgba(0, 180, 216, 0.15); } /*=============================================================================== SUNSET HORIZON THEME - Specific Overrides ===============================================================================*/ [data-theme="sunset-horizon"] header h1 { background: linear-gradient(135deg, #ff6b35 0%, #ffc145 50%, #ff8c42 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.7)); animation: sunsetPulse 4s ease-in-out infinite alternate; } @keyframes sunsetPulse { 0% { filter: drop-shadow(0 0 15px rgba(255, 107, 53, 0.7)); } 100% { filter: drop-shadow(0 0 25px rgba(255, 193, 69, 0.8)); } } [data-theme="sunset-horizon"] .total-portfolio-card { background: linear-gradient(135deg, rgba(61, 26, 66, 0.9) 0%, rgba(92, 42, 92, 0.8) 50%, rgba(45, 18, 51, 0.9) 100%); border: 1px solid rgba(255, 107, 53, 0.4); box-shadow: 0 0 35px rgba(255, 107, 53, 0.3), inset 0 0 40px rgba(0, 0, 0, 0.3); } [data-theme="sunset-horizon"] .total-value { color: #ffc145; text-shadow: 0 0 25px rgba(255, 193, 69, 0.9); } [data-theme="sunset-horizon"] .top-holding-item { background: rgba(255, 107, 53, 0.1); border: 1px solid rgba(255, 107, 53, 0.2); } [data-theme="sunset-horizon"] .portfolio-card-right { border-left-color: rgba(255, 107, 53, 0.2); } [data-theme="sunset-horizon"] .portfolio-divider { background: rgba(255, 107, 53, 0.2); } [data-theme="sunset-horizon"] .summary-card { background: linear-gradient(135deg, rgba(45, 18, 51, 0.85) 0%, rgba(61, 26, 66, 0.8) 100%); border: 1px solid rgba(92, 42, 92, 0.5); box-shadow: 0 0 20px rgba(255, 107, 53, 0.15); } [data-theme="sunset-horizon"] .summary-card.cardano { border-top-color: #ff6b35; } [data-theme="sunset-horizon"] .summary-card.bitcoin { border-top-color: #ffc145; } [data-theme="sunset-horizon"] .summary-card.ethereum { border-top-color: #ff8c42; } [data-theme="sunset-horizon"] .summary-card.solana { border-top-color: #06d6a0; } [data-theme="sunset-horizon"] .summary-card.polygon { border-top-color: #ffb4a2; } [data-theme="sunset-horizon"] .summary-card.base { border-top-color: #ff6b35; } [data-theme="sunset-horizon"] .wallet-item.cardano { border-left-color: #ff6b35; } [data-theme="sunset-horizon"] .wallet-item.bitcoin { border-left-color: #ffc145; } [data-theme="sunset-horizon"] .wallet-item.ethereum { border-left-color: #ff8c42; } [data-theme="sunset-horizon"] .btn-primary { background: linear-gradient(135deg, #ff6b35 0%, #ff3366 100%); box-shadow: 0 0 12px rgba(255, 107, 53, 0.4); } [data-theme="sunset-horizon"] .btn-primary:hover { background: linear-gradient(135deg, #ffc145 0%, #ff6b35 100%); box-shadow: 0 0 20px rgba(255, 193, 69, 0.5); } [data-theme="sunset-horizon"] .btn-privacy.active { background-color: #ff6b35; border-color: #ff6b35; } [data-theme="sunset-horizon"] .toggle-option.active, [data-theme="sunset-horizon"] .range-btn.active, [data-theme="sunset-horizon"] .chain-tab.active { background-color: #ff6b35; box-shadow: 0 0 10px rgba(255, 107, 53, 0.5); } [data-theme="sunset-horizon"] .history-chart-container { background: linear-gradient(180deg, #1a0a1a 0%, #2d1233 100%); border: 1px solid rgba(92, 42, 92, 0.6); box-shadow: 0 0 25px rgba(255, 107, 53, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.4); } [data-theme="sunset-horizon"] .collapsible-section .section-header { border: 1px solid rgba(92, 42, 92, 0.4); } [data-theme="sunset-horizon"] header { border-bottom-color: #5c2a5c; } [data-theme="sunset-horizon"] footer { border-top-color: #5c2a5c; } [data-theme="sunset-horizon"] .staking-card { border-left-color: #06d6a0; box-shadow: 0 0 15px rgba(6, 214, 160, 0.2); } [data-theme="sunset-horizon"] .nft-collection { border-left-color: #ff6b35; box-shadow: 0 0 12px rgba(255, 107, 53, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; } html { /* Force scrollbar always visible so the fixed nav doesn't shift when scrollbar appears/disappears between pages */ overflow-y: scroll; } /* ---- Custom Scrollbar ---- */ /* Selectors must attach directly to html (no space before ::) since the page scrollbar belongs to the element itself. */ /* WebKit base (Chrome, Safari, Edge) — Dark Mode default */ html::-webkit-scrollbar { width: 10px; } html::-webkit-scrollbar-track { background: #1a1a2e; } html::-webkit-scrollbar-thumb { border-radius: 6px; border: 2px solid #1a1a2e; background: linear-gradient(180deg, #00d26a 0%, #2a2a4a 50%, #00d26a 100%); } html::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #00d26a 0%, #3a4a6a 50%, #00d26a 100%); } html::-webkit-scrollbar-thumb:active { background: #00d26a; } /* Firefox */ html { scrollbar-width: thin; scrollbar-color: #2a2a4a #1a1a2e; } /* Light */ html[data-theme="light"]::-webkit-scrollbar-track { background: #f5f7fa; } html[data-theme="light"]::-webkit-scrollbar-thumb { border-color: #f5f7fa; background: linear-gradient(180deg, #00b894 0%, #d1d5db 50%, #00b894 100%); } html[data-theme="light"]::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #00b894 0%, #a0c4b8 50%, #00b894 100%); } html[data-theme="light"]::-webkit-scrollbar-thumb:active { background: #00b894; } html[data-theme="light"] { scrollbar-color: #d1d5db #f5f7fa; } /* Ocean Depths */ html[data-theme="ocean-depths"]::-webkit-scrollbar-track { background: #0a1628; } html[data-theme="ocean-depths"]::-webkit-scrollbar-thumb { border-color: #0a1628; background: linear-gradient(180deg, #00b4d8 0%, #1a4a6e 50%, #06d6a0 100%); } html[data-theme="ocean-depths"]::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #00b4d8 0%, #2a6a8e 50%, #06d6a0 100%); } html[data-theme="ocean-depths"]::-webkit-scrollbar-thumb:active { background: #00b4d8; } html[data-theme="ocean-depths"] { scrollbar-color: #1a4a6e #0a1628; } /* Sunset Horizon */ html[data-theme="sunset-horizon"]::-webkit-scrollbar-track { background: #1a0a1a; } html[data-theme="sunset-horizon"]::-webkit-scrollbar-thumb { border-color: #1a0a1a; background: linear-gradient(180deg, #ff6b35 0%, #5c2a5c 50%, #06d6a0 100%); } html[data-theme="sunset-horizon"]::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ff6b35 0%, #7c3a7c 50%, #06d6a0 100%); } html[data-theme="sunset-horizon"]::-webkit-scrollbar-thumb:active { background: #ff6b35; } html[data-theme="sunset-horizon"] { scrollbar-color: #5c2a5c #1a0a1a; } /* Cypherpunk 1 */ html[data-theme="cypherpunk1"]::-webkit-scrollbar-track { background: #030308; } html[data-theme="cypherpunk1"]::-webkit-scrollbar-thumb { border-color: #030308; background: linear-gradient(180deg, #00d4ff 0%, #7c3aed 50%, #d946ef 100%); } html[data-theme="cypherpunk1"]::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #00d4ff 0%, #8b5cf6 50%, #d946ef 100%); } html[data-theme="cypherpunk1"]::-webkit-scrollbar-thumb:active { background: #00d4ff; } html[data-theme="cypherpunk1"] { scrollbar-color: #7c3aed #030308; } /* Cypher */ html[data-theme="cypher"]::-webkit-scrollbar-track { background: #000000; } html[data-theme="cypher"]::-webkit-scrollbar-thumb { border-color: #000000; background: linear-gradient(180deg, #a855f7 0%, #2a2a2a 50%, #00d26a 100%); } html[data-theme="cypher"]::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a855f7 0%, #3a3a3a 50%, #00d26a 100%); } html[data-theme="cypher"]::-webkit-scrollbar-thumb:active { background: #a855f7; } html[data-theme="cypher"] { scrollbar-color: #2a2a2a #000000; } /* Cypher2 */ html[data-theme="cypher2"]::-webkit-scrollbar-track { background: #000000; } html[data-theme="cypher2"]::-webkit-scrollbar-thumb { border-color: #000000; background: linear-gradient(180deg, #00d26a 0%, #2a2a2a 50%, #a855f7 100%); } html[data-theme="cypher2"]::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #00d26a 0%, #3a3a3a 50%, #a855f7 100%); } html[data-theme="cypher2"]::-webkit-scrollbar-thumb:active { background: #00d26a; } html[data-theme="cypher2"] { scrollbar-color: #2a2a2a #000000; } /* Cypher3 */ html[data-theme="cypher3"]::-webkit-scrollbar-track { background: #000000; } html[data-theme="cypher3"]::-webkit-scrollbar-thumb { border-color: #000000; background: linear-gradient(180deg, #ffffff 0%, #2a2a2a 50%, #ffffff 100%); } html[data-theme="cypher3"]::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #ffffff 0%, #4a4a4a 50%, #ffffff 100%); } html[data-theme="cypher3"]::-webkit-scrollbar-thumb:active { background: #ffffff; } html[data-theme="cypher3"] { scrollbar-color: #2a2a2a #000000; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } /* Header */ header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border-color); margin-bottom: 30px; position: relative; z-index: 100; } header h1 { font-size: 1.8rem; font-weight: 600; } .header-actions { display: flex; gap: 12px; align-items: center; } /* Theme Selector */ .theme-selector { position: relative; } .theme-selector select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); padding: 8px 32px 8px 12px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; min-width: 130px; } .theme-selector select:hover { background-color: var(--bg-secondary); border-color: var(--text-secondary); } .theme-selector select:focus { outline: none; border-color: var(--accent-cardano); } .theme-selector::after { content: '▼'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 0.6rem; color: var(--text-secondary); pointer-events: none; } .theme-selector select option { background-color: var(--bg-secondary); color: var(--text-primary); padding: 8px; } /* Display Toggle */ .summary-header { align-items: center; margin-bottom: 15px; } .summary-header h2 { margin: 0; } /* Waffle Menu */ .waffle-menu-container { position: relative; z-index: 1001; } .waffle-menu-btn { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 8px; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .waffle-menu-btn:hover { background-color: var(--bg-secondary); border-color: var(--text-secondary); } .waffle-icon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 18px; height: 18px; } .waffle-icon span { width: 4px; height: 4px; background-color: var(--text-secondary); border-radius: 1px; } .waffle-menu-dropdown { position: absolute; top: calc(100% + 8px); right: 0; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 8px; min-width: 180px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); z-index: 1000; display: none; flex-direction: column; gap: 4px; } .waffle-menu-dropdown.active { display: flex; } .waffle-menu-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--text-primary); text-decoration: none; transition: all 0.2s ease; } .waffle-menu-item:hover { background-color: var(--bg-card); } .waffle-item-icon { font-size: 1.1rem; width: 24px; text-align: center; } .waffle-item-label { font-size: 0.9rem; font-weight: 500; } /*=============================================================================== UNIVERSAL HORIZONTAL NAV BAR Replaces waffle menu with a fixed centered pill bar on all themes. ===============================================================================*/ /* Hide old waffle menu elements */ .waffle-menu-btn { display: none; } .waffle-menu-dropdown { display: none !important; } .waffle-menu-divider { display: none; } .waffle-menu-theme { display: none; } .waffle-menu-container { display: none; } /* Hide old header elements (scoped to header tag only, not page content) */ header h1 { display: none; } header .header-actions > .btn { display: none; } header .header-actions { display: none; } /* Header becomes a flex container for nav + avatar */ header { display: flex; align-items: center; justify-content: center; position: relative; padding: 12px 24px; min-height: 56px; background: transparent !important; border: none !important; box-shadow: none !important; margin-bottom: 10px; } /* Main navigation - centered horizontal pill bar */ .main-nav { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1100; display: flex; flex-direction: row; align-items: center; background: rgba(19, 21, 37, 0.82); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(100, 100, 200, 0.1); border-radius: 50px; padding: 6px 10px; gap: 4px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); } .nav-item { padding: 10px 24px; border-radius: 50px; font-size: 14px; white-space: nowrap; color: #8b8fa3; background: transparent; transition: all 0.2s ease; text-decoration: none; font-weight: 500; } .nav-item:hover { color: #e8e8f0; background: rgba(0, 210, 106, 0.08); } .nav-item.active { background: rgba(0, 210, 106, 0.2); color: #e8e8f0; } /* Space for fixed nav bar */ main { padding-top: 30px; } /* Header right controls - fixed top right for avatar */ .header-right-controls { position: fixed; top: 12px; right: 24px; z-index: 1100; display: flex; align-items: center; gap: 10px; } /* User avatar */ .user-avatar-container { position: relative; } .user-avatar-btn { background: transparent; border: none; cursor: pointer; padding: 0; } .avatar-circle { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, rgba(0, 210, 106, 0.3), rgba(0, 150, 80, 0.5)); border: 2px solid rgba(0, 210, 106, 0.5); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #e8e8f0; transition: all 0.2s ease; } .avatar-circle:hover { border-color: rgba(0, 210, 106, 0.8); box-shadow: 0 0 12px rgba(0, 210, 106, 0.3); } /* User menu dropdown */ .user-menu-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: rgba(19, 21, 37, 0.95); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(100, 100, 200, 0.15); border-radius: 12px; padding: 8px; min-width: 220px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); z-index: 1200; } .user-menu-dropdown.active { display: block; } .user-menu-header { padding: 10px 12px 8px; font-size: 0.9rem; font-weight: 600; color: #e8e8f0; } .user-menu-divider { height: 1px; background: rgba(100, 100, 200, 0.12); margin: 4px 0; } .user-menu-item { display: block; width: 100%; padding: 10px 12px; border-radius: 8px; color: #8b8fa3; text-decoration: none; font-size: 0.9rem; font-weight: 500; background: none; border: none; cursor: pointer; text-align: left; transition: all 0.2s ease; } .user-menu-item:hover { color: #e8e8f0; background: rgba(0, 210, 106, 0.08); } .user-menu-subitem { padding-left: 28px; font-size: 0.85rem; color: #6b7280; } .user-menu-logout { color: #ff6b6b; } .user-menu-logout:hover { background: rgba(255, 107, 107, 0.1); color: #ff6b6b; } .privacy-indicator { font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); margin-left: 8px; } .user-menu-theme-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 0.9rem; color: #8b8fa3; } .user-menu-theme-row select { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(100, 100, 200, 0.15); color: #e8e8f0; font-size: 0.8rem; padding: 4px 8px; border-radius: 6px; cursor: pointer; outline: none; max-width: 120px; } .user-menu-theme-row select option { background: #1a1d2e; color: #e8e8f0; } /*---------- Theme-specific nav color overrides ----------*/ /* Light theme nav */ [data-theme="light"] .main-nav { background: rgba(255, 255, 255, 0.88); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12); } [data-theme="light"] .nav-item { color: #6b7280; } [data-theme="light"] .nav-item:hover { color: #1a1a2e; background: rgba(0, 184, 148, 0.08); } [data-theme="light"] .nav-item.active { background: rgba(0, 184, 148, 0.15); color: #1a1a2e; } [data-theme="light"] .avatar-circle { background: linear-gradient(135deg, rgba(0, 184, 148, 0.2), rgba(0, 140, 110, 0.3)); border-color: rgba(0, 184, 148, 0.4); color: #1a1a2e; } [data-theme="light"] .user-menu-dropdown { background: rgba(255, 255, 255, 0.97); border-color: #e5e7eb; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); } [data-theme="light"] .user-menu-header { color: #1a1a2e; } [data-theme="light"] .user-menu-divider { background: #e5e7eb; } [data-theme="light"] .user-menu-item { color: #6b7280; } [data-theme="light"] .user-menu-item:hover { color: #1a1a2e; background: rgba(0, 184, 148, 0.08); } [data-theme="light"] .user-menu-theme-row { color: #6b7280; } [data-theme="light"] .user-menu-theme-row select { background: #f5f7fa; border-color: #e5e7eb; color: #1a1a2e; } [data-theme="light"] .user-menu-theme-row select option { background: #ffffff; color: #1a1a2e; } /* Ocean Depths nav */ [data-theme="ocean-depths"] .main-nav { background: rgba(10, 20, 50, 0.85); border-color: rgba(0, 119, 182, 0.15); } [data-theme="ocean-depths"] .nav-item.active { background: rgba(0, 180, 216, 0.2); } /* Sunset Horizon nav */ [data-theme="sunset-horizon"] .main-nav { background: rgba(30, 15, 35, 0.85); border-color: rgba(230, 126, 34, 0.15); } [data-theme="sunset-horizon"] .nav-item.active { background: rgba(230, 126, 34, 0.2); } /* Cypherpunk1 nav */ [data-theme="cypherpunk1"] .main-nav { background: rgba(5, 5, 16, 0.9); border-color: rgba(0, 212, 255, 0.15); } [data-theme="cypherpunk1"] .nav-item.active { background: rgba(0, 212, 255, 0.15); } /* Cypher nav */ [data-theme="cypher"] .main-nav { background: rgba(15, 15, 20, 0.85); border-color: rgba(0, 210, 106, 0.1); } /* Cypher2 nav */ [data-theme="cypher2"] .main-nav { background: rgba(15, 15, 25, 0.85); border-color: rgba(0, 170, 255, 0.1); } [data-theme="cypher2"] .nav-item.active { background: rgba(0, 170, 255, 0.2); } /* Cypher3 nav - uses purple accent */ [data-theme="cypher3"] .main-nav { background: rgba(19, 21, 37, 0.82); border-color: rgba(100, 100, 200, 0.1); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 40px rgba(124, 58, 237, 0.05); } [data-theme="cypher3"] .nav-item:hover { background: rgba(124, 58, 237, 0.12); } [data-theme="cypher3"] .nav-item.active { background: rgba(124, 58, 237, 0.25); } /* Mobile responsiveness for nav */ @media (max-width: 480px) { .main-nav { padding: 4px 6px; gap: 2px; } .nav-item { padding: 8px 16px; font-size: 13px; } .header-right-controls { right: 12px; } } /* Section Controls */ .section-controls { display: flex; gap: 6px; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .btn-small { padding: 6px 12px; font-size: 0.75rem; background-color: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } .btn-small:hover { background-color: var(--bg-secondary); color: var(--text-primary); } /* Header Button Styles - Uniform sizing */ .btn-privacy, .btn-sections { padding: 8px 14px; font-size: 0.85rem; font-weight: 500; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; color: var(--text-secondary); } .btn-privacy:hover, .btn-sections:hover { background-color: var(--bg-secondary); color: var(--text-primary); } .btn-privacy.active { background-color: #e74c3c; border-color: #e74c3c; color: white; } /* Small refresh button for portfolio section */ .btn-refresh-small { padding: 6px 10px; background-color: transparent; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; color: var(--text-secondary); } .btn-refresh-small:hover { background-color: var(--bg-secondary); color: var(--text-primary); } .btn-refresh-small .refresh-icon { font-size: 1rem; } .btn-refresh-small.refreshing .refresh-icon { animation: spin 1s linear infinite; } /* Portfolio total header layout */ .total-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } /* Privacy Mode - Blur only numeric values, keep labels visible */ body.privacy-mode .blur-value { filter: blur(10px); user-select: none; display: inline-block; } /* Blur-sensitive elements (stake keys, pool names, DRep names) */ body.privacy-mode .blur-sensitive { filter: blur(8px); user-select: none; } /* Buttons - Standardized sizing and styling */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; min-width: 140px; height: 40px; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; font-weight: 500; text-decoration: none; text-align: center; transition: all 0.2s ease; white-space: nowrap; } /* Remove underlines from all button links */ a.btn, a.btn:hover, a.btn:visited, a.btn:active { text-decoration: none; } .btn-primary { background-color: var(--accent-cardano); color: white; } .btn-primary:hover { background-color: #0044cc; } .btn-secondary { background-color: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); } .btn-secondary:hover { background-color: var(--bg-secondary); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } /* Cypherpunk Glassy Buttons */ [data-theme="cypherpunk1"] .btn-secondary { background: linear-gradient(135deg, rgba(8, 8, 26, 0.8) 0%, rgba(12, 0, 36, 0.7) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(0, 212, 255, 0.3); box-shadow: 0 0 10px rgba(0, 212, 255, 0.1); } [data-theme="cypherpunk1"] .btn-secondary:hover { background: linear-gradient(135deg, rgba(12, 0, 36, 0.9) 0%, rgba(20, 8, 50, 0.8) 100%); box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); border-color: rgba(0, 212, 255, 0.5); } /* Status Bar */ .status-bar { padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; background-color: var(--bg-card); border-left: 4px solid var(--accent-success); } .status-bar.error { border-left-color: var(--accent-error); } .status-bar.success { border-left-color: var(--accent-success); background-color: rgba(46, 204, 113, 0.1); } .status-bar.hidden { display: none; } /* Startup Indicator */ .startup-indicator { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; margin-bottom: 15px; background: linear-gradient(135deg, rgba(0, 210, 106, 0.1) 0%, rgba(0, 150, 76, 0.05) 100%); border: 1px solid rgba(0, 210, 106, 0.3); border-radius: 8px; font-size: 0.9rem; color: var(--accent-success); } .spinner-small { width: 16px; height: 16px; border: 2px solid rgba(0, 210, 106, 0.3); border-top-color: var(--accent-success); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Cypherpunk startup indicator */ [data-theme="cypherpunk1"] .startup-indicator { background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(234, 0, 217, 0.05) 100%); border-color: rgba(0, 212, 255, 0.4); color: #00d4ff; } [data-theme="cypherpunk1"] .spinner-small, [data-theme="cypherpunk1"] .stat-refresh-spinner { border-color: rgba(0, 212, 255, 0.3); border-top-color: #00d4ff; } /* Summary Section */ .summary-section { margin-bottom: 40px; } .summary-section h2 { margin-bottom: 20px; font-size: 1.2rem; color: var(--text-secondary); } /* Price Charts Container (4th Analytics Slide) */ .price-charts-container { display: flex; gap: 20px; height: 500px; padding: 20px; } /* Blockchain Selector (Left Side) */ .blockchain-selector { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding-right: 12px; } .blockchain-btn { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg-secondary); border: 2px solid transparent; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .blockchain-btn:hover { background: var(--bg-tertiary); border-color: rgba(0, 210, 106, 0.3); } .blockchain-btn.active { background: var(--bg-tertiary); border-color: var(--accent-success); box-shadow: 0 0 20px rgba(0, 210, 106, 0.2); } /* Compact inline layout: logo + name + ticker on one line */ .blockchain-btn .chain-logo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .blockchain-btn .chain-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); } .blockchain-btn .chain-ticker { font-size: 0.75rem; color: var(--text-secondary); margin-left: auto; font-family: 'SF Mono', Monaco, 'Courier New', monospace; } /* Chart Area (Right Side) */ .price-chart-area { flex: 1; display: flex; flex-direction: column; gap: 15px; } .chart-header { display: flex; justify-content: space-between; align-items: center; } .chart-title-wrapper { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .chart-title-wrapper h3 { margin: 0; font-size: 1.2rem; color: var(--text-primary); } .chart-stats { display: flex; gap: 12px; align-items: center; } .chart-stats .price { font-size: 1.3rem; font-weight: bold; color: var(--accent-success); } .chart-stats .change { font-size: 0.9rem; padding: 4px 8px; border-radius: 6px; } .chart-stats .change.positive { color: #00ff7f; background: rgba(0, 255, 127, 0.1); } .chart-stats .change.negative { color: #ff4444; background: rgba(255, 68, 68, 0.1); } /* Chart Container */ .price-chart-wrapper { flex: 1; background: var(--bg-secondary); border-radius: 12px; overflow: hidden; position: relative; border: 1px solid var(--border-color); } /* Timeframe Selector */ .timeframe-selector { display: flex; gap: 8px; justify-content: center; padding: 10px; background: var(--bg-secondary); border-radius: 12px; } .timeframe-btn { padding: 8px 16px; background: transparent; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s; } .timeframe-btn:hover { background: var(--bg-tertiary); border-color: var(--accent-success); color: var(--text-primary); } .timeframe-btn.active { background: var(--accent-success); border-color: var(--accent-success); color: var(--bg-primary); } /* Mobile Responsive for Price Charts */ @media (max-width: 768px) { .price-charts-container { flex-direction: column; height: auto; } .blockchain-selector { flex-direction: row; overflow-x: auto; overflow-y: visible; padding-right: 0; padding-bottom: 8px; } .blockchain-btn { flex: 0 0 140px; } .price-chart-wrapper { height: 350px; } } /* Portfolio History Section */ .history-section { margin-bottom: 40px; } .history-section .section-header-inline { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .history-section h2 { font-size: 1.2rem; color: var(--text-secondary); margin: 0; } /* V1/V2 source tabs */ .history-source-tabs { display: flex; gap: 4px; margin-left: auto; } .source-tab { padding: 5px 14px; background: transparent; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .source-tab:hover { color: var(--text-primary); border-color: var(--text-secondary); } .source-tab.active { background: var(--accent-cardano); border-color: var(--accent-cardano); color: white; } /* V2 collection progress */ .collection-progress { text-align: center; padding: 20px; color: var(--text-secondary); } .collection-progress .progress-bar-container { max-width: 400px; margin: 12px auto 8px; } .collection-progress .btn-secondary { margin-top: 12px; padding: 6px 18px; font-size: 0.85rem; } .history-range-selector { display: flex; gap: 8px; margin-top: 12px; } .range-btn { padding: 8px 16px; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .range-btn:hover { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--text-secondary); } .range-btn.active { background-color: var(--accent-cardano); border-color: var(--accent-cardano); color: white; } .history-chart-container { background-color: var(--bg-card); border-radius: 12px; padding: 20px; height: 300px; position: relative; border: 1px solid var(--border-color); } .chart-loading-state { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text-secondary); text-align: center; z-index: 2; } .chart-loading-state p { margin-top: 10px; font-size: 0.9rem; opacity: 0.7; } .chart-empty-state { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text-secondary); text-align: center; z-index: 2; } .chart-empty-state p { margin: 4px 0; } .chart-empty-hint { font-size: 0.85rem; opacity: 0.7; } /* History generation progress */ .generation-progress { width: 100%; max-width: 400px; text-align: center; } .generation-progress p { margin: 4px 0; } .progress-bar-container { width: 100%; height: 8px; background: var(--card-bg, rgba(42, 42, 74, 0.5)); border-radius: 4px; overflow: hidden; margin: 12px 0 8px; } .progress-bar-fill { height: 100%; background: var(--accent-green, #00d26a); border-radius: 4px; transition: width 0.5s ease; } /* Chart category toggles */ .chart-category-toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 16px; background-color: var(--bg-secondary); border-radius: 8px; font-size: 0.85rem; } .chart-category-toggles .toggle-label { color: var(--text-secondary); font-weight: 500; margin-right: 4px; } .category-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 10px; background-color: var(--bg-card); border-radius: 16px; transition: background-color 0.2s, opacity 0.2s; } .category-toggle:hover { background-color: var(--bg-primary); } .category-toggle input[type="checkbox"] { width: 14px; height: 14px; accent-color: #00d26a; cursor: pointer; } .category-toggle .category-name { color: var(--text-primary); font-size: 0.8rem; } .category-toggle:has(input:not(:checked)) { opacity: 0.5; } .history-info { margin-top: 12px; font-size: 0.85rem; color: var(--text-secondary); text-align: right; } /* Privacy mode for chart */ body.privacy-mode .history-chart-container { filter: blur(25px); user-select: none; } body.privacy-mode .history-info { filter: blur(10px); } /* Privacy mode for NFT section */ body.privacy-mode .nft-collection-header .collection-value, body.privacy-mode .nft-item .nft-price, body.privacy-mode .nfts-section .section-summary .nft-value, body.privacy-mode .nfts-section .section-summary .nft-count, body.privacy-mode .chain-tab .chain-stats { filter: blur(10px); user-select: none; } body.privacy-mode .nft-collection-header .collection-name .blur-value { filter: blur(10px); user-select: none; } /* Total Portfolio Card */ .total-portfolio-card { background: linear-gradient(135deg, #1e3a5f 0%, #0f3460 50%, #1a1a2e 100%); border-radius: 16px; padding: 28px; margin-bottom: 24px; border: 1px solid var(--border-color); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .total-portfolio-card .total-label { font-size: 0.9rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; } .total-portfolio-card .total-value { font-size: 2.8rem; font-weight: 700; font-family: 'SF Mono', Monaco, 'Courier New', monospace; color: var(--accent-success); margin-bottom: 4px; } .total-portfolio-card .total-breakdown { display: flex; justify-content: center; gap: 24px; font-size: 0.85rem; color: var(--text-secondary); } .total-portfolio-card .breakdown-item { padding: 6px 14px; background-color: rgba(0, 0, 0, 0.2); border-radius: 20px; } /* Portfolio Card Two-Column Layout */ .portfolio-card-body { display: flex; align-items: center; justify-content: space-evenly; gap: 12px; } .portfolio-card-left { flex: 0 1 auto; text-align: left; min-width: 0; } .portfolio-card-right { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; text-align: right; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.08); } .portfolio-card-breakdown { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; align-items: flex-end; text-align: right; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.08); } .portfolio-divider { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.08); } /* Top Holdings Pills */ .top-holdings { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .top-holding-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(255, 255, 255, 0.06); border-radius: 20px; font-size: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.08); } .holding-symbol { font-weight: 600; color: var(--text-primary, #e0e0e0); } .holding-price { color: var(--text-secondary, #999); font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.75rem; } .holding-change { font-size: 0.75rem; } .holding-change.positive { color: #00d26a; } .holding-change.negative { color: #ff4757; } .holding-pnl { font-size: 0.75rem; font-weight: 500; } .holding-pnl.positive { color: #00d26a; } .holding-pnl.negative { color: #ff4757; } .holding-pnl.neutral { color: var(--text-secondary, #8b95a5); } /* Global Market Stat */ .global-market-stat { margin-top: 10px; font-size: 0.78rem; color: var(--text-secondary, #999); display: flex; align-items: center; gap: 6px; } .global-market-stat .global-mcap-label { color: var(--text-secondary, #888); } .global-market-stat .global-mcap-value { font-weight: 600; color: var(--text-primary, #e0e0e0); font-family: 'SF Mono', Monaco, 'Courier New', monospace; } .global-market-stat .global-mcap-change { font-size: 0.75rem; } .global-market-stat .global-mcap-change.positive { color: #00d26a; } .global-market-stat .global-mcap-change.negative { color: #ff4757; } [data-theme="light"] .global-market-stat .global-mcap-value { color: #1f2937; } [data-theme="light"] .global-market-stat .global-mcap-label { color: #6b7280; } /* Portfolio Donut Chart */ .portfolio-donut-container { position: relative; flex: 0 0 220px; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; } .donut-center-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; width: 125px; } .donut-center-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary, #999); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .donut-center-value { font-size: 1.25rem; font-weight: 700; color: var(--text-primary, #e0e0e0); white-space: nowrap; } .donut-center-sub { font-size: 0.7rem; color: var(--text-secondary, #999); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Portfolio Stats (right column) */ .portfolio-stat .stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary, #999); margin-bottom: 4px; } .portfolio-stat .stat-value { font-size: 1.2rem; font-weight: 600; font-family: 'SF Mono', Monaco, 'Courier New', monospace; color: var(--text-primary, #e0e0e0); } .portfolio-stat .stat-value.positive { color: #00d26a; } .portfolio-stat .stat-value.negative { color: #ff4757; } .portfolio-stat .stat-sub { font-size: 0.75rem; color: var(--text-secondary, #999); margin-top: 2px; } .portfolio-stat .stat-sub.positive { color: #00d26a; } .portfolio-stat .stat-sub.negative { color: #ff4757; } /* Stale-while-revalidate: inline refresh spinner next to stat values */ .stat-refresh-spinner { display: inline-block; width: 10px; height: 10px; border: 1.5px solid rgba(0, 210, 106, 0.25); border-top-color: var(--accent-success, #00d26a); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: middle; margin-left: 6px; opacity: 0.7; } /* Cached/stale values shown slightly dimmed until fresh data arrives */ .stat-value.stale-value, .total-value.stale-value { opacity: 0.55; transition: opacity 0.3s ease; } /* Responsive: stack on mobile */ @media (max-width: 768px) { .portfolio-card-body { flex-direction: column; gap: 16px; } .portfolio-card-left { text-align: center; } .top-holdings { justify-content: center; } .portfolio-donut-container { flex: 0 0 180px; width: 180px; height: 180px; margin: 0 auto; } .portfolio-card-right { flex-direction: row; align-items: center; justify-content: center; gap: 20px; text-align: center; padding-left: 0; border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 16px; width: 100%; } .portfolio-card-breakdown { flex-direction: row; align-items: center; justify-content: center; gap: 20px; text-align: center; padding-left: 0; border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 16px; width: 100%; } .portfolio-divider { width: 1px; height: 40px; } } /* ============================================ */ /* Portfolio Heatmap */ /* ============================================ */ .heatmap-slide-inner { padding: 20px; display: flex; flex-direction: column; min-height: 500px; } .heatmap-slide-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .heatmap-slide-header .analytics-title { margin: 0; } .heatmap-legend { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--text-secondary, #999); } .heatmap-legend-item { display: inline-block; width: 16px; height: 10px; border-radius: 2px; } .heatmap-legend-item.neg-heavy { background: var(--accent-error, #ff6b6b); } .heatmap-legend-item.neg-light { background: color-mix(in srgb, var(--accent-error, #ff6b6b) 50%, var(--bg-secondary, #16213e)); } .heatmap-legend-item.neutral { background: var(--bg-secondary, #16213e); border: 1px solid var(--border-color, #2a2a4a); } .heatmap-legend-item.pos-light { background: color-mix(in srgb, var(--accent-success, #00d26a) 50%, var(--bg-secondary, #16213e)); } .heatmap-legend-item.pos-heavy { background: var(--accent-success, #00d26a); } .heatmap-container { display: flex; flex-wrap: nowrap; gap: 3px; width: 100%; flex: 1; min-height: 400px; overflow-x: auto; } .heatmap-chain-group { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .heatmap-chain-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.6); padding: 2px 6px; background: rgba(0, 0, 0, 0.3); border-radius: 3px 3px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .heatmap-chain-tiles { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; } .heatmap-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 6px; padding: 4px; overflow: hidden; cursor: default; transition: filter 0.15s ease, transform 0.15s ease; position: relative; min-width: 0; border: 1px solid rgba(255, 255, 255, 0.06); } .heatmap-tile:hover { filter: brightness(1.2); transform: scale(1.02); z-index: 2; } .heatmap-tile .tile-symbol { font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; line-height: 1.2; } .heatmap-tile .tile-change { font-weight: 600; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); white-space: nowrap; line-height: 1.2; } .heatmap-tile .tile-value { color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); white-space: nowrap; line-height: 1.2; } /* Light theme heatmap overrides */ [data-theme="light"] .heatmap-chain-label { color: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.06); } [data-theme="light"] .heatmap-tile .tile-symbol { color: #1a1a2e; text-shadow: none; } [data-theme="light"] .heatmap-tile .tile-change { color: rgba(26, 26, 46, 0.85); text-shadow: none; } [data-theme="light"] .heatmap-tile .tile-value { color: rgba(26, 26, 46, 0.65); text-shadow: none; } [data-theme="light"] .heatmap-tile { border-color: rgba(0, 0, 0, 0.08); } [data-theme="light"] .heatmap-legend-item.neutral { background: #e5e7eb; } /* Total Portfolio Loading Spinner */ .total-portfolio-card { position: relative; } .total-loading-spinner { position: absolute; bottom: 16px; right: 16px; width: 20px; height: 20px; border: 2px solid var(--border-color); border-top-color: var(--accent-success); border-radius: 50%; animation: spin 1s linear infinite; } .staking-spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--border-color); border-top-color: var(--accent-success); border-radius: 50%; animation: spin 1s linear infinite; vertical-align: middle; margin-left: 6px; } /* Analytics Slider Container */ .analytics-slider-container { position: relative; margin-top: 20px; padding-bottom: 15px; } .analytics-slider-viewport { overflow: hidden; } .analytics-slider { display: flex; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .analytics-slide { min-width: 100%; flex-shrink: 0; opacity: 0; transition: opacity 0.4s ease; } .analytics-slide.active { opacity: 1; } .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); background: var(--bg-secondary, #16213e); border: 1px solid var(--border-color, #2a2a4a); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease; color: var(--text-secondary, #a0a0a0); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .slider-nav:hover { background: var(--accent-success, #00d26a); color: #fff; border-color: var(--accent-success, #00d26a); transform: translateY(-50%) scale(1.1); } .slider-nav-left { left: -18px; } .slider-nav-right { right: -18px; } .slider-indicators { display: flex; gap: 12px; justify-content: center; margin-top: 20px; margin-bottom: 10px; } .slider-indicator { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.2); cursor: pointer; transition: all 0.3s ease; } .slider-indicator.active { background: white; border-color: white; box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 30px rgba(0, 210, 106, 0.4); transform: scale(1.3); } .slider-indicator:hover { background: var(--accent-color); opacity: 0.7; } /* Analytics Chart Styles */ .analytics-chart-container { padding: 20px; } .analytics-title { text-align: center; margin-bottom: 20px; font-size: 1.5rem; color: var(--text-primary); position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; gap: 8px; } .analytics-refresh-indicator { display: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-success, #00d26a); opacity: 0.4; animation: analytics-pulse 1.2s ease-in-out infinite; } .analytics-refresh-indicator.active { display: inline-block; } .analytics-refresh-indicator.done { display: inline-block; opacity: 1; animation: none; } @keyframes analytics-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } } .analytics-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .analytics-chart-wrapper { max-width: 400px; max-height: 400px; margin: 0 auto; padding: 30px; background: radial-gradient(circle, var(--bg-card) 0%, var(--bg-secondary) 100%); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 210, 106, 0.1); position: relative; } /* Soft glowing border effect for charts */ .analytics-chart-wrapper::before { content: ''; position: absolute; inset: -1px; border-radius: 20px; padding: 1px; background: linear-gradient(135deg, rgba(0, 210, 106, 0.3), transparent, rgba(0, 210, 106, 0.3) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.5; z-index: -1; filter: blur(1px); } /* Subtle pulse animation for chart wrapper */ .analytics-chart-wrapper::after { content: ''; position: absolute; inset: 0; border-radius: 20px; background: radial-gradient(circle, rgba(0, 210, 106, 0.05), transparent 70%); z-index: -2; animation: chartGlow 3s ease-in-out infinite; } @keyframes chartGlow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.02); } } /* Add subtle glow to canvas */ .analytics-chart-wrapper canvas { filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.3)); transition: filter 0.3s ease; } .analytics-chart-wrapper:hover canvas { filter: drop-shadow(0 0 20px rgba(0, 210, 106, 0.2)); } .analytics-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 20px; } .analytics-legend-item-compact { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-secondary); border-radius: 10px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid transparent; overflow: hidden; } .analytics-legend-item-compact:hover { background: var(--bg-tertiary); transform: translateY(-2px); border-color: var(--accent-success); box-shadow: 0 4px 12px rgba(0, 210, 106, 0.2); } .analytics-legend-item-compact.selected { background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-card)); border-color: var(--accent-success); box-shadow: 0 0 20px rgba(0, 210, 106, 0.4); transform: scale(1.05); } .legend-color-dot-glow { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .legend-compact-label { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .legend-top-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; overflow: hidden; } .legend-symbol { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); white-space: normal; word-wrap: break-word; line-height: 1.3; flex: 1; } .legend-value-inline { font-size: 0.8rem; font-weight: 600; color: var(--accent-success); white-space: nowrap; margin-left: auto; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .legend-percentage-compact { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; } /* Category Tooltip Popup */ .category-tooltip { position: fixed; background: rgba(0, 0, 0, 0.95); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 0; z-index: 10000; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); min-width: 250px; max-width: 300px; animation: tooltipFadeIn 0.2s ease-out; } @keyframes tooltipFadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } .category-tooltip-header { padding: 12px 16px; font-weight: 600; font-size: 0.9rem; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.15); background: linear-gradient(135deg, rgba(0, 210, 106, 0.2), rgba(0, 150, 80, 0.2)); } .category-tooltip-body { padding: 8px; } .category-tooltip-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; transition: background 0.2s; } .category-tooltip-item:hover { background: rgba(255, 255, 255, 0.05); } .tooltip-rank { color: var(--text-secondary); font-size: 0.75rem; min-width: 20px; } .tooltip-symbol { flex: 1; color: #fff; font-weight: 600; font-size: 0.85rem; } .tooltip-value { color: var(--accent-success); font-weight: 600; font-size: 0.85rem; text-align: right; } .category-tooltip-more { padding: 8px 8px 4px 8px; color: var(--text-secondary); font-size: 0.75rem; font-style: italic; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 4px; } /* Old legend styles - kept for backwards compatibility */ .analytics-legend-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 15px; background: var(--bg-secondary); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; } .analytics-legend-item:hover { background: var(--bg-tertiary); transform: translateX(5px); } .analytics-legend-item.selected { background: var(--accent-success); color: #000; transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 210, 106, 0.3); } .legend-color-dot { width: 16px; height: 16px; border-radius: 50%; margin-right: 10px; } .legend-label-group { display: flex; align-items: center; flex: 1; } .legend-name { font-weight: 600; } .legend-percentage { color: var(--accent-success); font-size: 0.9rem; margin-left: 10px; } .legend-value { font-weight: 600; } .analytics-selection-info { display: none; /* Hidden - now showing info inline in legend */ } .summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .summary-card { background-color: var(--bg-card); border-radius: 12px; padding: 24px; transition: transform 0.2s ease; } .summary-card:hover { transform: translateY(-2px); } .summary-card.cardano { border-top: 4px solid var(--accent-cardano); } .summary-card.bitcoin { border-top: 4px solid var(--accent-bitcoin); } .summary-card.ethereum { border-top: 4px solid #627eea; } .summary-card.solana { border-top: 4px solid #14F195; } .summary-card.polygon { border-top: 4px solid #8247E5; } .summary-card.base { border-top: 4px solid #0052FF; } .card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 1.1rem; } .blockchain-icon { font-size: 1.5rem; font-weight: bold; } .blockchain-logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; } .blockchain-logo-small { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-right: 8px; } .exchange-logo { width: 28px; height: 28px; object-fit: contain; margin-right: 8px; } .asset-logo { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; margin-right: 6px; } .token-logo-staking { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .token-logo-wrap { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 8px; flex-shrink: 0; } .token-logo-wrap .logo-fallback { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 0.5rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; } .token-logo-line { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-right: 8px; vertical-align: middle; } .coin-legend-logo { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* ============================================================================ LOGOKIT TOKEN LOGO STYLING ============================================================================ */ /* Token Logo Container */ .token-logo-container { position: relative; width: 40px; height: 40px; flex-shrink: 0; } .token-logo-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .token-logo-fallback { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg, var(--accent-success), var(--accent-color)); color: white; display: none; align-items: center; justify-content: center; font-weight: bold; font-size: 1.2rem; } /* Small logo variant */ .token-logo-container.small { width: 24px; height: 24px; } .token-logo-container.small .token-logo-fallback { font-size: 0.8rem; } /* Large logo variant */ .token-logo-container.large { width: 64px; height: 64px; } .token-logo-container.large .token-logo-fallback { font-size: 1.8rem; } /* Blockchain icon image support (for LogoKit images) */ .blockchain-icon-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .blockchain-icon-fallback { width: 100%; height: 100%; display: none; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; } /* Price info in card header */ .price-info { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .price-info .token-price { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); font-family: 'SF Mono', Monaco, 'Courier New', monospace; } .price-info .price-change { font-size: 0.75rem; font-weight: 500; font-family: 'SF Mono', Monaco, 'Courier New', monospace; } /* Static colors for price change - NOT affected by theme */ .price-info .price-change.positive { color: #00d26a !important; } .price-info .price-change.negative { color: #ff4757 !important; } .price-info .market-cap { font-size: 0.65rem; color: var(--text-primary); font-family: 'SF Mono', Monaco, 'Courier New', monospace; } .price-info .market-cap .mcap-suffix { color: #888; font-weight: 600; } .card-body .balance { font-size: 1.8rem; font-weight: 600; margin-bottom: 4px; font-family: 'SF Mono', Monaco, 'Courier New', monospace; } .card-body .balance-secondary { font-size: 1rem; color: var(--text-secondary); margin-bottom: 12px; font-family: 'SF Mono', Monaco, 'Courier New', monospace; } /* Add parentheses around USD in crypto mode */ .card-body .balance-secondary::before { content: '('; } .card-body .balance-secondary::after { content: ')'; } .card-body { display: flex; flex-direction: column; } .card-body .details { display: flex; gap: 16px; color: var(--text-secondary); font-size: 0.9rem; } /* Collapsible Sections */ .collapsible-section .section-header { display: flex; align-items: center; gap: 16px; cursor: pointer; padding: 12px 16px; background-color: var(--bg-card); border-radius: 8px; margin-bottom: 16px; transition: background-color 0.2s ease; } .collapsible-section .section-header:hover { background-color: var(--bg-secondary); } .collapsible-section .section-header h2 { margin: 0; font-size: 1.1rem; color: var(--text-primary); } .collapsible-section .section-summary { display: flex; gap: 12px; margin-left: auto; font-size: 0.85rem; } .collapsible-section .chain-count { padding: 4px 10px; border-radius: 12px; font-weight: 500; } .collapsible-section .chain-count.cardano { background-color: rgba(0, 51, 173, 0.2); color: #6b9fff; } .collapsible-section .chain-count.bitcoin { background-color: rgba(247, 147, 26, 0.2); color: #f7931a; } .collapsible-section .chain-count.ethereum { background-color: rgba(98, 126, 234, 0.2); color: #627eea; } .collapsible-section .chain-count.solana { background-color: rgba(20, 241, 149, 0.2); color: #14F195; } .collapsible-section .chain-count.polygon { background-color: rgba(130, 71, 229, 0.2); color: #8247E5; } .collapsible-section .chain-count.base { background-color: rgba(0, 82, 255, 0.2); color: #0052FF; } /* Chain Icons Stack (overlapping circular icons in wallet header) */ .chain-icons-stack { display: inline-flex; align-items: center; vertical-align: middle; } .chain-icon-circle { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--bg-card, #0f3460); margin-left: -10px; object-fit: cover; background: var(--bg-secondary, #16213e); } .chain-icon-circle:first-child { margin-left: 0; } .chain-icon-fallback { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--text-primary, #e0e0e0); background: var(--bg-hover, #1a1a2e); } .chain-icon-overflow { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--bg-card, #0f3460); margin-left: -10px; background: var(--bg-hover, #1a1a2e); color: var(--text-secondary, #a0a0a0); font-size: 0.85rem; font-weight: 600; } /* Supply Metrics Row in Asset Breakdown Modal */ .supply-metrics-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .supply-metrics-row .metric-card { flex: 1; min-width: 100px; text-align: center; padding: 8px 12px; border-radius: 10px; background: var(--bg-secondary, #16213e); border: 1px solid var(--border-color, #2a2a4a); } .supply-metrics-row .metric-label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary, #a0a0a0); margin-bottom: 4px; } .supply-metrics-row .metric-value { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-primary, #eaeaea); } /* Section Refresh Button */ .section-refresh-btn { background: none; border: none; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: all 0.2s ease; margin-left: 8px; } .section-refresh-btn:hover { color: var(--accent-success); background-color: rgba(0, 210, 106, 0.1); } .section-refresh-btn.refreshing { animation: spin 1s linear infinite; color: var(--accent-success); } /* DeFi background refresh bar */ .defi-refresh-bar { height: 3px; width: 100%; overflow: hidden; opacity: 0; transition: opacity 0.3s ease; } .defi-refresh-bar.active { opacity: 1; } .defi-refresh-bar-fill { height: 100%; width: 30%; background: var(--accent-success, #00d26a); border-radius: 2px; animation: defi-refresh-sweep 1.4s ease-in-out infinite; } @keyframes defi-refresh-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(433%); } } /* Section Header Inline (non-collapsible sections) */ .section-header-inline { display: flex; align-items: center; margin-bottom: 20px; } .section-header-inline h2 { font-size: 1.2rem; color: var(--text-secondary); margin: 0; } .collapsible-section .collapse-icon { color: var(--text-secondary); font-size: 0.8rem; transition: transform 0.2s ease; } .collapsible-section.collapsed .collapse-icon { transform: rotate(-90deg); } .collapsible-section .section-content { transition: max-height 0.3s ease, opacity 0.3s ease; overflow: hidden; } .collapsible-section.collapsed .section-content { max-height: 0; opacity: 0; margin: 0; padding: 0; } /* Wallets Section */ .wallets-section { margin-bottom: 40px; } .wallets-section h2 { margin-bottom: 12px; font-size: 1.2rem; color: var(--text-secondary); } .wallets-section .section-summary { margin-bottom: 12px; } .wallets-section.collapsible-section h2 { margin-bottom: 0; } .assets-section.collapsible-section h2 { margin-bottom: 0; } .collapsible-section .section-summary span { color: var(--text-secondary); background-color: var(--bg-secondary); padding: 4px 10px; border-radius: 12px; font-weight: 500; } .wallets-list { display: flex; flex-direction: column; gap: 12px; } /* Stake Group Styles */ .stake-group { background-color: var(--bg-card); border-radius: 8px; overflow: hidden; margin-bottom: 8px; } .stake-group-header { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background-color 0.2s ease; } .stake-group-header:hover { background-color: var(--bg-secondary); } .stake-group-info { display: flex; align-items: center; gap: 12px; } .expand-icon { font-size: 0.85rem; transition: transform 0.2s ease; display: inline-block; width: 16px; } .stake-group.expanded .expand-icon { transform: rotate(90deg); } .stake-key-display { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.85rem; color: var(--text-secondary); } .group-label { padding: 4px 8px; background-color: var(--accent-color); color: white; border-radius: 4px; font-size: 0.75rem; font-weight: 500; } .stake-group-summary { display: flex; align-items: center; gap: 16px; } .wallet-count, .total-balance, .asset-count { font-size: 0.9rem; color: var(--text-secondary); } .total-balance { font-weight: 600; color: var(--accent-color); } .stake-group-wallets { border-top: 1px solid var(--bg-secondary); padding: 8px; background-color: var(--bg-primary); } .stake-group-wallets .wallet-item { margin-bottom: 8px; } .stake-group-wallets .wallet-item:last-child { margin-bottom: 0; } .wallet-item { background-color: var(--bg-card); border-radius: 8px; padding: 16px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .wallet-item .wallet-info { display: flex; flex-direction: column; gap: 4px; } .wallet-item .wallet-address { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.85rem; color: var(--text-secondary); } .wallet-item .wallet-label { font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wallet-label .label-text { color: var(--text-primary); } .wallet-label .token-count { background-color: var(--accent-color); color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; cursor: pointer; transition: opacity 0.2s ease; } .wallet-label .token-count:hover { opacity: 0.8; } .wallet-label-container { display: flex; align-items: center; gap: 8px; } /* Wallet Actions Buttons */ .wallet-actions { display: flex; gap: 8px; align-items: center; } .wallet-actions .btn { white-space: nowrap; } /* Wallet Assets Container */ .wallet-assets-container { display: none; margin-top: 12px; padding: 12px; background-color: var(--bg-secondary); border-radius: 6px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .wallet-assets-container.expanded { display: block; max-height: 500px; overflow-y: auto; } .wallet-asset-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px; margin-bottom: 4px; background-color: var(--bg-card); border-radius: 4px; } .wallet-asset-item:last-child { margin-bottom: 0; } .wallet-asset-name { font-size: 0.85rem; color: var(--text-primary); font-weight: 500; } .wallet-asset-quantity { font-size: 0.85rem; color: var(--text-secondary); font-family: 'SF Mono', Monaco, 'Courier New', monospace; } .edit-label-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.2s ease; } .wallet-item:hover .edit-label-btn { opacity: 1; } .edit-label-btn:hover { color: var(--text-primary); background-color: var(--bg-secondary); } .delete-wallet-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0; transition: all 0.2s ease; margin-left: 4px; } .wallet-item:hover .delete-wallet-btn { opacity: 1; } .delete-wallet-btn:hover { color: #ff4757; background-color: rgba(255, 71, 87, 0.1); } .edit-group-label-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0; transition: all 0.2s ease; } .wallet-group-header:hover .edit-group-label-btn { opacity: 1; } .edit-group-label-btn:hover { color: var(--text-primary); background-color: var(--bg-secondary); } .wallet-group-header:hover .delete-group-btn { opacity: 1; } .wallet-group-header:hover .copy-address-btn { opacity: 0.6; } .edit-label-input { background-color: var(--bg-secondary); border: 1px solid var(--accent-cardano); border-radius: 4px; color: var(--text-primary); font-size: 0.9rem; font-weight: 500; padding: 4px 8px; width: 200px; outline: none; } /* Dashboard wallet assets expansion */ .assets-toggle { cursor: pointer; user-select: none; font-weight: 600; font-size: 0.95rem; color: var(--accent-color); padding: 4px 10px; border-radius: 4px; background-color: rgba(52, 152, 219, 0.1); transition: all 0.2s ease; display: inline-block; margin-top: 6px; } .assets-toggle:hover { background-color: rgba(52, 152, 219, 0.2); transform: translateX(2px); text-decoration: underline; } .wallet-assets-list { width: 100%; padding: 12px; background-color: var(--bg-secondary); border-radius: 6px; margin-top: 8px; } .assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } .asset-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; background: linear-gradient(135deg, rgba(52, 152, 219, 0.15) 0%, rgba(142, 68, 173, 0.15) 100%); border: 1px solid rgba(52, 152, 219, 0.3); border-radius: 8px; font-size: 0.9rem; transition: all 0.3s ease; position: relative; overflow: hidden; gap: 12px; } .asset-item::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, #3498db 0%, #9b59b6 100%); opacity: 0.8; } .asset-item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2); border-color: rgba(52, 152, 219, 0.5); } .asset-info { flex: 1; min-width: 0; padding-left: 8px; } .asset-ticker { color: var(--text-primary); font-weight: 700; font-size: 0.95rem; margin-bottom: 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .asset-name { color: var(--text-secondary); font-weight: 500; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .asset-values { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .asset-quantity { color: #3498db; font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-weight: 700; font-size: 0.95rem; background: rgba(52, 152, 219, 0.1); padding: 4px 10px; border-radius: 6px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); white-space: nowrap; } .asset-price { color: #27ae60; font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-weight: 600; font-size: 0.8rem; background: rgba(39, 174, 96, 0.1); padding: 3px 8px; border-radius: 4px; white-space: nowrap; } /* Cardano Asset Table Layout */ .assets-table-wrapper { width: 100%; overflow-x: auto; margin-top: 8px; } .assets-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .assets-table thead { background: var(--bg-card); border-bottom: 2px solid rgba(52, 152, 219, 0.3); } .assets-table th { padding: 12px 10px; text-align: left; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; white-space: nowrap; } .assets-table tbody tr { border-bottom: 1px solid var(--bg-secondary); transition: background-color 0.2s ease; } .assets-table tbody tr:hover { background: rgba(52, 152, 219, 0.05); } .assets-table tbody tr.native-asset-row { background: rgba(243, 156, 18, 0.08); border-bottom: 2px solid rgba(243, 156, 18, 0.3); } .assets-table tbody tr.native-asset-row:hover { background: rgba(243, 156, 18, 0.12); } .assets-table tbody tr.native-asset-row .asset-ticker { color: #f39c12; } .assets-table td { padding: 12px 10px; color: var(--text-primary); font-family: 'SF Mono', Monaco, 'Courier New', monospace; } .asset-name-cell { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; display: flex; align-items: center; gap: 10px; } .asset-name-cell .asset-ticker { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 2px; } .asset-name-cell .asset-name-small { font-size: 0.75rem; color: var(--text-secondary); font-weight: 400; } .ada-value { color: #f39c12; font-weight: 700; } .portfolio-bar-wrapper { display: flex; align-items: center; gap: 8px; min-width: 100px; } .portfolio-bar { height: 6px; background: linear-gradient(90deg, #3498db 0%, #9b59b6 100%); border-radius: 3px; min-width: 2px; } .portfolio-pct { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; } /* Asset ignore toggle */ .ignore-toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; } .ignore-toggle input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #27ae60; border-radius: 24px; transition: 0.3s; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: 0.3s; } .ignore-toggle input:checked + .toggle-slider { background-color: #e74c3c; } .ignore-toggle input:checked + .toggle-slider:before { transform: translateX(20px); } .ignore-na { color: var(--text-secondary); font-size: 0.9rem; } .assets-table tbody tr.asset-ignored { opacity: 0.5; background: rgba(231, 76, 60, 0.05); } .assets-table tbody tr.asset-ignored td { text-decoration: line-through; color: var(--text-secondary); } .assets-table tbody tr.asset-ignored .ada-value { color: var(--text-secondary); } /* Responsive table */ @media (max-width: 768px) { .assets-table-wrapper { overflow-x: scroll; } .assets-table { font-size: 0.8rem; } .assets-table th, .assets-table td { padding: 8px 6px; } .ignore-toggle { width: 36px; height: 20px; } .toggle-slider:before { height: 14px; width: 14px; } .ignore-toggle input:checked + .toggle-slider:before { transform: translateX(16px); } } /* ===== All Holdings Overview Table (Overview page) ===== */ .holdings-overview-section { margin-top: 20px; } .holdings-overview-section .section-header-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .holdings-overview-section .toggle-label { font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; } .holdings-overview-section .toggle-label input[type="checkbox"] { accent-color: var(--accent-color, #00d26a); cursor: pointer; } /* Column settings button */ .column-settings-btn { background: none; border: 1px solid var(--bg-secondary, rgba(255,255,255,0.1)); color: var(--text-secondary); cursor: pointer; padding: 4px 8px; border-radius: 6px; font-size: 1rem; line-height: 1; transition: color 0.2s, border-color 0.2s; } .column-settings-btn:hover { color: var(--text-primary); border-color: var(--accent-color, #00d26a); } /* Column settings dropdown panel */ .column-settings-panel { position: absolute; top: 100%; right: 0; z-index: 100; background: var(--bg-card, #1a1f2e); border: 1px solid var(--bg-secondary, rgba(255,255,255,0.1)); border-radius: 10px; padding: 12px; min-width: 200px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); margin-top: 4px; } .column-settings-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--bg-secondary, rgba(255,255,255,0.1)); } .column-settings-list { display: flex; flex-direction: column; gap: 2px; } .column-settings-item { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 6px; cursor: default; transition: background 0.15s; } .column-settings-item:hover { background: rgba(255,255,255,0.05); } .column-settings-item.dragging { opacity: 0.4; } .column-settings-item.drag-over { border-top: 2px solid var(--accent-color, #00d26a); } .column-drag-handle { cursor: grab; color: var(--text-secondary); font-size: 0.85rem; width: 16px; text-align: center; user-select: none; } .column-settings-item[draggable="false"] .column-drag-handle { cursor: default; opacity: 0.3; } .column-settings-label { font-size: 0.85rem; color: var(--text-primary); flex: 1; } .column-settings-item input[type="checkbox"] { accent-color: var(--accent-color, #00d26a); cursor: pointer; } .column-settings-item input[type="checkbox"]:disabled { cursor: default; opacity: 0.5; } .column-settings-reset { margin-top: 8px; padding: 5px 10px; font-size: 0.75rem; color: var(--text-secondary); background: none; border: 1px solid var(--bg-secondary, rgba(255,255,255,0.1)); border-radius: 6px; cursor: pointer; width: 100%; transition: color 0.2s, border-color 0.2s; } .column-settings-reset:hover { color: var(--text-primary); border-color: var(--accent-color, #00d26a); } /* Table header drag handles for column reordering */ .th-drag-handle { display: inline-block; cursor: grab; color: var(--text-secondary); opacity: 0.4; font-size: 0.75rem; margin-left: 6px; vertical-align: middle; user-select: none; transition: opacity 0.2s; letter-spacing: -1px; } .th-drag-handle:hover { opacity: 1; color: var(--accent-color, #00d26a); } .holdings-overview-table th.col-dragging { opacity: 0.4; } .holdings-overview-table th.col-drag-over { border-right: 2px solid var(--accent-color, #00d26a); } .holdings-loading { display: flex; flex-direction: column; align-items: center; padding: 40px 0; color: var(--text-secondary); } .holdings-overview-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .holdings-overview-table thead { border-bottom: 2px solid rgba(52, 152, 219, 0.3); } .holdings-overview-table th { padding: 10px 12px; text-align: left; font-weight: 600; color: var(--text-secondary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; cursor: pointer; user-select: none; } .holdings-overview-table th:hover { color: var(--text-primary); } .holdings-overview-table th .sort-arrow { font-size: 0.7rem; margin-left: 3px; opacity: 0.5; } .holdings-overview-table th.sorted .sort-arrow { opacity: 1; color: var(--accent-color); } .holdings-overview-table th.text-right, .holdings-overview-table td.text-right { text-align: right; } .holdings-overview-table tbody tr { border-bottom: 1px solid var(--bg-secondary); transition: background-color 0.15s ease; } .holdings-overview-table tbody tr:hover { background: rgba(52, 152, 219, 0.05); } .holdings-overview-table td { padding: 10px 12px; color: var(--text-primary); vertical-align: middle; } /* Name cell with logo */ .holding-name-cell { display: flex; align-items: center; gap: 10px; } .holding-logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-secondary); } .holding-logo-fallback { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-success, #27ae60), var(--accent-color, #3498db)); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .holding-name-text { display: flex; flex-direction: column; min-width: 0; } .holding-name-text .holding-ticker { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .holding-name-text .holding-full-name { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } /* Amount cell */ .holding-amount { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.85rem; } /* Price change */ .holding-change { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.85rem; font-weight: 500; } .holding-change.positive { color: var(--accent-success, #27ae60); } .holding-change.negative { color: #e74c3c; } .holding-change.neutral { color: var(--text-secondary); } /* Sparkline canvas */ .holding-sparkline, .holding-sparkline-slot { width: 100px; height: 32px; display: block; } /* Price & total */ .holding-price, .holding-total { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.85rem; white-space: nowrap; } .holding-total { font-weight: 600; } /* Responsive */ @media (max-width: 768px) { .holdings-overview-table { font-size: 0.8rem; } .holdings-overview-table th, .holdings-overview-table td { padding: 8px 6px; } .holding-sparkline { display: none; } .holding-name-text .holding-full-name { max-width: 100px; } } .wallet-item .wallet-balance { text-align: right; } .wallet-item .wallet-balance .amount { font-size: 1.1rem; font-weight: 600; font-family: 'SF Mono', Monaco, 'Courier New', monospace; } .wallet-item .wallet-balance .amount-usd { font-size: 0.85rem; color: var(--text-secondary); font-family: 'SF Mono', Monaco, 'Courier New', monospace; } /* Add parentheses around USD in crypto mode */ .wallet-item .wallet-balance .amount-usd::before { content: '('; } .wallet-item .wallet-balance .amount-usd::after { content: ')'; } /* Wallet Governance Info */ .wallet-governance { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); } .wallet-governance .gov-loading { font-size: 0.75rem; color: var(--text-secondary); font-style: italic; } .wallet-governance .gov-error { font-size: 0.75rem; color: var(--text-secondary); } .wallet-governance .gov-details { display: flex; flex-wrap: wrap; gap: 12px; } .wallet-governance .gov-item { display: flex; align-items: center; gap: 4px; font-size: 0.75rem; padding: 4px 8px; background-color: var(--bg-secondary); border-radius: 12px; } .wallet-governance .gov-icon { font-size: 0.85rem; } .wallet-governance .gov-label { color: var(--text-secondary); } .wallet-governance .gov-value { color: var(--text-primary); font-weight: 500; } .wallet-governance .gov-item.pool .gov-value { color: #22c55e; } .wallet-governance .gov-item.drep .gov-value { color: #8b5cf6; } .wallet-governance .gov-item.rewards .gov-value { color: #f59e0b; } .wallet-governance .gov-item.undelegated .gov-value { color: var(--text-secondary); font-style: italic; } .wallet-item .wallet-balance .assets { font-size: 0.8rem; color: var(--text-secondary); } .wallet-item .wallet-balance { display: flex; flex-direction: column; } .wallet-item.cardano { border-left: 3px solid var(--accent-cardano); } .wallet-item.bitcoin { border-left: 3px solid var(--accent-bitcoin); } .wallet-item.ethereum { border-left: 3px solid var(--accent-ethereum); } .wallet-item.solana { border-left: 3px solid #14F195; } .wallet-item.polygon { border-left: 3px solid #8247E5; } .wallet-item.base { border-left: 3px solid #0052FF; } /* Wallet Groups (Stake Key Grouping) */ .wallet-group { background-color: var(--bg-card); border-radius: 8px; overflow: hidden; border-left: 3px solid var(--accent-cardano); } .wallet-group-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; cursor: pointer; background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%); transition: background-color 0.2s ease; } .wallet-group-header:hover { background: var(--bg-secondary); } .wallet-group-header .group-info { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 8px; flex: 1; min-width: 0; } .wallet-group-header .group-label { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .wallet-group-header .group-wallet-count { font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; } .wallet-group-header .group-balance { text-align: right; display: flex; flex-direction: column; } .wallet-group-header .group-balance .amount { font-size: 1.1rem; font-weight: 600; font-family: 'SF Mono', Monaco, 'Courier New', monospace; } .wallet-group-header .group-balance .amount-usd { font-size: 0.85rem; color: var(--text-secondary); font-family: 'SF Mono', Monaco, 'Courier New', monospace; } /* Add parentheses around USD in crypto mode */ .wallet-group-header .group-balance .amount-usd::before { content: '('; } .wallet-group-header .group-balance .amount-usd::after { content: ')'; } .wallet-group-header .collapse-icon { color: var(--text-secondary); font-size: 0.6rem; transition: transform 0.2s ease, border-color 0.2s ease; margin-left: 12px; border: 1.5px solid var(--border-color); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .wallet-group-header:hover .collapse-icon { border-color: var(--accent-primary); color: var(--accent-primary); } .wallet-group.collapsed .collapse-icon { transform: rotate(-90deg); } .wallet-group-content { border-top: 1px solid var(--border-color); transition: max-height 0.3s ease, opacity 0.3s ease; } .wallet-group.collapsed .wallet-group-content { max-height: 0; opacity: 0; overflow: hidden; } /* Blockchain Section Styles */ .blockchain-section { background-color: var(--bg-card); border-radius: 8px; overflow: hidden; margin-bottom: 12px; border: 2px solid var(--border-color); } .blockchain-section-header { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background-color 0.2s ease; background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%); } .blockchain-section-header:hover { background: var(--bg-secondary); } .blockchain-section-header .blockchain-info { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .blockchain-section-header .blockchain-name { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); } .blockchain-section-header .blockchain-stats { font-size: 0.85rem; color: var(--text-secondary); } .blockchain-section-header .blockchain-balance { display: flex; flex-direction: column; align-items: flex-end; } .blockchain-section-header .blockchain-balance .amount { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); } .blockchain-section-header .blockchain-balance .amount-usd { font-size: 0.9rem; color: var(--text-secondary); } .blockchain-section-header .collapse-icon { color: var(--text-secondary); font-size: 0.65rem; transition: transform 0.2s ease, border-color 0.2s ease; margin-left: 16px; border: 1.5px solid var(--border-color); border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .blockchain-section-header:hover .collapse-icon { border-color: var(--accent-primary); color: var(--accent-primary); } .blockchain-section.collapsed .collapse-icon { transform: rotate(-90deg); } .blockchain-section-content { padding: 12px; background-color: var(--bg-primary); transition: max-height 0.3s ease, opacity 0.3s ease; } .blockchain-section.collapsed .blockchain-section-content { max-height: 0; opacity: 0; overflow: hidden; padding: 0; } /* Stake Key Governance Section */ .stake-governance { padding: 12px 20px; background-color: var(--bg-secondary); border-top: 1px solid var(--border-color); } .stake-governance .gov-loading { font-size: 0.8rem; color: var(--text-secondary); font-style: italic; } .stake-governance .gov-error { font-size: 0.8rem; color: var(--text-secondary); } .stake-governance .gov-details { display: flex; flex-wrap: wrap; gap: 12px; } .stake-governance .gov-item { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; padding: 6px 12px; background-color: var(--bg-card); border-radius: 16px; } .stake-governance .gov-icon { font-size: 1rem; } .stake-governance .gov-label { color: var(--text-secondary); } .stake-governance .gov-value { color: var(--text-primary); font-weight: 500; } .stake-governance .gov-item.pool .gov-value { color: #22c55e; } .stake-governance .gov-item.drep .gov-value { color: #8b5cf6; } .stake-governance .gov-item.rewards .gov-value { color: #f59e0b; } .stake-governance .gov-item.undelegated .gov-value { color: var(--text-secondary); font-style: italic; } /* Governance links */ .gov-link { color: inherit; text-decoration: none; transition: opacity 0.2s, text-decoration 0.2s; } .gov-link:hover { text-decoration: underline; opacity: 0.85; } .gov-item.pool .gov-link { color: #22c55e; } .gov-item.drep .gov-link { color: #8b5cf6; } /* Grouped wallet items have slightly different styling */ .wallet-item.grouped-wallet { border-left: none; border-radius: 0; background-color: transparent; border-bottom: 1px solid var(--border-color); } .wallet-item.grouped-wallet:last-child { border-bottom: none; } .wallet-item.grouped-wallet .wallet-info { padding-left: 16px; } /* Stake address badge */ .wallet-item .stake-badge { font-size: 0.7rem; color: var(--text-secondary); background-color: var(--bg-secondary); padding: 2px 8px; border-radius: 10px; margin-left: 8px; } /* Wallet Explorer Links */ .wallet-explorers { display: flex; gap: 8px; margin-top: 8px; } .explorer-link { text-decoration: none; position: relative; } .explorer-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; font-size: 0.65rem; font-weight: 700; letter-spacing: -0.5px; transition: all 0.2s ease; cursor: pointer; } .explorer-icon.adastat { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: white; } .explorer-icon.cexplorer { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: white; } .explorer-icon.taptools { background: linear-gradient(135deg, #10b981, #059669); color: white; } .explorer-icon.mempool { background: linear-gradient(135deg, #f59e0b, #d97706); color: white; } .explorer-icon.blockstream { background: linear-gradient(135deg, #22c55e, #16a34a); color: white; } .explorer-icon.blockchain { background: linear-gradient(135deg, #0ea5e9, #0284c7); color: white; } /* Ethereum explorers */ .explorer-icon.etherscan { background: linear-gradient(135deg, #6366f1, #4f46e5); color: white; } .explorer-icon.debank { background: linear-gradient(135deg, #fe815f, #e85d38); color: white; } .explorer-icon.zapper { background: linear-gradient(135deg, #a855f7, #9333ea); color: white; } /* Solana explorers */ .explorer-icon.solscan { background: linear-gradient(135deg, #14F195, #10B981); color: #000; } .explorer-icon.solana-explorer { background: linear-gradient(135deg, #9945FF, #7C3AED); color: white; } .explorer-icon.solana-beach { background: linear-gradient(135deg, #00C2FF, #0891B2); color: white; } .explorer-icon.polygonscan { background: linear-gradient(135deg, #8247E5, #A855F7); color: white; } .explorer-icon:hover { transform: scale(1.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } /* Tooltip styling */ .explorer-link::after { content: attr(title); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: 8px 12px; background-color: var(--bg-primary); color: var(--text-primary); font-size: 0.75rem; font-weight: 400; white-space: nowrap; border-radius: 6px; border: 1px solid var(--border-color); opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 100; pointer-events: none; margin-bottom: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .explorer-link:hover::after { opacity: 1; visibility: visible; } /* Exchange Section */ .exchanges-section { margin-bottom: 40px; } .exchanges-section h2 { margin-bottom: 20px; font-size: 1.2rem; color: var(--text-secondary); } .exchanges-section.collapsible-section h2 { margin-bottom: 0; } .exchanges-list { display: flex; flex-direction: column; gap: 16px; } .exchange-section { background-color: var(--bg-card); border-radius: 12px; overflow: hidden; } .exchange-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-card) 100%); border-bottom: 1px solid var(--border-color); } .exchange-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; } .exchange-icon.coinbase { background: linear-gradient(135deg, #0052ff, #0033ad); color: white; } .exchange-name { font-size: 1.1rem; font-weight: 600; } .exchange-value { margin-left: auto; font-size: 1.2rem; font-weight: 700; font-family: 'SF Mono', Monaco, 'Courier New', monospace; color: var(--accent-success); } .exchange-assets { display: flex; flex-direction: column; } .exchange-assets .connected-state { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 0.9rem; } .connected-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--accent-success, #00d26a); flex-shrink: 0; } .btn-exchange-sync { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; margin-left: 8px; font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); background: transparent; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; } .btn-exchange-sync:hover:not(:disabled) { color: var(--accent-success, #00d26a); border-color: var(--accent-success, #00d26a); background: rgba(0, 210, 106, 0.08); } .btn-exchange-sync:disabled { opacity: 0.7; cursor: not-allowed; } .btn-exchange-sync .sync-icon { font-size: 1rem; line-height: 1; } .btn-exchange-sync .sync-icon.spinning { display: inline-block; animation: spin 1s linear infinite; } .btn-wallet-sync { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; font-size: 1rem; color: var(--text-secondary); background: transparent; border: 1px solid transparent; border-radius: 50%; cursor: pointer; transition: all 0.2s ease; line-height: 1; } .btn-wallet-sync:hover:not(:disabled) { color: var(--accent-success, #00d26a); border-color: var(--accent-success, #00d26a); background: rgba(0, 210, 106, 0.08); } .btn-wallet-sync:disabled { opacity: 0.7; cursor: not-allowed; } .btn-wallet-sync .sync-icon.spinning { display: inline-block; animation: spin 1s linear infinite; } .exchange-asset-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border-color); transition: background-color 0.2s ease; } .exchange-asset-item:last-child { border-bottom: none; } .exchange-asset-item:hover { background-color: var(--bg-secondary); } .exchange-asset-item .asset-info { display: flex; flex-direction: row; align-items: center; gap: 8px; } .exchange-asset-item .asset-text-info { display: flex; flex-direction: column; gap: 2px; } .exchange-asset-item .asset-currency { font-weight: 600; font-size: 1rem; } .exchange-asset-item .asset-name-small { font-size: 0.75rem; color: var(--text-secondary); } .exchange-asset-item .asset-balance { text-align: right; display: flex; flex-direction: column; } .exchange-asset-item .balance-amount { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.95rem; color: var(--text-primary); } .exchange-asset-item .balance-usd { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.85rem; color: var(--text-secondary); } /* Add parentheses around USD in crypto mode */ .exchange-asset-item .balance-usd::before { content: '('; } .exchange-asset-item .balance-usd::after { content: ')'; } /* Hold indicator for funds in open orders */ .hold-indicator { font-size: 0.75rem; color: #f59e0b; margin-left: 6px; font-weight: 400; } /* Exchange Summary in Section Header */ .exchanges-section .section-summary .exchange-count { padding: 4px 10px; background-color: rgba(0, 82, 255, 0.2); color: #6b9fff; border-radius: 12px; font-weight: 500; } .exchanges-section .section-summary .exchange-total { padding: 4px 10px; background-color: rgba(0, 210, 106, 0.2); color: var(--accent-success); border-radius: 12px; font-weight: 600; font-family: 'SF Mono', Monaco, 'Courier New', monospace; } .exchanges-section .section-summary .exchange-status { padding: 4px 10px; background-color: var(--bg-secondary); color: var(--text-secondary); border-radius: 12px; font-weight: 500; } .exchanges-section .section-summary .exchange-status.not-configured { background-color: rgba(255, 107, 107, 0.2); color: var(--accent-error); } .exchanges-section .section-summary .exchange-status.error { background-color: rgba(255, 107, 107, 0.2); color: var(--accent-error); } /* Assets Section */ .assets-section { margin-bottom: 40px; } .assets-section h2 { margin-bottom: 20px; font-size: 1.2rem; color: var(--text-secondary); } .assets-list { display: flex; flex-direction: column; gap: 8px; } .assets-section-header { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin: 16px 0 8px 0; text-transform: uppercase; letter-spacing: 0.5px; } .assets-section-header:first-child { margin-top: 0; } .asset-item { display: flex; justify-content: space-between; align-items: center; background-color: var(--bg-card); border-radius: 8px; padding: 12px 16px; } .asset-item.valuable { border-left: 3px solid var(--accent-success); } .asset-item .asset-info { display: flex; flex-direction: column; gap: 2px; } .asset-item .asset-name { font-weight: 500; word-break: break-all; } .asset-item .asset-price { font-size: 0.8rem; color: var(--text-secondary); } .asset-item .asset-values { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .asset-item .asset-quantity { font-family: 'SF Mono', Monaco, 'Courier New', monospace; color: var(--text-primary); } .asset-item .asset-usd { font-family: 'SF Mono', Monaco, 'Courier New', monospace; color: var(--accent-success); font-weight: 500; } .asset-item .asset-policy { font-size: 0.75rem; color: var(--text-secondary); word-break: break-all; } /* Native Tokens Section (with toggles) */ .native-tokens-section { margin-bottom: 30px; } .native-tokens-section h2 { margin-bottom: 8px; font-size: 1.3rem; } .native-tokens-section .section-hint { margin-top: 0; margin-bottom: 16px; color: var(--text-secondary); font-size: 0.85rem; } .native-tokens-summary { display: flex; gap: 16px; align-items: center; } .native-tokens-summary .tracked-value { font-size: 0.95rem; color: var(--accent-success); font-weight: 600; } .native-tokens-list { display: flex; flex-direction: column; gap: 8px; } .native-token-item { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; transition: all 0.2s ease; } .native-token-item.tracked { border-color: var(--accent-success); background: linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 210, 106, 0.1) 100%); } .native-token-item:hover { border-color: var(--accent-cardano); } /* Blockchain-specific token borders */ .native-token-item.ethereum:hover { border-color: #627eea; } .native-token-item.solana:hover { border-color: #14F195; } /* Token logo image */ .token-logo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-secondary); } /* Chain badge for tokens */ .chain-badge { display: inline-block; padding: 2px 6px; font-size: 0.65rem; font-weight: 600; border-radius: 4px; margin-right: 6px; vertical-align: middle; } .chain-badge.cardano { background-color: rgba(0, 51, 173, 0.2); color: var(--accent-cardano); } .chain-badge.ethereum { background-color: rgba(98, 126, 234, 0.2); color: #627eea; } .chain-badge.solana { background-color: rgba(20, 241, 149, 0.2); color: #14F195; } .chain-badge.polygon { background-color: rgba(130, 71, 229, 0.2); color: #8247E5; } .chain-badge.exchange { background-color: rgba(59, 130, 246, 0.2); color: #3b82f6; } /* DeFi token badge - shown when token is counted in DeFi section */ .defi-badge { display: inline-block; padding: 2px 6px; font-size: 0.6rem; font-weight: 600; border-radius: 4px; margin-left: 6px; vertical-align: middle; background-color: rgba(147, 51, 234, 0.2); color: #a855f7; } /* DeFi tokens have a subtle purple tint */ .native-token-item.is-defi.tracked { border-color: #a855f7; background: linear-gradient(135deg, var(--bg-card) 0%, rgba(147, 51, 234, 0.1) 100%); } /* Toggle Switch */ .token-toggle { flex-shrink: 0; } .toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; } .toggle-switch input { opacity: 0; width: 0; height: 0; } .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 24px; transition: 0.3s; } .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: var(--text-secondary); border-radius: 50%; transition: 0.3s; } .toggle-switch input:checked + .toggle-slider { background-color: var(--accent-success); border-color: var(--accent-success); } .toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); background-color: white; } .toggle-switch input:focus + .toggle-slider { box-shadow: 0 0 4px var(--accent-success); } /* Token Info */ .token-info { flex: 1; min-width: 0; } .token-name { font-weight: 600; font-size: 1rem; color: var(--text-primary); } .token-meta { display: flex; gap: 12px; margin-top: 4px; } .token-price { font-size: 0.8rem; color: var(--text-secondary); } .token-decimals { font-size: 0.75rem; color: var(--text-secondary); opacity: 0.7; } /* Token Values */ .token-values { text-align: right; flex-shrink: 0; } .token-quantity { font-weight: 500; font-size: 0.95rem; color: var(--text-primary); } .token-usd { font-size: 0.9rem; color: var(--accent-success); font-weight: 600; } /* Loading state */ .native-tokens-list .loading-state { padding: 20px; text-align: center; color: var(--text-secondary); } /* Section headers within native tokens list */ .assets-section-header { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 0 8px 0; margin-top: 8px; border-bottom: 1px solid var(--border-color); } .assets-section-header:first-child { margin-top: 0; padding-top: 0; } /* Other tokens (no value) styling */ .native-token-item.other { opacity: 0.7; background-color: transparent; border-color: var(--border-color); padding: 8px 16px; } .native-token-item.other:hover { opacity: 1; } .native-token-item.other .token-info { padding-left: 58px; /* Align with toggle width */ } .token-policy { font-size: 0.75rem; color: var(--text-secondary); font-family: monospace; } .more-tokens-note { text-align: center; padding: 12px; color: var(--text-secondary); font-size: 0.85rem; font-style: italic; } /* Show All toggle button styles */ .show-all-toggle { font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; gap: 6px; user-select: none; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--bg-secondary, rgba(255,255,255,0.1)); transition: all 0.2s ease; } .show-all-toggle:hover { color: var(--text-primary); border-color: var(--accent-color, #00d26a); } .show-all-toggle input[type="checkbox"] { accent-color: var(--accent-color, #00d26a); cursor: pointer; } /* Show All button for native tokens list */ .btn-show-all-tokens { display: block; margin: 12px auto; padding: 8px 20px; background: var(--bg-secondary, rgba(255,255,255,0.05)); border: 1px solid var(--border-color, #30363d); color: var(--text-secondary); border-radius: 8px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s ease; } .btn-show-all-tokens:hover { background: var(--bg-hover, rgba(255,255,255,0.1)); color: var(--text-primary); border-color: var(--accent-color, #00d26a); } /* Wallet-level show all bar */ .wallet-show-all-bar { display: flex; justify-content: flex-end; padding: 6px 10px; border-bottom: 1px solid var(--border-color, #30363d); } /* Dust token row styling — slightly dimmed */ .dust-token { opacity: 0.55; } .dust-token:hover { opacity: 0.85; } /* Other tokens count badge */ .other-tokens-count { color: var(--text-secondary); font-size: 0.85em; font-weight: 400; } /* Summary styling */ #nativeTokensSummary { display: flex; gap: 16px; align-items: center; } #nativeTokensSummary .token-count { color: var(--text-secondary); } #nativeTokensSummary .tracked-value { color: var(--accent-success); font-weight: 600; } /* Custom Tokens Section */ .custom-tokens-section { margin-bottom: 20px; } .custom-tokens-list { display: flex; flex-direction: column; gap: 8px; } .custom-token-item { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; transition: all 0.2s ease; } .custom-token-item:hover { border-color: var(--accent-cardano); } .custom-token-item.tracked { border-color: var(--accent-success); background: linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 210, 106, 0.1) 100%); } .custom-token-item .token-toggle { flex-shrink: 0; } .custom-token-item .token-info { flex: 1; min-width: 0; } .custom-token-item .token-name { font-weight: 600; font-size: 1rem; color: var(--text-primary); } .custom-token-item .token-meta { display: flex; gap: 12px; margin-top: 4px; } .custom-token-item .token-chain { font-size: 0.75rem; padding: 2px 6px; background-color: var(--accent-cardano); color: white; border-radius: 4px; } .custom-token-item .token-label { font-size: 0.8rem; color: var(--text-secondary); } .custom-token-item .token-values { text-align: right; flex-shrink: 0; } .custom-token-item .token-quantity { font-weight: 500; font-size: 0.95rem; color: var(--text-primary); } .custom-token-item .token-usd { font-size: 0.9rem; color: var(--accent-success); font-weight: 600; } .delete-token-btn { background: transparent; border: none; color: var(--text-secondary); font-size: 1.2rem; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: all 0.2s; } .delete-token-btn:hover { background-color: var(--accent-error); color: white; } /* Add Wallet/Token Section */ .add-wallet-section { margin-bottom: 40px; } .add-wallet-section h2 { margin-bottom: 20px; font-size: 1.2rem; color: var(--text-secondary); } /* Tabs for Add Wallet / Add Token */ .add-section-tabs { display: flex; gap: 8px; margin-bottom: 16px; } .add-tab { padding: 10px 20px; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px 8px 0 0; color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .add-tab:hover { background-color: var(--bg-secondary); color: var(--text-primary); } .add-tab.active { background-color: var(--accent-cardano); border-color: var(--accent-cardano); color: white; } /* Form content visibility */ .add-form-content { display: none; } .add-form-content.active { display: flex; gap: 12px; flex-wrap: wrap; } .add-wallet-form, .add-token-form { padding: 20px; background-color: var(--bg-card); border-radius: 0 8px 8px 8px; border: 1px solid var(--border-color); } .add-wallet-form input, .add-token-form input { flex: 1; min-width: 150px; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 6px; background-color: var(--bg-secondary); color: var(--text-primary); font-size: 0.9rem; } .add-wallet-form input:focus, .add-token-form input:focus { outline: none; border-color: var(--accent-cardano); } .add-wallet-form input::placeholder, .add-token-form input::placeholder { color: var(--text-secondary); } /* Modal Styles */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; backdrop-filter: blur(4px); } .modal.hidden { display: none; } .modal > .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Reset .modal when used as inner content box inside .modal-overlay */ .modal-overlay > .modal { position: relative; top: auto; left: auto; width: 90%; max-width: 600px; height: auto; background-color: var(--bg-card); display: block; backdrop-filter: none; z-index: auto; } .modal-content { background-color: var(--bg-card); border-radius: 12px; width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; border: 1px solid var(--border-color); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); position: relative; z-index: 1; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--border-color); } .modal-header h3 { margin: 0; font-size: 1.2rem; color: var(--text-primary); } .modal-close { background: none; border: none; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1; transition: color 0.2s ease; } .modal-close:hover { color: var(--accent-error); } .modal-body { padding: 20px; } .modal-notice { background-color: var(--bg-secondary); padding: 12px 16px; border-radius: 8px; border-left: 4px solid var(--accent-cardano); margin-bottom: 20px; font-size: 0.9rem; color: var(--text-secondary); } .modal-notice strong { color: var(--text-primary); } .form-group { margin-bottom: 16px; } .form-group label { display: block; margin-bottom: 6px; font-size: 0.85rem; color: var(--text-secondary); } .form-group input, .form-group select { width: 100%; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 6px; background-color: var(--bg-secondary); color: var(--text-primary); font-size: 0.9rem; } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--accent-cardano); } .form-group select { cursor: pointer; } .form-group select option { background-color: var(--bg-secondary); color: var(--text-primary); } .modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding: 20px; border-top: 1px solid var(--border-color); } /* Demo Population Modal */ .demo-population-modal { max-width: 400px; text-align: center; } .demo-popup-title { font-size: 1.3rem; margin: 0 0 12px 0; color: var(--text-primary); } .demo-popup-desc { color: var(--text-secondary); margin-bottom: 30px; font-size: 0.95rem; } .progress-circle-container { position: relative; display: inline-block; margin: 20px 0; } .progress-circle { transform: rotate(-90deg); } .progress-circle-bg { fill: none; stroke: var(--bg-secondary); stroke-width: 8; } .progress-circle-fill { fill: none; stroke: var(--accent-success); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 339.292; /* 2 * PI * radius (54) */ stroke-dashoffset: 339.292; transition: stroke-dashoffset 0.3s ease; } .progress-percentage { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; font-weight: 600; color: var(--text-primary); } .demo-status-text { color: var(--text-secondary); font-size: 0.9rem; margin-top: 20px; min-height: 24px; } /* Asset Breakdown Modal - combined selector for specificity over .modal-content */ .modal-content.asset-breakdown-modal { width: 90%; max-width: 1000px; max-height: 90vh; overflow-y: auto; padding: 40px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; } .asset-breakdown-modal .modal-close { position: absolute; top: 20px; right: 20px; z-index: 10; } .breakdown-title { text-align: center; margin-bottom: 30px; font-size: 1.5rem; color: var(--text-primary); font-weight: 600; } /* DeFi Llama Metrics Section */ .defillama-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; margin-bottom: 25px; padding: 20px; background: linear-gradient(135deg, rgba(0, 210, 106, 0.05) 0%, transparent 100%); border-radius: 12px; border: 1px solid rgba(0, 210, 106, 0.1); } .metric-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 15px; background: var(--bg-secondary); border-radius: 10px; transition: all 0.3s ease; border: 1px solid transparent; } .metric-card:hover { background: var(--bg-tertiary); border-color: rgba(0, 210, 106, 0.3); transform: translateY(-2px); } .metric-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .metric-value { font-size: 1.3rem; font-weight: bold; color: var(--text-primary); background: linear-gradient(135deg, #00d26a 0%, #00ff88 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Modal Price Chart Section */ .modal-price-chart-section { margin-bottom: 25px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(0, 210, 106, 0.1); background: var(--bg-secondary); } .modal-price-chart-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; flex-wrap: wrap; gap: 10px; } .modal-chart-title-wrapper { display: flex; align-items: baseline; gap: 12px; } .modal-chart-price { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); } .modal-chart-change { font-size: 0.9rem; font-weight: 600; padding: 2px 8px; border-radius: 6px; } .modal-chart-change.positive { color: #00d26a; background: rgba(0, 210, 106, 0.1); } .modal-chart-change.negative { color: #ff4757; background: rgba(255, 71, 87, 0.1); } .modal-timeframe-selector { display: flex; gap: 4px; background: var(--bg-tertiary); border-radius: 8px; padding: 3px; } .modal-tf-btn { padding: 5px 10px; border: none; border-radius: 6px; background: transparent; color: var(--text-secondary); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .modal-tf-btn:hover { color: var(--text-primary); background: rgba(0, 210, 106, 0.1); } .modal-tf-btn.active { color: #fff; background: var(--accent-color, #00d26a); } .modal-price-chart-container { width: 100%; height: 260px; } .breakdown-stats { display: flex; justify-content: space-around; margin-bottom: 25px; padding: 15px; background: var(--bg-secondary); border-radius: 10px; } .breakdown-stats .stat { text-align: center; } .breakdown-stats .label { display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 5px; } .breakdown-stats .value { display: block; font-size: 1.5rem; font-weight: bold; color: var(--accent-color); } /* Breakdown Chart Content - Matching Slider 2/3 Style */ .breakdown-content { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 20px 0; } .breakdown-chart-wrapper { max-width: 400px; max-height: 400px; margin: 0 auto; padding: 30px; background: radial-gradient(circle, var(--bg-card) 0%, var(--bg-secondary) 100%); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 210, 106, 0.1); position: relative; } /* Soft glowing border effect for breakdown chart */ .breakdown-chart-wrapper::before { content: ''; position: absolute; inset: -1px; border-radius: 20px; padding: 1px; background: linear-gradient(135deg, rgba(0, 210, 106, 0.3), transparent, rgba(0, 210, 106, 0.3) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.5; z-index: -1; filter: blur(1px); } /* Subtle pulse animation for breakdown chart wrapper */ .breakdown-chart-wrapper::after { content: ''; position: absolute; inset: -20px; border-radius: 25px; background: radial-gradient(circle, rgba(0, 210, 106, 0.05), transparent 70%); z-index: -2; animation: chartGlow 3s ease-in-out infinite; } /* Add subtle glow to canvas */ .breakdown-chart-wrapper canvas { filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.3)); transition: filter 0.3s ease; } .breakdown-chart-wrapper:hover canvas { filter: drop-shadow(0 0 20px rgba(0, 210, 106, 0.2)); } .breakdown-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; max-height: 400px; overflow-y: auto; padding-right: 10px; } .breakdown-legend::-webkit-scrollbar { width: 6px; } .breakdown-legend::-webkit-scrollbar-track { background: var(--bg-secondary); border-radius: 3px; } .breakdown-legend::-webkit-scrollbar-thumb { background: rgba(0, 210, 106, 0.3); border-radius: 3px; } .breakdown-legend::-webkit-scrollbar-thumb:hover { background: rgba(0, 210, 106, 0.5); } /* Compact legend items matching slider 2 style */ .breakdown-legend-item-compact { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-secondary); border-radius: 10px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid transparent; position: relative; overflow: hidden; } .breakdown-legend-item-compact:hover { background: var(--bg-tertiary); border-color: rgba(0, 210, 106, 0.2); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .breakdown-legend-item-compact.selected { background: var(--bg-tertiary); border-color: rgba(0, 210, 106, 0.4); box-shadow: 0 0 20px rgba(0, 210, 106, 0.2); } .breakdown-legend-color { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .breakdown-token-logo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-secondary); } .breakdown-legend-info { flex: 1; min-width: 0; } .breakdown-legend-symbol { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .breakdown-legend-value { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; } .breakdown-legend-percentage { font-size: 0.7rem; font-weight: 600; color: var(--accent-color); margin-left: auto; flex-shrink: 0; } /* Selection info box matching slider 2 */ /* Legacy support for old legend items */ .legend-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 15px; background: var(--bg-secondary); border-radius: 10px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid transparent; } .legend-item:hover { background: var(--bg-tertiary); border-color: rgba(0, 210, 106, 0.2); transform: translateY(-2px); } .legend-color { width: 20px; height: 20px; border-radius: 4px; margin-right: 10px; } .legend-label { flex: 1; display: flex; align-items: center; } .legend-symbol { font-weight: bold; margin-right: 8px; } .legend-name { color: var(--text-secondary); font-size: 0.9rem; } .legend-value { text-align: right; } .legend-percentage { font-size: 0.85rem; color: var(--accent-color); margin-left: 10px; } /* ============================================================================ ASSET DETAIL MODAL (per-asset chart + enriched data) ============================================================================ */ .modal-content.asset-detail-modal { width: 90%; max-width: 800px; max-height: 90vh; overflow-y: auto; padding: 32px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1001; } .asset-detail-modal .modal-close { position: absolute; top: 16px; right: 16px; z-index: 10; font-size: 1.8rem; } /* Header: Logo + Name + Price */ .asset-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 16px; flex-wrap: wrap; } .asset-detail-identity { display: flex; align-items: center; gap: 12px; } .asset-detail-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; } .asset-detail-name { margin: 0; font-size: 1.3rem; font-weight: 700; color: var(--text-primary); } .asset-detail-symbol { font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; margin-right: 8px; } .asset-detail-rank { font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-secondary); padding: 2px 8px; border-radius: 10px; } .asset-detail-price-block { text-align: right; } .asset-detail-price { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); display: block; } .asset-detail-change { font-size: 0.85rem; font-weight: 600; } .asset-detail-change.positive { color: var(--accent-success, #27ae60); } .asset-detail-change.negative { color: var(--accent-error, #e74c3c); } .asset-detail-change.neutral { color: var(--text-secondary); } /* Price Change Pills */ .asset-detail-change-pills { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; } .change-pill { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; background: var(--bg-secondary); font-size: 0.8rem; } .change-pill .pill-label { color: var(--text-secondary); font-weight: 500; } .change-pill .pill-value { font-weight: 600; } .change-pill.positive .pill-value { color: var(--accent-success, #27ae60); } .change-pill.negative .pill-value { color: var(--accent-error, #e74c3c); } .change-pill.neutral .pill-value { color: var(--text-secondary); } /* Chart Section */ .asset-detail-chart-section { margin-bottom: 20px; } .asset-detail-tf-selector { display: flex; gap: 4px; margin-bottom: 8px; } .asset-tf-btn { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 4px 12px; border-radius: 6px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s ease; } .asset-tf-btn:hover { color: var(--text-primary); border-color: var(--accent-color); } .asset-tf-btn.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); } .asset-detail-chart-container { width: 100%; height: 280px; border-radius: 8px; overflow: hidden; } /* Market Data Grid */ .asset-detail-market-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .market-stat { background: var(--bg-secondary); padding: 12px; border-radius: 10px; text-align: center; } .market-stat .stat-label { display: block; font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; } .market-stat .stat-value { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); } /* Section titles */ .asset-detail-section-title { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px 0; } /* Supply Bar */ .asset-detail-supply { margin-bottom: 20px; } .supply-bar-wrapper { background: var(--bg-secondary); padding: 12px 16px; border-radius: 10px; } .supply-bar-track { width: 100%; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 8px; } .supply-bar-fill { height: 100%; background: var(--accent-color); border-radius: 4px; transition: width 0.5s ease; } .supply-bar-labels { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-secondary); } /* ATH / ATL Cards */ .asset-detail-ath-atl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; } .ath-atl-card { background: var(--bg-secondary); padding: 12px 16px; border-radius: 10px; display: flex; flex-direction: column; gap: 2px; } .ath-atl-label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .ath-atl-value { font-size: 1rem; font-weight: 700; color: var(--text-primary); } .ath-atl-date { font-size: 0.7rem; color: var(--text-secondary); } .ath-atl-change { font-size: 0.75rem; font-weight: 600; } .ath-atl-change.positive { color: var(--accent-success, #27ae60); } .ath-atl-change.negative { color: var(--accent-error, #e74c3c); } /* Description */ .asset-detail-desc-text { font-size: 0.85rem; line-height: 1.6; color: var(--text-secondary); margin: 0; } /* Clickable holdings rows */ .holdings-overview-table tbody tr { cursor: pointer; transition: background-color 0.15s ease; } .holdings-overview-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.03); } [data-theme="light"] .holdings-overview-table tbody tr:hover { background-color: rgba(0, 0, 0, 0.03); } /* Asset Detail Modal Responsive */ @media (max-width: 768px) { .modal-content.asset-detail-modal { max-width: 95%; padding: 20px; } .asset-detail-header { flex-direction: column; align-items: flex-start; } .asset-detail-price-block { text-align: left; } .asset-detail-market-grid { grid-template-columns: repeat(2, 1fr); } .asset-detail-ath-atl { grid-template-columns: 1fr; } .asset-detail-chart-container { height: 220px; } } /* Responsive Design for Asset Breakdown Modal */ @media (max-width: 768px) { .modal-content.asset-breakdown-modal { max-width: 95%; padding: 20px; } .breakdown-title { font-size: 1.2rem; margin-bottom: 20px; } .defillama-metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 15px; } .breakdown-content { grid-template-columns: 1fr; gap: 20px; } .breakdown-chart-wrapper { max-width: 100%; padding: 20px; } .breakdown-legend { max-height: 300px; grid-template-columns: 1fr; } .modal-price-chart-header { flex-direction: column; align-items: flex-start; } .modal-price-chart-container { height: 200px; } .modal-tf-btn { padding: 4px 8px; font-size: 0.7rem; } } /* Make blockchain cards clickable */ .summary-card.clickable { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .summary-card.clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .summary-card.clickable .card-header::after { content: '📊'; font-size: 1.2rem; opacity: 0.6; margin-left: 10px; } .token-lookup-result { padding: 12px 16px; border-radius: 8px; margin-top: 16px; } .token-lookup-result.hidden { display: none; } .token-lookup-result.success { background-color: rgba(0, 210, 106, 0.15); border: 1px solid var(--accent-success); color: var(--accent-success); } .token-lookup-result.error { background-color: rgba(255, 107, 107, 0.15); border: 1px solid var(--accent-error); color: var(--accent-error); } .token-lookup-result .token-info { display: flex; flex-direction: column; gap: 4px; } .token-lookup-result .token-name { font-weight: 600; color: var(--text-primary); } .token-lookup-result .token-price { font-family: 'SF Mono', Monaco, 'Courier New', monospace; color: var(--accent-success); } /* Cypherpunk modal styling */ [data-theme="cypherpunk1"] .modal-content { box-shadow: 0 0 40px rgba(0, 212, 255, 0.2), 0 0 80px rgba(124, 58, 237, 0.15), 0 20px 60px rgba(0, 0, 0, 0.5); border-color: rgba(0, 212, 255, 0.3); } [data-theme="cypherpunk1"] .modal-notice { border-left-color: #00d4ff; } [data-theme="cypherpunk1"] .add-tab.active { background-color: #00d4ff; border-color: #00d4ff; color: #030308; } /* Empty State */ .empty-state { color: var(--text-secondary); text-align: center; padding: 40px 20px; background-color: var(--bg-card); border-radius: 8px; } /* Staking Section */ .staking-section { margin-bottom: 40px; } .staking-section h2 { margin-bottom: 20px; font-size: 1.2rem; color: var(--text-secondary); } .staking-section.collapsible-section h2 { margin-bottom: 0; } .staking-section .section-summary .staking-status { padding: 4px 10px; background-color: var(--bg-secondary); color: var(--text-secondary); border-radius: 12px; font-weight: 500; } .staking-section .section-summary .staking-total { padding: 4px 10px; background-color: rgba(0, 210, 106, 0.2); color: var(--accent-success); border-radius: 12px; font-weight: 600; font-family: 'SF Mono', Monaco, 'Courier New', monospace; } .staking-positions { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .staking-positions.section-content { padding-top: 8px; } .staking-card { background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%); border-radius: 12px; padding: 20px; border-left: 4px solid var(--accent-success); } .staking-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .staking-protocol { font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } .staking-badge { background-color: var(--accent-success); color: #000; font-size: 0.7rem; font-weight: 600; padding: 3px 8px; border-radius: 10px; text-transform: uppercase; } .staking-amount { font-size: 1.6rem; font-weight: 600; font-family: 'SF Mono', Monaco, 'Courier New', monospace; color: var(--accent-success); margin-bottom: 4px; } .staking-token { font-size: 1rem; color: var(--text-primary); } .staking-details { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); font-size: 0.85rem; color: var(--text-secondary); } /* Protocol-specific staking colors */ .staking-card[data-protocol="Indigo"] { border-left-color: #6366f1; } .staking-card[data-protocol="Indigo"] .staking-amount { color: #6366f1; } .staking-card[data-protocol="Strike"] { border-left-color: #10b981; } .staking-card[data-protocol="Strike"] .staking-amount { color: #10b981; } .staking-card[data-protocol="Liqwid"] { border-left-color: #06b6d4; } .staking-card[data-protocol="Liqwid"] .staking-amount { color: #06b6d4; } .staking-card[data-protocol="Surf Lending"] { border-left-color: #3b82f6; } .staking-card[data-protocol="Surf Lending"] .staking-amount { color: #3b82f6; } /* Staking badges container */ .staking-badges { display: flex; gap: 6px; } .staking-badge.rewards { background-color: #f59e0b; color: #000; } .staking-badge.exchange { background-color: #3b82f6; color: #fff; } .staking-badge.apy { background-color: #10b981; color: #000; } .staking-card.exchange-staked { border-left-color: #3b82f6; } .staking-card.exchange-staked .staking-amount { color: #3b82f6; } .exchange-staked-note { color: var(--text-muted, var(--text-secondary)); font-size: 0.75rem; font-style: italic; margin-left: 6px; } /* APY display */ .staking-apy { margin-top: 8px; padding: 6px 10px; background-color: rgba(16, 185, 129, 0.15); border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; } .staking-apy .apy-label { font-size: 0.75rem; color: var(--text-secondary); } .staking-apy .apy-value { font-size: 0.9rem; font-weight: 600; color: #10b981; } /* Pending rewards display */ .staking-pending { margin-top: 10px; padding: 10px; background-color: rgba(245, 158, 11, 0.1); border-radius: 8px; border-left: 3px solid #f59e0b; } .staking-pending .pending-label { font-size: 0.75rem; color: #f59e0b; text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 4px; } .staking-pending .pending-amount { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); font-family: 'SF Mono', Monaco, 'Courier New', monospace; } .staking-pending .pending-usd { font-size: 0.85rem; color: var(--text-secondary); margin-left: 8px; } /* Claimed rewards display */ .staking-claimed { margin-top: 8px; font-size: 0.85rem; color: var(--text-secondary); } .staking-claimed .claimed-label { color: var(--text-secondary); } .staking-claimed .claimed-amount { color: var(--text-primary); font-family: 'SF Mono', Monaco, 'Courier New', monospace; } /* Rewards page link */ .rewards-page-link { display: inline-block; margin-left: 12px; padding: 4px 10px; background-color: var(--bg-card); color: var(--text-primary); font-size: 0.75rem; font-weight: 500; border-radius: 12px; border: 1px solid var(--border-color); text-decoration: none; transition: all 0.2s ease; } .rewards-page-link:hover { background-color: var(--accent-cardano); border-color: var(--accent-cardano); transform: translateY(-1px); } /* Pending rewards rows */ .staking-pending .pending-row, .staking-pending .accumulated-row, .staking-pending .claimed-row, .staking-pending .total-earned-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .staking-pending .pending-row:first-child { margin-top: 0; } .accumulated-label, .claimed-label, .total-earned-label { font-size: 0.75rem; color: var(--text-secondary); } .accumulated-amount, .claimed-amount, .total-earned-amount { font-size: 0.95rem; font-weight: 500; color: var(--text-primary); font-family: 'SF Mono', Monaco, 'Courier New', monospace; } .accumulated-usd { font-size: 0.85rem; color: var(--text-secondary); } /* Staking details with link */ .staking-details { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); font-size: 0.85rem; color: var(--text-secondary); display: flex; justify-content: space-between; align-items: center; } /* Staking total with pending */ .staking-total { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; padding: 15px; background-color: var(--bg-secondary); border-radius: 10px; } .staking-total-label { font-size: 1rem; color: var(--text-secondary); } .staking-total-value { font-size: 1.4rem; font-weight: 600; color: var(--accent-success); } .staking-pending-total { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background-color: rgba(245, 158, 11, 0.15); border-radius: 8px; } .staking-pending-total .pending-label { font-size: 0.85rem; color: #f59e0b; } .staking-pending-total .pending-value { font-size: 1rem; font-weight: 600; color: #f59e0b; } /* Staking summary pending */ .staking-pending-summary { background-color: rgba(245, 158, 11, 0.2) !important; color: #f59e0b !important; } /* ============================================================================ CONSOLIDATED DEFI & GOVERNANCE SECTION ============================================================================ */ .defi-governance-section { margin-bottom: 40px; } .defi-governance-section h2 { margin-bottom: 0; } .defi-governance-section .section-summary .defi-gov-count { padding: 4px 10px; background-color: var(--bg-secondary); color: var(--text-secondary); border-radius: 12px; font-weight: 500; } .defi-governance-section .section-summary .defi-gov-total { padding: 4px 10px; background-color: rgba(0, 210, 106, 0.2); color: var(--accent-success); border-radius: 12px; font-weight: 600; font-family: 'SF Mono', Monaco, 'Courier New', monospace; } .defi-last-updated { font-size: 0.75rem; color: var(--text-tertiary, #888); font-weight: 400; opacity: 0.7; white-space: nowrap; } .defi-governance-content { display: flex; flex-direction: column; gap: 24px; } /* Subsection headers */ .defi-gov-subsection { background-color: var(--bg-secondary); border-radius: 12px; padding: 20px; } .defi-gov-subsection-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); } .defi-gov-subsection-header .subsection-icon { font-size: 1.2rem; } .defi-gov-subsection-header .subsection-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); } .defi-gov-subsection-header .subsection-count { padding: 2px 8px; background-color: var(--bg-card); color: var(--text-secondary); border-radius: 10px; font-size: 0.8rem; font-weight: 500; } .staking-refresh-btn { margin-left: auto; background: none; border: 1px solid var(--border-color); border-radius: 6px; padding: 4px 8px; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; transition: color 0.2s, border-color 0.2s; } .staking-refresh-btn:hover { color: var(--accent-color); border-color: var(--accent-color); } .staking-refresh-btn.refreshing svg { animation: spin 1s linear infinite; } .staking-refresh-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Staked cards grid */ .defi-gov-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .defi-gov-card { background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-primary) 100%); border-radius: 12px; padding: 16px; border-left: 4px solid var(--accent-success); } .defi-gov-card .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .defi-gov-card .protocol-name { font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .defi-gov-card .staked-badge { background-color: var(--accent-success); color: #000; font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; } .defi-gov-card .liquid-badge { background-color: #06b6d4; color: #000; font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; } .defi-gov-card .depin-badge { background-color: #f59e0b; color: #000; font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; } .defi-gov-card .exchange-staked-badge { background-color: #3b82f6; color: #fff; font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; } .defi-gov-card .apy-badge { background-color: #10b981; color: #000; font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; } .defi-gov-card .card-note { font-size: 0.7rem; color: var(--text-muted, var(--text-secondary)); font-style: italic; margin-top: 4px; } .defi-gov-card .card-refresh-btn { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 2px; margin-left: auto; opacity: 0.5; transition: opacity 0.2s, transform 0.2s; flex-shrink: 0; } .defi-gov-card .card-refresh-btn:hover { opacity: 1; color: var(--accent-success); } .defi-gov-card .card-refresh-btn.refreshing svg { animation: spin 1s linear infinite; } .defi-gov-card.depin-loading { opacity: 0.7; } .defi-gov-card .card-loading-msg { font-size: 0.8rem; color: var(--text-secondary); padding: 8px 0; display: flex; align-items: center; gap: 8px; } .depin-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--text-secondary); border-top-color: var(--accent-success); border-radius: 50%; animation: spin 1s linear infinite; } .defi-gov-card.depin-no-data { opacity: 0.7; border-style: dashed; } .defi-gov-card.depin-timeout { opacity: 0.7; border-style: dashed; } .defi-gov-card .card-timeout-msg { font-size: 0.8rem; color: var(--text-secondary); padding: 8px 0; font-style: italic; } .defi-gov-card .retry-link { cursor: pointer; background: none; border: 1px solid var(--accent-success); color: var(--accent-success); border-radius: 8px; padding: 4px 12px; font-size: 0.75rem; } .defi-gov-card .retry-link:hover { background: var(--accent-success); color: #000; } .defi-gov-card .ada-delegation-detail { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 4px; } .defi-gov-card .pool-info { font-size: 0.8rem; color: var(--text-secondary); margin-top: 4px; } /* Override cardano chain badge inside DeFi/Governance sections for legibility on dark backgrounds */ .defi-gov-card .chain-badge.cardano, .defi-gov-line .chain-badge.cardano { color: var(--text-secondary); background-color: rgba(0, 51, 173, 0.3); } /* Delegation percentage link with undelegated wallet tooltip */ .delegation-pct-link { position: relative; cursor: pointer; color: var(--accent-error); text-decoration: underline dotted; text-underline-offset: 2px; } .undelegated-tooltip { display: none; position: absolute; top: calc(100% + 8px); left: 0; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; min-width: 240px; max-width: 320px; max-height: 300px; overflow-y: auto; z-index: 1000; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } .delegation-pct-link:hover .undelegated-tooltip, .delegation-pct-link:focus .undelegated-tooltip { display: block; } .undelegated-tooltip-header { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-color); } .undelegated-wallet-item { padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background-color 0.15s; position: relative; margin-bottom: 4px; } .undelegated-wallet-item:last-child { margin-bottom: 0; } .undelegated-wallet-item:hover { background-color: var(--bg-card); } .undelegated-wallet-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .undelegated-label { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); } .undelegated-balance { font-size: 0.75rem; color: var(--text-secondary); white-space: nowrap; } .undelegated-addr { display: block; font-size: 0.7rem; color: var(--text-secondary); font-family: 'SF Mono', Monaco, 'Courier New', monospace; margin-top: 2px; } .copy-feedback { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 0.7rem; color: var(--accent-success); font-weight: 600; opacity: 0; transition: opacity 0.3s; pointer-events: none; } .defi-gov-card .card-amount { font-size: 1.4rem; font-weight: 600; font-family: 'SF Mono', Monaco, 'Courier New', monospace; color: var(--text-primary); margin-bottom: 4px; } .defi-gov-card .card-value { font-size: 0.95rem; color: var(--accent-success); font-weight: 500; margin-bottom: 8px; } .defi-gov-card .card-pending { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 10px; } .defi-gov-card .staking-pending-compact { display: flex; gap: 8px; flex-wrap: wrap; } .defi-gov-card .pending-item { background-color: rgba(245, 158, 11, 0.2); color: #f59e0b; padding: 2px 8px; border-radius: 8px; font-size: 0.8rem; font-weight: 500; } .defi-gov-card .card-actions { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); } .defi-gov-card .action-link { font-size: 0.8rem; color: var(--accent-cardano); text-decoration: none; padding: 4px 10px; background-color: var(--bg-secondary); border-radius: 6px; transition: all 0.2s; } .defi-gov-card .action-link:hover { background-color: var(--accent-cardano); color: white; } .defi-gov-card .action-link.gov-link { color: #8b5cf6; } .defi-gov-card .action-link.gov-link:hover { background-color: #8b5cf6; color: white; } /* Protocol colors for staked cards */ .defi-gov-card[data-protocol="Indigo"] { border-left-color: #6366f1; } .defi-gov-card[data-protocol="Liqwid"] { border-left-color: #06b6d4; } .defi-gov-card[data-protocol="Strike"] { border-left-color: #f59e0b; } /* Governance tokens / stablecoins list */ .defi-gov-list { display: flex; flex-direction: column; gap: 8px; } .defi-gov-line { display: grid; grid-template-columns: 32px auto 1fr 100px auto; gap: 10px; align-items: center; padding: 10px 14px; background-color: var(--bg-card); border-radius: 8px; } .defi-gov-line .line-logo { width: 32px; display: flex; align-items: center; justify-content: center; } .defi-gov-line .line-logo img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .defi-gov-line .line-logo .logo-fallback { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; } .defi-gov-line .line-token { font-weight: 600; color: var(--text-primary); white-space: nowrap; display: flex; align-items: center; gap: 6px; } .defi-gov-line .line-amount { font-family: 'SF Mono', Monaco, 'Courier New', monospace; color: var(--text-secondary); } .defi-gov-line .line-value { font-family: 'SF Mono', Monaco, 'Courier New', monospace; color: var(--accent-success); text-align: right; } .defi-gov-line .gov-vote-link { font-size: 0.8rem; color: #8b5cf6; text-decoration: none; padding: 4px 10px; background-color: rgba(139, 92, 246, 0.15); border-radius: 6px; transition: all 0.2s; } .defi-gov-line .gov-vote-link:hover { background-color: #8b5cf6; color: white; } .defi-gov-line .gov-vote-placeholder { width: 50px; } /* Stablecoin specific styles */ .stablecoins-list .stable-line { grid-template-columns: 32px 60px minmax(80px, auto) 100px 80px; align-items: center; } .stable-line .line-chains { display: flex; flex-wrap: wrap; gap: 3px; } .stable-line .line-chains .chain-badge { margin-right: 0; font-size: 0.6rem; padding: 1px 5px; } .stable-line .stable-location { font-size: 0.75rem; padding: 2px 8px; border-radius: 6px; text-align: center; } .stable-line .stable-location.wallet { background-color: rgba(0, 210, 106, 0.15); color: var(--accent-success); } .stable-line .stable-location.exchange { background-color: rgba(59, 130, 246, 0.15); color: #3b82f6; } .stable-line .stable-locations { font-size: 0.75rem; color: var(--text-secondary); } /* Other DeFi tokens chips */ .defi-gov-tokens { display: flex; flex-wrap: wrap; gap: 8px; } .defi-token-chip { display: flex; gap: 8px; align-items: center; padding: 6px 12px; background-color: var(--bg-card); border-radius: 8px; font-size: 0.85rem; } .defi-token-chip .chip-name { font-weight: 600; color: var(--text-primary); } .defi-token-chip .chip-amount { color: var(--text-secondary); font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.8rem; } .defi-empty-line { color: var(--text-secondary); font-size: 0.9rem; padding: 10px 14px; } /* Hidden Stablecoins Dropdown */ .hidden-stables-dropdown { margin-top: 12px; border-top: 1px solid var(--border-color); padding-top: 12px; } .hidden-stables-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-secondary); font-size: 0.85rem; cursor: pointer; transition: all 0.2s; } .hidden-stables-toggle:hover { background-color: var(--bg-secondary); color: var(--text-primary); } .hidden-stables-toggle .toggle-icon { font-size: 0.7rem; transition: transform 0.2s; } .hidden-stables-dropdown.expanded .toggle-icon { transform: rotate(90deg); } .hidden-stables-toggle .toggle-text { flex: 1; text-align: left; } .hidden-stables-toggle .toggle-value { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 0.8rem; color: var(--text-secondary); } .hidden-stables-content { margin-top: 8px; padding-left: 8px; border-left: 2px solid var(--border-color); } .hidden-stables-content .hidden-stable { opacity: 0.7; font-size: 0.85rem; } .hidden-stables-content .hidden-stable .line-token { font-size: 0.8rem; } .hidden-stables-content .hidden-stable .line-amount { font-size: 0.75rem; } /* Responsive adjustments */ @media (max-width: 768px) { .defi-gov-line { grid-template-columns: auto 1fr 1fr; gap: 8px; } .defi-gov-line .line-amount { text-align: right; } .defi-gov-line .line-value, .defi-gov-line .gov-vote-link, .defi-gov-line .gov-vote-placeholder { display: none; } .stablecoins-list .stable-line { grid-template-columns: 32px auto 1fr 1fr; } .stable-line .line-chains, .stable-line .stable-locations, .stable-line .stable-location { display: none; } } /* DeFi Section (legacy - kept for compatibility) */ .defi-section { margin-bottom: 40px; } .defi-section h2 { margin-bottom: 20px; font-size: 1.2rem; color: var(--text-secondary); } .defi-section.collapsible-section h2 { margin-bottom: 0; } .defi-section .section-summary span { padding: 4px 10px; background-color: var(--bg-secondary); color: var(--text-secondary); border-radius: 12px; font-weight: 500; } .defi-content { padding-top: 0; } .defi-summary { display: flex; gap: 20px; margin-bottom: 20px; padding: 12px 16px; background-color: var(--bg-card); border-radius: 8px; font-size: 0.9rem; color: var(--text-secondary); } .defi-categories { display: flex; flex-direction: column; gap: 24px; } .defi-category { background-color: var(--bg-secondary); border-radius: 12px; padding: 20px; } .defi-category-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); } .defi-category-icon { font-size: 1.2rem; } .defi-category-title { font-weight: 600; font-size: 1rem; } .defi-category-count { margin-left: auto; font-size: 0.8rem; color: var(--text-secondary); background-color: var(--bg-card); padding: 4px 10px; border-radius: 12px; } .defi-positions { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .defi-position { background-color: var(--bg-card); border-radius: 8px; padding: 16px; border-left: 3px solid var(--accent-cardano); } .defi-position-protocol { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .defi-position-token { font-weight: 600; font-size: 1rem; margin-bottom: 8px; } .defi-position-amount { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 1.1rem; color: var(--accent-success); } .defi-position-wallets { font-size: 0.75rem; color: var(--text-secondary); margin-top: 8px; } /* Protocol color coding */ .defi-position[data-protocol="Indigo"] { border-left-color: #6366f1; } .defi-position[data-protocol="Liqwid"] { border-left-color: #06b6d4; } .defi-position[data-protocol="Minswap"] { border-left-color: #8b5cf6; } .defi-position[data-protocol="SundaeSwap"] { border-left-color: #ec4899; } .defi-position[data-protocol="WingRiders"] { border-left-color: #f59e0b; } .defi-position[data-protocol="Strike"] { border-left-color: #10b981; } .defi-position[data-protocol="DJED"] { border-left-color: #14b8a6; } /* Compact line-by-line DeFi category (Governance, Stablecoins) */ .defi-category-compact { padding: 16px; } .defi-category-compact .defi-category-header { margin-bottom: 12px; padding-bottom: 8px; } .defi-positions-list { display: flex; flex-direction: column; gap: 6px; } .defi-position-line { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background-color: var(--bg-card); border-radius: 6px; } .defi-line-token { font-weight: 600; min-width: 70px; } .defi-line-amount { font-family: 'SF Mono', Monaco, 'Courier New', monospace; color: var(--text-secondary); min-width: 120px; } .defi-line-usd { font-family: 'SF Mono', Monaco, 'Courier New', monospace; color: var(--accent-success); min-width: 80px; } .defi-gov-link { margin-left: auto; font-size: 0.75rem; padding: 4px 10px; background-color: var(--accent-cardano); color: white; border-radius: 4px; text-decoration: none; transition: background-color 0.2s; } .defi-gov-link:hover { background-color: var(--accent-cardano-hover, #0066cc); text-decoration: none; } .defi-stable-line { background-color: rgba(34, 197, 94, 0.1); } .defi-stable-line .defi-line-token { color: var(--accent-success); } .defi-empty-line { color: var(--text-secondary); font-size: 0.85rem; padding: 8px 12px; font-style: italic; } /* NFT Section */ .nfts-section { margin-bottom: 40px; } .nfts-section h2 { margin-bottom: 20px; font-size: 1.2rem; color: var(--text-secondary); } .nfts-section.collapsible-section h2 { margin-bottom: 0; } .nfts-section .section-summary .nft-count { padding: 4px 10px; background-color: rgba(139, 92, 246, 0.2); color: #a78bfa; border-radius: 12px; font-weight: 500; } .nfts-section .section-summary .nft-value { padding: 4px 10px; background-color: rgba(0, 210, 106, 0.2); color: var(--accent-success); border-radius: 12px; font-weight: 600; font-family: 'SF Mono', Monaco, 'Courier New', monospace; } /* NFT Controls Container */ .nft-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); } /* NFT Chain Tabs */ .nft-chain-tabs { display: flex; gap: 8px; } .chain-tab { display: flex; flex-direction: column; align-items: center; padding: 8px 16px; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; min-width: 120px; } .chain-tab .chain-name { font-weight: 600; margin-bottom: 2px; } .chain-tab .chain-stats { font-size: 0.75rem; opacity: 0.8; } .chain-tab:hover { background-color: var(--bg-secondary); color: var(--text-primary); } .chain-tab.active { background-color: var(--accent-cardano); border-color: var(--accent-cardano); color: white; } .chain-tab.active .chain-stats { opacity: 1; } .chain-tab[data-chain="ethereum"].active { background-color: #627eea; border-color: #627eea; } .chain-tab[data-chain="solana"].active { background-color: #14F195; border-color: #14F195; color: #000; } .chain-tab[data-chain="polygon"].active { background-color: #8247E5; border-color: #8247E5; } /* NFT Sync Prices Button */ .btn-sync-prices { padding: 8px 16px; background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-secondary); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .btn-sync-prices:hover { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--accent-cardano); } .btn-sync-prices:disabled { opacity: 0.6; cursor: not-allowed; } .price-coverage { font-size: 0.8rem; color: var(--text-muted, #9ca3af); white-space: nowrap; } /* NFT Wall Button */ .btn-nft-wall { padding: 8px 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; border-radius: 8px; color: white; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-decoration: none; display: inline-flex; align-items: center; } .btn-nft-wall:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); } /* NFT Actions Container */ .nft-actions { display: flex; align-items: center; gap: 12px; } /* Image Cache Toggle */ .image-cache-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); user-select: none; } .image-cache-toggle input[type="checkbox"] { display: none; } .image-cache-toggle .toggle-slider { position: relative; width: 40px; height: 20px; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 20px; transition: all 0.3s ease; } .image-cache-toggle .toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 2px; top: 1px; background-color: var(--text-secondary); border-radius: 50%; transition: all 0.3s ease; } .image-cache-toggle input:checked + .toggle-slider { background-color: var(--accent-success); border-color: var(--accent-success); } .image-cache-toggle input:checked + .toggle-slider::before { transform: translateX(18px); background-color: white; } .image-cache-toggle .toggle-text { white-space: nowrap; } .image-cache-toggle:hover .toggle-slider { border-color: var(--accent-success); } .nfts-list { display: flex; flex-direction: column; gap: 16px; } /* NFT Collection */ .nft-collection { background-color: var(--bg-card); border-radius: 12px; overflow: hidden; border-left: 3px solid #8b5cf6; } .nft-collection.jpgstore { border-left-color: #ec4899; } .nft-collection.unknown { border-left-color: var(--text-secondary); } .nft-collection-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-card) 100%); border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.2s ease; } .nft-collection-header:hover { background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%); } /* Collapse indicator for NFT collections */ .nft-collection-header .collapse-indicator { font-size: 0.7rem; color: var(--text-secondary); transition: transform 0.2s ease; margin-right: 8px; } .nft-collection:not(.collapsed) .collapse-indicator { transform: rotate(90deg); } /* Collapsed state - hide items */ .nft-collection.collapsed .nft-items { display: none; } .nft-collection.collapsed .nft-collection-header { border-bottom: none; } .nft-collection-header .collection-info { display: flex; align-items: center; gap: 12px; } .nft-collection-header .collection-name { font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 6px; } .nft-collection-header .verified-badge { color: #22c55e; font-size: 0.9rem; } .nft-collection-header .collection-count { font-size: 0.8rem; color: var(--text-secondary); padding: 2px 8px; background-color: var(--bg-primary); border-radius: 10px; } .nft-collection-header .collection-value { font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-weight: 600; color: var(--accent-success); } .nft-collection-header .collection-value .no-value { color: var(--text-secondary); font-weight: 400; font-style: italic; } /* NFT Items */ .nft-items { padding: 8px 0; } .nft-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--border-color); transition: background-color 0.2s ease; } .nft-item:last-child { border-bottom: none; } .nft-item:hover { background-color: var(--bg-secondary); } .nft-item .nft-info { display: flex; align-items: center; gap: 10px; } .nft-item .nft-name { font-size: 0.9rem; color: var(--text-primary); } .nft-item .nft-link { text-decoration: none; } .nft-item .nft-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; font-size: 0.55rem; font-weight: 700; transition: transform 0.2s ease; } .nft-item .nft-link-icon.jpg { background: linear-gradient(135deg, #ec4899, #db2777); color: white; } .nft-item .nft-link-icon.cex { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: white; } .nft-item .nft-link-icon.opensea { background: linear-gradient(135deg, #2081e2, #1868b7); color: white; } /* Ethereum NFT collection styling */ .nft-collection.ethereum { border-left-color: #627eea; } /* Solana NFT collection styling */ .nft-collection.solana { border-left-color: #14F195; } /* Polygon NFT collection styling */ .nft-collection.polygon { border-left-color: #8247E5; } /* Base NFT collection styling */ .nft-collection.base { border-left-color: #0052FF; } .nft-item .nft-link-icon:hover { transform: scale(1.15); } .nft-item .nft-price { display: flex; align-items: center; gap: 6px; font-family: 'SF Mono', Monaco, 'Courier New', monospace; } .nft-item .nft-price .price-value { font-size: 0.9rem; color: var(--accent-success); font-weight: 500; } .nft-item .nft-price .price-source { font-size: 0.7rem; color: var(--text-secondary); } /* Footer */ footer { text-align: center; padding: 30px 0; color: var(--text-secondary); font-size: 0.85rem; border-top: 1px solid var(--border-color); margin-top: 40px; } /* Loading State */ .loading { opacity: 0.6; pointer-events: none; } .loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; background-color: var(--bg-card); border-radius: 8px; color: var(--text-secondary); } .loading-spinner { width: 32px; height: 32px; border: 3px solid var(--border-color); border-top-color: var(--accent-cardano); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 12px; } @keyframes spin { to { transform: rotate(360deg); } } /* Progress Bar */ .progress-container { width: 100%; max-width: 400px; height: 8px; background-color: var(--border-color); border-radius: 4px; overflow: hidden; margin-bottom: 16px; } .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-cardano), #00d26a); border-radius: 4px; transition: width 0.3s ease; } .progress-text { font-size: 0.9rem; color: var(--text-secondary); margin: 0; } /* Staking Total */ .staking-total { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%); border-radius: 12px; margin-bottom: 20px; border: 1px solid var(--border-color); } .staking-total-label { font-size: 1rem; color: var(--text-secondary); } .staking-total-value { font-size: 1.4rem; font-weight: 700; font-family: 'SF Mono', Monaco, 'Courier New', monospace; color: var(--accent-success); } /* Staking USD Value */ .staking-usd { font-size: 1.1rem; font-weight: 600; font-family: 'SF Mono', Monaco, 'Courier New', monospace; color: var(--text-secondary); margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--border-color); } /* Responsive */ @media (max-width: 768px) { header { flex-direction: column; gap: 16px; text-align: center; } .header-actions { width: 100%; justify-content: center; } .wallet-item { flex-direction: column; align-items: flex-start; gap: 12px; } .wallet-item .wallet-balance { text-align: left; } .add-wallet-form { flex-direction: column; } .add-wallet-form input { width: 100%; } } /* ============================================================================ GLOBAL PRIVACY MODE - Blur Sensitive Data Across All Pages ============================================================================ */ /* Wallet Addresses - All Blockchains */ body.privacy-mode .wallet-address, body.privacy-mode .wallet-label, body.privacy-mode .wallet-item .wallet-info h3, body.privacy-mode .stake-address { filter: blur(8px); user-select: none; } /* Balances and Values - All Pages */ body.privacy-mode .portfolio-card-right .stat-value, body.privacy-mode .portfolio-card-right .stat-sub { filter: blur(10px); user-select: none; } body.privacy-mode .donut-center-value, body.privacy-mode .donut-center-sub, body.privacy-mode .heatmap-tile .tile-value, body.privacy-mode .wallet-balance, body.privacy-mode .total-value, body.privacy-mode .total-portfolio-card .total-value, body.privacy-mode .total-portfolio-card .total-breakdown, body.privacy-mode .summary-card .value, body.privacy-mode .chain-balance, body.privacy-mode .stake-value, body.privacy-mode .rewards-value, body.privacy-mode .exchange-balance, body.privacy-mode .nft-value, body.privacy-mode .collection-value, body.privacy-mode .floor-price, body.privacy-mode .asset-amount, body.privacy-mode .usd-value { filter: blur(10px); user-select: none; } /* API Keys and Secrets - APIs Page */ body.privacy-mode .api-key-value, body.privacy-mode .api-key-display, body.privacy-mode .api-secret, body.privacy-mode .api-token, body.privacy-mode input[type="text"], body.privacy-mode input[type="password"], body.privacy-mode textarea { filter: blur(12px); user-select: none; } /* NFT Wall Specific */ body.privacy-mode .nft-image, body.privacy-mode .nft-card img { filter: blur(15px); user-select: none; } body.privacy-mode .nft-name, body.privacy-mode .nft-collection, body.privacy-mode .nft-price, body.privacy-mode .wall-stat .value { filter: blur(8px); user-select: none; } /* Staking Positions & Governance */ body.privacy-mode .stake-pool, body.privacy-mode .pool-name, body.privacy-mode .pool-ticker, body.privacy-mode .apy-value, body.privacy-mode .delegated-amount { filter: blur(8px); user-select: none; } body.privacy-mode .gov-link, body.privacy-mode .gov-value { filter: blur(8px); user-select: none; } /* Exchange Section - Header total and individual balances */ body.privacy-mode .exchange-total { filter: blur(10px); user-select: none; } body.privacy-mode .exchange-account, body.privacy-mode .account-balance, body.privacy-mode .asset-list { filter: blur(10px); user-select: none; } /* Manage Wallets Page - Addresses, labels, balances */ body.privacy-mode .label-text { filter: blur(8px); user-select: none; } /* Logs Page - Sensitive Content */ body.privacy-mode .log-message, body.privacy-mode .log-traceback, body.privacy-mode .log-extra { filter: blur(6px); user-select: none; } /* Backup Page - Configuration Data */ body.privacy-mode .backup-preview, body.privacy-mode .backup-data, body.privacy-mode .config-value { filter: blur(10px); user-select: none; } /* Security Page - Settings Values */ body.privacy-mode .setting-value, body.privacy-mode .security-config { filter: blur(8px); user-select: none; } /* Charts and Graphs */ body.privacy-mode .chart-container, body.privacy-mode canvas { filter: blur(20px); user-select: none; } /* SVG Charts - Sankey flow diagram, Streamgraph, Intelligence heatmap, etc. */ body.privacy-mode .sankey-container, body.privacy-mode .sankey-svg, body.privacy-mode .stream-container, body.privacy-mode .stream-svg, body.privacy-mode .intelligence-heatmap-container { filter: blur(20px); user-select: none; } /* Generic privacy-sensitive class used by analytics, intelligence, market tabs */ body.privacy-mode .privacy-sensitive { filter: blur(8px); user-select: none; } /* Coin/Category Allocation Legends - Data & Analytics page */ body.privacy-mode .legend-value-inline, body.privacy-mode .legend-percentage-compact, body.privacy-mode .analytics-legend-value, body.privacy-mode .analytics-legend-pct { filter: blur(8px); user-select: none; } /* Stream chart legend values */ body.privacy-mode .stream-legend { filter: blur(8px); user-select: none; } /* Heatmap tiles - portfolio heatmap on Data & Analytics page */ body.privacy-mode .heatmap-container { filter: blur(15px); user-select: none; } /* Trending coins / top movers on Analytics tab */ body.privacy-mode .trending-price { filter: blur(8px); user-select: none; } /* Statistics and Metrics */ body.privacy-mode .stat-value, body.privacy-mode .metric-value, body.privacy-mode .count-value, body.privacy-mode .percentage-value { filter: blur(8px); user-select: none; } /* Table Data - Light blur to preserve structure visibility */ body.privacy-mode table td { filter: blur(4px); user-select: none; } /* Table Headers - Keep visible for structure */ body.privacy-mode table thead th { filter: none; user-select: auto; } /* Asset Breakdown Modal - Blur legend items and values */ body.privacy-mode .breakdown-legend-value, body.privacy-mode .breakdown-legend-percentage, body.privacy-mode .breakdown-legend-symbol { filter: blur(10px); user-select: none; } body.privacy-mode #breakdownTotalValue, body.privacy-mode #breakdownAssetCount { filter: blur(10px); user-select: none; } /* Form Labels - Keep visible */ body.privacy-mode label, body.privacy-mode .form-label, body.privacy-mode .field-label { filter: none !important; user-select: auto !important; } /* Buttons and Navigation - Keep visible */ body.privacy-mode button, body.privacy-mode .btn, body.privacy-mode nav, body.privacy-mode .menu, body.privacy-mode .waffle-menu-item, body.privacy-mode h1, body.privacy-mode h2, body.privacy-mode h3, body.privacy-mode .section-title { filter: none !important; user-select: auto !important; } /* Ensure stripped privacy links still look clickable */ body.privacy-mode a[data-href] { cursor: pointer; } /* Copy Address Button */ .copy-address-btn { background: transparent; border: none; color: #666; cursor: pointer; padding: 4px; opacity: 0.4; transition: opacity 0.2s; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .copy-address-btn:hover { opacity: 1; } .copy-address-btn.copied { color: #28a745; opacity: 1; } .copy-address-btn svg { display: block; } /* Waffle Menu Theme Selector */ .waffle-menu-divider { height: 1px; background: #3a3a4e; margin: 8px 0; } .waffle-menu-theme { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #888; } .waffle-menu-theme .waffle-item-icon { font-size: 18px; flex-shrink: 0; } .waffle-menu-theme select { flex: 1; background: #2a2a3e; border: 1px solid #3a3a4e; color: #e0e0e0; padding: 6px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; outline: none; } .waffle-menu-theme select:hover { border-color: #667eea; } .waffle-menu-theme select:focus { border-color: #667eea; box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1); } /* Light theme adjustments for waffle menu */ [data-theme="light"] .waffle-menu-dropdown { background: #ffffff; border-color: #e5e7eb; } [data-theme="light"] .waffle-menu-item { color: #1a1a2e; } [data-theme="light"] .waffle-menu-item:hover { background: #f5f7fa; } [data-theme="light"] .waffle-menu-divider { background: #e5e7eb; } [data-theme="light"] .waffle-menu-theme { color: #6b7280; } [data-theme="light"] .waffle-menu-theme select { background: #f5f7fa; border-color: #e5e7eb; color: #1a1a2e; } /* Light theme additional overrides */ [data-theme="light"] body { background: var(--bg-primary); color: var(--text-primary); } [data-theme="light"] .card, [data-theme="light"] .wallet-item, [data-theme="light"] .nft-item, [data-theme="light"] .stat-card { background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* Light theme header - transparent to match universal nav */ [data-theme="light"] header { background: transparent !important; border: none !important; box-shadow: none !important; } [data-theme="light"] .btn { background: #f5f7fa; color: #1a1a2e; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } [data-theme="light"] .btn:hover { background: #e9ecef; border-color: #d1d5db; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07); } [data-theme="light"] .btn-primary { background: #667eea; color: #ffffff; border-color: #667eea; border-radius: 10px; box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2); } [data-theme="light"] .btn-primary:hover { background: #5568d3; border-color: #5568d3; box-shadow: 0 4px 6px rgba(102, 126, 234, 0.3); } [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: #ffffff; color: #1a1a2e; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); } [data-theme="light"] .section-header { background: var(--gradient-header); border-bottom: 1px solid var(--border-color); } [data-theme="light"] .modal-content, [data-theme="light"] .spam-modal-content { background: #ffffff; border: 1px solid #e5e7eb; } [data-theme="light"] .modal-header { border-bottom-color: #e5e7eb; } [data-theme="light"] .waffle-menu-btn { background: rgba(102, 126, 234, 0.1); border-color: rgba(102, 126, 234, 0.2); } [data-theme="light"] .waffle-menu-btn:hover { background: rgba(102, 126, 234, 0.15); } [data-theme="light"] .waffle-icon span { background: #667eea; } /* Light theme - Portfolio card */ [data-theme="light"] .total-portfolio-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 20px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } [data-theme="light"] .total-portfolio-card .total-label { color: #6b7280; } [data-theme="light"] .total-portfolio-card .total-value { color: #00b894; } [data-theme="light"] .total-portfolio-card .total-breakdown { color: #6b7280; } [data-theme="light"] .total-portfolio-card .breakdown-item { background-color: #f5f7fa; border-radius: 24px; } [data-theme="light"] .donut-center-label { color: #6b7280; } [data-theme="light"] .donut-center-value { color: #1f2937; } [data-theme="light"] .donut-center-sub { color: #6b7280; } [data-theme="light"] .portfolio-card-right { border-left-color: #e5e7eb; } [data-theme="light"] .portfolio-card-breakdown { border-left-color: #e5e7eb; } [data-theme="light"] .portfolio-divider { background: #e5e7eb; } [data-theme="light"] .stat-refresh-spinner { border-color: rgba(0, 150, 80, 0.2); border-top-color: #00966a; } [data-theme="light"] .top-holding-item { background: #f5f7fa; border: 1px solid #e5e7eb; } [data-theme="light"] .holding-symbol { color: #1f2937; } [data-theme="light"] .portfolio-stat .stat-value { color: #1f2937; } [data-theme="light"] .portfolio-stat .stat-label { color: #6b7280; } @media (max-width: 768px) { [data-theme="light"] .portfolio-card-right { border-top-color: #e5e7eb; } [data-theme="light"] .portfolio-card-breakdown { border-top-color: #e5e7eb; } } /* Light theme - Chart container */ [data-theme="light"] .history-chart-container { background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } /* Light theme - Summary cards */ [data-theme="light"] .summary-card { background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } [data-theme="light"] .summary-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } /* Light theme - Section headers */ [data-theme="light"] .section-header-inline, [data-theme="light"] .collapsible-section .section-header { background: var(--gradient-header); color: var(--text-primary); border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } [data-theme="light"] .section-header-inline h2, [data-theme="light"] .collapsible-section .section-header h2 { margin: 0; padding: 0; } [data-theme="light"] .summary-header { background: var(--gradient-header); border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } /* Light theme - History section headers */ [data-theme="light"] .history-section .section-header-inline { background: var(--gradient-header); border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } /* Light theme - Page headers */ [data-theme="light"] .page-header { background: var(--gradient-header); border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } /* Light theme - Wallet items */ [data-theme="light"] .wallet-item { background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } [data-theme="light"] .wallet-item:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } /* Light theme - Range buttons and toggles */ [data-theme="light"] .range-btn { border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } [data-theme="light"] .range-btn.active { box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2); } [data-theme="light"] .source-tab { border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } [data-theme="light"] .source-tab.active { box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2); } [data-theme="light"] .collection-progress { color: #4b5563; } /* Light theme - Modals */ [data-theme="light"] .modal-content, [data-theme="light"] .spam-modal-content { border-radius: 16px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Light theme - NFT items */ [data-theme="light"] .nft-item, [data-theme="light"] .nft-card { border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } [data-theme="light"] .nft-item:hover, [data-theme="light"] .nft-card:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } /* Light theme - Exchange and staking cards */ [data-theme="light"] .exchange-section, [data-theme="light"] .staking-card { border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } /* Light theme - Token cards */ [data-theme="light"] .token-card, [data-theme="light"] .asset-item { border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } /* Light theme - Collapsible sections */ [data-theme="light"] .collapsible-section .section-header { background-color: #f5f7fa; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } [data-theme="light"] .collapsible-section .section-header:hover { background-color: #e9ecef; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } /* Light theme - API categories and sections */ [data-theme="light"] .api-category, [data-theme="light"] .api-group, [data-theme="light"] .api-section { background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } /* Light theme - Backup and export sections */ [data-theme="light"] .section-card, [data-theme="light"] .backup-section, [data-theme="light"] .export-section, [data-theme="light"] .export-card { background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } /* Light theme - Generic cards and containers */ [data-theme="light"] .card, [data-theme="light"] .info-card, [data-theme="light"] .stat-card { background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } /* Light theme - Filter buttons and controls */ [data-theme="light"] .filter-btn, [data-theme="light"] .tab-btn { background-color: #f5f7fa; border: 1px solid #e5e7eb; color: #1a1a2e; } [data-theme="light"] .filter-btn.active, [data-theme="light"] .tab-btn.active { background-color: #667eea; color: #ffffff; border-color: #667eea; } [data-theme="light"] .filter-btn:hover, [data-theme="light"] .tab-btn:hover { background-color: #e9ecef; } /*=============================================================================== DARK MODE THEME - Specific Overrides with Glowing Borders ===============================================================================*/ /* Dark mode - Main header */ [data-theme="dark-mode"] header { border-radius: 16px; padding: 20px 24px !important; margin-bottom: 30px; } /* Dark mode - Section headers */ [data-theme="dark-mode"] .section-header-inline, [data-theme="dark-mode"] .collapsible-section .section-header { border-radius: 12px; padding: 16px 20px; } [data-theme="dark-mode"] .summary-header { border-radius: 12px; padding: 16px 20px; } [data-theme="dark-mode"] .history-section .section-header-inline { border-radius: 12px; padding: 16px 20px; } [data-theme="dark-mode"] .page-header { border-radius: 12px; padding: 16px 20px; } /*=============================================================================== TRANSACTION HISTORY PAGE ===============================================================================*/ /* Filter section */ .filter-section { margin-bottom: 30px; } .filter-bar { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; padding: 20px; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-color); } .filter-group { display: flex; align-items: center; gap: 8px; } .filter-group label { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); white-space: nowrap; } .filter-group select, .filter-group input[type="search"] { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font-size: 0.9rem; min-width: 140px; } .filter-group input[type="search"] { min-width: 200px; } /* Transaction list container - Transparent for free-floating cards */ .transaction-list { background: transparent; border-radius: 12px; overflow: visible; border: none; } /* Transaction table - Sleek card style */ #txTable { width: 100%; border-collapse: separate; border-spacing: 0 10px; font-size: 0.9rem; } #txTable thead { background: var(--bg-secondary); } #txTable thead th { padding: 12px 16px; text-align: left; font-weight: 600; color: var(--text-secondary); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; background: transparent; border: none; } #txTable tbody tr { border: none; } /* Main transaction row - Glossy rounded container */ .tx-row { cursor: pointer; transition: all 0.3s ease; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .tx-row td:first-child { border-radius: 16px 0 0 16px; padding-left: 8px; } .tx-row td:last-child { border-radius: 0 16px 16px 0; padding-right: 8px; } .tx-row:hover { transform: translateY(-2px); background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15), 0 0 20px rgba(var(--accent-primary-rgb), 0.1); } .tx-row td { padding: 2px 8px; vertical-align: middle; border: none; background: transparent; } /* Borders removed for cleaner look */ /* Expand/collapse cell */ .expand-cell { text-align: center; color: var(--text-secondary); font-size: 0.9rem; width: 40px; } /* Amount cell */ .amount-cell { font-family: 'Courier New', monospace; font-weight: 500; white-space: nowrap; } /* Hash cell with link */ .hash-cell { font-family: 'Courier New', monospace; font-size: 0.85rem; } .hash-link { color: var(--accent-primary); text-decoration: none; } .hash-link:hover { text-decoration: underline; } /* Chain badges for transaction table */ .chain-badge { display: inline-block; padding: 4px 8px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; text-transform: capitalize; } .chain-badge.chain-cardano { background: rgba(0, 82, 255, 0.25); color: #5c9eff; border: 1px solid rgba(92, 158, 255, 0.3); } .chain-badge.chain-ethereum { background: rgba(98, 126, 234, 0.25); color: #8ba4f5; border: 1px solid rgba(139, 164, 245, 0.3); } .chain-badge.chain-bitcoin { background: rgba(247, 147, 26, 0.25); color: #ffb74d; border: 1px solid rgba(255, 183, 77, 0.3); } .chain-badge.chain-solana { background: rgba(20, 241, 149, 0.25); color: #3dffb3; border: 1px solid rgba(61, 255, 179, 0.3); } .chain-badge.chain-polygon { background: rgba(130, 71, 229, 0.25); color: #a673f0; border: 1px solid rgba(166, 115, 240, 0.3); } .chain-badge.chain-base { background: rgba(0, 82, 255, 0.25); color: #5c9eff; border: 1px solid rgba(92, 158, 255, 0.3); } /* Direction badges */ .direction-badge { display: inline-block; padding: 4px 8px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; text-transform: capitalize; } .direction-badge.direction-sent { background: rgba(214, 48, 49, 0.2); color: #d63031; } .direction-badge.direction-received { background: rgba(0, 184, 148, 0.2); color: #00b894; } /* CEX direction badges (buy/sell) */ .direction-badge.direction-buy { background: rgba(0, 184, 148, 0.2); color: #00b894; } .direction-badge.direction-sell { background: rgba(214, 48, 49, 0.2); color: #d63031; } /* CEX exchange chain badges */ .chain-badge.chain-coinbase { background: rgba(0, 82, 255, 0.25); color: #4d8bff; border: 1px solid rgba(0, 82, 255, 0.3); } .chain-badge.chain-binance { background: rgba(240, 185, 11, 0.25); color: #f0b90b; border: 1px solid rgba(240, 185, 11, 0.3); } .chain-badge.chain-binance_us { background: rgba(212, 160, 23, 0.25); color: #d4a017; border: 1px solid rgba(212, 160, 23, 0.3); } /* CEX toggle checkbox in filter bar */ .cex-toggle-group { display: flex; align-items: center; } .cex-toggle-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.85rem; color: var(--text-secondary); white-space: nowrap; } .cex-toggle-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-primary, #00d26a); cursor: pointer; } .cex-toggle-label span { user-select: none; } /* CEX row subtle indicator */ .tx-row.cex-row { border-left: 3px solid rgba(0, 82, 255, 0.4); } /* Transaction details row - Sleek expanded view */ .tx-details-row { background: transparent; } .tx-details-row td { padding: 0 20px 4px 20px !important; border: none !important; } .tx-details { padding: 6px; margin: -10px 0 0 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 100%); border-radius: 12px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.05); } .detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .detail-item { display: flex; flex-direction: column; gap: 4px; padding: 3px 10px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: all 0.2s ease; } .detail-item:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .detail-item strong { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .detail-item span { font-size: 0.85rem; color: var(--text-primary); word-break: break-word; } .detail-content { display: flex; align-items: center; gap: 8px; } .detail-content .btn-copy { flex-shrink: 0; } .detail-full { grid-column: 1 / -1; } .address, .hash-full { font-family: 'Courier New', monospace; font-size: 0.85rem; word-break: break-all; } /* Status badges */ .status-confirmed { color: #00b894; } .status-pending { color: #fdcb6e; } .status-failed { color: #d63031; } /* Badge styling for table cells */ .tx-row .amount-cell, .tx-row .hash-cell { font-family: 'Courier New', monospace; } .tx-badge { display: inline-block; padding: 4px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: 500; background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(4px); } .tx-row td:not(:first-child):not(:last-child) { padding: 2px 8px !important; } /* Time badge */ .time-badge { color: #a0aec0; } /* Amount badge */ .amount-badge { color: #ffd93d; font-weight: 600; } /* Hash badge */ .hash-badge { color: #64b5f6; font-size: 0.75rem; } /* Token badge */ .token-badge { color: #9575cd; padding: 3px 8px; font-size: 0.75rem; } /* Multiple tokens display */ .token-list { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; } .token-item { display: inline-block; padding: 2px 6px; border-radius: 6px; font-size: 0.7rem; background: rgba(149, 117, 205, 0.2); border: 1px solid rgba(149, 117, 205, 0.3); color: #b39ddb; } .token-more { color: #9575cd; font-size: 0.7rem; font-style: italic; } /* Pagination Controls */ .pagination-controls { display: flex; justify-content: space-between; align-items: center; padding: 20px; margin-top: 20px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .pagination-info { font-size: 0.9rem; color: var(--text-secondary); } .pagination-buttons { display: flex; gap: 8px; align-items: center; } .pagination-buttons .btn { padding: 6px 12px; font-size: 0.85rem; } .pagination-buttons .btn:disabled { opacity: 0.4; cursor: not-allowed; } .page-indicator { padding: 0 12px; font-size: 0.9rem; color: var(--text-primary); font-weight: 500; } .pagination-size { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; } .pagination-size label { color: var(--text-secondary); } .pagination-size select { padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-primary); font-size: 0.85rem; cursor: pointer; } .pagination-size select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0, 210, 106, 0.2); } /* Copy button */ .btn-copy { background: transparent; border: none; color: var(--accent-primary); cursor: pointer; padding: 4px 8px; margin-left: 8px; border-radius: 4px; transition: background-color 0.2s; } .btn-copy:hover { background: var(--bg-hover); } /* Loading indicator */ .loading-indicator { text-align: center; padding: 60px 20px; } /*=============================================================================== TRANSACTION ANALYTICS - Tabbed Interface & Chart Visualization ===============================================================================*/ /* Tab Container */ .tab-container { margin-bottom: 24px; } .tab-nav { display: flex; gap: 8px; border-bottom: 2px solid rgba(255, 255, 255, 0.1); padding-bottom: 4px; } .tab-btn { padding: 12px 24px; background: transparent; border: none; border-radius: 8px 8px 0 0; color: var(--text-secondary); font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; position: relative; } .tab-btn:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); } .tab-btn.active { background: linear-gradient(135deg, rgba(0, 210, 106, 0.15) 0%, rgba(0, 210, 106, 0.05) 100%); color: var(--accent); border: 1px solid rgba(0, 210, 106, 0.3); border-bottom: none; } .tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--accent); } /* Tab Content */ .tab-content { display: none; } .tab-content.active { display: block; } /* Analytics Section */ .analytics-section { margin-bottom: 30px; } .analytics-section > .section-header-inline { border: none !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 8px; } .analytics-controls { margin: 20px 0; padding: 16px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); } .period-buttons { display: flex; gap: 4px; flex-wrap: wrap; margin-left: 16px; } .period-btn { padding: 6px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: var(--text-secondary); font-size: 0.8rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .period-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: var(--text-primary); } .period-btn.active { background: var(--accent); border-color: var(--accent); color: #ffffff; font-weight: 600; box-shadow: 0 0 15px rgba(0, 210, 106, 0.3); } /* Section Info Tooltips */ .section-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--text-secondary); font-size: 11px; font-weight: 600; font-style: italic; font-family: Georgia, serif; cursor: help; margin-left: 8px; position: relative; flex-shrink: 0; transition: all 0.2s; } .section-info-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: var(--accent, #00d26a); color: var(--text-primary); } .section-info-btn .info-tooltip { display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--bg-card, #1e293b); border: 1px solid var(--border-color, #334155); border-radius: 8px; padding: 10px 14px; font-size: 12px; font-weight: 400; font-style: normal; font-family: inherit; color: var(--text-secondary); line-height: 1.5; white-space: normal; width: 260px; z-index: 100; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); pointer-events: none; } .section-info-btn:hover .info-tooltip { display: block; } .section-info-btn .info-tooltip::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: var(--border-color, #334155); } [data-theme="light"] .section-info-btn { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); } [data-theme="light"] .section-info-btn:hover { background: rgba(0, 0, 0, 0.08); } [data-theme="light"] .section-info-btn .info-tooltip { background: #fff; border-color: #e5e7eb; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } [data-theme="light"] .section-info-btn .info-tooltip::before { border-bottom-color: #e5e7eb; } /* Analytics Chart Container */ .analytics-chart-container { padding: 24px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); margin: 12px 0; min-height: 450px; backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); overflow: hidden; } /* Line chart containers need fixed height for Chart.js canvas sizing */ .analytics-chart-container > canvas { max-height: 100%; } #analyticsChartContainer, #cexAnalyticsChartContainer, #relativeStrengthChartContainer, #feeHistoryChartContainer { height: 450px; } /* Chain Indicators Section */ .chain-indicators-section { margin-top: 12px; } .chain-indicators-section .section-header-inline { border: none !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 8px; } .chain-indicators-section .hint-text { font-size: 0.85rem; color: var(--text-secondary); font-style: italic; margin-left: 12px; } .chain-indicators { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; background: none; border-radius: 0; border: none; } .chain-indicator { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; cursor: pointer; transition: all 0.3s ease; } .chain-indicator:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .chain-indicator.active { background: rgba(0, 210, 106, 0.15); border-color: rgba(0, 210, 106, 0.4); box-shadow: 0 0 12px rgba(0, 210, 106, 0.2); } .chain-indicator-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .chain-indicator-label { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); } .chain-indicator-count { padding: 2px 8px; background: rgba(255, 255, 255, 0.1); border-radius: 12px; font-size: 0.8rem; font-weight: 600; color: var(--accent); margin-left: 4px; } .chain-indicator:not(.active) { opacity: 0.6; } .chain-indicator:not(.active):hover { opacity: 0.8; } /* ===== Advanced Analytics Tab Styles ===== */ .analytics-summary-cards { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .analytics-summary-card { flex: 1; min-width: 180px; background: var(--card-bg, #1a1a2e); border: 1px solid var(--border-color, #2a2a3e); border-radius: 12px; padding: 16px 20px; transition: transform 0.2s, box-shadow 0.2s; } .analytics-summary-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .summary-card-label { font-size: 12px; color: var(--text-secondary, #888); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .summary-card-value { font-size: 22px; font-weight: 700; color: var(--text-primary, #e0e0e0); line-height: 1.2; } .summary-card-change { margin-top: 4px; font-size: 13px; } .change-indicator { font-weight: 600; } .change-indicator.positive { color: #4ade80; } .change-indicator.negative { color: #f87171; } /* Analytics Utility Row (Gas + Trending) */ .analytics-utility-row { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .analytics-utility-card { flex: 1; min-width: 280px; background: var(--card-bg, #1a1a2e); border: 1px solid var(--border-color, #2a2a3e); border-radius: 12px; padding: 16px 20px; } .utility-card-header { display: flex; align-items: center; gap: 6px; } .utility-card-header h3 { margin: 0 0 12px 0; font-size: 14px; color: var(--text-secondary, #888); text-transform: uppercase; letter-spacing: 0.5px; } .mover-sort-btn { margin-left: auto; margin-bottom: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: var(--text-secondary, #888); font-size: 12px; padding: 4px 10px; cursor: pointer; transition: all 0.2s; } .mover-sort-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); } .mover-sort-btn.asc { color: var(--accent-success, #10b981); } .mover-sort-btn.desc { color: var(--accent-danger, #ef4444); } .gas-price-grid { display: flex; gap: 16px; justify-content: space-between; } .gas-tier { display: flex; flex-direction: column; align-items: center; gap: 4px; } .gas-tier-label { font-size: 12px; color: var(--text-secondary, #888); } .gas-tier-value { font-size: 18px; font-weight: 700; color: var(--text-primary, #e0e0e0); } .trending-coins-list { display: flex; flex-direction: column; gap: 6px; } .trending-coin-item { display: flex; align-items: center; gap: 4px; padding: 4px 0; font-size: 13px; } .trending-rank { width: 24px; color: var(--text-secondary, #888); font-weight: 600; font-size: 12px; } .trending-name { flex: 1; color: var(--text-primary, #e0e0e0); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trending-symbol { color: var(--text-secondary, #888); font-size: 11px; text-transform: uppercase; margin-right: 8px; } .trending-price { color: var(--text-secondary, #888); font-size: 12px; font-family: var(--font-mono, monospace); } /* Chain Filter Tabs */ .chain-filter-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; background: var(--card-bg, #1a1a2e); padding: 6px; border-radius: 10px; } .chain-filter-btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; background: transparent; color: var(--text-secondary, #888); transition: all 0.2s; } .chain-filter-btn:hover { background: var(--hover-bg, #2a2a3e); color: var(--text-primary, #e0e0e0); } .chain-filter-btn.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } /* Chain Financials Table */ .chain-financials-table { width: 100%; border-collapse: collapse; background: var(--card-bg, #1a1a2e); border-radius: 12px; overflow: hidden; } .chain-financials-table thead { background: var(--hover-bg, #22223a); } .chain-financials-table th { padding: 12px 16px; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-secondary, #888); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color, #2a2a3e); } .chain-financials-table td { padding: 12px 16px; font-size: 14px; color: var(--text-primary, #e0e0e0); border-bottom: 1px solid var(--border-color, #2a2a3e); } .chain-financials-table tbody tr:last-child td { border-bottom: none; } .chain-financials-table tbody tr:hover { background: var(--hover-bg, #22223a); } .chain-financials-table .tradfi-row { border-top: 2px solid var(--border-color, #2a2a3e); } .table-responsive { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border-color, #2a2a3e); } /* TradFi Notice */ .tradfi-notice { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--card-bg, #1a1a2e); border: 1px solid rgba(102, 126, 234, 0.3); border-radius: 10px; margin-top: 20px; font-size: 14px; color: var(--text-secondary, #888); } .tradfi-notice a { color: #667eea; text-decoration: none; font-weight: 500; } .tradfi-notice a:hover { text-decoration: underline; } .tradfi-notice-icon { font-size: 20px; } /* Locked tab */ .main-tab-btn.tab-locked { opacity: 0.4; cursor: not-allowed; } .main-tab-btn.tab-locked::after { content: '\1F512'; margin-left: 6px; font-size: 11px; } /* Market API notice */ .market-api-notice { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--card-bg, #1a1a2e); border: 1px solid rgba(255, 183, 77, 0.3); border-radius: 10px; margin-bottom: 20px; font-size: 14px; color: var(--text-secondary, #888); } .market-api-notice a { color: #ffb74d; text-decoration: none; font-weight: 500; } .market-api-notice a:hover { text-decoration: underline; } [data-theme="light"] .market-api-notice { background: #fffbeb; border-color: rgba(245, 158, 11, 0.3); } /* Light Theme Overrides for Analytics */ [data-theme="light"] .analytics-summary-card { background: #ffffff; border-color: #e5e7eb; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } [data-theme="light"] .analytics-summary-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } [data-theme="light"] .chain-filter-tabs { background: #f3f4f6; } [data-theme="light"] .chain-filter-btn:hover { background: #e5e7eb; color: #1a1a2e; } [data-theme="light"] .chain-financials-table { background: #ffffff; } [data-theme="light"] .chain-financials-table thead { background: #f9fafb; } [data-theme="light"] .chain-financials-table th { color: #6b7280; border-bottom-color: #e5e7eb; } [data-theme="light"] .chain-financials-table td { color: #1a1a2e; border-bottom-color: #e5e7eb; } [data-theme="light"] .chain-financials-table tbody tr:hover { background: #f9fafb; } [data-theme="light"] .table-responsive { border-color: #e5e7eb; } /* Sortable Table Headers */ .chain-financials-table th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 24px; transition: background 0.2s; } .chain-financials-table th.sortable:hover { background: rgba(0, 210, 106, 0.1); } .chain-financials-table th.sortable .sort-arrow { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; opacity: 0.3; transition: opacity 0.2s; } .chain-financials-table th.sortable.sort-active .sort-arrow { opacity: 1; color: var(--accent-success, #00d26a); } [data-theme="light"] .chain-financials-table th.sortable:hover { background: #f0fdf4; } [data-theme="light"] .chain-financials-table th.sortable.sort-active .sort-arrow { color: #059669; } /* Inline Table Filter Row */ .chain-financials-table .filter-row th { padding: 4px 8px; background: rgba(0, 0, 0, 0.15); } .chain-financials-table .filter-row input, .chain-financials-table .filter-row select { width: 100%; padding: 4px 8px; font-size: 11px; background: var(--bg-secondary, #1e1e2e); color: var(--text-primary, #e0e0e0); border: 1px solid var(--border-color, #2a2a3e); border-radius: 6px; outline: none; transition: border-color 0.2s; } .chain-financials-table .filter-row input:focus, .chain-financials-table .filter-row select:focus { border-color: var(--accent-success, #00d26a); } .chain-financials-table .filter-row input::placeholder { color: var(--text-secondary, #888); font-size: 10px; } [data-theme="light"] .chain-financials-table .filter-row th { background: #f3f4f6; } [data-theme="light"] .chain-financials-table .filter-row input, [data-theme="light"] .chain-financials-table .filter-row select { background: #ffffff; color: #1a1a2e; border-color: #e5e7eb; } [data-theme="light"] .chain-financials-table .filter-row input::placeholder { color: #9ca3af; } /* Analytics Chart Loading Overlay */ .analytics-loading-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); border-radius: 20px; z-index: 10; gap: 12px; backdrop-filter: blur(2px); } .analytics-loading-overlay .loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border-color, #2a2a3e); border-top-color: var(--accent-success, #00d26a); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 0; } .analytics-loading-overlay .loading-text { font-size: 13px; color: var(--text-secondary, #888); letter-spacing: 0.5px; } [data-theme="light"] .analytics-loading-overlay { background: rgba(255, 255, 255, 0.6); } .analytics-content { position: relative; } [data-theme="light"] .tradfi-notice { background: #ffffff; border-color: rgba(102, 126, 234, 0.2); } .loading-indicator .spinner { display: inline-block; width: 40px; height: 40px; border: 4px solid var(--border-color); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; } .loading-indicator p { margin-top: 20px; color: var(--text-secondary); } /* Empty state */ .empty-state { text-align: center; padding: 60px 20px; } .empty-state p { color: var(--text-secondary); margin-bottom: 20px; font-size: 1.1rem; } /* Stats section */ .stats-section { margin-bottom: 30px; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-color); } .stat-item { text-align: center; } .stat-item .stat-value { font-size: 2rem; font-weight: 700; color: var(--accent-primary); margin-bottom: 5px; } .stat-item .stat-label { font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; } /* Processing modal - uses existing .modal and .modal.hidden classes from line 4248 */ .modal-content h2 { margin-bottom: 30px; color: var(--text-primary); } .modal-content .spinner { display: inline-block; width: 50px; height: 50px; border: 4px solid var(--border-color); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; } .modal-content p { color: var(--text-secondary); } /* Transaction count badge */ .badge { display: inline-block; background: var(--accent-primary); color: white; padding: 4px 12px; border-radius: 12px; font-size: 0.85rem; font-weight: 600; margin-left: 10px; } /* Light theme overrides for transactions */ [data-theme="light"] .filter-bar, [data-theme="light"] .transaction-list { background: transparent; border: none; box-shadow: none; } [data-theme="light"] .stats-grid { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } [data-theme="light"] #txTable thead th { background-color: #f3f4f6; } [data-theme="light"] .tx-row { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.9) 100%); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8); } [data-theme="light"] .tx-row:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(249, 250, 251, 0.95) 100%); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 1), 0 0 20px rgba(102, 126, 234, 0.08); } [data-theme="light"] .tx-details-row { background: transparent; } [data-theme="light"] .tx-details { background: linear-gradient(135deg, rgba(243, 244, 246, 0.8) 0%, rgba(249, 250, 251, 0.6) 100%); border: 1px solid rgba(0, 0, 0, 0.08); } [data-theme="light"] .detail-item { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.8) 100%); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8); } [data-theme="light"] .detail-item:hover { border-color: rgba(102, 126, 234, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 1); } [data-theme="light"] .chain-badge.chain-cardano { background: rgba(0, 51, 173, 0.1); color: #0033ad; } [data-theme="light"] .chain-badge.chain-ethereum { background: rgba(98, 126, 234, 0.1); color: #4a5fd8; } [data-theme="light"] .chain-badge.chain-bitcoin { background: rgba(247, 147, 26, 0.1); color: #f7931a; } [data-theme="light"] .chain-badge.chain-solana { background: rgba(20, 241, 149, 0.1); color: #00bf88; } [data-theme="light"] .chain-badge.chain-polygon { background: rgba(130, 71, 229, 0.1); color: #8247E5; } [data-theme="light"] .chain-badge.chain-base { background: rgba(0, 82, 255, 0.1); color: #0052ff; } [data-theme="light"] .direction-badge.direction-sent { background: rgba(214, 48, 49, 0.1); color: #c92a2a; } [data-theme="light"] .direction-badge.direction-received { background: rgba(0, 184, 148, 0.1); color: #00a884; } [data-theme="light"] .direction-badge.direction-buy { background: rgba(0, 184, 148, 0.1); color: #00a884; } [data-theme="light"] .direction-badge.direction-sell { background: rgba(214, 48, 49, 0.1); color: #c92a2a; } [data-theme="light"] .chain-badge.chain-coinbase { background: rgba(0, 82, 255, 0.1); color: #0052ff; } [data-theme="light"] .chain-badge.chain-binance { background: rgba(240, 185, 11, 0.1); color: #b08c00; } [data-theme="light"] .chain-badge.chain-binance_us { background: rgba(212, 160, 23, 0.1); color: #8b6d00; } [data-theme="light"] .tx-row.cex-row { border-left: 3px solid rgba(0, 82, 255, 0.3); } [data-theme="light"] .tx-badge { background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%); border: 1px solid rgba(0, 0, 0, 0.1); } [data-theme="light"] .time-badge { color: #64748b; } [data-theme="light"] .amount-badge { color: #f59e0b; } [data-theme="light"] .hash-badge { color: #3b82f6; } [data-theme="light"] .token-badge { color: #8b5cf6; } [data-theme="light"] .token-item { background: rgba(139, 92, 246, 0.15); border-color: rgba(139, 92, 246, 0.3); color: #7c3aed; } [data-theme="light"] .token-more { color: #8b5cf6; } [data-theme="light"] .pagination-controls { background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(249, 250, 251, 0.6) 100%); border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } [data-theme="light"] .pagination-size select { background: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.1); } /* Background Fetch Indicator */ .fetch-indicator { position: fixed; top: 20px; right: 20px; z-index: 10000; background: linear-gradient(135deg, rgba(0, 210, 106, 0.15) 0%, rgba(0, 150, 75, 0.1) 100%); backdrop-filter: blur(10px); border: 1px solid rgba(0, 210, 106, 0.3); border-radius: 12px; padding: 12px 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); display: none; animation: slideIn 0.3s ease; } .fetch-indicator.running { background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.1) 100%); border-color: rgba(59, 130, 246, 0.3); } .fetch-indicator.completed { background: linear-gradient(135deg, rgba(0, 210, 106, 0.15) 0%, rgba(0, 150, 75, 0.1) 100%); border-color: rgba(0, 210, 106, 0.3); } .fetch-indicator.failed { background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.1) 100%); border-color: rgba(239, 68, 68, 0.3); } .fetch-content { display: flex; align-items: center; gap: 12px; } .fetch-spinner { width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; } .fetch-message { color: var(--text-primary); font-size: 0.9rem; font-weight: 500; } @keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } [data-theme="light"] .fetch-indicator { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.05) 100%); border-color: rgba(59, 130, 246, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } [data-theme="light"] .fetch-indicator.completed { background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%); border-color: rgba(16, 185, 129, 0.3); } /* Responsive design for transaction table */ @media (max-width: 768px) { .filter-bar { flex-direction: column; align-items: stretch; } .filter-group { flex-direction: column; align-items: stretch; } .fetch-indicator { top: 10px; right: 10px; left: 10px; padding: 10px 16px; } .filter-group label { margin-bottom: 5px; } .filter-group select, .filter-group input[type="search"] { width: 100%; min-width: auto; } #txTable { font-size: 0.8rem; } #txTable thead th { padding: 8px 10px; font-size: 0.75rem; } .tx-row td { padding: 10px 8px; } .detail-grid { grid-template-columns: 1fr; } .detail-full { grid-column: 1; } } /*=============================================================================== LIGHT THEME - Analytics Components ===============================================================================*/ [data-theme="light"] .tab-nav { border-bottom-color: #e5e7eb; } [data-theme="light"] .tab-btn { color: #6b7280; } [data-theme="light"] .tab-btn:hover { background: #f3f4f6; color: #1a1a2e; } [data-theme="light"] .tab-btn.active { background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.05) 100%); color: #667eea; border-color: #667eea; } [data-theme="light"] .analytics-controls { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } [data-theme="light"] .period-btn { background: #f5f7fa; border-color: #e5e7eb; color: #6b7280; } [data-theme="light"] .period-btn:hover { background: #e9ecef; border-color: #d1d5db; color: #1a1a2e; } [data-theme="light"] .period-btn.active { background: #667eea; border-color: #667eea; color: #ffffff; box-shadow: 0 0 15px rgba(102, 126, 234, 0.3); } [data-theme="light"] .analytics-chart-container { background: #ffffff; border: 1px solid #e5e7eb; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } [data-theme="light"] .chain-indicators { background: none; border: none; box-shadow: none; } [data-theme="light"] .chain-indicator { background: #f5f7fa; border-color: #e5e7eb; } [data-theme="light"] .chain-indicator:hover { background: #e9ecef; border-color: #d1d5db; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } [data-theme="light"] .chain-indicator.active { background: rgba(102, 126, 234, 0.1); border-color: rgba(102, 126, 234, 0.4); box-shadow: 0 0 12px rgba(102, 126, 234, 0.2); } [data-theme="light"] .chain-indicator-count { background: rgba(102, 126, 234, 0.15); color: #667eea; } /* =========================== Sankey Flow Diagram =========================== */ /* Sankey parent needs overflow visible for tooltip */ .analytics-chart-container:has(.sankey-container) { overflow: visible; } .sankey-container { position: relative; width: 100%; height: 480px; overflow: visible; border-radius: 12px; } .sankey-svg { display: block; } .sankey-subtitle { font-size: 0.8em; font-weight: 400; opacity: 0.6; } .sankey-node { transition: opacity 0.3s ease, filter 0.3s ease; } .sankey-node:hover { filter: brightness(1.2); } .sankey-node-loading { animation: sankeyPulse 1s ease-in-out infinite; } @keyframes sankeyPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .sankey-link { transition: fill-opacity 0.3s ease; } .sankey-label-name, .sankey-label-value { pointer-events: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .sankey-label-name { font-weight: 600; } .sankey-label-value { font-weight: 400; } .sankey-tooltip { position: absolute; background: var(--bg-card, #0f3460); border: 1px solid var(--border-color, #2a2a4a); border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--text-primary, #eaeaea); pointer-events: none; z-index: 100; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: opacity 0.15s ease; } /* Dark mode glow on nodes */ [data-theme="dark-mode"] .sankey-node:hover { filter: brightness(1.2) drop-shadow(0 0 6px rgba(0, 210, 106, 0.3)); } /* Light theme */ [data-theme="light"] .sankey-tooltip { background: #ffffff; border-color: #e5e7eb; color: #1a1a2e; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } [data-theme="light"] .sankey-node:hover { filter: brightness(0.9); } /* Cypherpunk theme */ [data-theme="cypherpunk1"] .sankey-node:hover { filter: brightness(1.3) drop-shadow(0 0 8px rgba(0, 212, 255, 0.5)); } [data-theme="cypherpunk1"] .sankey-tooltip { border-color: rgba(0, 212, 255, 0.4); box-shadow: 0 0 12px rgba(0, 212, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.4); } /* Ocean depths theme */ [data-theme="ocean-depths"] .sankey-node:hover { filter: brightness(1.2) drop-shadow(0 0 6px rgba(0, 210, 255, 0.3)); } /* Sunset horizon theme */ [data-theme="sunset-horizon"] .sankey-node:hover { filter: brightness(1.2) drop-shadow(0 0 6px rgba(255, 107, 107, 0.3)); } /* Expanded wallet node glow */ .sankey-node-expanded { filter: brightness(1.1); } [data-theme="dark-mode"] .sankey-node-expanded { filter: brightness(1.1) drop-shadow(0 0 8px rgba(0, 210, 106, 0.4)); } [data-theme="light"] .sankey-node-expanded { filter: brightness(0.95) drop-shadow(0 0 6px rgba(0, 184, 148, 0.3)); } [data-theme="cypherpunk1"] .sankey-node-expanded { filter: brightness(1.2) drop-shadow(0 0 10px rgba(0, 212, 255, 0.5)); } [data-theme="ocean-depths"] .sankey-node-expanded { filter: brightness(1.1) drop-shadow(0 0 8px rgba(0, 210, 255, 0.4)); } [data-theme="sunset-horizon"] .sankey-node-expanded { filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 107, 107, 0.4)); } /* Category breakdown bars */ .sankey-category-bar { transition: opacity 0.3s ease, filter 0.3s ease; } .sankey-category-bar:hover { filter: brightness(1.15); } .sankey-category-label { pointer-events: none; } .sankey-category-link { transition: fill-opacity 0.3s ease; } /* Responsive */ @media (max-width: 768px) { .sankey-container { height: 400px; } .sankey-subtitle { display: none; } } @media (max-width: 480px) { .sankey-container { height: 320px; } } /* =========================== Portfolio Streamgraph =========================== */ .stream-chart-section { overflow: visible; } .stream-chart-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .stream-subtitle { font-size: 0.8em; font-weight: 400; opacity: 0.6; } .stream-range-buttons { display: flex; gap: 6px; } .stream-range-btn { padding: 4px 12px; border: 1px solid var(--border-color, #2a2a4a); border-radius: 8px; background: transparent; color: var(--text-secondary, #a0a0a0); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .stream-range-btn:hover { border-color: var(--accent-color, #00d26a); color: var(--accent-color, #00d26a); } .stream-range-btn.active { background: var(--accent-color, #00d26a); border-color: var(--accent-color, #00d26a); color: #fff; } [data-theme="light"] .stream-range-btn { border-color: #e5e7eb; color: #6b7280; } [data-theme="light"] .stream-range-btn:hover { border-color: #00b894; color: #00b894; } [data-theme="light"] .stream-range-btn.active { background: #00b894; border-color: #00b894; color: #fff; } .stream-container { position: relative; width: 100%; height: 420px; overflow: visible; border-radius: 12px; } .stream-svg { display: block; } .stream-path { transition: fill-opacity 0.3s ease, stroke 0.2s ease; cursor: pointer; } .stream-label { pointer-events: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); } .stream-axis-label { pointer-events: none; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .stream-crosshair { pointer-events: none; } .stream-tooltip { position: absolute; background: var(--bg-card, #0f3460); border: 1px solid var(--border-color, #2a2a4a); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--text-primary, #eaeaea); pointer-events: none; z-index: 100; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: opacity 0.15s ease; } /* Dark mode glow on stream hover */ [data-theme="dark-mode"] .stream-path:hover { filter: brightness(1.15) drop-shadow(0 0 4px rgba(0, 210, 106, 0.2)); } /* Light theme */ [data-theme="light"] .stream-tooltip { background: #ffffff; border-color: #e5e7eb; color: #1a1a2e; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } [data-theme="light"] .stream-label { text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6); } /* Cypherpunk theme */ [data-theme="cypherpunk1"] .stream-path:hover { filter: brightness(1.2) drop-shadow(0 0 6px rgba(0, 212, 255, 0.4)); } [data-theme="cypherpunk1"] .stream-tooltip { border-color: rgba(0, 212, 255, 0.4); box-shadow: 0 0 12px rgba(0, 212, 255, 0.2), 0 4px 12px rgba(0, 0, 0, 0.4); } /* Ocean depths theme */ [data-theme="ocean-depths"] .stream-path:hover { filter: brightness(1.15) drop-shadow(0 0 4px rgba(0, 210, 255, 0.3)); } /* Sunset horizon theme */ [data-theme="sunset-horizon"] .stream-path:hover { filter: brightness(1.15) drop-shadow(0 0 4px rgba(255, 107, 107, 0.3)); } /* Stream Legend */ .stream-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 4px 4px; } .stream-legend:empty { display: none; } .stream-legend-item { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--bg-secondary, #162447); border: 1px solid transparent; border-radius: 16px; cursor: pointer; font-size: 11px; color: var(--text-primary, #eaeaea); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; transition: all 0.2s ease; line-height: 1; } .stream-legend-item:hover { background: var(--bg-tertiary, #1f3060); transform: translateY(-1px); } .stream-legend-item.active { border-color: var(--accent-success, #00d26a); background: var(--bg-tertiary, #1f3060); box-shadow: 0 0 8px rgba(0, 210, 106, 0.25); } .stream-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .stream-legend-label { white-space: nowrap; } [data-theme="light"] .stream-legend-item { background: #f3f4f6; color: #374151; } [data-theme="light"] .stream-legend-item:hover { background: #e5e7eb; } [data-theme="light"] .stream-legend-item.active { background: #e5e7eb; border-color: #00b894; box-shadow: 0 0 8px rgba(0, 184, 148, 0.2); } [data-theme="cypherpunk1"] .stream-legend-item.active { border-color: #00d4ff; box-shadow: 0 0 8px rgba(0, 212, 255, 0.3); } [data-theme="ocean-depths"] .stream-legend-item.active { border-color: #00d2ff; box-shadow: 0 0 8px rgba(0, 210, 255, 0.3); } [data-theme="sunset-horizon"] .stream-legend-item.active { border-color: #ff6b6b; box-shadow: 0 0 8px rgba(255, 107, 107, 0.3); } /* Responsive */ @media (max-width: 768px) { .stream-container { height: 320px; } .stream-subtitle { display: none; } .stream-chart-header { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .stream-container { height: 260px; } } /* ================================================ WALLET INTELLIGENCE TAB ================================================ */ .intelligence-controls { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .intelligence-period-btns { display: flex; gap: 0; background: var(--card-bg, #1a1a2e); padding: 4px; border-radius: 8px; } .intelligence-period-btns .period-btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; background: transparent; color: #888; transition: all 0.2s; } .intelligence-period-btns .period-btn:hover { color: #e0e0e0; } .intelligence-period-btns .period-btn.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } .intelligence-chain-filter { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-color, #2a2a3e); background: var(--card-bg, #1a1a2e); color: var(--text-primary, #e0e0e0); font-size: 13px; cursor: pointer; } .intelligence-summary-row { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .intelligence-summary-row .analytics-summary-card { flex: 1; min-width: 180px; } .analytics-summary-sub { font-size: 12px; color: var(--text-secondary, #888); margin-top: 4px; } .intelligence-charts-row { display: flex; gap: 20px; margin-bottom: 24px; } .intelligence-chart-card { flex: 1; min-width: 300px; background: var(--card-bg, #1a1a2e); border: 1px solid var(--border-color, #2a2a3e); border-radius: 12px; padding: 20px; } .intelligence-chart-wrap { position: relative; height: 280px; } .intelligence-heatmap-section { background: var(--card-bg, #1a1a2e); border: 1px solid var(--border-color, #2a2a3e); border-radius: 12px; padding: 20px; margin-bottom: 24px; position: relative; } .intelligence-heatmap-container { overflow-x: auto; padding: 8px 0; } .analytics-subtitle { font-size: 13px; color: var(--text-secondary, #888); margin: -4px 0 12px 0; } .heatmap-cell { cursor: pointer; transition: opacity 0.15s; } .heatmap-cell:hover { stroke: #667eea; stroke-width: 2; opacity: 0.85; } .intelligence-heatmap-tooltip { position: absolute; background: var(--card-bg, #1e293b); border: 1px solid var(--border-color, #334155); border-radius: 6px; padding: 6px 10px; font-size: 12px; color: var(--text-primary, #e0e0e0); pointer-events: none; white-space: nowrap; z-index: 10; transform: translateX(-50%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .intelligence-table-section { background: var(--card-bg, #1a1a2e); border: 1px solid var(--border-color, #2a2a3e); border-radius: 12px; padding: 20px; margin-bottom: 24px; } .intelligence-table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; } .intelligence-table-header .analytics-title { margin: 0; } .cp-page-size-select { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary, #94a3b8); } .cp-page-size-select select { background: var(--card-bg, #1a1a2e); color: var(--text-primary, #e0e0e0); border: 1px solid var(--border-color, #2a2a3e); border-radius: 6px; padding: 4px 8px; font-size: 13px; cursor: pointer; } .cp-pagination-wrapper { margin-top: 12px; } .cp-pagination-controls { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; color: var(--text-secondary, #94a3b8); } .cp-pagination-info { font-size: 12px; opacity: 0.7; } .cp-page-btn { background: var(--card-bg, #1a1a2e); color: var(--text-primary, #e0e0e0); border: 1px solid var(--border-color, #2a2a3e); border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .cp-page-btn:hover:not(:disabled) { background: var(--accent-color, #667eea); border-color: var(--accent-color, #667eea); color: #fff; } .cp-page-btn:disabled { opacity: 0.3; cursor: not-allowed; } .cp-page-num { font-size: 12px; font-weight: 600; } /* Crypto Market table controls (page size dropdown) */ .cm-table-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--text-secondary, #888); } .cm-table-controls select { background: var(--card-bg, #1a1a2e); color: var(--text-primary, #e0e0e0); border: 1px solid var(--border-color, #2a2a3e); border-radius: 6px; padding: 4px 8px; font-size: 12px; cursor: pointer; } /* Crypto Market source toggle (CMC / CoinGecko) */ .cm-source-toggle { display: flex; gap: 0; background: var(--card-bg, #1a1a2e); border-radius: 8px; padding: 3px; margin-left: auto; } .cm-source-btn { padding: 6px 14px; border: none; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; background: transparent; color: var(--text-secondary, #888); transition: all 0.2s; } .cm-source-btn:hover { color: var(--text-primary, #e0e0e0); } .cm-source-btn.active { background: var(--accent-color, #667eea); color: #fff; } .large-tx-filters { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary, #94a3b8); } .large-tx-filters select { background: var(--card-bg, #1a1a2e); color: var(--text-primary, #e0e0e0); border: 1px solid var(--border-color, #2a2a3e); border-radius: 6px; padding: 4px 8px; font-size: 13px; cursor: pointer; } .table-scroll-wrapper { overflow-x: auto; } .counterparty-address { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px; color: var(--text-primary, #e0e0e0); } .copy-addr-btn { background: none; border: none; cursor: pointer; font-size: 13px; opacity: 0.4; padding: 2px 4px; vertical-align: middle; transition: opacity 0.2s; } .copy-addr-btn:hover { opacity: 1; } .counterparty-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; } .counterparty-badge.cex { background: rgba(34, 197, 94, 0.15); color: #4ade80; } .counterparty-badge.self { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } .counterparty-badge.unknown { background: rgba(156, 163, 175, 0.15); color: #9ca3af; } .intelligence-empty-state { text-align: center; padding: 60px 20px; color: #888; } .intelligence-empty-state .empty-state-icon { font-size: 48px; margin-bottom: 16px; } .intelligence-empty-state h3 { color: var(--text-primary, #e0e0e0); margin-bottom: 8px; } /* Light theme overrides */ [data-theme="light"] .intelligence-period-btns { background: #f3f4f6; } [data-theme="light"] .intelligence-period-btns .period-btn { color: #6b7280; } [data-theme="light"] .intelligence-period-btns .period-btn:hover { color: #1a1a2e; } [data-theme="light"] .intelligence-chain-filter { background: #ffffff; border-color: #e5e7eb; color: #1a1a2e; } [data-theme="light"] .intelligence-chart-card, [data-theme="light"] .intelligence-heatmap-section, [data-theme="light"] .intelligence-table-section { background: #ffffff; border-color: #e5e7eb; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } [data-theme="light"] .intelligence-heatmap-tooltip { background: #ffffff; border-color: #e5e7eb; color: #1a1a2e; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); } [data-theme="light"] .counterparty-badge.cex { background: rgba(34, 197, 94, 0.1); color: #16a34a; } [data-theme="light"] .counterparty-badge.self { background: rgba(59, 130, 246, 0.1); color: #2563eb; } [data-theme="light"] .counterparty-badge.unknown { background: rgba(156, 163, 175, 0.1); color: #6b7280; } [data-theme="light"] .copy-addr-btn { opacity: 0.3; } [data-theme="light"] .large-tx-filters select, [data-theme="light"] .cp-page-size-select select, [data-theme="light"] .cp-page-btn { background: #ffffff; border-color: #e5e7eb; color: #1a1a2e; } [data-theme="light"] .cp-page-btn:hover:not(:disabled) { background: var(--accent-color, #667eea); border-color: var(--accent-color, #667eea); color: #fff; } /* Responsive */ @media (max-width: 768px) { .intelligence-charts-row { flex-direction: column; } .intelligence-chart-card { min-width: unset; } .intelligence-chart-wrap { height: 220px; } .intelligence-summary-row .analytics-summary-card { min-width: 140px; } } /* ============================================================================ GLOBAL SEARCH ============================================================================ */ .global-search-container { position: relative; display: flex; align-items: center; margin-right: 8px; } /* Search button — always visible when collapsed */ .global-search-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0, 210, 106, 0.3); background: rgba(0, 210, 106, 0.08); color: var(--accent-success); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; flex-shrink: 0; } .global-search-btn:hover { border-color: rgba(0, 210, 106, 0.6); background: rgba(0, 210, 106, 0.15); box-shadow: 0 0 10px rgba(0, 210, 106, 0.2); } .global-search-btn svg { width: 18px; height: 18px; } /* Expandable search bar — hidden until opened */ .global-search-bar { display: none; align-items: center; background: var(--bg-secondary); border: 1px solid rgba(0, 210, 106, 0.4); border-radius: 20px; height: 36px; width: 280px; overflow: hidden; } .global-search-bar.open { display: flex; } .global-search-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 14px; padding: 8px 14px; min-width: 0; } .global-search-input::placeholder { color: var(--text-secondary); opacity: 0.6; } .global-search-close { width: 32px; height: 32px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; margin-right: 2px; border-radius: 50%; transition: all 0.15s ease; } .global-search-close:hover { color: var(--accent-error, #ff6b6b); background: rgba(255, 107, 107, 0.1); } .global-search-close svg { width: 14px; height: 14px; } .global-search-results { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 400px; overflow-y: auto; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); backdrop-filter: blur(12px); z-index: 1200; padding: 8px 0; display: none; } .global-search-results.visible { display: block; } .search-category-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); padding: 8px 16px 4px; opacity: 0.7; } .search-result-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; transition: background 0.15s ease; text-decoration: none; color: var(--text-primary); } .search-result-item:hover { background: rgba(0, 210, 106, 0.08); } .search-result-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(0, 210, 106, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; color: var(--accent-success); } .search-result-icon img { width: 24px; height: 24px; border-radius: 50%; } .search-result-text { flex: 1; min-width: 0; } .search-result-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result-sub { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result-arrow { color: var(--text-secondary); opacity: 0.4; flex-shrink: 0; } .search-spinner { display: flex; justify-content: center; padding: 16px; } .search-spinner::after { content: ''; width: 20px; height: 20px; border: 2px solid var(--border-color); border-top-color: var(--accent-success); border-radius: 50%; animation: search-spin 0.6s linear infinite; } @keyframes search-spin { to { transform: rotate(360deg); } } .search-no-results { text-align: center; padding: 16px; color: var(--text-secondary); font-size: 13px; } /* Light theme overrides */ [data-theme="light"] .global-search-btn { border-color: rgba(0, 184, 148, 0.3); background: rgba(0, 184, 148, 0.06); color: var(--accent-success); } [data-theme="light"] .global-search-btn:hover { border-color: rgba(0, 184, 148, 0.5); background: rgba(0, 184, 148, 0.12); box-shadow: 0 0 10px rgba(0, 184, 148, 0.15); } [data-theme="light"] .global-search-bar { border-color: #e5e7eb; background: #ffffff; } [data-theme="light"] .global-search-results { background: #ffffff; border-color: #e5e7eb; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); } [data-theme="light"] .search-result-item:hover { background: rgba(0, 184, 148, 0.06); } [data-theme="light"] .search-result-icon { background: rgba(0, 184, 148, 0.08); color: var(--accent-success); } /* Responsive */ @media (max-width: 768px) { .global-search-bar { width: 200px; } .global-search-results { width: 260px; } } /*=============================================================================== WALLET ADDRESS DETECTION UI ===============================================================================*/ .chain-detection-result { border: 1px solid var(--border-color); border-radius: 12px; padding: 12px 16px; margin-top: 8px; min-height: 40px; transition: border-color 0.2s; } .detection-loading { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 13px; } .detection-loading .spinner-small { width: 16px; height: 16px; border: 2px solid var(--border-color); border-top-color: var(--accent-success); border-radius: 50%; animation: spin 0.8s linear infinite; } .detection-single { display: flex; align-items: center; gap: 10px; } .detection-single img { width: 24px; height: 24px; border-radius: 50%; } .detection-single .chain-name { font-weight: 600; color: var(--text-primary); font-size: 14px; } .detection-single .checkmark { color: var(--accent-success); font-size: 18px; margin-left: auto; } .chain-detection-result.detected { border-color: var(--accent-success); background: rgba(0, 210, 106, 0.05); } .detection-none { color: var(--accent-error); font-size: 13px; line-height: 1.5; } .detection-none a { color: var(--accent-success); text-decoration: underline; } .chain-chip-group { display: flex; flex-wrap: wrap; gap: 8px; } .chain-chip-group .chip-label { width: 100%; font-size: 12px; color: var(--text-secondary); margin-bottom: 2px; } .chain-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 20px; background: transparent; color: var(--text-primary); font-size: 13px; cursor: pointer; transition: all 0.15s; } .chain-chip img { width: 18px; height: 18px; border-radius: 50%; } .chain-chip:hover { border-color: var(--accent-success); background: rgba(0, 210, 106, 0.08); } .chain-chip.active { border-color: var(--accent-success); background: rgba(0, 210, 106, 0.15); font-weight: 600; } /* Light theme overrides */ [data-theme="light"] .chain-detection-result { border-color: #e5e7eb; background: #f9fafb; } [data-theme="light"] .chain-detection-result.detected { border-color: var(--accent-success); background: rgba(0, 184, 148, 0.06); } [data-theme="light"] .chain-chip { border-color: #d1d5db; background: #ffffff; } [data-theme="light"] .chain-chip:hover { border-color: var(--accent-success); background: rgba(0, 184, 148, 0.06); } [data-theme="light"] .chain-chip.active { border-color: var(--accent-success); background: rgba(0, 184, 148, 0.12); } /*=============================================================================== EXCHANGE SEARCH BAR + PAGINATION ===============================================================================*/ .exchange-search-bar { display: flex; align-items: center; position: relative; margin-bottom: 12px; } .exchange-search-bar input { width: 100%; padding: 10px 36px 10px 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-secondary); color: var(--text-primary); font-size: 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .exchange-search-bar input:focus { border-color: var(--accent-success); box-shadow: 0 0 0 3px rgba(0, 210, 106, 0.15); } .exchange-search-bar input::placeholder { color: var(--text-secondary); } .exchange-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-secondary); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 50%; line-height: 1; display: none; } .exchange-search-clear:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.1); } .exchange-search-clear.visible { display: block; } .pagination-controls { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 12px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; } .pagination-controls .page-size-select { display: flex; align-items: center; gap: 6px; } .pagination-controls select { padding: 4px 8px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; cursor: pointer; } .pagination-controls .page-nav { display: flex; align-items: center; gap: 8px; } .pagination-controls .page-nav button { padding: 4px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; cursor: pointer; transition: all 0.15s; } .pagination-controls .page-nav button:hover:not(:disabled) { border-color: var(--accent-success); background: rgba(0, 210, 106, 0.08); } .pagination-controls .page-nav button:disabled { opacity: 0.4; cursor: default; } .pagination-controls .page-info { font-size: 13px; white-space: nowrap; } .exchange-empty-state { text-align: center; padding: 24px 16px; color: var(--text-secondary); font-size: 14px; } /* Light theme overrides */ [data-theme="light"] .exchange-search-bar input { border-color: #d1d5db; background: #ffffff; } [data-theme="light"] .exchange-search-bar input:focus { border-color: var(--accent-success); box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.12); } [data-theme="light"] .exchange-search-clear:hover { background: rgba(0, 0, 0, 0.06); } [data-theme="light"] .pagination-controls select, [data-theme="light"] .pagination-controls .page-nav button { border-color: #d1d5db; background: #ffffff; } [data-theme="light"] .pagination-controls .page-nav button:hover:not(:disabled) { border-color: var(--accent-success); background: rgba(0, 184, 148, 0.06); } /*=============================================================================== PRIVACY & ZK PAGE ===============================================================================*/ /* Section containers */ .privacy-section { margin-bottom: 28px; } .privacy-section-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color); } .privacy-section-header h3 { margin: 0; font-size: 1.1rem; color: var(--text-primary); } .privacy-section-header .section-info-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 11px; font-weight: 700; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 50%; cursor: help; user-select: none; } .privacy-section-header .section-info-btn .info-tooltip { display: none; position: absolute; top: 26px; left: 50%; transform: translateX(-50%); width: 320px; padding: 12px 14px; background: var(--bg-card, #1a1a2e); border: 1px solid var(--border-color); border-radius: 8px; font-size: 12px; font-weight: 400; line-height: 1.6; color: var(--text-secondary); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); z-index: 100; white-space: normal; } .privacy-section-header .section-info-btn:hover .info-tooltip { display: block; } /* Loading & empty states */ .privacy-loading { display: flex; align-items: center; gap: 10px; padding: 20px 0; color: var(--text-secondary); font-size: 14px; } .privacy-empty-state { text-align: center; padding: 40px 20px; color: var(--text-secondary); } .privacy-empty-state .empty-icon { font-size: 2.5rem; margin-bottom: 12px; opacity: 0.5; } .privacy-empty-state h4 { margin: 0 0 8px; color: var(--text-primary); font-size: 1rem; } .privacy-empty-state p { margin: 0 0 16px; font-size: 13px; } .privacy-empty-state a { color: var(--accent-success); text-decoration: none; font-weight: 600; } .privacy-empty-state a:hover { text-decoration: underline; } /* Analysis table */ .privacy-analysis-table { width: 100%; border-collapse: collapse; font-size: 14px; } .privacy-analysis-table thead th { text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); border-bottom: 2px solid var(--border-color); } .privacy-analysis-table tbody td { padding: 12px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); vertical-align: middle; } .privacy-analysis-table tbody tr:last-child td { border-bottom: none; } .privacy-analysis-table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); } /* Wallet name cell with icon */ .wallet-name-cell { display: flex; align-items: center; gap: 8px; } .wallet-name-cell .wallet-chain-icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .wallet-chain-icon-placeholder { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--text-secondary); } /* Score detail panel (expandable row) */ .score-detail-panel { padding: 16px; background: var(--bg-secondary); border-radius: 8px; } .detail-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; } .detail-row + .detail-row { border-top: 1px solid var(--border-color); } .detail-label { color: var(--text-secondary); } .detail-value { color: var(--text-primary); font-weight: 600; } /* Recommendations */ .recommendations { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-color); } .recommendations h5 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); } .rec-item { display: flex; gap: 8px; padding: 4px 0; font-size: 13px; color: var(--text-primary); line-height: 1.5; } /* Action buttons (Check Score / Set Balance) */ .btn-check-score, .btn-set-balance { padding: 6px 14px; font-size: 12px; font-weight: 600; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; transition: all 0.15s; white-space: nowrap; } .btn-check-score:hover, .btn-set-balance:hover { border-color: var(--accent-success); background: rgba(0, 210, 106, 0.08); color: var(--accent-success); } /* XMR Balance Modal */ .privacy-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); z-index: 1000; align-items: center; justify-content: center; } .privacy-modal-overlay.active { display: flex; } .privacy-modal { background: var(--bg-card, #1a1a2e); border: 1px solid var(--border-color); border-radius: 12px; padding: 28px; max-width: 440px; width: 90%; } .privacy-modal h3 { margin: 0 0 8px; color: var(--text-primary); } .privacy-modal p { margin: 0 0 16px; color: var(--text-secondary); font-size: 13px; line-height: 1.6; } .privacy-modal label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text-primary); } .privacy-modal input[type="number"] { width: 100%; padding: 10px 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-primary); font-size: 14px; box-sizing: border-box; } .privacy-modal input[type="number"]:focus { outline: none; border-color: var(--accent-success); box-shadow: 0 0 0 2px rgba(0, 210, 106, 0.15); } .privacy-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; } /* Score badges — coloured pill showing privacy level */ .privacy-score-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; } .privacy-score-badge.score-protected { background: rgba(0, 210, 106, 0.15); color: #00d26a; border: 1px solid rgba(0, 210, 106, 0.3); } .privacy-score-badge.score-partial { background: rgba(255, 193, 7, 0.15); color: #ffc107; border: 1px solid rgba(255, 193, 7, 0.3); } .privacy-score-badge.score-exposed { background: rgba(255, 107, 107, 0.15); color: #ff6b6b; border: 1px solid rgba(255, 107, 107, 0.3); } /* Privacy holding card */ .privacy-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 16px; transition: border-color 0.2s, box-shadow 0.2s; } .privacy-card:hover { border-color: var(--accent-success); box-shadow: 0 0 12px rgba(0, 210, 106, 0.12); } /* Chain stats grid */ .privacy-chain-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } /* Education section accordion */ .privacy-education-section { display: flex; flex-direction: column; gap: 8px; } .education-item { border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; } .education-item-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; cursor: pointer; background: var(--bg-card); user-select: none; transition: background 0.15s; } .education-item-header:hover { background: var(--bg-secondary); } .education-item-body { display: none; padding: 16px 18px; background: var(--bg-secondary); font-size: 14px; color: var(--text-secondary); line-height: 1.7; border-top: 1px solid var(--border-color); } .education-item.open .education-item-body { display: block; } /* Privacy level indicator pill */ .privacy-level-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-bottom: 12px; } .privacy-level-indicator.level-high { background: rgba(0, 210, 106, 0.15); color: #00d26a; border: 1px solid rgba(0, 210, 106, 0.3); } .privacy-level-indicator.level-medium { background: rgba(100, 180, 255, 0.15); color: #64b4ff; border: 1px solid rgba(100, 180, 255, 0.3); } .privacy-level-indicator.level-partial { background: rgba(255, 193, 7, 0.15); color: #ffc107; border: 1px solid rgba(255, 193, 7, 0.3); } /* Privacy tag (Fully Private / Shielded / Partial) */ .privacy-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .privacy-tag.tag-full { background: rgba(0, 210, 106, 0.15); color: #00d26a; } .privacy-tag.tag-shielded { background: rgba(100, 180, 255, 0.15); color: #64b4ff; } .privacy-tag.tag-partial { background: rgba(255, 193, 7, 0.15); color: #ffc107; } /* Light theme overrides — privacy layout */ [data-theme="light"] .privacy-section-header { border-bottom-color: #e5e7eb; } [data-theme="light"] .privacy-section-header .section-info-btn .info-tooltip { background: #ffffff; border-color: #e5e7eb; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); color: #6b7280; } [data-theme="light"] .privacy-analysis-table thead th { color: #6b7280; border-bottom-color: #e5e7eb; } [data-theme="light"] .privacy-analysis-table tbody td { border-bottom-color: #f3f4f6; color: #1f2937; } [data-theme="light"] .privacy-analysis-table tbody tr:hover td { background: rgba(0, 0, 0, 0.02); } [data-theme="light"] .score-detail-panel { background: #f9fafb; } [data-theme="light"] .detail-row + .detail-row { border-top-color: #e5e7eb; } [data-theme="light"] .detail-label { color: #6b7280; } [data-theme="light"] .detail-value { color: #1f2937; } [data-theme="light"] .recommendations { border-top-color: #e5e7eb; } [data-theme="light"] .btn-check-score, [data-theme="light"] .btn-set-balance { background: #ffffff; border-color: #e5e7eb; color: #374151; } [data-theme="light"] .btn-check-score:hover, [data-theme="light"] .btn-set-balance:hover { border-color: #00b894; color: #00b894; background: rgba(0, 184, 148, 0.06); } [data-theme="light"] .privacy-modal { background: #ffffff; border-color: #e5e7eb; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); } [data-theme="light"] .privacy-modal input[type="number"] { background: #f9fafb; border-color: #e5e7eb; color: #1f2937; } [data-theme="light"] .privacy-modal input[type="number"]:focus { border-color: #00b894; } [data-theme="light"] .wallet-chain-icon-placeholder { background: #f3f4f6; color: #9ca3af; } [data-theme="light"] .privacy-card { background: #ffffff; border-color: #e5e7eb; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } [data-theme="light"] .privacy-card:hover { border-color: var(--accent-success); box-shadow: 0 4px 12px rgba(0, 184, 148, 0.15); } [data-theme="light"] .education-item { border-color: #e5e7eb; } [data-theme="light"] .education-item-header { background: #ffffff; } [data-theme="light"] .education-item-header:hover { background: #f5f7fa; } [data-theme="light"] .education-item-body { background: #f9fafb; border-top-color: #e5e7eb; } [data-theme="light"] .privacy-level-indicator.level-high { background: rgba(0, 184, 148, 0.12); color: #00b894; border-color: rgba(0, 184, 148, 0.3); } [data-theme="light"] .privacy-score-badge.score-protected { background: rgba(0, 184, 148, 0.12); color: #00b894; border-color: rgba(0, 184, 148, 0.3); } /* Cypherpunk1 theme overrides — privacy layout */ [data-theme="cypherpunk1"] .btn-check-score:hover, [data-theme="cypherpunk1"] .btn-set-balance:hover { border-color: #00d4ff; color: #00d4ff; background: rgba(0, 212, 255, 0.08); } [data-theme="cypherpunk1"] .privacy-analysis-table tbody tr:hover td { background: rgba(0, 212, 255, 0.03); } [data-theme="cypherpunk1"] .score-detail-panel { background: rgba(0, 212, 255, 0.04); } [data-theme="cypherpunk1"] .privacy-score-badge.score-protected { color: #00d4ff; background: rgba(0, 212, 255, 0.15); border-color: rgba(0, 212, 255, 0.3); } [data-theme="cypherpunk1"] .privacy-level-indicator.level-high { color: #00d4ff; background: rgba(0, 212, 255, 0.15); border-color: rgba(0, 212, 255, 0.3); } [data-theme="cypherpunk1"] .privacy-card:hover { border-color: #00d4ff; box-shadow: 0 0 16px rgba(0, 212, 255, 0.2); } [data-theme="cypherpunk1"] .education-item-body { background: rgba(0, 212, 255, 0.03); } /* Ocean depths theme overrides — privacy layout */ [data-theme="ocean-depths"] .btn-check-score:hover, [data-theme="ocean-depths"] .btn-set-balance:hover { border-color: #06d6a0; color: #06d6a0; background: rgba(6, 214, 160, 0.08); } [data-theme="ocean-depths"] .privacy-analysis-table tbody tr:hover td { background: rgba(6, 214, 160, 0.03); } [data-theme="ocean-depths"] .score-detail-panel { background: rgba(6, 214, 160, 0.04); } [data-theme="ocean-depths"] .privacy-card:hover { border-color: #06d6a0; box-shadow: 0 0 12px rgba(6, 214, 160, 0.2); } [data-theme="ocean-depths"] .privacy-level-indicator.level-high { color: #06d6a0; background: rgba(6, 214, 160, 0.12); border-color: rgba(6, 214, 160, 0.3); } /* Sunset horizon theme overrides — privacy layout */ [data-theme="sunset-horizon"] .btn-check-score:hover, [data-theme="sunset-horizon"] .btn-set-balance:hover { border-color: #06d6a0; color: #06d6a0; background: rgba(6, 214, 160, 0.08); } [data-theme="sunset-horizon"] .privacy-analysis-table tbody tr:hover td { background: rgba(6, 214, 160, 0.03); } [data-theme="sunset-horizon"] .score-detail-panel { background: rgba(6, 214, 160, 0.04); } [data-theme="sunset-horizon"] .privacy-card:hover { border-color: #06d6a0; box-shadow: 0 0 12px rgba(6, 214, 160, 0.2); } [data-theme="sunset-horizon"] .privacy-level-indicator.level-high { color: #06d6a0; background: rgba(6, 214, 160, 0.12); border-color: rgba(6, 214, 160, 0.3); } /* ── Token Approval Security ─────────────────────────────────────── */ /* Revoke.cash external link buttons */ .btn-revoke-link, .btn-revoke-link-detail { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; font-size: 12px; font-weight: 600; border: 1px solid rgba(255, 107, 107, 0.4); border-radius: 6px; background: rgba(255, 107, 107, 0.08); color: #ff6b6b; cursor: pointer; transition: all 0.15s; white-space: nowrap; text-decoration: none; } .btn-revoke-link:hover, .btn-revoke-link-detail:hover { border-color: #ff6b6b; background: rgba(255, 107, 107, 0.15); color: #ff6b6b; } .btn-revoke-link-detail { font-size: 11px; padding: 4px 10px; } /* Approval summary stats */ .approval-summary { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; padding: 14px 16px; background: var(--bg-secondary); border-radius: 10px; border: 1px solid var(--border-color); } .approval-stat { display: flex; flex-direction: column; gap: 2px; min-width: 100px; } .approval-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); } .approval-stat-value { font-size: 16px; font-weight: 700; color: var(--text-primary); } /* Scrollable approval list */ .approval-list-wrapper { max-height: 400px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 8px; } /* Per-approval detail table */ .approval-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; } .approval-detail-table thead { position: sticky; top: 0; z-index: 2; } .approval-detail-table thead th { text-align: left; padding: 8px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); background: var(--bg-card, #1a1a2e); border-bottom: 2px solid var(--border-color); } .approval-detail-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); vertical-align: middle; } .approval-detail-table tbody tr:last-child td { border-bottom: none; } .approval-detail-table tbody tr:hover td { background: rgba(255, 255, 255, 0.02); } /* Risk badge (reuses score-badge pattern but approval-specific) */ .approval-risk-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap; } .approval-risk-badge.risk-high { background: rgba(255, 107, 107, 0.15); color: #ff6b6b; border: 1px solid rgba(255, 107, 107, 0.3); } .approval-risk-badge.risk-medium { background: rgba(255, 193, 7, 0.15); color: #ffc107; border: 1px solid rgba(255, 193, 7, 0.3); } .approval-risk-badge.risk-low { background: rgba(0, 210, 106, 0.15); color: #00d26a; border: 1px solid rgba(0, 210, 106, 0.3); } /* Approval count badge (in wallet list) */ .approval-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 700; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); } .approval-count-badge.has-high { background: rgba(255, 107, 107, 0.15); color: #ff6b6b; border-color: rgba(255, 107, 107, 0.3); } .approval-count-badge.has-medium { background: rgba(255, 193, 7, 0.15); color: #ffc107; border-color: rgba(255, 193, 7, 0.3); } .approval-count-badge.all-low { background: rgba(0, 210, 106, 0.15); color: #00d26a; border-color: rgba(0, 210, 106, 0.3); } /* Approval action buttons row */ .approval-actions { display: flex; gap: 8px; align-items: center; } /* Recommendation text in summary */ .approval-recommendation { margin-top: 12px; padding: 10px 14px; background: var(--bg-secondary); border-radius: 8px; border-left: 3px solid var(--accent-success); font-size: 13px; color: var(--text-secondary); line-height: 1.5; } /* Light theme — approval overrides */ [data-theme="light"] .btn-revoke-link, [data-theme="light"] .btn-revoke-link-detail { background: rgba(220, 53, 69, 0.06); border-color: rgba(220, 53, 69, 0.3); color: #dc3545; } [data-theme="light"] .btn-revoke-link:hover, [data-theme="light"] .btn-revoke-link-detail:hover { background: rgba(220, 53, 69, 0.12); border-color: #dc3545; } [data-theme="light"] .approval-summary { background: #f9fafb; border-color: #e5e7eb; } [data-theme="light"] .approval-list-wrapper { border-color: #e5e7eb; } [data-theme="light"] .approval-detail-table thead th { background: #ffffff; border-bottom-color: #e5e7eb; color: #6b7280; } [data-theme="light"] .approval-detail-table tbody td { border-bottom-color: #f3f4f6; color: #1f2937; } [data-theme="light"] .approval-detail-table tbody tr:hover td { background: rgba(0, 0, 0, 0.02); } [data-theme="light"] .approval-recommendation { background: #f0fdf4; border-left-color: #00b894; } [data-theme="light"] .approval-count-badge { background: #f3f4f6; border-color: #e5e7eb; color: #374151; } /* Cypherpunk1 — approval overrides */ [data-theme="cypherpunk1"] .approval-detail-table tbody tr:hover td { background: rgba(0, 212, 255, 0.03); } [data-theme="cypherpunk1"] .approval-summary { background: rgba(0, 212, 255, 0.04); } [data-theme="cypherpunk1"] .approval-risk-badge.risk-low { color: #00d4ff; background: rgba(0, 212, 255, 0.15); border-color: rgba(0, 212, 255, 0.3); } /* Ocean-depths — approval overrides */ [data-theme="ocean-depths"] .approval-detail-table tbody tr:hover td { background: rgba(6, 214, 160, 0.03); } [data-theme="ocean-depths"] .approval-summary { background: rgba(6, 214, 160, 0.04); } /* Sunset-horizon — approval overrides */ [data-theme="sunset-horizon"] .approval-detail-table tbody tr:hover td { background: rgba(6, 214, 160, 0.03); } [data-theme="sunset-horizon"] .approval-summary { background: rgba(6, 214, 160, 0.04); } /* ============ Quota Warning Banner ============ */ .quota-banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 10px; margin: 8px 16px; font-size: 13px; animation: slideDown 0.3s ease; } .quota-warning { background: rgba(255, 193, 7, 0.15); border: 1px solid rgba(255, 193, 7, 0.4); color: #ffc107; } .quota-critical { background: rgba(244, 67, 54, 0.15); border: 1px solid rgba(244, 67, 54, 0.4); color: #f44336; } [data-theme="light"] .quota-warning { background: rgba(255, 152, 0, 0.1); border-color: rgba(255, 152, 0, 0.4); color: #e65100; } [data-theme="light"] .quota-critical { background: rgba(244, 67, 54, 0.1); border-color: rgba(244, 67, 54, 0.4); color: #c62828; } .quota-dismiss { margin-left: auto; background: none; border: none; color: inherit; cursor: pointer; font-size: 18px; opacity: 0.7; padding: 0 4px; } .quota-dismiss:hover { opacity: 1; } .quota-icon { font-size: 16px; } @keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ============ Price Source Badge ============ */ .price-source-badge { display: inline-block; font-size: 9px; font-weight: 600; padding: 1px 5px; border-radius: 6px; margin-left: 6px; vertical-align: middle; background: rgba(255, 193, 7, 0.2); border: 1px solid rgba(255, 193, 7, 0.4); color: #ffc107; letter-spacing: 0.3px; } [data-theme="light"] .price-source-badge { background: rgba(255, 152, 0, 0.12); border-color: rgba(255, 152, 0, 0.4); color: #e65100; }