/* Token Rift's own look (3 Nov 2026), over the shared theme: ink background, violet for the brand, a lime "safe" accent
   for the actions that keep a wallet safe, mono type for addresses and numbers. Loaded by templates/base.html and post.html.
   .trc = the airdrop checker, .trh = the home page; the rest restyles the shared header, cards, sidebar and product cards. */
:root {
  --tr-ink: #08090d; --tr-panel: #11131a; --tr-panel-2: #171a23; --tr-line: #252936; --tr-text: #eceef4; --tr-mute: #a3a8b8;
  --tr-violet: #8b5cf6; --tr-violet-soft: #b9a2ff; --tr-lime: #c5f04a; --tr-cyan: #3fd5ee; --tr-red: #ff6b6b;
  --tr-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --tr-r: 14px;
}
body { background: var(--tr-ink); color: var(--tr-text); }
a { color: var(--tr-violet-soft); }
a:hover { color: var(--tr-lime); }

/* Header: one dark bar with a thin rift line under it */
body > nav.navbar:first-of-type { background: rgba(8, 9, 13, .92) !important; backdrop-filter: blur(8px); border-bottom: 0 !important; position: sticky; top: 0; z-index: 1030;
  box-shadow: 0 1px 0 var(--tr-line); }
body > nav.navbar:first-of-type::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--tr-violet) 25%, var(--tr-cyan) 60%, var(--tr-lime) 85%, transparent); opacity: .7; }
.navbar-brand { font-weight: 800; letter-spacing: -.02em; }
.navbar-brand .logo-icon { color: var(--tr-lime); }
.navbar .nav-link { color: var(--tr-mute); font-weight: 500; border-radius: 8px; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--tr-text); background: rgba(255, 255, 255, .05); }
.navbar .nav-item:first-child .nav-link { color: var(--tr-ink); background: var(--tr-lime); font-weight: 700; padding-left: .8rem; padding-right: .8rem; }
.navbar .nav-item:first-child .nav-link:hover { background: #d8ff6a; }
@media (min-width: 992px) { .navbar .navbar-nav { gap: .2rem; } .navbar .nav-item:first-child { margin-right: .4rem; } }
#search-input { background: var(--tr-panel); border-color: var(--tr-line); color: var(--tr-text); border-radius: 8px; }

/* Cards, sidebar, headings */
.card, .post-card { background: var(--tr-panel); border: 1px solid var(--tr-line) !important; border-radius: var(--tr-r) !important; }
.post-card:hover { border-color: color-mix(in srgb, var(--tr-violet) 55%, var(--tr-line)) !important; }
.badge.bg-primary { background: color-mix(in srgb, var(--tr-violet) 22%, transparent) !important; color: var(--tr-violet-soft); font-weight: 600; letter-spacing: .02em; }
.sidebar .card, aside .card, .sidebar-element { border-radius: var(--tr-r); }
.post-content h2 { letter-spacing: -.015em; }
.post-content code, .trc code { font-family: var(--tr-mono); font-size: .9em; color: var(--tr-lime); background: rgba(197, 240, 74, .08); padding: .05em .35em; border-radius: 5px; }
.post-content table { border-radius: var(--tr-r); overflow: hidden; }

/* Amazon product cards in posts (templates/elements/product_card.html, product_grid.html) on the dark theme */
.product-card, .product-grid .product-item, .product-grid-item { background: var(--tr-panel-2) !important; border: 1px solid var(--tr-line) !important; border-radius: var(--tr-r) !important; color: var(--tr-text); }
.product-card .product-image, .product-grid .product-image { background: #fff; border-radius: 10px; }
.product-card .product-image img, .product-grid .product-image img { mix-blend-mode: normal; background: #fff; }
.product-grid .product-image { background: #fff !important; border-radius: 10px; aspect-ratio: auto !important; height: 180px; display: flex; align-items: center; justify-content: center; padding: .6rem; }
.product-grid .product-image img { max-height: 160px; width: auto !important; height: auto !important; object-fit: contain; }
.product-card .product-image { padding: .6rem; }
.product-card .product-image img { max-height: 200px; object-fit: contain; }
.product-grid .product-name a, .product-card .product-name a { color: var(--tr-text) !important; }
.product-best-for { background: rgba(197, 240, 74, .07) !important; color: var(--tr-lime) !important; border-radius: 8px; }
.product-card .product-name a, .product-grid .product-name a, .product-grid h4 a { color: var(--tr-text); }
.product-card .product-brand { color: var(--tr-mute); }
.product-card .product-best-for { color: var(--tr-lime); }
.btn-amazon, .product-card .btn-amazon { background: var(--tr-lime) !important; border-color: var(--tr-lime) !important; color: var(--tr-ink) !important; font-weight: 700; border-radius: 10px; }
.btn-amazon:hover { background: #d8ff6a !important; }

/* The airdrop checker */
.trc { position: relative; background: linear-gradient(160deg, #151827 0%, #0f1119 60%); border: 1px solid var(--tr-line); border-radius: 18px; padding: 1.4rem; margin: 1.5rem 0;
  box-shadow: 0 20px 60px -30px rgba(139, 92, 246, .55); scroll-margin-top: 5rem; }
.trc::before { content: ""; position: absolute; inset: -1px; border-radius: 18px; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(139, 92, 246, .8), rgba(63, 213, 238, .25) 45%, rgba(197, 240, 74, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.trc-kicker { display: inline-block; font: 600 .72rem/1 var(--tr-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tr-lime); margin-bottom: .6rem; }
.trc-title { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .4rem; color: var(--tr-text); border: 0; }
.trc-title::after { display: none !important; }
.trc-lead { color: var(--tr-mute); font-size: .95rem; margin: 0 0 1rem; }
.trc-in { width: 100%; background: #07080c; color: var(--tr-text); border: 1px solid var(--tr-line); border-radius: 12px; padding: .8rem .9rem;
  font: .92rem/1.5 var(--tr-mono); resize: vertical; min-height: 5.2rem; }
.trc-in:focus { outline: 2px solid var(--tr-violet); outline-offset: 1px; border-color: transparent; }
.trc-row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: .8rem; }
.trc-go { background: var(--tr-lime); color: var(--tr-ink); font-weight: 800; border: 0; border-radius: 11px; padding: .7rem 1.25rem; font-size: 1rem; }
.trc-go:hover { background: #d8ff6a; }
.trc-keep { color: var(--tr-mute); font-size: .85rem; display: inline-flex; gap: .4rem; align-items: center; }
.trc-alert { margin-top: 1rem; padding: .85rem 1rem; border-radius: 12px; background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .5); color: #ffd2d2; font-weight: 600; font-size: .92rem; }
.trc-out { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .8rem; }
.trc-item { background: rgba(255, 255, 255, .025); border: 1px solid var(--tr-line); border-radius: 12px; padding: .8rem; }
.trc-item-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.trc-chain { font: 700 .68rem/1 var(--tr-mono); text-transform: uppercase; letter-spacing: .06em; padding: .35rem .5rem; border-radius: 6px; background: rgba(139, 92, 246, .2); color: var(--tr-violet-soft); }
.trc-chain-sol { background: rgba(63, 213, 238, .15); color: var(--tr-cyan); }
.trc-chain-x, .trc-chain-btc { background: rgba(255, 255, 255, .07); color: var(--tr-mute); }
.trc-addr { background: none !important; color: var(--tr-text) !important; padding: 0 !important; }
.trc-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.trc-link { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .75rem; border-radius: 10px; background: #0b0d13; border: 1px solid var(--tr-line); text-decoration: none; }
.trc-link b { color: var(--tr-text); font-size: .95rem; }
.trc-link b::after { content: " \2197"; color: var(--tr-lime); }
.trc-link span { color: var(--tr-mute); font-size: .78rem; line-height: 1.35; }
.trc-link:hover { border-color: var(--tr-lime); }
.trc-note { color: var(--tr-mute); font-size: .85rem; margin: 0; }
.trc-after { margin-top: 1rem; padding: .9rem 1rem; border-radius: 12px; background: rgba(197, 240, 74, .06); border: 1px solid rgba(197, 240, 74, .3); font-size: .9rem; }
.trc-after ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.trc-after li { margin: .25rem 0; color: var(--tr-mute); }

/* Home */
.trh { --gap: clamp(2.5rem, 5vw, 4.5rem); }
.trh-hero { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center; padding: clamp(1rem, 3vw, 2.5rem) 0 1rem; }
@media (min-width: 992px) { .trh-hero { grid-template-columns: 1fr 1.05fr; gap: 3rem; } }
.trh-eyebrow { font: 600 .75rem/1 var(--tr-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tr-cyan); margin-bottom: 1rem; }
.trh-h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4rem); font-weight: 900; line-height: 1.02; letter-spacing: -.045em; margin: 0 0 1.1rem; }
.trh-h1 span { background: linear-gradient(90deg, var(--tr-violet-soft), var(--tr-cyan) 55%, var(--tr-lime)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trh-lead { font-size: 1.08rem; color: var(--tr-mute); max-width: 34rem; }
.trh-proof { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .55rem; }
.trh-proof li { color: var(--tr-mute); font-size: .92rem; }
.trh-proof b { display: inline-block; min-width: 6.4rem; font: 700 .72rem/1 var(--tr-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--tr-lime); }
.trh-hero-tool .trc { margin: 0; }
.trh-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; margin-top: var(--gap); }
.trh-tool { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; padding: 1.1rem; border-radius: var(--tr-r); background: var(--tr-panel); border: 1px solid var(--tr-line); text-decoration: none; }
.trh-tool i { grid-row: span 2; font-size: 1.2rem; color: var(--tr-lime); width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 10px; background: rgba(197, 240, 74, .08); }
.trh-tool b { color: var(--tr-text); }
.trh-tool span { color: var(--tr-mute); font-size: .85rem; line-height: 1.4; }
.trh-tool:hover { border-color: var(--tr-violet); }
.trh-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin: var(--gap) 0 1.2rem; }
.trh-sec-head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 850; letter-spacing: -.03em; margin: 0; }
.trh-sec-head p { color: var(--tr-mute); margin: 0; }
.trh-stages { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); counter-reset: none; }
.trh-stage { position: relative; padding: 1.2rem 1.2rem 1rem; border-radius: var(--tr-r); background: var(--tr-panel); border: 1px solid var(--tr-line); display: flex; flex-direction: column; }
.trh-stage::before { content: ""; position: absolute; left: 1.2rem; right: 1.2rem; top: 0; height: 2px; background: linear-gradient(90deg, var(--tr-violet), var(--tr-cyan)); border-radius: 2px; }
.trh-n { font: 700 .8rem/1 var(--tr-mono); color: var(--tr-violet-soft); }
.trh-stage h3 { font-size: 1.08rem; font-weight: 800; margin: .5rem 0 .7rem; letter-spacing: -.01em; }
.trh-stage ul { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .45rem; }
.trh-stage ul a { color: var(--tr-text); text-decoration: none; font-size: .92rem; line-height: 1.35; }
.trh-stage ul a:hover { color: var(--tr-lime); }
.trh-more { margin-top: auto; font: 600 .78rem/1.2 var(--tr-mono); color: var(--tr-lime); text-decoration: none; }
.trh-more::after { content: " \2192"; }
.trh-kit-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.trh-dev { display: flex; flex-direction: column; padding: 1.2rem; border-radius: var(--tr-r); background: var(--tr-panel); border: 1px solid var(--tr-line); }
.trh-dev img { width: 100%; height: 150px; object-fit: contain; background: #fff; border-radius: 10px; padding: .6rem; margin-bottom: .9rem; }
.trh-dev-tag { font: 700 .7rem/1 var(--tr-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--tr-cyan); }
.trh-dev h3 { font-size: 1.15rem; font-weight: 800; margin: .45rem 0 .35rem; }
.trh-dev p { color: var(--tr-mute); font-size: .9rem; flex: 1; }
.trh-buy { display: block; text-align: center; background: var(--tr-lime); color: var(--tr-ink); font-weight: 800; padding: .7rem 1rem; border-radius: 11px; text-decoration: none; }
.trh-buy:hover { background: #d8ff6a; color: var(--tr-ink); }
.trh-fine { color: var(--tr-mute); font-size: .85rem; margin-top: 1rem; }
.trh-new-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.trh-card { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem; border-radius: var(--tr-r); background: var(--tr-panel); border: 1px solid var(--tr-line); text-decoration: none; color: var(--tr-text); }
.trh-card:hover { border-color: var(--tr-violet); color: var(--tr-text); }
.trh-cat { font: 700 .68rem/1 var(--tr-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--tr-violet-soft); }
.trh-card b { font-size: 1.05rem; line-height: 1.3; }
.trh-excerpt { color: var(--tr-mute); font-size: .88rem; flex: 1; }
.trh-card time { color: var(--tr-mute); font: .75rem var(--tr-mono); }

/* Wider page, one-line nav (counts off) */
@media (min-width: 1200px) { .container { max-width: 1200px; } }
.navbar .nav-link { white-space: nowrap; }
.navbar .nav-link .opacity-50 { display: none; }
.trh-proof li { display: grid; grid-template-columns: 6.6rem 1fr; align-items: baseline; }
.trh-proof b { min-width: 0; }
.post-content .trc .trc-title { font-size: 1.35rem; color: var(--tr-text); margin: 0 0 .4rem; padding: 0; }
.post-content .trc .trc-title::after { display: none !important; }
.post-content .trc-after a, .trc-after a { color: var(--tr-lime); }
.post-content .product-grid-item .product-image { background: #fff !important; aspect-ratio: auto !important; height: 190px !important; padding: .7rem !important; border-radius: 10px; overflow: hidden; }
.post-content .product-grid-item .product-image img { max-height: 170px !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain; }
/* Sidebar: the claim-day wallet box (a custom_html SidebarElement) */
.trk-line { color: var(--tr-mute); font-size: .85rem; margin: 0 0 .7rem; }
.trk-dev { display: flex; align-items: center; gap: .7rem; padding: .55rem; margin-bottom: .5rem; border-radius: 10px; background: var(--tr-panel-2); border: 1px solid var(--tr-line); text-decoration: none; }
.trk-dev:hover { border-color: var(--tr-lime); }
.trk-dev img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; flex: none; }
.trk-dev b { display: block; color: var(--tr-text); font-size: .9rem; }
.trk-dev span { color: var(--tr-mute); font-size: .78rem; }
.trk-more { font: 600 .78rem var(--tr-mono); color: var(--tr-lime); text-decoration: none; }
.trk-more::after { content: " \2192"; }
.trk-fine { color: var(--tr-mute); font-size: .7rem; margin: .6rem 0 0; }
