/* portal-tools.css — scoped redesign of the wrapped tool/app page BODIES so they match the Kodachi landing/downloads theme. Each block is scoped under a `.kp-tool-` body class added by the injector. The portal shell (#kp-* header/rail/footer) is themed in portal-shell.css and must NOT be touched here. */ /* ===================================== dns ===================================== */ /* ================================================================ dns.css | DNS Leak Checker | Kodachi portal tool reskin Scope class: .kp-tool-dns (applied to by portal shell) All selectors prefixed: zero leakage to shell or other pages. Design tokens: landing/downloads theme bg #000 | panel #070a0e | neon #9FEF00 | neon-dim #6fa800 text #e8f0e0 | muted #aab4be | dim #8a93a0 danger #ff3b3b | warn #ffcc00 fonts: Orbitron (800, display) | Inter (body) | JetBrains Mono (mono) ================================================================ */ /* ── 1. Body: kill old standalone flex-centering in portal context ── */ .kp-tool-dns { display: block !important; align-items: unset !important; justify-content: unset !important; } /* ── 2. Main content column ── */ .kp-tool-dns .container { max-width: 1100px !important; width: auto !important; margin: 24px 32px 48px !important; padding: 48px 48px 40px !important; text-align: left !important; border: 1px solid rgba(159,239,0,.13) !important; border-radius: 16px !important; background: #060906 !important; box-shadow: 0 4px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(159,239,0,.04) inset !important; position: relative !important; } /* Ambient hero glow */ .kp-tool-dns .container::before { content: ''; position: absolute; top: -100px; left: -60px; width: 680px; height: 560px; background: radial-gradient(circle at 28% 25%, rgba(159,239,0,.11) 0%, transparent 62%); pointer-events: none; z-index: 0; } /* Subtle grid texture (hero quadrant only) */ .kp-tool-dns .container::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(159,239,0,.032) 1px, transparent 1px), linear-gradient(90deg, rgba(159,239,0,.032) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 55% at 22% 20%, #000 0%, transparent 100%); mask-image: radial-gradient(ellipse 70% 55% at 22% 20%, #000 0%, transparent 100%); pointer-events: none; z-index: 0; } /* ── 3. Hide legacy elements ── */ /* Floating duplicate logo */ .kp-tool-dns .container > .kodachi-logo { display: none !important; } /* Social share row (inner widget) */ .kp-tool-dns .container .kodachi-share { display: none !important; } /* Share outer wrapper div (no id, no meaningful class) + div.footer copyright */ .kp-tool-dns .container > div:not([id]):not(.kodachi-logo) { display: none !important; } /* Baked-in footer paragraphs: "Explore Kodachi" + "Fortify" + copyright. The description is :first-of-type; all others are footer copy. */ .kp-tool-dns .container > p:not(:first-of-type) { display: none !important; } /* ── 4. Back button ── */ .kp-tool-dns .back-btn { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; padding: 6px 13px 6px 9px !important; background: rgba(159,239,0,.05) !important; border: 1px solid rgba(159,239,0,.24) !important; border-radius: 8px !important; color: #9FEF00 !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; margin-bottom: 32px !important; text-shadow: none !important; box-shadow: none !important; transition: background .15s, border-color .15s !important; position: relative; z-index: 1; } .kp-tool-dns .back-btn:hover { background: rgba(159,239,0,.10) !important; border-color: rgba(159,239,0,.42) !important; transform: none !important; } .kp-tool-dns .back-arrow { font-size: 14px !important; line-height: 1 !important; display: inline !important; } /* ── 5. Hero heading ── */ .kp-tool-dns .container > h1 { position: relative; z-index: 1; font-family: 'Orbitron', system-ui, sans-serif !important; font-weight: 900 !important; font-size: clamp(26px, 3.6vw, 42px) !important; line-height: 1.06 !important; letter-spacing: -.02em !important; margin: 0 0 16px !important; display: block !important; background: linear-gradient(165deg, #ffffff 0%, #9FEF00 135%); -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none !important; } /* Remove existing neon underline (dns.css adds h1::after) */ .kp-tool-dns .container > h1::after { display: none !important; } /* ── 6. Description paragraph ── */ .kp-tool-dns .container > p:first-of-type { position: relative; z-index: 1; color: #aab4be !important; font-family: 'Inter', system-ui, sans-serif !important; font-size: 15.5px !important; line-height: 1.65 !important; max-width: 620px !important; margin: 0 0 28px !important; text-align: left !important; display: block !important; text-shadow: none !important; } /* ── 7. Start DNS Leak Test (primary CTA) ── */ .kp-tool-dns .container > button.btn { position: relative; z-index: 1; /* No !important on display: JS sets display:none to hide after test starts */ display: inline-flex; align-items: center !important; gap: 8px !important; font-family: 'Orbitron', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 12.5px !important; letter-spacing: .07em !important; text-transform: uppercase !important; cursor: pointer !important; border: none !important; border-radius: 10px !important; padding: 14px 28px !important; background: #9FEF00 !important; color: #000 !important; box-shadow: 0 0 0 1px #9FEF00, 0 8px 28px rgba(159,239,0,.26) !important; transition: transform .15s, box-shadow .2s, background .15s !important; margin: 0 0 28px 0 !important; text-shadow: none !important; } .kp-tool-dns .container > button.btn:hover { background: #b6ff1a !important; transform: translateY(-2px) !important; box-shadow: 0 0 0 1px #b6ff1a, 0 12px 34px rgba(159,239,0,.38) !important; } .kp-tool-dns .container > button.btn:active { transform: translateY(0) !important; box-shadow: 0 0 0 1px #9FEF00, 0 4px 12px rgba(159,239,0,.2) !important; } /* ── 8. Results card wrapper ── */ .kp-tool-dns .table-container { position: relative; z-index: 1; background: #070a0e !important; border: 1px solid rgba(159,239,0,.18) !important; border-radius: 14px !important; padding: 0 !important; overflow: hidden !important; overflow-x: auto !important; margin: 0 0 20px !important; box-shadow: 0 4px 32px rgba(0,0,0,.44) !important; } /* ── 9. Table layout ── */ .kp-tool-dns #resultsTable { min-width: 500px !important; width: 100% !important; table-layout: auto !important; border-collapse: collapse !important; background: transparent !important; } /* ── 10. Table head ── */ .kp-tool-dns #resultsTable thead tr { background: rgba(159,239,0,.05) !important; border-bottom: 1px solid rgba(159,239,0,.2) !important; } .kp-tool-dns #resultsTable thead th { font-family: 'JetBrains Mono', 'Courier New', monospace !important; font-size: 10.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .13em !important; color: #9FEF00 !important; padding: 13px 18px !important; text-align: left !important; width: auto !important; border-bottom: none !important; background: transparent !important; } /* ── 11. Table body row base ── */ .kp-tool-dns #resultsBody tr { border-bottom: 1px solid rgba(159,239,0,.065) !important; transition: background .12s; } .kp-tool-dns #resultsBody tr:last-child { border-bottom: none !important; } .kp-tool-dns #resultsBody tr:hover { background: rgba(159,239,0,.025) !important; } /* Base td */ .kp-tool-dns #resultsBody td { padding: 13px 18px !important; font-family: 'JetBrains Mono', 'Courier New', monospace !important; font-size: 13px !important; color: #c8d8cc !important; border-bottom: none !important; vertical-align: middle !important; line-height: 1.5 !important; white-space: normal !important; word-break: break-all !important; } /* ── 12. YOUR CONNECTION IP row ── */ .kp-tool-dns #resultsBody tr[id^="ip-row"] { background: rgba(159,239,0,.03) !important; } .kp-tool-dns #resultsBody tr[id^="ip-row"] td { color: #e8f0e0 !important; } /* "YOUR CONNECTION IP" badge: override inline cyan -> neon-on-black pill */ .kp-tool-dns .row-tag { font-family: 'JetBrains Mono', monospace !important; font-size: 9.5px !important; font-weight: 700 !important; color: #000 !important; background: #9FEF00 !important; border: none !important; border-radius: 4px !important; padding: 2px 7px 2px 6px !important; letter-spacing: .05em !important; text-transform: uppercase !important; vertical-align: middle !important; margin-right: 7px !important; display: inline-block !important; white-space: nowrap !important; } /* ── 13. Separator row: "DNS resolvers your system actually used (N)" ── */ .kp-tool-dns #resultsBody tr:not([id]) td[colspan="3"] { color: #9FEF00 !important; background: rgba(159,239,0,.05) !important; font-family: 'Orbitron', system-ui, sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; border-top: 1px solid rgba(159,239,0,.18) !important; border-bottom: 1px solid rgba(159,239,0,.08) !important; padding: 10px 18px !important; word-break: normal !important; } /* ── 14. DNS resolver rows ── */ .kp-tool-dns #resultsBody tr[id^="dns-row"] td:nth-child(1) { color: #e0ecd4 !important; } /* ASN + org name */ .kp-tool-dns #resultsBody tr[id^="dns-row"] td:nth-child(2) { color: #aab4be !important; } /* Precise hostname (often "Unknown") */ .kp-tool-dns #resultsBody tr[id^="dns-row"] td:nth-child(3) { color: #6a7d86 !important; font-style: italic !important; } /* IPv6 addresses */ .kp-tool-dns .ipv6-address { color: #9FEF00 !important; font-size: 12px !important; word-break: break-all !important; opacity: .88; } /* IP flag emoji */ .kp-tool-dns .ip-flag .flag-emoji { font-size: 15px !important; margin-right: 5px !important; vertical-align: middle !important; } /* Muted "(your IP address — not a DNS resolver)" note inline in td */ .kp-tool-dns #resultsBody td span[style*="#9aa"] { color: #6fa800 !important; font-size: 11.5px !important; font-style: italic; } /* ── 15. Table note (below the table) ── */ .kp-tool-dns .table-note { font-family: 'Inter', system-ui, sans-serif !important; font-size: 12.5px !important; color: #7a8a96 !important; padding: 14px 18px !important; margin: 0 !important; border-top: 1px solid rgba(159,239,0,.08) !important; line-height: 1.65 !important; background: rgba(0,0,0,.18) !important; } .kp-tool-dns .table-note strong { color: #9FEF00 !important; font-family: 'JetBrains Mono', monospace !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .04em; } .kp-tool-dns .table-note em { color: #9ab4be !important; font-style: italic !important; } /* ── 16. Retest + Copy All buttons (ghost style) ── */ .kp-tool-dns #refreshBtn, .kp-tool-dns #copyBtn { position: relative; z-index: 1; /* No display override: JS controls visibility of these post-test buttons */ align-items: center !important; gap: 7px !important; font-family: 'Orbitron', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 10.5px !important; letter-spacing: .07em !important; text-transform: uppercase !important; cursor: pointer !important; border: 1px solid rgba(159,239,0,.36) !important; border-radius: 8px !important; padding: 9px 18px !important; background: transparent !important; color: #9FEF00 !important; box-shadow: none !important; text-shadow: none !important; transition: background .15s, border-color .15s !important; margin: 0 10px 0 0 !important; } .kp-tool-dns #refreshBtn:hover, .kp-tool-dns #copyBtn:hover { background: rgba(159,239,0,.07) !important; border-color: rgba(159,239,0,.55) !important; transform: none !important; box-shadow: none !important; } /* ── 17. Scroll-to-top button ── */ .kp-tool-dns .top-btn { background: rgba(159,239,0,.08) !important; border: 1px solid rgba(159,239,0,.28) !important; border-radius: 8px !important; color: #9FEF00 !important; box-shadow: none !important; text-shadow: none !important; } .kp-tool-dns .top-btn:hover { background: rgba(159,239,0,.14) !important; } /* ── 18. Pulse animation for "Checking..." cells ── */ @keyframes kp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } /* Any td whose text content is literally "Checking..." gets a pulse. CSS can't target text content directly, but we can style the italic dim state and let the JS-generated "Checking..." text inherit it naturally. The 3rd-column "Precise Hostname" td shows "Checking..." while loading. */ .kp-tool-dns #resultsBody tr[id^="dns-row"] td:nth-child(3):not(:empty) { animation: kp-pulse 1.6s ease-in-out infinite; animation-play-state: running; } /* Stop pulsing once resolved (text longer than "Checking...") handled via the italic+dim style already applied. */ /* ── 19. Responsive ── */ @media (max-width: 1024px) and (min-width: 761px) { .kp-tool-dns .container { margin: 16px 16px 36px !important; padding: 36px 28px 32px !important; } } @media (max-width: 760px) { .kp-tool-dns .container { margin: 10px 8px 24px !important; padding: 24px 16px 24px !important; } .kp-tool-dns .container > h1 { font-size: clamp(22px, 6.5vw, 30px) !important; } .kp-tool-dns .container > button.btn { width: 100% !important; justify-content: center !important; } .kp-tool-dns #refreshBtn, .kp-tool-dns #copyBtn { width: auto !important; } .kp-tool-dns #resultsTable { min-width: 420px !important; } .kp-tool-dns .table-container { border-radius: 10px !important; } } /* ===================================== ip ===================================== */ /* ================================================================ IP Info / DeepTrace Tool — Scoped Theme Scope class: .kp-tool-ip (added to by portal shell) Design tokens: verbatim Kodachi landing/downloads palette ================================================================ */ /* ---------- token layer ----------------------------------------- */ .kp-tool-ip { --ip-bg: #000000; --ip-panel: #070a0e; --ip-soft: #050505; --ip-neon: #9FEF00; --ip-neon-dim: #6fa800; --ip-neon-bright: #b6ff1a; --ip-neon-glow: rgba(159,239,0,.28); --ip-danger: #ff3b3b; --ip-warn: #ffcc00; --ip-text: #e8f0e0; --ip-muted: #aab4be; --ip-dim: #8a93a0; --ip-border: rgba(159,239,0,.14); --ip-border-hover: rgba(159,239,0,.32); --ip-border-strong:rgba(159,239,0,.42); --ip-mono: 'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; --ip-disp: 'Orbitron',sans-serif; --ip-sans: 'Inter',system-ui,-apple-system,sans-serif; } /* ---------- hide: duplicate logo, inline footer, share row ------ */ .kp-tool-ip .container .kodachi-logo { display: none !important; } .kp-tool-ip .container .footer { display: none !important; } .kp-tool-ip .container .kodachi-share { display: none !important; } .kp-tool-ip .container div:has(.kodachi-share) { display: none !important; } /* paragraphs after
= the explore-links p and tagline p */ .kp-tool-ip .container br { display: none !important; } .kp-tool-ip .container br ~ p { display: none !important; } /* ---------- content column ------------------------------------- */ .kp-tool-ip .container { position: relative !important; max-width: 1100px !important; margin: 0 auto !important; padding: 0 28px 80px !important; background: transparent !important; box-sizing: border-box; font-family: var(--ip-sans) !important; color: var(--ip-text) !important; } /* subtle ambient glow behind the hero */ .kp-tool-ip .container::before { content: ''; position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 680px; height: 680px; background: radial-gradient(circle, var(--ip-neon-glow) 0%, transparent 62%); opacity: .16; pointer-events: none; z-index: 0; } /* grid texture overlay behind hero */ .kp-tool-ip .container::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 320px; background-image: linear-gradient(rgba(159,239,0,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(159,239,0,.04) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center top, #000 20%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at center top, #000 20%, transparent 72%); pointer-events: none; z-index: 0; } /* ---------- back button ---------------------------------------- */ /* float right so it clears the h1 layout; stays in document flow */ .kp-tool-ip .container .back-btn { float: right !important; position: static !important; margin: 28px 0 10px 16px !important; background: rgba(159,239,0,.05) !important; border: 1px solid var(--ip-border) !important; color: var(--ip-neon) !important; border-radius: 8px !important; padding: 8px 14px !important; font-family: var(--ip-mono) !important; font-size: 12px !important; letter-spacing: .04em !important; cursor: pointer !important; transition: background .15s, border-color .15s !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; z-index: 2; } .kp-tool-ip .container .back-btn:hover { border-color: var(--ip-border-strong) !important; background: rgba(159,239,0,.10) !important; } /* ---------- hero heading --------------------------------------- */ .kp-tool-ip .container h1 { position: relative; z-index: 1; font-family: var(--ip-disp) !important; font-weight: 900 !important; font-size: clamp(26px, 3.6vw, 38px) !important; line-height: 1.08 !important; letter-spacing: -.02em !important; margin: 0 0 10px !important; padding-top: 28px !important; background: linear-gradient(175deg, #ffffff 0%, var(--ip-neon) 145%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; } /* eyebrow pill label rendered above h1 text via ::before */ /* MUST use display:block so it occupies its own line before the h1 text */ .kp-tool-ip .container h1::before { content: 'IP Intelligence \00b7 DeepTrace'; display: block; font-family: var(--ip-mono); font-size: 11px; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; /* explicit non-transparent color: h1 sets color:transparent for the gradient clip, but ::before needs its own color override */ background: rgba(159,239,0,.07); -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--ip-neon); border: 1px solid var(--ip-border-strong); padding: 5px 13px; border-radius: 999px; margin-bottom: 12px; /* restrict pill to its text width */ width: fit-content; } /* ---------- data-source paragraph ----------------------------- */ .kp-tool-ip .container > p:first-of-type { position: relative; z-index: 1; color: var(--ip-muted) !important; font-family: var(--ip-sans) !important; font-size: 14.5px !important; margin: 0 0 22px !important; } .kp-tool-ip .container > p:first-of-type a { color: var(--ip-neon) !important; text-decoration: none !important; border-bottom: 1px solid rgba(159,239,0,.25); transition: border-color .15s, color .15s; } .kp-tool-ip .container > p:first-of-type a:hover { color: var(--ip-neon-bright) !important; border-bottom-color: var(--ip-neon-bright); } /* clear the back-btn float before the table card */ .kp-tool-ip .container .table-container { clear: both; } /* ---------- table container card ------------------------------ */ .kp-tool-ip .container .table-container { position: relative; z-index: 1; background: var(--ip-panel) !important; border: 1px solid var(--ip-border) !important; /* neon top-accent line, matches reference mockup panel style */ border-top: 2px solid rgba(159,239,0,.36) !important; border-radius: 14px !important; /* allow horizontal scroll on very narrow containers (mobile) */ overflow-x: auto !important; overflow-y: visible !important; margin-top: 4px !important; margin-bottom: 18px !important; box-shadow: 0 0 0 1px rgba(159,239,0,.04), 0 28px 64px -32px rgba(0,0,0,.8), inset 0 1px 0 rgba(159,239,0,.10) !important; } /* table itself */ .kp-tool-ip .container #dataTable { width: 100% !important; border-collapse: collapse !important; font-size: 13.5px !important; } /* thead */ .kp-tool-ip .container #dataTable thead { background: rgba(159,239,0,.04) !important; border-bottom: 1px solid var(--ip-border) !important; } .kp-tool-ip .container #dataTable th { font-family: var(--ip-disp) !important; font-weight: 700 !important; font-size: 10px !important; text-transform: uppercase !important; letter-spacing: .14em !important; color: var(--ip-neon) !important; padding: 14px 20px !important; background: transparent !important; border: none !important; } /* tbody rows */ .kp-tool-ip .container #dataTable tbody tr { border-bottom: 1px solid rgba(159,239,0,.06) !important; transition: background .12s; } .kp-tool-ip .container #dataTable tbody tr:last-child { border-bottom: none !important; } .kp-tool-ip .container #dataTable tbody tr:hover { background: rgba(159,239,0,.03) !important; } /* key column (Property) */ .kp-tool-ip .container #dataTable td:first-child { font-family: var(--ip-mono) !important; font-size: 10.5px !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--ip-muted) !important; padding: 14px 20px !important; background: transparent !important; white-space: nowrap; width: 210px; border: none !important; vertical-align: middle; } /* value column */ .kp-tool-ip .container #dataTable td:last-child { font-family: var(--ip-mono) !important; font-size: 13px !important; color: var(--ip-text) !important; padding: 12px 20px !important; background: transparent !important; border: none !important; word-break: break-word; vertical-align: middle; line-height: 1.55; } /* first few prominent rows get slightly brighter value text */ .kp-tool-ip .container #dataTable tbody tr:nth-child(-n+4) td:last-child { color: #f4f8ee !important; font-size: 13.5px !important; } /* ---------- status chips (JS adds data-ip-status attr to td) -- */ /* "true" = protected / active */ .kp-tool-ip [data-ip-status="true"] { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: rgba(159,239,0,.12) !important; color: var(--ip-neon) !important; border: 1px solid rgba(159,239,0,.35) !important; border-radius: 999px !important; padding: 4px 12px !important; font-size: 11px !important; font-family: var(--ip-mono) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .06em !important; vertical-align: middle; } .kp-tool-ip [data-ip-status="true"]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ip-neon); box-shadow: 0 0 6px var(--ip-neon); flex-shrink: 0; } /* "false" = not active / exposed */ .kp-tool-ip [data-ip-status="false"] { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: rgba(255,59,59,.10) !important; color: var(--ip-danger) !important; border: 1px solid rgba(255,59,59,.28) !important; border-radius: 999px !important; padding: 4px 12px !important; font-size: 11px !important; font-family: var(--ip-mono) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .06em !important; vertical-align: middle; } .kp-tool-ip [data-ip-status="false"]::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ip-danger); box-shadow: 0 0 6px var(--ip-danger); flex-shrink: 0; } /* ---------- action buttons ------------------------------------ */ .kp-tool-ip .container .btn { position: relative !important; z-index: 1; font-family: var(--ip-sans) !important; font-weight: 700 !important; font-size: 12.5px !important; letter-spacing: .02em !important; padding: 10px 18px !important; border-radius: 8px !important; cursor: pointer !important; transition: transform .15s, box-shadow .2s, background .2s, border-color .15s !important; margin: 0 8px 10px 0 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; /* ghost base */ background: rgba(159,239,0,.04) !important; color: var(--ip-neon) !important; border: 1px solid var(--ip-border) !important; box-shadow: none !important; } .kp-tool-ip .container .btn:hover { border-color: var(--ip-border-hover) !important; background: rgba(159,239,0,.08) !important; } /* primary action: Refresh Data */ .kp-tool-ip .container .btn[onclick="fetchData()"] { background: var(--ip-neon) !important; color: #000 !important; border-color: var(--ip-neon) !important; box-shadow: 0 0 0 1px var(--ip-neon), 0 8px 24px rgba(159,239,0,.22) !important; } .kp-tool-ip .container .btn[onclick="fetchData()"]:hover { background: var(--ip-neon-bright) !important; border-color: var(--ip-neon-bright) !important; transform: translateY(-2px) !important; box-shadow: 0 0 0 1px var(--ip-neon-bright), 0 10px 30px rgba(159,239,0,.35) !important; } /* ---------- button group wrapper ------------------------------ */ /* add spacing between the table and the button row */ .kp-tool-ip .container #toggleBtn { margin-top: 4px !important; } /* ---------- responsive --------------------------------------- */ @media (max-width: 900px) { .kp-tool-ip .container { padding: 0 20px 60px !important; } .kp-tool-ip .container #dataTable td:first-child { width: 140px; } } @media (max-width: 760px) { .kp-tool-ip .container { padding: 0 14px 48px !important; } .kp-tool-ip .container h1 { font-size: clamp(22px, 6vw, 30px) !important; padding-top: 20px !important; } .kp-tool-ip .container .back-btn { top: 18px !important; right: 14px !important; } .kp-tool-ip .container #dataTable { font-size: 12px !important; } .kp-tool-ip .container #dataTable td:first-child, .kp-tool-ip .container #dataTable td:last-child { padding: 10px 14px !important; } .kp-tool-ip .container #dataTable th { padding: 12px 14px !important; } } /* ===================================== fingerprint ===================================== */ /* ===================================================== Kodachi Portal - Browser Fingerprints Tool Scoped override: .kp-tool-fingerprint Tokens align with /downloads/ + / theme. Never touches #kp-* (portal shell owns those). ===================================================== */ /* reset old flex centering imposed by fingerprints.css */ .kp-tool-fingerprint { display: block !important; align-items: unset !important; justify-content: unset !important; min-height: unset !important; overflow: unset !important; } /* ---- hide redundant chrome ---- */ .kp-tool-fingerprint .kodachi-logo { display: none !important; } .kp-tool-fingerprint .kodachi-share { display: none !important; } .kp-tool-fingerprint .container .footer { display: none !important; } /* hide standalone-page tagline/link paragraphs, keep #status-message */ .kp-tool-fingerprint .container > p:not(#status-message) { display: none !important; } /* hide share wrapper div (no class on it; only matches divs that are not tool-ui divs) */ .kp-tool-fingerprint .container > div:not(.kodachi-logo):not(.table-container):not(.button-container) { display: none !important; } /* ---- main tool column ---- */ .kp-tool-fingerprint .container { position: relative !important; max-width: 1060px !important; width: 100% !important; margin: 0 auto !important; padding: 48px 40px 72px !important; background: none !important; border: none !important; box-shadow: none !important; text-align: left !important; overflow: visible !important; } /* hero radial glow */ .kp-tool-fingerprint .container::before { content: ''; position: absolute; top: -18%; left: 50%; transform: translateX(-50%); width: 820px; height: 480px; background: radial-gradient(ellipse, rgba(159,239,0,0.17) 0%, transparent 65%); pointer-events: none; z-index: 0; } /* grid fabric layered over hero zone */ .kp-tool-fingerprint .container::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 280px; background-image: linear-gradient(rgba(159,239,0,0.038) 1px, transparent 1px), linear-gradient(90deg, rgba(159,239,0,0.038) 1px, transparent 1px); background-size: 50px 50px; mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%); pointer-events: none; z-index: 0; } .kp-tool-fingerprint .container > * { position: relative; z-index: 1; } /* ---- back button ---- */ .kp-tool-fingerprint .back-btn { position: static !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace !important; font-size: 11.5px !important; color: #aab4be !important; background: rgba(159,239,0,0.04) !important; border: 1px solid rgba(159,239,0,0.26) !important; border-radius: 8px !important; padding: 8px 16px !important; margin: 0 0 40px !important; cursor: pointer !important; width: auto !important; height: auto !important; box-shadow: none !important; transform: none !important; transition: color 0.14s, border-color 0.14s, background 0.14s !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; } .kp-tool-fingerprint .back-btn:hover { color: #9FEF00 !important; border-color: rgba(159,239,0,0.52) !important; background: rgba(159,239,0,0.09) !important; transform: none !important; box-shadow: none !important; } .kp-tool-fingerprint .back-btn .back-arrow { font-size: 15px !important; line-height: 1 !important; } /* ---- eyebrow synthesized above h1 ---- Two spaces after \00B7 because CSS hex escapes consume the first trailing space as a parse delimiter; the second becomes the literal space. */ .kp-tool-fingerprint .container > h1::before { content: 'PRIVACY \00B7 ANALYSIS'; display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 400; color: #9FEF00; text-transform: none; letter-spacing: 0.22em; margin-bottom: 14px; line-height: 1; } /* ---- h1 gradient ---- */ .kp-tool-fingerprint .container > h1 { font-family: 'Orbitron', 'Segoe UI', system-ui, sans-serif !important; font-weight: 900 !important; font-size: clamp(26px, 3.6vw, 40px) !important; line-height: 1.07 !important; letter-spacing: -0.02em !important; margin: 0 0 20px !important; background: linear-gradient(165deg, #ffffff 20%, #9FEF00 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; text-shadow: none !important; } /* ---- status badge / pill ---- */ .kp-tool-fingerprint #status-message { display: inline-flex !important; align-items: center !important; gap: 9px !important; font-family: 'JetBrains Mono', monospace !important; font-size: 11.5px !important; color: #9FEF00 !important; text-shadow: none !important; background: rgba(159,239,0,0.07) !important; border: 1px solid rgba(159,239,0,0.28) !important; border-radius: 999px !important; padding: 7px 16px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin: 0 0 36px !important; } .kp-tool-fingerprint #status-message::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #9FEF00; box-shadow: 0 0 10px rgba(159,239,0,0.9), 0 0 20px rgba(159,239,0,0.4); flex-shrink: 0; animation: kpfp-dot-pulse 2.1s ease-in-out infinite; } @keyframes kpfp-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.6); } } /* ---- table panel ---- */ .kp-tool-fingerprint .table-container { background: #070a0e !important; border: 1px solid rgba(159,239,0,0.14) !important; border-radius: 14px !important; padding: 0 !important; margin: 0 0 28px !important; /* bounded height: rows stay visible, long canvas data scrolls internally. NOT !important so the tool's "Show More" toggle (inline max-height:none) can expand it */ max-height: 72vh; overflow-x: auto !important; overflow-y: auto !important; box-shadow: 0 4px 40px rgba(0,0,0,0.65), 0 0 0 1px rgba(159,239,0,0.05), inset 0 1px 0 rgba(255,255,255,0.03) !important; /* custom scrollbar */ scrollbar-width: thin; scrollbar-color: rgba(159,239,0,0.28) transparent; } .kp-tool-fingerprint .table-container::-webkit-scrollbar { width: 7px; height: 7px; } .kp-tool-fingerprint .table-container::-webkit-scrollbar-track { background: transparent; } .kp-tool-fingerprint .table-container::-webkit-scrollbar-thumb { background: rgba(159,239,0,0.25); border-radius: 4px; } .kp-tool-fingerprint .table-container::-webkit-scrollbar-thumb:hover { background: rgba(159,239,0,0.42); } /* ---- table ---- */ .kp-tool-fingerprint .table-container table { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; background: transparent !important; table-layout: fixed !important; font-family: 'Inter', system-ui, -apple-system, sans-serif !important; } /* column proportions */ .kp-tool-fingerprint .table-container th:first-child, .kp-tool-fingerprint .table-container td:first-child { width: 28% !important; } .kp-tool-fingerprint .table-container th:last-child, .kp-tool-fingerprint .table-container td:last-child { width: 72% !important; } /* ---- sticky thead ---- */ .kp-tool-fingerprint .table-container thead { position: sticky !important; top: 0 !important; z-index: 2 !important; } .kp-tool-fingerprint .table-container thead th { background: rgba(4,8,13,0.99) !important; color: #8a93a0 !important; font-family: 'JetBrains Mono', monospace !important; font-size: 10.5px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; padding: 16px 24px !important; border: none !important; border-bottom: 1px solid rgba(159,239,0,0.20) !important; text-shadow: none !important; white-space: nowrap !important; } /* ---- tbody rows ---- */ .kp-tool-fingerprint .table-container tbody tr { border-bottom: 1px solid rgba(159,239,0,0.055) !important; transition: background 0.12s !important; } .kp-tool-fingerprint .table-container tbody tr:last-child { border-bottom: none !important; } .kp-tool-fingerprint .table-container tbody tr:hover { background: rgba(159,239,0,0.032) !important; } .kp-tool-fingerprint .table-container tbody tr:hover td { background: transparent !important; border-color: transparent !important; } /* label cell */ .kp-tool-fingerprint .table-container tbody td:first-child { font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace !important; font-size: 12px !important; font-weight: 500 !important; color: #aab4be !important; text-shadow: none !important; padding: 15px 24px !important; border: none !important; vertical-align: top !important; white-space: normal !important; line-height: 1.5 !important; } /* value cell: mono, neon-light, word-wrapping for long strings */ .kp-tool-fingerprint .table-container tbody td:last-child { font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace !important; font-size: 12.5px !important; font-weight: 400 !important; color: #dce8d4 !important; text-shadow: none !important; padding: 15px 24px !important; border: none !important; vertical-align: top !important; word-break: break-all !important; overflow-wrap: anywhere !important; max-width: 0 !important; line-height: 1.6 !important; } /* subtle neon tint on hover for the value */ .kp-tool-fingerprint .table-container tbody tr:hover td:last-child { color: #c6e0bc !important; } /* ---- action buttons ---- */ .kp-tool-fingerprint .button-container { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; margin: 0 !important; } .kp-tool-fingerprint .button-container .btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: 'Inter', system-ui, sans-serif !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.02em !important; cursor: pointer !important; border: 1px solid rgba(159,239,0,0.36) !important; border-radius: 8px !important; padding: 10px 20px !important; background: rgba(159,239,0,0.07) !important; color: #9FEF00 !important; text-shadow: none !important; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.13s !important; white-space: nowrap !important; } .kp-tool-fingerprint .button-container .btn:hover { background: rgba(159,239,0,0.14) !important; border-color: rgba(159,239,0,0.62) !important; color: #b6ff1a !important; transform: translateY(-1px) !important; box-shadow: 0 4px 18px rgba(159,239,0,0.14) !important; } /* primary CTA: Refresh gets the neon solid fill */ .kp-tool-fingerprint .button-container #refreshBtn { background: #9FEF00 !important; color: #000000 !important; border-color: #9FEF00 !important; box-shadow: 0 0 0 1px rgba(159,239,0,0.55), 0 6px 20px rgba(159,239,0,0.22) !important; } .kp-tool-fingerprint .button-container #refreshBtn:hover { background: #b6ff1a !important; color: #000000 !important; border-color: #b6ff1a !important; transform: translateY(-2px) !important; box-shadow: 0 0 0 1px rgba(182,255,26,0.65), 0 8px 26px rgba(159,239,0,0.32) !important; } /* disabled state */ .kp-tool-fingerprint .button-container .btn:disabled { background: rgba(159,239,0,0.03) !important; color: rgba(159,239,0,0.24) !important; border-color: rgba(159,239,0,0.10) !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } /* ---- scroll-to-top button ---- */ .kp-tool-fingerprint .top-btn { position: fixed !important; bottom: 28px !important; right: 28px !important; width: 44px !important; height: 44px !important; background: rgba(159,239,0,0.09) !important; color: #9FEF00 !important; border: 1px solid rgba(159,239,0,0.42) !important; border-radius: 11px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; font-size: 18px !important; transition: background 0.15s, box-shadow 0.15s !important; box-shadow: none !important; z-index: 900 !important; } .kp-tool-fingerprint .top-btn:hover { background: rgba(159,239,0,0.18) !important; box-shadow: 0 0 22px rgba(159,239,0,0.28) !important; } /* ---- responsive: 960px (rail collapses) ---- */ @media (max-width: 960px) { .kp-tool-fingerprint .container { padding: 36px 24px 60px !important; } } /* ---- responsive: 760px (mobile stack) ---- */ @media (max-width: 760px) { .kp-tool-fingerprint .container { padding: 24px 16px 48px !important; } .kp-tool-fingerprint .container > h1 { font-size: clamp(22px, 6vw, 28px) !important; } .kp-tool-fingerprint .table-container { border-radius: 10px !important; max-height: 80vh; } .kp-tool-fingerprint .table-container thead th, .kp-tool-fingerprint .table-container tbody td:first-child, .kp-tool-fingerprint .table-container tbody td:last-child { padding: 12px 14px !important; font-size: 11px !important; } .kp-tool-fingerprint .table-container th:first-child, .kp-tool-fingerprint .table-container td:first-child { width: 38% !important; } .kp-tool-fingerprint .table-container th:last-child, .kp-tool-fingerprint .table-container td:last-child { width: 62% !important; } .kp-tool-fingerprint .button-container { gap: 8px !important; } .kp-tool-fingerprint .button-container .btn { font-size: 12px !important; padding: 9px 14px !important; } } /* ===================================== warrant ===================================== */ /* ============================================================ Warrant Canary — Kodachi portal page redesign Scope class: body.kp-tool-warrant ADDITIVE overrides only — never touches any #kp-* element Tokens: #000 bg / #070a0e panels / #9FEF00 neon Fonts: Orbitron (headings) · Inter (body) · JetBrains Mono (code) ============================================================ */ /* ── Fix warrant.css body-as-flex-center: portal handles layout via padding-left ── */ body.kp-tool-warrant { display: block !important; align-items: initial !important; justify-content: initial !important; min-height: auto !important; } /* ── Container: full-width tool column (1100px), matching the other portal tools ── */ .kp-tool-warrant .container { position: relative !important; max-width: 1100px !important; width: auto !important; margin: 24px 32px 48px !important; padding: 36px 32px 44px !important; text-align: left !important; /* Column flex so CSS order can put h1 before .button-group */ display: flex !important; flex-direction: column !important; gap: 0 !important; } /* ── Radial glow behind the hero ── */ .kp-tool-warrant .container::before { content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 700px; height: 480px; background: radial-gradient(circle, rgba(159,239,0,0.10) 0%, transparent 64%); pointer-events: none; z-index: 0; flex-shrink: 0; } /* ── Dot grid (fades out below) ── */ .kp-tool-warrant .container::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 320px; background-image: linear-gradient(rgba(159,239,0,0.042) 1px, transparent 1px), linear-gradient(90deg, rgba(159,239,0,0.042) 1px, transparent 1px); background-size: 50px 50px; mask-image: radial-gradient(ellipse at 50% 0%, #000 6%, transparent 60%); -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 6%, transparent 60%); pointer-events: none; z-index: 0; flex-shrink: 0; } /* ── Hide legacy chrome ── */ .kp-tool-warrant .kodachi-logo { order: -10; display: none !important; } .kp-tool-warrant .container > .icon-btn { order: -9; display: none !important; } .kp-tool-warrant .container > br { order: -8; display: none !important; } .kp-tool-warrant .footer { order: 90; display: none !important; } /* The kodachi-share wrapper div (injected by kodachi-share.js) has no class/id. Target the anonymous wrapper div that holds .kodachi-share: */ .kp-tool-warrant .container > div:not([id]):not([class]) { display: none !important; } /* ── Flex order: title hero → toolbar → content → links ── */ .kp-tool-warrant h1#content-title { order: 1; position: relative; z-index: 1; } .kp-tool-warrant .button-group { order: 2; position: relative; z-index: 1; } .kp-tool-warrant #warrant-section { order: 3; } .kp-tool-warrant #hash-section { order: 4; } .kp-tool-warrant #log-section { order: 5; } .kp-tool-warrant .container > p { order: 6; position: relative; z-index: 1; } /* ── Eyebrow badge above title ── */ .kp-tool-warrant h1#content-title::before { content: 'CANARY STATUS \00B7 ACTIVE'; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; /* Explicitly set color and reset gradient clip so it doesn't inherit h1's transparent fill */ color: #9FEF00 !important; -webkit-text-fill-color: #9FEF00 !important; background: rgba(159,239,0,0.07) !important; -webkit-background-clip: initial !important; background-clip: initial !important; border: 1px solid rgba(159,239,0,0.38); padding: 6px 20px; border-radius: 999px; width: fit-content; margin: 4px auto 18px; line-height: 1.4; } /* ── Hero title ── */ .kp-tool-warrant h1#content-title { font-family: 'Orbitron', 'Segoe UI', system-ui, sans-serif !important; font-weight: 900 !important; font-size: clamp(28px, 4.4vw, 48px) !important; line-height: 1.06 !important; letter-spacing: -0.02em !important; text-align: center !important; background: linear-gradient(170deg, #ffffff 0%, #c4ff5e 48%, #9FEF00 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; margin: 0 0 32px !important; padding: 0 !important; } /* ── Toolbar panel ── */ .kp-tool-warrant .button-group { position: static !important; top: auto !important; right: auto !important; display: flex !important; flex-direction: row !important; gap: 8px !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; width: fit-content !important; margin: 0 0 24px auto !important; padding: 10px 12px !important; background: #070a0e !important; border: 1px solid rgba(159,239,0,0.12) !important; border-radius: 12px !important; } /* ── Toolbar icon buttons ── */ .kp-tool-warrant .button-group .icon-btn, .kp-tool-warrant .button-group a.icon-btn { width: 42px !important; height: 42px !important; background: rgba(159,239,0,0.05) !important; color: #6fa800 !important; border: 1px solid rgba(159,239,0,0.18) !important; border-radius: 9px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s !important; padding: 0 !important; margin: 0 !important; flex-shrink: 0; text-decoration: none !important; } .kp-tool-warrant .button-group .icon-btn:hover, .kp-tool-warrant .button-group a.icon-btn:hover { background: rgba(159,239,0,0.13) !important; color: #9FEF00 !important; border-color: rgba(159,239,0,0.52) !important; box-shadow: 0 0 14px rgba(159,239,0,0.18) !important; transform: translateY(-1px) !important; } /* Visually mark the copy button as separate from the tab-switch group */ .kp-tool-warrant .button-group button:nth-child(4) { margin-left: 8px !important; border-left-color: rgba(159,239,0,0.30) !important; } /* ── Content panels ── */ .kp-tool-warrant .content-section { display: none !important; background: #070a0e !important; border: 1px solid rgba(159,239,0,0.14) !important; border-radius: 14px !important; padding: 0 !important; margin: 0 !important; max-height: none !important; overflow: visible !important; } .kp-tool-warrant .content-section.active { display: flex !important; flex-direction: column !important; } /* ── Section header labels (CSS-generated) ── */ .kp-tool-warrant #warrant-section.content-section::before { content: 'PGP SIGNED STATEMENT \00B7 SHA-512'; display: block; font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(159,239,0,0.55); border-bottom: 1px solid rgba(159,239,0,0.10); padding: 14px 28px 13px; flex-shrink: 0; } .kp-tool-warrant #hash-section.content-section::before { content: 'RELEASE INTEGRITY \00B7 SIGNED HASHES'; display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(159,239,0,0.55); border-bottom: 1px solid rgba(159,239,0,0.10); padding: 14px 28px 13px; } .kp-tool-warrant #log-section.content-section::before { content: 'RELEASE POLICY \00B7 CHANGELOG'; display: block; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(159,239,0,0.55); border-bottom: 1px solid rgba(159,239,0,0.10); padding: 14px 28px 13px; } /* ── PGP / warrant code block ── */ .kp-tool-warrant pre#warrant-content { font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace !important; font-size: 13px !important; line-height: 1.72 !important; color: #c8d8b8 !important; background: transparent !important; border: none !important; border-radius: 0 0 14px 14px !important; padding: 20px 28px 30px !important; margin: 0 !important; white-space: pre-wrap !important; word-break: break-word; overflow-x: auto !important; max-height: 560px !important; overflow-y: auto !important; letter-spacing: 0.25px; flex: 1; } .kp-tool-warrant pre#warrant-content::-webkit-scrollbar { width: 5px; height: 5px; } .kp-tool-warrant pre#warrant-content::-webkit-scrollbar-track { background: rgba(0,0,0,0.18); border-radius: 3px; } .kp-tool-warrant pre#warrant-content::-webkit-scrollbar-thumb { background: rgba(159,239,0,0.22); border-radius: 3px; } .kp-tool-warrant pre#warrant-content::-webkit-scrollbar-thumb:hover { background: rgba(159,239,0,0.44); } /* ── Release info panels (hash tab) ── */ .kp-tool-warrant .formatted-content { padding: 20px 24px 26px !important; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; color: #e0eadc; line-height: 1.6; } .kp-tool-warrant .release-info { gap: 14px !important; } .kp-tool-warrant .release-section { background: rgba(0,0,0,0.26) !important; border: 1px solid rgba(159,239,0,0.11) !important; border-radius: 10px !important; padding: 1rem 1.3rem !important; } .kp-tool-warrant .release-section h2 { font-family: 'Orbitron', sans-serif !important; color: #9FEF00 !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; border-bottom: 1px solid rgba(159,239,0,0.15) !important; padding-bottom: 0.45rem !important; margin: 0 0 0.8rem !important; text-shadow: none !important; } .kp-tool-warrant .release-section.metadata { background: transparent !important; border: none !important; padding: 4px 0 !important; text-align: center !important; color: #8a93a0 !important; font-size: 11px !important; font-family: 'JetBrains Mono', monospace !important; } .kp-tool-warrant .info-table { width: 100%; border-collapse: collapse; } .kp-tool-warrant .info-table td { padding: 6px 10px 6px 0; border-bottom: 1px solid rgba(159,239,0,0.07); font-size: 13px; color: #c0ccb8; vertical-align: top; } .kp-tool-warrant .info-table td:first-child { color: #8a93a0; width: 38%; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; padding-right: 12px; } .kp-tool-warrant .info-table tr:last-child td { border-bottom: none; } /* ── Changelog section (log tab) ── */ .kp-tool-warrant #log-section .formatted-content { font-size: 13px !important; line-height: 1.65 !important; color: #b8ccb0 !important; max-height: 560px; overflow-y: auto; } .kp-tool-warrant #log-section h1 { font-family: 'Orbitron', sans-serif !important; font-size: 16px !important; color: #9FEF00 !important; text-shadow: none !important; margin-top: 16px !important; } .kp-tool-warrant #log-section h2 { font-family: 'Orbitron', sans-serif !important; font-size: 13px !important; color: #9FEF00 !important; text-shadow: none !important; } .kp-tool-warrant #log-section h3 { font-family: 'Orbitron', sans-serif !important; font-size: 11px !important; color: #c8d8b8 !important; text-shadow: none !important; } .kp-tool-warrant #log-section table.changelog-table { border-collapse: collapse; width: 100%; font-size: 12px; margin: 8px 0; } .kp-tool-warrant #log-section table.changelog-table td, .kp-tool-warrant #log-section table.changelog-table th { padding: 5px 10px; border: 1px solid rgba(159,239,0,0.09); color: #c0ccb8; } .kp-tool-warrant #log-section table.changelog-table th { background: rgba(159,239,0,0.06); color: #9FEF00; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } /* ── Bottom "Explore Kodachi" links ── */ .kp-tool-warrant .container > p { text-align: center !important; color: #8a93a0 !important; font-size: 13px !important; margin: 24px 0 0 !important; padding: 0 !important; } .kp-tool-warrant .container > p a { color: #9FEF00 !important; text-decoration: none !important; } .kp-tool-warrant .container > p a:hover { color: #b6ff1a !important; } /* ── Responsive (rail collapses at 960px) ── */ @media (max-width: 960px) { .kp-tool-warrant .container { margin: 16px auto 32px !important; padding: 24px 18px 36px !important; } .kp-tool-warrant pre#warrant-content { font-size: 12px !important; padding: 14px 16px 20px !important; max-height: 440px !important; } .kp-tool-warrant .button-group { padding: 12px !important; gap: 7px !important; } .kp-tool-warrant h1#content-title { font-size: clamp(22px, 6vw, 36px) !important; } } /* ===================================== proof ===================================== */ /* * proof.css — Kodachi "System Freshness / Sync Check" scoped theme * Scope: every selector prefixed with .kp-tool-proof * Matches Kodachi landing/downloads visual language. * Tokens: bg#000 / panel#070a0e / neon#9FEF00 / text#e8f0e0 * Fonts: Orbitron (headings), Inter (body), JetBrains Mono (hashes/values) */ /* ── Elements handled globally — hide ────────────────────────────────── */ .kp-tool-proof .kodachi-logo, .kp-tool-proof .kodachi-share, .kp-tool-proof .container .footer { display: none !important; } /* ── Container / column ───────────────────────────────────────────────── */ .kp-tool-proof .container { max-width: 860px; margin: 0 auto; padding: 28px 24px 52px; color: #e8f0e0; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.65; /* Override inherited center-alignment from kodachi-modern.css */ text-align: left; } /* Ensure all child text stays left-aligned */ .kp-tool-proof .container *:not(h1):not(h2) { text-align: left; } /* ── Hero ambient glow ────────────────────────────────────────────────── */ .kp-tool-proof .container::before { content: ''; display: block; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(159,239,0,0.55) 50%, transparent 100%); border-radius: 1px; margin-bottom: 28px; opacity: 0.7; } /* ── Back button ──────────────────────────────────────────────────────── */ .kp-tool-proof .back-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(159, 239, 0, 0.05); border: 1px solid rgba(159, 239, 0, 0.22); color: #9FEF00; font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; font-size: 12px; letter-spacing: 0.04em; padding: 6px 13px; border-radius: 7px; cursor: pointer; margin-bottom: 24px; transition: background 0.15s, border-color 0.15s; } .kp-tool-proof .back-btn:hover { background: rgba(159, 239, 0, 0.12); border-color: rgba(159, 239, 0, 0.48); } /* ── Hero / Title section ─────────────────────────────────────────────── */ .kp-tool-proof .container > h1 { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(20px, 3.2vw, 32px); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 10px; background: linear-gradient(170deg, #ffffff 10%, #9FEF00 120%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Eyebrow: rendered as block before the h1 text via pseudo */ .kp-tool-proof .container > h1::before { content: 'INTEGRITY PROOF'; display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.22em; color: #9FEF00; background: none; -webkit-background-clip: unset; background-clip: unset; margin-bottom: 8px; opacity: 0.85; } /* Description */ .kp-tool-proof .container > p { color: #aab4be; font-size: 14.5px; max-width: 520px; margin: 0 0 26px; text-align: left; } /* Bottom link + tagline paragraphs — reset description overrides */ .kp-tool-proof .container > p:last-of-type, .kp-tool-proof .container > p:nth-last-of-type(2) { color: #8a93a0; font-size: 13px; margin-top: 8px; max-width: none; text-align: left; } /* The italic tagline at the very end */ .kp-tool-proof .container > p:last-of-type { color: #6a7680; font-style: italic; border-top: 1px solid rgba(159, 239, 0, 0.07); padding-top: 14px; margin-top: 14px; } .kp-tool-proof .container > p a { color: #9FEF00; text-decoration: none; transition: color 0.15s; } .kp-tool-proof .container > p a:hover { color: #b6ff1a; text-decoration: underline; } /* ── Primary action button ────────────────────────────────────────────── */ .kp-tool-proof .btn { display: inline-flex; align-items: center; gap: 7px; font-family: 'Inter', system-ui, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.025em; cursor: pointer; border: 1px solid transparent; border-radius: 8px; padding: 10px 22px; background: #9FEF00; color: #000; box-shadow: 0 0 0 1px #9FEF00, 0 5px 18px rgba(159, 239, 0, 0.20); transition: transform 0.15s, box-shadow 0.18s, background 0.15s; text-decoration: none; } .kp-tool-proof .btn:hover { background: #b6ff1a; transform: translateY(-2px); box-shadow: 0 0 0 1px #b6ff1a, 0 8px 26px rgba(159, 239, 0, 0.32); } .kp-tool-proof .btn:active { transform: translateY(0); } /* "Copy All" — ghost variant */ .kp-tool-proof #copyBtn { background: transparent; color: #9FEF00; border: 1px solid rgba(159, 239, 0, 0.32); box-shadow: none; margin-left: 10px; } .kp-tool-proof #copyBtn:hover { background: rgba(159, 239, 0, 0.08); border-color: rgba(159, 239, 0, 0.60); transform: none; box-shadow: none; } /* Button row vertical spacing */ .kp-tool-proof #refreshBtn { margin-top: 22px; } /* br tags after buttons — collapse */ .kp-tool-proof .container > br { display: none; } /* ── Results container ────────────────────────────────────────────────── */ .kp-tool-proof #resultsContainer { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; } /* ── Section cards ────────────────────────────────────────────────────── */ .kp-tool-proof .info-container { background: #070a0e; border: 1px solid rgba(159, 239, 0, 0.13); border-radius: 12px; padding: 20px 22px; transition: border-color 0.2s; } .kp-tool-proof .info-container:hover { border-color: rgba(159, 239, 0, 0.24); } /* Card section heading */ .kp-tool-proof .info-container h2 { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: #9FEF00; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(159, 239, 0, 0.09); display: flex; align-items: center; gap: 9px; } .kp-tool-proof .info-container h2::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9FEF00; box-shadow: 0 0 7px rgba(159, 239, 0, 0.75); flex-shrink: 0; } /* ── Date rows ────────────────────────────────────────────────────────── */ .kp-tool-proof .info-item { font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; font-size: 13.5px; color: #e8f0e0; margin: 6px 0; line-height: 1.5; } .kp-tool-proof #utcDate, .kp-tool-proof #gmtDate { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: rgba(159, 239, 0, 0.04); border-radius: 7px; margin: 6px 0; border: 1px solid rgba(159, 239, 0, 0.08); font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #e8f0e0; } /* ── Bitcoin block count — large display number ───────────────────────── */ .kp-tool-proof #bitcoinBlockCount { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: clamp(26px, 5vw, 40px); color: #9FEF00; letter-spacing: -0.01em; line-height: 1.2; padding: 4px 0 2px; margin: 2px 0; text-shadow: 0 0 24px rgba(159, 239, 0, 0.38); /* Bitcoin count is centered for visual impact — intentional exception */ text-align: center !important; display: block; } /* ── News headlines ───────────────────────────────────────────────────── */ .kp-tool-proof #newsHeadlines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; } .kp-tool-proof #newsHeadlines li { position: relative; padding: 9px 13px 9px 34px; background: rgba(159, 239, 0, 0.03); border: 1px solid rgba(159, 239, 0, 0.08); border-radius: 7px; color: #e8f0e0; font-size: 13.5px; line-height: 1.5; } .kp-tool-proof #newsHeadlines li::before { content: '›'; position: absolute; left: 13px; top: 8px; color: #9FEF00; font-size: 17px; font-weight: 700; line-height: 1.4; } /* ── SSL Fingerprints section ─────────────────────────────────────────── */ /* The info-item wrapper div that contains the grid */ .kp-tool-proof #sslFingerprints { margin: 0; } /* Grid: 2 columns in the portal's narrow column (~480px available) */ .kp-tool-proof .fingerprints-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } /* Domain fingerprint card */ .kp-tool-proof .fingerprint-card { background: rgba(159, 239, 0, 0.02); border: 1px solid rgba(159, 239, 0, 0.11); border-radius: 9px; padding: 12px 14px; transition: border-color 0.15s, background 0.15s; } .kp-tool-proof .fingerprint-card:hover { border-color: rgba(159, 239, 0, 0.28); background: rgba(159, 239, 0, 0.05); } /* Domain name */ .kp-tool-proof .fingerprint-card strong { display: block; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: #9FEF00; margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid rgba(159, 239, 0, 0.10); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Label + value grid for each fingerprint row */ .kp-tool-proof .fingerprint-data { display: grid; grid-template-columns: 34px 1fr; gap: 3px 6px; align-items: baseline; } /* SHA1, MD5, IP labels */ .kp-tool-proof .fingerprint-label { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700; color: #6fa800; letter-spacing: 0.04em; text-transform: uppercase; padding-top: 2px; white-space: nowrap; line-height: 1.6; } /* Hash strings and IP */ .kp-tool-proof .fingerprint-value { font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; font-size: 10px; color: #aab4be; word-break: break-all; line-height: 1.5; letter-spacing: 0.01em; } /* IP address — slightly brighter since it's shorter and more readable */ .kp-tool-proof .fingerprint-data > .fingerprint-label:last-of-type ~ .fingerprint-value, .kp-tool-proof .fingerprint-data > .fingerprint-label:nth-child(5) + .fingerprint-value { color: #c8d8c0; } /* ── Responsive ───────────────────────────────────────────────────────── */ @media (max-width: 520px) { .kp-tool-proof .fingerprints-grid { grid-template-columns: 1fr; } .kp-tool-proof .container { padding: 18px 14px 40px; } .kp-tool-proof .container > h1 { font-size: 19px; } .kp-tool-proof #bitcoinBlockCount { font-size: 28px; } } /* ===================================== status ===================================== */ /* * status.css — Kodachi System Status page scoped theme * Scope: .kp-tool-status (class added to by portal shell) * All selectors are prefixed with .kp-tool-status to avoid leaking. * Overrides only — never removes existing JS-bound IDs or classes. * * Design tokens (from /downloads/ + domain-info-mockup.html): * bg #000 / panels #070a0e / soft #050505 * neon #9FEF00 / warn #ffb000 / danger #ff3b3b / neon-dim #6fa800 * text #e8f0e0 / muted #aab4be / dim #8a93a0 * Orbitron 700-900 headings · Inter body · JetBrains Mono data * cards: bg #070a0e, border 1px rgba(159,239,0,.14), radius 12-14px * max-width ~1140px, centred; responsive < 760px */ /* ── 0. FONTS ─────────────────────────────────────────────────────────────── */ /* Orbitron + Inter are already loaded by the page; no extra import needed */ /* ── 1. ROOT / LAYOUT ────────────────────────────────────────────────────── */ .kp-tool-status body, .kp-tool-status { background: #000 !important; color: #e8f0e0 !important; font-family: 'Inter', system-ui, -apple-system, sans-serif !important; -webkit-font-smoothing: antialiased; } /* Main column container */ .kp-tool-status .container { max-width: 1140px; margin: 0 auto; padding: 0 24px 48px; background: #000; color: #e8f0e0; font-family: 'Inter', system-ui, sans-serif; } /* ── 2. PAGE HEADING ─────────────────────────────────────────────────────── */ /* Hide legacy logo block inside status (portal shell already has the logo) */ .kp-tool-status .container .kodachi-logo { display: none !important; } .kp-tool-status .container h1 { font-family: 'Orbitron', sans-serif !important; font-weight: 900 !important; font-size: clamp(22px, 3.5vw, 36px) !important; letter-spacing: -0.02em !important; background: linear-gradient(180deg, #fff 0%, #9FEF00 140%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; margin: 24px 0 6px !important; line-height: 1.1 !important; } .kp-tool-status .container h3 { font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace !important; font-size: 12px !important; font-weight: 500 !important; color: #9FEF00 !important; text-transform: uppercase !important; letter-spacing: 0.18em !important; margin: 0 0 28px !important; } /* ── 3. HERO VERDICT BANNER ──────────────────────────────────────────────── */ .kp-tool-status .status-hero { position: relative !important; border-radius: 16px !important; padding: 26px 28px !important; margin: 0 0 20px !important; overflow: hidden !important; border-width: 1px !important; border-style: solid !important; } /* Grid background texture inside hero */ .kp-tool-status .status-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(159,239,0,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(159,239,0,.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at 30% 50%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 20%, transparent 70%); pointer-events: none; z-index: 0; } /* Operational state */ .kp-tool-status .status-hero.ok { background: linear-gradient(135deg, rgba(159,239,0,.09) 0%, rgba(0,0,0,.06) 100%) !important; border-color: rgba(159,239,0,.38) !important; box-shadow: 0 0 40px -20px rgba(159,239,0,.3), inset 0 1px 0 rgba(159,239,0,.12) !important; } /* Degraded state */ .kp-tool-status .status-hero.warn { background: linear-gradient(135deg, rgba(255,176,0,.12) 0%, rgba(80,40,0,.08) 100%) !important; border-color: rgba(255,176,0,.5) !important; box-shadow: 0 0 40px -20px rgba(255,176,0,.25), inset 0 1px 0 rgba(255,176,0,.10) !important; } /* Down state */ .kp-tool-status .status-hero.down { background: linear-gradient(135deg, rgba(255,59,59,.14) 0%, rgba(100,0,0,.10) 100%) !important; border-color: rgba(255,59,59,.55) !important; box-shadow: 0 0 40px -20px rgba(255,59,59,.3), inset 0 1px 0 rgba(255,59,59,.12) !important; } .kp-tool-status .status-hero-main { z-index: 1 !important; position: relative !important; } .kp-tool-status .status-hero-icon { font-size: 2.8em !important; line-height: 1 !important; filter: drop-shadow(0 0 12px currentColor); } .kp-tool-status .status-hero-title { font-family: 'Orbitron', sans-serif !important; font-size: 1.55em !important; font-weight: 800 !important; letter-spacing: -0.01em !important; } .kp-tool-status .status-hero.ok .status-hero-title, .kp-tool-status .status-hero.ok .status-hero-icon { color: #9FEF00 !important; } .kp-tool-status .status-hero.warn .status-hero-title, .kp-tool-status .status-hero.warn .status-hero-icon { color: #ffb000 !important; } .kp-tool-status .status-hero.down .status-hero-title, .kp-tool-status .status-hero.down .status-hero-icon { color: #ff3b3b !important; } .kp-tool-status .status-hero-sub { color: #aab4be !important; font-size: 0.97em !important; margin-top: 5px !important; font-family: 'Inter', system-ui, sans-serif !important; } /* ── 4. METRIC STRIP ─────────────────────────────────────────────────────── */ .kp-tool-status .status-metrics { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin: 0 0 28px !important; } .kp-tool-status .status-metric { flex: 1 1 130px !important; background: #070a0e !important; border: 1px solid rgba(159,239,0,.14) !important; border-radius: 12px !important; padding: 16px 18px !important; text-align: center !important; transition: border-color .15s, box-shadow .15s !important; } .kp-tool-status .status-metric:hover { border-color: rgba(159,239,0,.3) !important; box-shadow: 0 4px 20px rgba(159,239,0,.08) !important; } .kp-tool-status .status-metric-v { font-family: 'Orbitron', sans-serif !important; font-size: 1.75em !important; font-weight: 700 !important; color: #e8f0e0 !important; line-height: 1 !important; display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 2px !important; } .kp-tool-status .status-metric-v.ok { color: #9FEF00 !important; } .kp-tool-status .status-metric-v.warn { color: #ffb000 !important; } .kp-tool-status .status-metric-v.down { color: #ff3b3b !important; } .kp-tool-status .status-metric-v.neutral{ color: #9FEF00 !important; } .kp-tool-status .status-metric-sep { color: #3a3f3a !important; font-size: .65em !important; } .kp-tool-status .status-metric-tot { color: #8a93a0 !important; font-size: .65em !important; } .kp-tool-status .status-metric-unit { color: #8a93a0 !important; font-size: .45em !important; margin-left: 3px !important; } .kp-tool-status .status-metric-k { margin-top: 8px !important; font-size: .72em !important; color: #aab4be !important; text-transform: uppercase !important; letter-spacing: .07em !important; font-family: 'JetBrains Mono', monospace !important; } /* ── 5. NEEDS-ATTENTION PANEL ────────────────────────────────────────────── */ .kp-tool-status .attention-panel { background: linear-gradient(135deg, rgba(255,176,0,.07) 0%, rgba(80,40,0,.04) 100%) !important; border: 1px solid rgba(255,176,0,.38) !important; border-radius: 14px !important; padding: 18px 22px !important; margin: 0 0 28px !important; box-shadow: 0 4px 24px rgba(255,176,0,.06) !important; } .kp-tool-status .attention-head { font-family: 'Orbitron', sans-serif !important; font-weight: 700 !important; color: #ffb000 !important; font-size: 1em !important; letter-spacing: .08em !important; margin-bottom: 14px !important; } .kp-tool-status .attention-item { background: rgba(7,10,14,.7) !important; border: 1px solid rgba(255,176,0,.2) !important; border-left: 4px solid #ffb000 !important; border-radius: 10px !important; padding: 12px 16px !important; color: #e8f0e0 !important; } .kp-tool-status .attention-item.down { border-color: rgba(255,59,59,.25) !important; border-left-color: #ff3b3b !important; } .kp-tool-status a.attention-item:hover { background: rgba(255,176,0,.08) !important; border-color: rgba(255,176,0,.4) !important; } .kp-tool-status .attention-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #ffb000 !important; box-shadow: 0 0 6px #ffb000 !important; flex-shrink: 0 !important; } .kp-tool-status .attention-item.down .attention-dot { background: #ff3b3b !important; box-shadow: 0 0 6px #ff3b3b !important; } .kp-tool-status .attention-node { color: #fff !important; font-weight: 700 !important; } .kp-tool-status .attention-loc { color: #8a93a0 !important; font-size: .88em !important; } .kp-tool-status .attention-detail { color: #aab4be !important; font-size: .91em !important; } .kp-tool-status .attention-bad { color: #ff7a7a !important; font-weight: 600 !important; } .kp-tool-status .attention-go { color: #9FEF00 !important; font-size: .82em !important; font-weight: 700 !important; } /* ── 6. NODE HEALTH MATRIX ───────────────────────────────────────────────── */ .kp-tool-status .node-matrix-wrap { margin: 0 0 32px !important; } .kp-tool-status .node-matrix-head { border-bottom: 1px solid rgba(159,239,0,.2) !important; padding-bottom: 14px !important; margin-bottom: 18px !important; } .kp-tool-status .node-matrix-head h2 { font-family: 'Orbitron', sans-serif !important; font-weight: 700 !important; font-size: 1.2em !important; color: #9FEF00 !important; margin: 0 !important; letter-spacing: .04em !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important; } .kp-tool-status .node-matrix-legend { font-size: .76em !important; color: #8a93a0 !important; } .kp-tool-status .node-matrix-legend .lg.ok .lg-dot { background: #9FEF00 !important; box-shadow: 0 0 5px #9FEF00 !important; } .kp-tool-status .node-matrix-legend .lg.warn .lg-dot { background: #ffb000 !important; } .kp-tool-status .node-matrix-legend .lg.down .lg-dot { background: #ff3b3b !important; } .kp-tool-status .node-matrix { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 14px !important; } /* Node tiles */ .kp-tool-status .node-tile { background: #070a0e !important; border: 1px solid rgba(159,239,0,.15) !important; border-left: 4px solid rgba(159,239,0,.55) !important; border-radius: 14px !important; padding: 18px !important; text-decoration: none !important; color: #e8f0e0 !important; transition: transform .15s, box-shadow .2s, background .15s, border-color .15s !important; display: block !important; box-shadow: inset 0 1px 0 rgba(159,239,0,.06), 0 2px 12px rgba(0,0,0,.5) !important; } .kp-tool-status .node-tile:hover { transform: translateY(-3px) !important; background: rgba(9,13,18,.98) !important; box-shadow: 0 10px 32px rgba(159,239,0,.14), inset 0 1px 0 rgba(159,239,0,.10) !important; border-color: rgba(159,239,0,.35) !important; } .kp-tool-status .node-tile.warn { border-color: rgba(255,176,0,.2) !important; border-left-color: #ffb000 !important; background: linear-gradient(135deg, rgba(255,176,0,.06) 0%, #070a0e 100%) !important; box-shadow: 0 2px 12px rgba(255,176,0,.08) !important; } .kp-tool-status .node-tile.down { border-color: rgba(255,59,59,.22) !important; border-left-color: #ff3b3b !important; background: linear-gradient(135deg, rgba(255,59,59,.08) 0%, #070a0e 100%) !important; box-shadow: 0 2px 12px rgba(255,59,59,.10) !important; } .kp-tool-status .node-tile-name { color: #fff !important; font-weight: 700 !important; font-size: 1.02em !important; } .kp-tool-status .node-tile-country { color: #8a93a0 !important; font-size: .78em !important; } .kp-tool-status .node-tile-badge.ok { background: rgba(159,239,0,.12) !important; color: #9FEF00 !important; border: 1px solid rgba(159,239,0,.25) !important; } .kp-tool-status .node-tile-badge.warn { background: rgba(255,176,0,.14) !important; color: #ffb000 !important; border: 1px solid rgba(255,176,0,.3) !important; } .kp-tool-status .node-tile-badge.down { background: rgba(255,59,59,.16) !important; color: #ff3b3b !important; border: 1px solid rgba(255,59,59,.3) !important; } .kp-tool-status .node-tile-ratio { font-family: 'Orbitron', sans-serif !important; margin-top: 10px !important; } .kp-tool-status .node-tile.ok .node-tile-num { color: #9FEF00 !important; text-shadow: 0 0 12px rgba(159,239,0,.4) !important; } .kp-tool-status .node-tile.warn .node-tile-num { color: #ffb000 !important; } .kp-tool-status .node-tile.down .node-tile-num { color: #ff3b3b !important; } .kp-tool-status .node-tile-num { font-size: 1.85em !important; font-weight: 700 !important; line-height: 1 !important; } .kp-tool-status .node-tile-den { color: #8a93a0 !important; font-size: .95em !important; } .kp-tool-status .node-tile-ratio-k { color: #aab4be !important; font-size: .72em !important; text-transform: uppercase !important; letter-spacing: .05em !important; margin-left: 7px !important; font-family: 'JetBrains Mono', monospace !important; } .kp-tool-status .node-tile-state.ok { color: #9FEF00 !important; } .kp-tool-status .node-tile-state.warn { color: #ffb000 !important; } .kp-tool-status .node-tile-state.down { color: #ff6060 !important; } .kp-tool-status .node-tile-state { font-size: .84em !important; margin-top: 10px !important; } .kp-tool-status .node-tile-go { display: inline-block !important; margin-top: 12px !important; font-size: .75em !important; color: #6fa800 !important; font-weight: 600 !important; font-family: 'JetBrains Mono', monospace !important; letter-spacing: .04em !important; text-transform: uppercase !important; } /* ── 7. SECTION WRAPPERS (Websites + VPS Details) ────────────────────────── */ /* These use inline styles; we target them by their structural position. They're direct children of .container that are divs but not the logo/matrix/etc. */ /* Section wrapper pattern: inline-styled
wrapping .status-grid or .vps-node-detail */ /* We override the background/border to match our panel token */ .kp-tool-status .container > div[style*="linear-gradient"] { background: #070a0e !important; border: 1px solid rgba(159,239,0,.18) !important; border-radius: 14px !important; padding: 24px !important; margin: 20px 0 !important; box-shadow: 0 4px 32px rgba(0,0,0,.5) !important; } /* Section header row (the inner header div that has a border-bottom) */ .kp-tool-status .container > div[style*="linear-gradient"] > div[style*="border-bottom"] { border-bottom: 1px solid rgba(159,239,0,.15) !important; padding-bottom: 14px !important; margin-bottom: 20px !important; } /* Section headings (h2 inside section wrappers) */ .kp-tool-status .container > div[style*="linear-gradient"] h2 { font-family: 'Orbitron', sans-serif !important; font-weight: 700 !important; font-size: 1.1em !important; color: #9FEF00 !important; letter-spacing: .06em !important; margin: 0 !important; } /* Override orange-themed VPS Infrastructure section header color */ .kp-tool-status .container > div[style*="255, 170"] h2 { color: #9FEF00 !important; } /* The count badge in the section header (N/M online) */ .kp-tool-status .container > div[style*="linear-gradient"] > div > div[style*="border"] { background: rgba(7,10,14,.8) !important; border: 1px solid rgba(159,239,0,.22) !important; border-radius: 8px !important; } /* ── 8. STATUS GRID + CARD STYLES ────────────────────────────────────────── */ .kp-tool-status .status-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 14px !important; margin: 16px 0 0 !important; } .kp-tool-status .server-card { background: rgba(2,5,8,.85) !important; border: 1px solid rgba(159,239,0,.16) !important; border-radius: 12px !important; padding: 18px !important; transition: transform .15s, box-shadow .2s, border-color .15s !important; min-height: 140px !important; box-shadow: inset 0 1px 0 rgba(159,239,0,.05), 0 2px 8px rgba(0,0,0,.4) !important; } .kp-tool-status .server-card:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 24px rgba(159,239,0,.12), inset 0 1px 0 rgba(159,239,0,.08) !important; border-color: rgba(159,239,0,.3) !important; } .kp-tool-status .server-card.online { border-left: 3px solid #9FEF00 !important; border-color: rgba(159,239,0,.22) !important; } .kp-tool-status .server-card.offline { border-left: 3px solid #ff3b3b !important; border-color: rgba(255,59,59,.2) !important; background: linear-gradient(135deg, rgba(255,59,59,.05) 0%, rgba(2,5,8,.85) 100%) !important; } /* Status indicator dots */ .kp-tool-status .status-indicator { width: 9px !important; height: 9px !important; border-radius: 50% !important; display: inline-block !important; margin-right: 8px !important; flex-shrink: 0 !important; vertical-align: middle !important; } .kp-tool-status .status-indicator.online { background: #9FEF00 !important; box-shadow: 0 0 8px rgba(159,239,0,.7) !important; } .kp-tool-status .status-indicator.offline { background: #ff3b3b !important; box-shadow: 0 0 6px rgba(255,59,59,.6) !important; } .kp-tool-status .server-name { color: #e8f0e0 !important; font-weight: 700 !important; font-size: 1em !important; display: flex !important; align-items: center !important; } .kp-tool-status .server-type { color: #aab4be !important; font-size: .82em !important; font-family: 'JetBrains Mono', monospace !important; letter-spacing: .04em !important; margin-bottom: 6px !important; } .kp-tool-status .server-type i { color: #6fa800 !important; margin-right: 5px !important; } .kp-tool-status .server-location { color: #aab4be !important; font-size: .85em !important; } .kp-tool-status .server-status { font-size: .86em !important; font-family: 'JetBrains Mono', monospace !important; padding-top: 10px !important; border-top: 1px solid rgba(159,239,0,.08) !important; margin-top: 10px !important; } .kp-tool-status .server-status.online { color: #9FEF00 !important; } .kp-tool-status .server-status.offline { color: #ff3b3b !important; } /* ── 9. VPS NODE DETAILS (collapsible) ───────────────────────────────────── */ .kp-tool-status .vps-node-detail { background: #070a0e !important; border: 1px solid rgba(159,239,0,.18) !important; border-radius: 14px !important; margin: 12px 0 !important; overflow: hidden !important; scroll-margin-top: 80px !important; } .kp-tool-status .vps-node-detail.state-degraded { border-color: rgba(255,176,0,.42) !important; box-shadow: 0 0 0 1px rgba(255,176,0,.15) !important; } .kp-tool-status .vps-node-detail.state-offline { border-color: rgba(255,59,59,.48) !important; box-shadow: 0 0 0 1px rgba(255,59,59,.18) !important; } .kp-tool-status .vps-node-toggle { background: rgba(7,10,14,.95) !important; padding: 14px 18px !important; cursor: pointer !important; } .kp-tool-status .vps-node-toggle:hover { background: rgba(12,16,22,.98) !important; } .kp-tool-status .vps-node-toggle-state { background: #9FEF00 !important; box-shadow: 0 0 6px rgba(159,239,0,.7) !important; } .kp-tool-status .vps-node-toggle-state.state-degraded { background: #ffb000 !important; box-shadow: 0 0 5px rgba(255,176,0,.6) !important; } .kp-tool-status .vps-node-toggle-state.state-offline { background: #ff3b3b !important; box-shadow: 0 0 5px rgba(255,59,59,.6) !important; } .kp-tool-status .vps-node-toggle-name { font-family: 'Orbitron', sans-serif !important; font-weight: 700 !important; color: #e8f0e0 !important; font-size: 1em !important; } .kp-tool-status .vps-node-toggle-loc { color: #8a93a0 !important; font-size: .88em !important; } .kp-tool-status .vps-node-toggle-ratio { font-family: 'Orbitron', sans-serif !important; font-size: .82em !important; font-weight: 700 !important; padding: 3px 10px !important; border-radius: 999px !important; background: rgba(0,0,0,.4) !important; border: 1px solid rgba(159,239,0,.12) !important; } .kp-tool-status .vps-node-toggle-ratio.state-ok { color: #9FEF00 !important; border-color: rgba(159,239,0,.3) !important; } .kp-tool-status .vps-node-toggle-ratio.state-degraded { color: #ffb000 !important; border-color: rgba(255,176,0,.3) !important; } .kp-tool-status .vps-node-toggle-ratio.state-offline { color: #ff3b3b !important; border-color: rgba(255,59,59,.3) !important; } .kp-tool-status .vps-node-toggle-msg { color: #aab4be !important; font-size: .86em !important; } .kp-tool-status .vps-node-detail.state-degraded .vps-node-toggle-msg { color: #ffb000 !important; } .kp-tool-status .vps-node-detail.state-offline .vps-node-toggle-msg { color: #ff6868 !important; } .kp-tool-status .vps-node-chevron { color: #9FEF00 !important; } /* Node container (expanded content) */ .kp-tool-status .vps-node-container { background: rgba(0,0,0,.6) !important; border-top: 1px solid rgba(159,239,0,.1) !important; } /* Inner stat cards inside node details */ .kp-tool-status .vps-node-container > div[style*="grid"] > div[style*="background"] { background: rgba(7,10,14,.95) !important; border: 1px solid rgba(159,239,0,.18) !important; border-radius: 10px !important; } /* ── 10. VERIFICATION SECTION ────────────────────────────────────────────── */ .kp-tool-status .verification-section h4 { font-family: 'Orbitron', sans-serif !important; color: #9FEF00 !important; font-size: 1em !important; font-weight: 700 !important; letter-spacing: .06em !important; } .kp-tool-status .verification-card { border-radius: 12px !important; padding: 18px !important; background: rgba(7,10,14,.95) !important; } /* Verified state: neon border */ .kp-tool-status .verification-card[style*="159, 239, 0, 0.6"] { border-color: rgba(159,239,0,.38) !important; background: linear-gradient(145deg, rgba(7,10,14,.95) 0%, rgba(0,12,0,.6) 100%) !important; box-shadow: 0 0 0 1px rgba(159,239,0,.12), inset 0 1px 0 rgba(159,239,0,.08) !important; } /* Warn state: amber border */ .kp-tool-status .verification-card[style*="255, 170, 0, 0.5"] { border-color: rgba(255,176,0,.38) !important; background: linear-gradient(145deg, rgba(7,10,14,.95) 0%, rgba(30,15,0,.5) 100%) !important; box-shadow: 0 0 0 1px rgba(255,176,0,.10) !important; } /* ── 11. REFRESH SECTION ─────────────────────────────────────────────────── */ .kp-tool-status .refresh-section { margin: 30px 0 16px !important; display: flex !important; gap: 12px !important; flex-wrap: wrap !important; } .kp-tool-status .refresh-btn { font-family: 'JetBrains Mono', monospace !important; font-size: .85em !important; font-weight: 600 !important; letter-spacing: .04em !important; padding: 11px 24px !important; background: rgba(159,239,0,.07) !important; border: 1px solid rgba(159,239,0,.28) !important; border-radius: 9px !important; color: #9FEF00 !important; cursor: pointer !important; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s !important; text-transform: uppercase !important; } .kp-tool-status .refresh-btn:hover { background: rgba(159,239,0,.14) !important; border-color: rgba(159,239,0,.5) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 16px rgba(159,239,0,.15) !important; } /* Force refresh button — amber variant */ .kp-tool-status .refresh-btn[style*="170, 0"] { background: rgba(255,176,0,.07) !important; border-color: rgba(255,176,0,.32) !important; color: #ffb000 !important; } .kp-tool-status .refresh-btn[style*="170, 0"]:hover { background: rgba(255,176,0,.14) !important; border-color: rgba(255,176,0,.5) !important; } /* ── 12. FOOTER / LINKS / TIMESTAMPS ────────────────────────────────────── */ .kp-tool-status .container .footer { margin-top: 36px !important; padding-top: 18px !important; border-top: 1px solid rgba(159,239,0,.1) !important; color: #8a93a0 !important; font-size: .82em !important; font-family: 'JetBrains Mono', monospace !important; } .kp-tool-status .container p { color: #aab4be !important; font-size: .9em !important; } .kp-tool-status .container a { color: #9FEF00 !important; text-decoration: none !important; transition: color .15s !important; } .kp-tool-status .container a:hover { color: #b6ff1a !important; } /* ── 13. RESPONSIVE ──────────────────────────────────────────────────────── */ @media (max-width: 760px) { .kp-tool-status .container { padding: 0 14px 36px !important; } .kp-tool-status .status-hero { padding: 18px 16px !important; } .kp-tool-status .status-hero-title { font-size: 1.15em !important; } .kp-tool-status .status-metrics { gap: 8px !important; } .kp-tool-status .status-metric { flex: 1 1 calc(50% - 8px) !important; padding: 12px !important; } .kp-tool-status .node-matrix { grid-template-columns: 1fr !important; } .kp-tool-status .status-grid { grid-template-columns: 1fr !important; } .kp-tool-status .refresh-section { flex-direction: column !important; } .kp-tool-status .refresh-btn { text-align: center !important; } .kp-tool-status .container > div[style*="linear-gradient"] { padding: 16px !important; } } /* ── 14. MISC POLISH ─────────────────────────────────────────────────────── */ /* Hero radial glow behind icon */ .kp-tool-status .status-hero-main::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(159,239,0,.22) 0%, transparent 70%); pointer-events: none; z-index: 0; } .kp-tool-status .status-hero.warn .status-hero-main::before { background: radial-gradient(circle, rgba(255,176,0,.2) 0%, transparent 70%); } .kp-tool-status .status-hero.down .status-hero-main::before { background: radial-gradient(circle, rgba(255,59,59,.2) 0%, transparent 70%); } /* VPS toggle ratio badge — sharper pill */ .kp-tool-status .vps-node-toggle-ratio { font-size: .78em !important; padding: 2px 10px !important; letter-spacing: .04em !important; } /* Node name inside the expanded node container — neon Orbitron */ .kp-tool-status .vps-node-container h3[style] { font-family: 'Orbitron', sans-serif !important; color: #9FEF00 !important; font-size: 1.05em !important; font-weight: 700 !important; } /* "Services" and "Verification" labels in stat cards */ .kp-tool-status .vps-node-container i.fas + span { color: #aab4be !important; } /* Number values in inline stat cards inside expanded node */ .kp-tool-status .vps-node-container span[style*="font-size: 2em"] { font-family: 'Orbitron', sans-serif !important; } /* "Online" / "Tests Passed" dim label */ .kp-tool-status .vps-node-container span[style*="color: #777"] { color: #8a93a0 !important; } /* Separator lines inside the verification section */ .kp-tool-status .verification-section { border-top-color: rgba(159,239,0,.14) !important; padding-top: 20px !important; margin-top: 20px !important; } /* "Service Verification" sub-label muted text */ .kp-tool-status .verification-section h4 span[style*="color: #888"] { color: #8a93a0 !important; } /* Status text inside verification cards */ .kp-tool-status .verification-card div[style*="color: #9FEF00"][style*="padding: 6px"] { background: rgba(159,239,0,.07) !important; border-left-color: #9FEF00 !important; border-radius: 5px !important; } /* "Local Only Service" tag inside verification card */ .kp-tool-status .verification-card span[style*="color: #9FEF00"][style*="padding: 3px"] { background: rgba(159,239,0,.1) !important; border-color: rgba(159,239,0,.28) !important; border-radius: 5px !important; } /* Separator line inside verification card header area */ .kp-tool-status .verification-card > div[style*="border-bottom"] { border-bottom-color: rgba(159,239,0,.12) !important; } /* Icon container inside verification card header */ .kp-tool-status .verification-card > div > div[style*="background: rgba(159, 239, 0"] { background: rgba(159,239,0,.1) !important; border-color: rgba(159,239,0,.22) !important; } /* Data rows inside verification card (Domain:, IP:, etc.) */ .kp-tool-status .verification-card span[style*="color: #999"] { color: #8a93a0 !important; } .kp-tool-status .verification-card span[style*="color: #fff"] { color: #e8f0e0 !important; } /* Border line between rows in the verification detail area */ .kp-tool-status .verification-card div[style*="border-top: 1px solid rgba(159, 239, 0, 0.15)"] { border-top-color: rgba(159,239,0,.1) !important; } /* Smooth scrolling for anchor navigation */ .kp-tool-status html { scroll-behavior: smooth !important; } /* Make flag icons crisp */ .kp-tool-status .flag-icon { border-radius: 3px !important; border: 1px solid rgba(255,255,255,.12) !important; box-shadow: 0 1px 4px rgba(0,0,0,.4) !important; } /* FontAwesome icons get a subtle inherited tint */ .kp-tool-status .fas { line-height: inherit !important; } /* Data labels inside VPS node detail (inline-styled spans/divs) */ .kp-tool-status .vps-node-container span[style*="color: #bbb"], .kp-tool-status .vps-node-container span[style*="color: #aaa"], .kp-tool-status .vps-node-container span[style*="color: #777"], .kp-tool-status .vps-node-container span[style*="color: #999"] { color: #8a93a0 !important; } .kp-tool-status .vps-node-container span[style*="color: #fff"] { color: #e8f0e0 !important; } /* Override "orange-themed" VPS section border + background to match neon theme */ .kp-tool-status .container > div[style*="255, 170"] { border-color: rgba(159,239,0,.18) !important; background: #070a0e !important; box-shadow: 0 4px 32px rgba(0,0,0,.5) !important; } /* Direct inline-style override for the amber h2 inside VPS section */ .kp-tool-status .container h2[style*="ffaa00"], .kp-tool-status .container h2[style*="#ffaa00"] { color: #9FEF00 !important; border-bottom-color: rgba(159,239,0,.2) !important; } /* Also override the h4 in verification section if amber */ .kp-tool-status .container h4[style*="ffaa00"], .kp-tool-status .container h4[style*="#ffaa00"] { color: #9FEF00 !important; } /* Tighten the section-level border-bottom override */ .kp-tool-status .container > div[style*="255, 170"] > h2 { color: #9FEF00 !important; border-bottom-color: rgba(159,239,0,.18) !important; } /* Section count / online-badge styling (the N/M online badge in section headers) */ .kp-tool-status .container > div > div[style*="border-bottom"] > div[style*="gap"] { background: rgba(0,0,0,.5) !important; border: 1px solid rgba(159,239,0,.2) !important; border-radius: 8px !important; } /* The N/M count span inside the section badge */ .kp-tool-status .container > div > div[style*="border-bottom"] > div > span[style*="font-size: 1.3em"] { font-family: 'Orbitron', sans-serif !important; } /* Override the section header separation line colors from amber to neon */ .kp-tool-status .container > div[style*="255, 170"] > div[style*="border-bottom"] { border-bottom-color: rgba(159,239,0,.15) !important; } /* Verification sub-badge (N/N Verified) */ .kp-tool-status .verification-section h4 > span[style] { border-color: rgba(159,239,0,.25) !important; background: rgba(0,0,0,.5) !important; } /* Inline-styled stat mini-cards inside vps-node-container */ .kp-tool-status .vps-node-container div[style*="rgba(0, 0, 0, 0.6)"][style*="border"] { background: rgba(7,10,14,.95) !important; border-color: rgba(159,239,0,.2) !important; } /* "Services / Verification" label inside node stat cards */ .kp-tool-status .vps-node-container span[style*="color: #bbb"], .kp-tool-status .vps-node-container span[style*="text-transform: uppercase"] { color: #aab4be !important; } /* Node container header (Node 1 / Node 2...) separator line */ .kp-tool-status .vps-node-container > div[style*="border-bottom"] { border-bottom-color: rgba(159,239,0,.15) !important; } .kp-tool-status .vps-node-container > div[style*="border-bottom"] h3 { color: #9FEF00 !important; font-family: 'Orbitron', sans-serif !important; font-size: 1.1em !important; } /* Country badge inside expanded node */ .kp-tool-status .vps-node-container div[style*="rgba(0, 0, 0, 0.5)"][style*="border-radius: 8px"] { background: rgba(7,10,14,.9) !important; border-color: rgba(159,239,0,.18) !important; } /* ---- status loader + centering fix (the health-check loader covered the portal shell) ---- */ .kp-tool-status #loading-screen{ position:fixed !important; left:var(--kp-rail-w) !important; top:var(--kp-head-h) !important; right:0 !important; bottom:0 !important; width:auto !important; height:auto !important; z-index:500 !important; } .kp-tool-status .container{ margin-left:auto !important; margin-right:auto !important; } @media (max-width:1100px){ .kp-tool-status #loading-screen{ left:0 !important; } } /* ========================================================================= SHARED TOOL-PAGE TEMPLATE (.kp-toolpage) [added 2026-07-01] One consistent hero + panel system for the interactive tool pages (proof, dns, ip, warrant), visually matching the Domain DNS Checker. Everything is scoped under .kp-toolpage so it (a) never leaks onto other portal pages and (b) always outranks the legacy per-tool bare selectors (.btn / h1 / .footer) by specificity, regardless of stylesheet order. ========================================================================= */ .kp-toolpage{max-width:1140px;margin:0 auto;padding:6px 26px 64px;box-sizing:border-box;min-height:calc(100vh - var(--kp-head-h, 60px) - 120px)} .kp-toolpage .hero{position:relative;padding:26px 0 6px;overflow:visible} .kp-toolpage .hero::before{content:'';position:absolute;top:-70%;left:50%;transform:translateX(-50%);width:900px;height:900px;background:radial-gradient(circle,var(--neon-glow) 0%,transparent 55%);opacity:.16;pointer-events:none;z-index:0} .kp-toolpage .hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(159,239,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(159,239,0,.04) 1px,transparent 1px);background-size:50px 50px;-webkit-mask-image:radial-gradient(ellipse at center,#000 28%,transparent 74%);mask-image:radial-gradient(ellipse at center,#000 28%,transparent 74%);pointer-events:none;z-index:0} .kp-toolpage .hero>*{position:relative;z-index:1} .kp-toolpage .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono','Courier New',monospace;font-size:11.5px;color:var(--neon);text-transform:uppercase;letter-spacing:.16em;border:1px solid var(--border-strong);background:rgba(159,239,0,.06);padding:6px 13px;border-radius:999px;margin-bottom:16px} .kp-toolpage .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon);animation:kpDotPulse 1.8s ease-in-out infinite} @keyframes kpDotPulse{0%,100%{opacity:1}50%{opacity:.4}} .kp-toolpage .title{font-family:'Orbitron',system-ui,sans-serif;font-weight:800;font-size:clamp(30px,4vw,46px);line-height:1.08;margin:0 0 14px;color:#fff;text-shadow:0 0 24px rgba(159,239,0,.18)} .kp-toolpage .sub{color:var(--text-muted);font-size:clamp(15px,1.4vw,18px);max-width:700px;margin:0;line-height:1.6} .kp-toolpage .kp-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;align-items:center} .kp-toolpage .btn{display:inline-flex;align-items:center;gap:8px;font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:14px;letter-spacing:.02em;cursor:pointer;border:0;border-radius:8px;padding:13px 22px;background:var(--neon);color:#000;box-shadow:0 0 0 1px var(--neon),0 8px 24px rgba(159,239,0,.2);transition:transform .15s,box-shadow .2s,background .2s;text-decoration:none} .kp-toolpage .btn:hover{background:var(--neon-bright);transform:translateY(-2px);box-shadow:0 0 0 1px var(--neon-bright),0 10px 30px rgba(159,239,0,.34)} .kp-toolpage .btn:disabled{opacity:.55;cursor:not-allowed;transform:none} .kp-toolpage .btn.ghost{background:transparent;color:var(--neon);border:1px solid var(--border-strong);box-shadow:none} .kp-toolpage .btn.ghost:hover{background:rgba(159,239,0,.07);transform:none;box-shadow:none;color:var(--neon-bright)} /* Live scanning/progress panel (shown while a tool runs, before results fill in) */ .kp-toolpage .kp-progress{display:flex;align-items:center;gap:18px;margin-top:26px;padding:20px 22px;background:var(--bg-card,rgba(159,239,0,.03));border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 24px 60px -42px var(--neon-glow)} .kp-toolpage .kp-progress-spin{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:3px solid rgba(159,239,0,.16);border-top-color:var(--neon);animation:kpProgSpin .8s linear infinite} .kp-toolpage .kp-progress-body{flex:1 1 auto;min-width:0} .kp-toolpage .kp-progress-title{font-family:'Orbitron',system-ui,sans-serif;font-weight:800;font-size:15px;color:#fff;margin-bottom:5px} .kp-toolpage .kp-progress-step{font-family:'JetBrains Mono','Courier New',monospace;font-size:13px;color:var(--neon);line-height:1.45} .kp-toolpage .kp-progress-bar{margin-top:12px;height:4px;border-radius:999px;background:rgba(159,239,0,.1);overflow:hidden} .kp-toolpage .kp-progress-bar>span{display:block;height:100%;width:40%;border-radius:999px;background:linear-gradient(90deg,transparent,var(--neon),transparent);animation:kpProgSlide 1.15s ease-in-out infinite} @keyframes kpProgSpin{to{transform:rotate(360deg)}} @keyframes kpProgSlide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}} /* result cards grid */ .kp-toolpage .kp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:30px} .kp-toolpage .kp-card{background:var(--bg-card,rgba(159,239,0,.025));border:1px solid var(--border);border-radius:14px;padding:20px 22px;box-shadow:0 24px 60px -42px var(--neon-glow)} .kp-toolpage .kp-card h2{font-family:'Orbitron',system-ui,sans-serif;font-size:13.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--neon);margin:0 0 13px;padding-bottom:10px;border-bottom:1px solid var(--border)} .kp-toolpage .info-item{font-family:'JetBrains Mono','Courier New',monospace;font-size:13.5px;color:var(--text);margin:6px 0;word-break:break-word} .kp-toolpage #newsHeadlines{margin:0;padding-left:18px;list-style:square} .kp-toolpage #newsHeadlines li{margin:8px 0;color:var(--text-muted);font-size:13.5px} .kp-toolpage #newsHeadlines a{color:var(--neon)} /* single wide panel (tables etc.) */ .kp-toolpage .kp-panel{background:var(--bg-card,rgba(159,239,0,.025));border:1px solid var(--border);border-radius:14px;margin-top:26px;overflow:hidden} /* SSL fingerprint cards (created by proof.js) */ .kp-toolpage .fingerprints-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px} .kp-toolpage .fingerprint-card{background:var(--bg-soft);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-family:'JetBrains Mono','Courier New',monospace;font-size:12px;color:var(--text);word-break:break-all} .kp-toolpage .fingerprint-card strong{color:var(--neon);display:block;margin-bottom:6px;font-size:11px;text-transform:uppercase;letter-spacing:.05em} @media (max-width:720px){.kp-toolpage{padding:6px 16px 48px}.kp-toolpage .kp-grid{grid-template-columns:1fr}} /* end SHARED TOOL-PAGE TEMPLATE */ /* kp-toolpage: pre blocks + stacked sections (warrant, combined pages) */ .kp-toolpage pre{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin:0;font-family:'JetBrains Mono','Courier New',monospace;font-size:13px;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-word;overflow-x:auto} .kp-toolpage .kp-section{margin-top:36px} .kp-toolpage .kp-section>h2{font-family:'Orbitron',system-ui,sans-serif;font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--neon);margin:0 0 8px;display:flex;align-items:center;gap:10px} .kp-toolpage .kp-section>h2::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--neon);box-shadow:0 0 8px var(--neon);flex:0 0 auto} .kp-toolpage .kp-section>.kp-section-sub{color:var(--text-muted);font-size:13.5px;margin:0 0 14px} .kp-toolpage .table-container{margin-top:8px} /* kp-idpage: table styling for the combined IP + Fingerprint page only (scoped so it never touches the dns page's bespoke table theme). */ .kp-idpage .table-container{border:1px solid var(--border);border-radius:12px;overflow:auto;background:var(--bg-card,rgba(159,239,0,.025));margin-top:8px} .kp-idpage table{width:100%;border-collapse:collapse;font-family:'JetBrains Mono','Courier New',monospace;font-size:13px} .kp-idpage thead th{text-align:left;color:var(--neon);font-family:'Orbitron',system-ui,sans-serif;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:12px 14px;border-bottom:1px solid var(--border-strong);background:rgba(159,239,0,.05)} .kp-idpage tbody td{padding:10px 14px;border-bottom:1px solid var(--border);color:var(--text);word-break:break-word;vertical-align:top} .kp-idpage tbody td:first-child{color:var(--text-muted);white-space:nowrap} .kp-idpage tbody tr:last-child td{border-bottom:0} .kp-idpage tbody tr:hover{background:rgba(159,239,0,.045)} .kp-idpage #status-message{color:var(--text-muted);font-size:13.5px;margin:0 0 12px}