:root { --bg: #0b0f1a; --bg-card: #131a2b; --bg-input: #0e1422; --border: #25304a; --text: #e7ecf5; --muted: #8b96ad; --primary: #6d8bff; --primary-2: #9a6bff; --accent: #2ee6a6; --danger: #ff6b6b; --warn: #ffb454; --radius: 14px; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --glow1: rgba(109, 139, 255, 0.18); --glow2: rgba(154, 107, 255, 0.16); } /* ---- Per-chain themes (set via data-chain on ) ------------------- */ /* Ethereum — tech purple-blue */ [data-chain="eth"] { --primary: #6d8bff; --primary-2: #9a6bff; --accent: #74f0ff; --glow1: rgba(109, 139, 255, 0.22); --glow2: rgba(154, 107, 255, 0.2); } /* Base — Coinbase blue */ [data-chain="base"] { --primary: #4c8bff; --primary-2: #0052ff; --accent: #6aa8ff; --glow1: rgba(0, 82, 255, 0.22); --glow2: rgba(76, 139, 255, 0.18); } /* BNB — noble dark gold */ [data-chain="bnb"] { --bg: #100d06; --bg-card: #1a160c; --bg-input: #14110a; --border: #3c3015; --primary: #f0b90b; --primary-2: #b8860b; --accent: #ffd75e; --warn: #ffd75e; --glow1: rgba(240, 185, 11, 0.2); --glow2: rgba(184, 134, 11, 0.16); } /* Tron — red */ [data-chain="tron"] { --bg: #120a0a; --bg-card: #1d1212; --bg-input: #170d0d; --border: #3d2020; --primary: #ff3b3b; --primary-2: #e01a1a; --accent: #ff8a8a; --glow1: rgba(255, 59, 59, 0.2); --glow2: rgba(224, 26, 26, 0.16); } /* Bitcoin (both legacy and SegWit) — orange */ [data-chain="btc"], [data-chain="btc-bech32"] { --bg: #130f08; --bg-card: #1d160c; --bg-input: #17120a; --border: #3d2f16; --primary: #f7931a; --primary-2: #d97b06; --accent: #ffc06a; --warn: #ffc06a; --glow1: rgba(247, 147, 26, 0.2); --glow2: rgba(217, 123, 6, 0.16); } /* Solana — purple / green */ [data-chain="sol"] { --primary: #9945ff; --primary-2: #14f195; --accent: #19fb9b; --glow1: rgba(153, 69, 255, 0.22); --glow2: rgba(20, 241, 149, 0.18); } /* Sui — sea blue */ [data-chain="sui"] { --primary: #4da2ff; --primary-2: #2f6fed; --accent: #7fd5ff; --glow1: rgba(77, 162, 255, 0.24); --glow2: rgba(47, 111, 237, 0.18); } /* XRP — dark slate + cool silver-blue */ [data-chain="xrp"] { --bg: #0a0c0f; --bg-card: #14171c; --bg-input: #0f1216; --border: #2a313a; --primary: #9fc1e8; --primary-2: #4a6e96; --accent: #eaf2fb; --glow1: rgba(120, 160, 210, 0.18); --glow2: rgba(60, 90, 130, 0.16); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK TC", "Noto Sans JP", "Noto Sans KR", sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; } .bg-glow { position: fixed; inset: 0; z-index: -1; background: radial-gradient(60vw 50vh at 75% -10%, var(--glow1), transparent 60%), radial-gradient(50vw 40vh at 10% 0%, var(--glow2), transparent 60%); pointer-events: none; transition: background 0.4s ease; } /* Top bar -------------------------------------------------------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px clamp(16px, 4vw, 40px); max-width: 760px; margin: 0 auto; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 600; } .brand-mark { font-size: 22px; color: var(--primary); display: inline-flex; } .brand-mark svg { width: 24px; height: 24px; display: block; } .brand-name { font-size: 16px; } .hero-logo { color: var(--primary); margin-bottom: 14px; line-height: 0; } .hero-logo svg { width: 60px; height: 60px; filter: drop-shadow(0 6px 24px var(--glow1)); animation: logo-float 4s ease-in-out infinite; } @keyframes logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .lang { display: flex; align-items: center; gap: 8px; } .lang-label { color: var(--muted); font-size: 13px; } /* Layout --------------------------------------------------------------- */ .container { max-width: 760px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 40px) 64px; } .hero { text-align: center; margin: 24px 0 28px; } .hero h1 { font-size: clamp(28px, 6vw, 40px); margin: 0 0 10px; background: linear-gradient(120deg, var(--primary), var(--primary-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .tagline { color: var(--muted); margin: 0 0 14px; font-size: 16px; } .badge { display: inline-block; margin: 0; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: rgba(46, 230, 166, 0.07); color: var(--accent); font-size: 13px; } .tool-switch { margin: 14px 0 0; font-size: 14px; } .tool-switch a { color: var(--primary); text-decoration: none; border-bottom: 1px dashed var(--primary); padding-bottom: 1px; } .tool-switch a:hover { filter: brightness(1.15); } /* Cards ---------------------------------------------------------------- */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; } .field { margin-bottom: 16px; } .field-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; font-weight: 500; } .hint { display: block; color: var(--muted); font-size: 12px; margin-top: 6px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 520px) { .grid2 { grid-template-columns: 1fr; } } input[type="text"], select { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; color: var(--text); padding: 11px 13px; font-size: 15px; font-family: inherit; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } input[type="text"] { font-family: var(--mono); } input:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(109, 139, 255, 0.18); } .hexbox { display: flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .hexbox:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(109, 139, 255, 0.18); } .hexbox-prefix { padding: 0 4px 0 13px; color: var(--muted); font-family: var(--mono); } .hexbox input { border: none; box-shadow: none; background: transparent; } .hexbox input:focus { box-shadow: none; } .preview { font-family: var(--mono); font-size: 18px; text-align: center; padding: 14px; margin: 4px 0 18px; background: var(--bg-input); border: 1px dashed var(--border); border-radius: 10px; color: var(--primary); word-break: break-all; } /* Switch --------------------------------------------------------------- */ .switch { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin-bottom: 18px; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-track { flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--bg-input); border: 1px solid var(--border); position: relative; transition: background 0.2s; margin-top: 2px; } .switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform 0.2s, background 0.2s; } .switch input:checked + .switch-track { background: rgba(109, 139, 255, 0.35); border-color: var(--primary); } .switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); background: var(--primary); } .switch-title { display: block; font-size: 14px; font-weight: 500; } /* Buttons -------------------------------------------------------------- */ .actions { display: flex; gap: 12px; } .btn { font-family: inherit; font-size: 15px; font-weight: 600; padding: 12px 22px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform 0.05s, filter 0.15s, background 0.15s; } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(120deg, var(--primary), var(--primary-2)); color: #fff; flex: 1; } .btn-primary:hover { filter: brightness(1.08); } .btn-ghost { background: transparent; border-color: var(--border); color: var(--text); flex: 1; } .btn-ghost:hover { border-color: var(--danger); color: var(--danger); } .btn-sm { padding: 7px 14px; font-size: 13px; background: var(--bg-input); border-color: var(--border); color: var(--text); } .btn-sm:hover { border-color: var(--primary); } .error { color: var(--danger); font-size: 13px; margin: 0 0 12px; } /* Engine mode ---------------------------------------------------------- */ .engine-mode { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-input); position: relative; overflow: hidden; font-weight: 700; font-size: 14px; letter-spacing: 0.3px; } .engine-label { position: relative; z-index: 2; } .engine-core { flex: none; width: 16px; height: 16px; border-radius: 50%; position: relative; z-index: 2; } .engine-matrix { position: absolute; inset: 0; z-index: 1; opacity: 0; } /* Stable mode: calm pulsing blue core. */ .engine-mode.stable { color: #cfe0ff; border-color: rgba(109, 139, 255, 0.4); } .engine-mode.stable .engine-core { background: #6d8bff; box-shadow: 0 0 0 0 rgba(109, 139, 255, 0.7); animation: core-pulse 1.8s infinite; } @keyframes core-pulse { 0% { box-shadow: 0 0 0 0 rgba(109, 139, 255, 0.6); } 70% { box-shadow: 0 0 0 12px rgba(109, 139, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(109, 139, 255, 0); } } /* Turbo mode: glowing accent core + animated compute-matrix sweep. */ .engine-mode.turbo { color: #fff; border-color: var(--primary); box-shadow: 0 0 24px -6px var(--primary); } .engine-mode.turbo .engine-core { background: var(--accent); box-shadow: 0 0 12px 2px var(--accent); animation: core-spin 1.1s linear infinite, core-pulse 1.2s infinite; } @keyframes core-spin { to { transform: rotate(360deg); } } .engine-mode.turbo .engine-matrix { opacity: 1; background: repeating-linear-gradient(90deg, transparent 0 14px, color-mix(in srgb, var(--primary) 22%, transparent) 14px 15px), repeating-linear-gradient(0deg, transparent 0 14px, color-mix(in srgb, var(--primary) 18%, transparent) 14px 15px), linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--accent) 35%, transparent) 50%, transparent 70%); background-size: 15px 15px, 15px 15px, 220% 100%; animation: matrix-sweep 2.2s linear infinite; } @keyframes matrix-sweep { 0% { background-position: 0 0, 0 0, 200% 0; } 100% { background-position: 0 0, 0 0, -200% 0; } } .engine-mode.detecting { color: var(--muted); } .engine-mode.detecting .engine-core { background: var(--muted); } @media (prefers-reduced-motion: reduce) { .engine-mode * { animation: none !important; } } /* Stats ---------------------------------------------------------------- */ .status-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-weight: 600; } .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); } .dot.running { background: var(--warn); animation: pulse 1s infinite; } .dot.found { background: var(--accent); } .dot.stopped { background: var(--danger); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; } .stat { background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; } .stat-key { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; } .stat-val { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; } /* Result --------------------------------------------------------------- */ .result h2 { margin: 0 0 16px; font-size: 20px; } .result-field { margin-bottom: 16px; } .result-key { display: block; font-size: 13px; color: var(--muted); margin-bottom: 7px; } .copy-row { display: flex; gap: 10px; align-items: stretch; } .mono { flex: 1; font-family: var(--mono); background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; font-size: 14px; word-break: break-all; display: flex; align-items: center; } .secret { color: var(--warn); } .warning { background: rgba(255, 180, 84, 0.08); border: 1px solid rgba(255, 180, 84, 0.3); border-radius: 10px; padding: 12px 14px; color: var(--warn); font-size: 13px; margin: 4px 0 0; } /* Footer / toast ------------------------------------------------------- */ .footer { text-align: center; color: var(--muted); font-size: 12px; margin-top: 24px; } .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--accent); color: #04130d; font-weight: 600; padding: 10px 18px; border-radius: 999px; opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 50; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }