/* ========== Interactive tools (/transaction-tracker/, /scam-checker/) ========== */
.tl { --tl-ok: #0e9f6e; --tl-warn: #c27803; --tl-danger: #e0364f; --tl-info: var(--brand); }
:root[data-theme="dark"] .tl { --tl-ok: #34d399; --tl-warn: #fbbf24; --tl-danger: #fb7185; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tl { --tl-ok: #34d399; --tl-warn: #fbbf24; --tl-danger: #fb7185; } }
.tl [dir="ltr"] { unicode-bidi: isolate; }
.tl-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; word-break: break-all; }

/* Hero + form */
.tl-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--night); color: #cfd5ea; padding-block: clamp(24px, 4vw, 44px) clamp(40px, 6vw, 64px); }
.tl-hero__bg { position: absolute; inset: 0; z-index: -1; }
.tl-hero__bg::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 60% 0%, #000 25%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 60% 0%, #000 25%, transparent 75%); }
.tl-hero__bg span { position: absolute; border-radius: 50%; filter: blur(90px); }
.tl-hero__bg span:nth-child(1) { width: 560px; height: 560px; background: #5b4cff; opacity: .45; top: -260px; inset-inline-end: -120px; }
.tl-hero__bg span:nth-child(2) { width: 420px; height: 420px; background: #18d6b8; opacity: .2; bottom: -260px; inset-inline-start: 5%; }
.tl-hero .crumbs ol, .tl-hero .crumbs a, .tl-hero .crumbs li::after { color: #8d96b8; }
.tl-hero .eyebrow { color: #a59bff; }
.tl-hero__title { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: .75rem; }
.tl-hero__lead { max-width: 720px; font-size: 1.08rem; color: #b8c0dc; margin-bottom: 1.5rem; }

.tl-card { position: relative; padding: clamp(16px, 2.4vw, 24px); border-radius: 20px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tl-form { display: flex; gap: .6rem; }
.tl-form__field { flex: 1; min-width: 0; }
.tl-input, .tl-textarea { width: 100%; padding: .95rem 1.1rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(7,11,26,.6); color: #fff; font: 500 1rem/1.4 var(--font); transition: border-color .15s, box-shadow .15s; }
.tl-input { direction: ltr; text-align: left; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .95rem; }
.tl-input::placeholder { font-family: var(--font); color: #7f89ab; }
.tl-input:placeholder-shown { direction: rtl; text-align: right; }
.tl-textarea { min-height: 150px; resize: vertical; }
.tl-textarea::placeholder { color: #7f89ab; }
.tl-input:focus, .tl-textarea:focus { outline: none; border-color: #8577ff; box-shadow: 0 0 0 3px rgba(133,119,255,.3); }
.tl-form .btn { flex: none; min-width: 120px; }
.tl-form .btn[disabled] { opacity: .7; cursor: progress; transform: none; }
.tl-help { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .85rem; font-size: .88rem; color: #8d96b8; }
.tl-help button { padding: 0; border: 0; background: none; color: #a59bff; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tl-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.tl-chip { padding: .3rem .7rem; border-radius: 99px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); font: 500 .8rem/1.2 var(--font-head); color: #cfd5ea; }

/* Tabs (scam checker) */
.tl-tabs { display: flex; gap: .35rem; margin-bottom: 1rem; padding: .3rem; border-radius: 14px; background: rgba(7,11,26,.5); border: 1px solid rgba(255,255,255,.1); width: fit-content; max-width: 100%; }
.tl-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; border: 0; border-radius: 10px; background: none; color: #b8c0dc; font: 600 .95rem/1 var(--font-head); cursor: pointer; transition: background .15s, color .15s; }
.tl-tab .icon { width: 18px; height: 18px; }
.tl-tab[aria-selected="true"] { background: #fff; color: var(--night); }
.tl-tab:focus-visible { outline: 2px solid #a59bff; outline-offset: 2px; }
.tl-panel[hidden] { display: none; }
.tl-panel .tl-form--stack { flex-direction: column; }
.tl-panel .tl-form--stack .btn { align-self: flex-start; }
.tl-compare { margin-top: .6rem; }
.tl-compare summary { cursor: pointer; color: #a59bff; font-size: .9rem; width: fit-content; }
.tl-compare .tl-input { margin-top: .6rem; }

/* Results */
.tl-result { scroll-margin-top: 90px; }
.tl-result:empty { display: none; }
.tl-out { padding-block: clamp(24px, 4vw, 40px) 0; }
.tl-loading { display: flex; align-items: center; gap: .8rem; padding: 1.4rem; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink-2); }
.tl-spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand); animation: tl-spin .8s linear infinite; }
@keyframes tl-spin { to { transform: rotate(360deg); } }

.tl-status { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.2rem; align-items: center; padding: clamp(18px, 3vw, 26px); border-radius: 20px; border: 1px solid var(--line); background: var(--bg-elev); box-shadow: var(--shadow); }
.tl-status__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.tl-status__ico .icon { width: 28px; height: 28px; }
.tl-status__title { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: var(--c); }
.tl-status__sub { margin: .2rem 0 0; color: var(--ink-2); }
.tl-status--ok { --c: var(--tl-ok); } .tl-status--warn { --c: var(--tl-warn); } .tl-status--danger { --c: var(--tl-danger); } .tl-status--info { --c: var(--tl-info); }
.tl-status--official { --c: var(--tl-ok); }

.tl-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; margin: .2rem 0 0; }
.tl-fact { padding: .75rem .9rem; border-radius: 12px; background: var(--bg-soft); min-width: 0; }
.tl-fact dt { font: 500 .78rem/1.2 var(--font-head); color: var(--ink-3); margin-bottom: .3rem; }
.tl-fact dd { margin: 0; font: 600 .98rem/1.35 var(--font-head); color: var(--ink); overflow-wrap: anywhere; }
.tl-fact dd small { display: block; font: 400 .8rem/1.3 var(--font); color: var(--ink-3); }
.tl-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }

.tl-notes { display: grid; gap: .6rem; margin-top: 1rem; }
.tl-note { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; padding: 1rem 1.15rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line)); background: color-mix(in srgb, var(--c) 6%, var(--bg)); }
.tl-note .icon { grid-row: span 2; width: 20px; height: 20px; color: var(--c); margin-top: .15rem; }
.tl-note h3 { margin: 0; font-size: 1.02rem; }
.tl-note p { margin: 0; color: var(--ink-2); font-size: .96rem; }
.tl-note--ok { --c: var(--tl-ok); } .tl-note--warn { --c: var(--tl-warn); } .tl-note--danger { --c: var(--tl-danger); } .tl-note--info { --c: var(--tl-info); }
.tl-note mark { background: color-mix(in srgb, var(--c) 16%, transparent); color: inherit; padding: 0 .25em; border-radius: 4px; }

.tl-block { margin-top: 1.4rem; }
.tl-block h3 { font-size: 1.08rem; margin-bottom: .6rem; }
.tl-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.tl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: center; padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-elev); }
.tl-row__path { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; min-width: 0; font-size: .9rem; color: var(--ink-2); }
.tl-row__path .icon { width: 16px; height: 16px; color: var(--ink-3); transform: scaleX(-1); }
.tl-row__amt { text-align: end; font: 700 1rem/1.3 var(--font-head); font-variant-numeric: tabular-nums; }
.tl-row__amt small { display: block; font: 400 .8rem/1.3 var(--font); color: var(--ink-3); }
.tl-row__amt--in { color: var(--tl-ok); } .tl-row__amt--out { color: var(--tl-danger); }
.tl-addr { display: inline-flex; align-items: center; gap: .25rem; max-width: 100%; }
.tl-addr code { padding: .1rem .4rem; border-radius: 6px; background: var(--bg-soft); font-size: .85rem; direction: ltr; }
.tl-copy { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-3); cursor: pointer; }
.tl-copy:hover { background: var(--bg-soft); color: var(--brand-ink); }
.tl-copy .icon { width: 15px; height: 15px; }
.tl-tag { display: inline-block; padding: .1rem .45rem; border-radius: 6px; background: var(--bg-soft); font: 600 .72rem/1.4 var(--font-head); color: var(--ink-3); }
.tl-more { margin-top: .5rem; font-size: .88rem; color: var(--ink-3); }

.tl-empty { padding: 1.4rem 1.5rem; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-elev); }
.tl-empty h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.tl-empty ul { margin: .6rem 0 0; padding-inline-start: 1.2rem; color: var(--ink-2); }
.tl-empty li + li { margin-top: .35rem; }

/* Address compare */
.tl-diff { margin-top: 1rem; padding: 1rem 1.15rem; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-elev); }
.tl-diff code { display: block; margin-top: .35rem; padding: .5rem .7rem; border-radius: 8px; background: var(--bg-soft); direction: ltr; text-align: left; font-size: .9rem; word-break: break-all; }
.tl-diff code b { color: var(--tl-danger); background: color-mix(in srgb, var(--tl-danger) 16%, transparent); border-radius: 3px; }

/* Report form */
.tl-report { margin-top: 1.2rem; padding: 1.2rem 1.3rem; border-radius: 16px; border: 1px dashed var(--line); background: var(--bg-soft); }
.tl-report h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.tl-report p { margin: 0 0 .8rem; color: var(--ink-2); font-size: .94rem; }
.tl-report textarea { width: 100%; min-height: 96px; padding: .8rem 1rem; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-elev); color: var(--ink); font: 400 .98rem/1.5 var(--font); resize: vertical; }
.tl-report textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.tl-report .btn { margin-top: .6rem; }
.tl-report__msg { margin-top: .6rem; font-weight: 600; }
.tl-hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Content below the tool */
.tl-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: 1rem; font-size: .85rem; color: #8d96b8; }
.tl-steps { counter-reset: s; display: grid; gap: .8rem; margin: 1rem 0 2rem; padding: 0; list-style: none; }
.tl-steps li { counter-increment: s; position: relative; padding: 1rem 1.2rem 1rem 1.2rem; padding-inline-start: 3.4rem; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-elev); }
.tl-steps li::before { content: counter(s); position: absolute; inset-inline-start: 1rem; top: 1rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-ink); font: 700 .9rem/1 var(--font-head); }
.tl-steps strong { display: block; margin-bottom: .2rem; font-family: var(--font-head); }
.tl-steps p { margin: 0; color: var(--ink-2); }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin: 1rem 0 2rem; }
.tl-grid > div { padding: 1.1rem 1.2rem; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-elev); }
.tl-grid h3 { font-size: 1rem; margin-bottom: .35rem; }
.tl-grid p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.tl-table-wrap { overflow-x: auto; margin: 1rem 0 2rem; border: 1px solid var(--line); border-radius: 14px; }
.tl-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tl-table th, .tl-table td { padding: .8rem 1rem; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
.tl-table th { background: var(--bg-soft); font: 600 .88rem/1.3 var(--font-head); }
.tl-table tr:last-child td { border-bottom: 0; }

.tl-terms { padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-soft); margin-bottom: 2.5rem; }
.tl-terms h2 { font-size: 1.1rem; margin-bottom: .8rem; }
.tl-terms p { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.tl-terms a { padding: .4rem .85rem; border-radius: 99px; background: var(--bg-elev); border: 1px solid var(--line); font-size: .9rem; font-weight: 500; }
.tl-terms a:hover { border-color: var(--brand); text-decoration: none; }
.tl-faq__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.tl-faq { display: grid; gap: .6rem; margin-bottom: 2.5rem; }
.tl-faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-elev); transition: border-color .15s; }
.tl-faq details[open] { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.tl-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; font: 600 1.02rem/1.4 var(--font-head); cursor: pointer; list-style: none; }
.tl-faq summary::-webkit-details-marker { display: none; }
.tl-faq summary .icon { flex: none; transition: transform .2s; color: var(--ink-3); transform: rotate(90deg); }
.tl-faq details[open] summary .icon { transform: rotate(-90deg); }
.tl-faq details p { margin: 0; padding: 0 1.2rem 1.15rem; color: var(--ink-2); }
.tl-risk { padding: 1.3rem 1.5rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold) 8%, var(--bg)); margin-bottom: 2rem; }
.tl-risk h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; margin-bottom: .5rem; }
.tl-risk h2 .icon { color: var(--gold); }
.tl-risk p { margin: 0; color: var(--ink-2); font-size: .96rem; }
.tl-risk p + p { margin-top: .5rem; }
.tl-cross { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.2rem 1.4rem; margin-bottom: 2.5rem; border-radius: 18px; background: var(--night); color: #cfd5ea; }
.tl-cross h2 { color: #fff; font-size: 1.15rem; margin: 0 0 .25rem; }
.tl-cross p { margin: 0; font-size: .95rem; }

@media (max-width: 640px) {
	.tl-form { flex-direction: column; }
	.tl-form .btn { width: 100%; }
	.tl-panel .tl-form--stack .btn { align-self: stretch; }
	.tl-tabs { width: 100%; }
	.tl-tab { flex: 1; justify-content: center; padding: .6rem .5rem; font-size: .9rem; }
	.tl-status { grid-template-columns: 1fr; }
	.tl-status__ico { width: 48px; height: 48px; }
	.tl-row { grid-template-columns: 1fr; }
	.tl-row__amt { text-align: start; }
	.tl-terms, .tl-risk { padding: 1.1rem 1.15rem; }
}
@media (prefers-reduced-motion: reduce) { .tl-spin { animation-duration: 2.4s; } }
.tl .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tl-result h2:focus { outline: none; }