/* =====================================================================
Don’t Follow Back — app.css
Structure:
01) Theme Tokens
02) Base / Resets / Utilities
03) Layout Shell (header, container, footer)
04) Typography & Prose (FAQ markdown)
05) Generic UI (cards, chips, buttons, tables, tabs, toolbar)
06) Status Tags & Avatars
07) Forms (app-wide)
08) Widgets
08a) Share Composer (.share-composer)
08b) Viral Share (#viral-share)
09) Pagination
10) Dev Panel (optional)
11) Filters Dropdown
12) Utilities / Helpers / Animations
13) Responsive
14) Reduced Motion
===================================================================== */
/* turn on global outlines */
/* Prevent page-level horizontal scroll (Galaxy fix) */
html, body {
max-width: 100%;
overflow-x: hidden;
}
/* == 01) THEME TOKENS ================================================= */
:root {
/* Surface & text */
--bg: #0f1521;
--panel: #111827;
--panel-2: #0d1420;
--card: #111318; /* card-ish sections */
--surface: #0e1116;
--surface-2: #151922;
/* Colors */
--text: #e5e7eb;
--muted: #9aa0aa;
--link: #7aa2ff;
--link-hover:#9bb8ff;
/* Accents */
--accent: #60a5fa; /* blue */
--accent-2: #34d399; /* green */
--primary: #6b7cff; /* violet for share UI */
/* States */
--danger: #ef4444;
--warn: #f59e0b;
--ok: #34d399;
/* Lines / chrome */
--border: #222630;
/* Code / kbd */
--code-bg: #0f131a;
--kbd-bg: #171b22;
/* Chips */
--chip: #101826;
--chip-border: #233041;
/* Radii / shadows / focus */
--radius: 10px;
--shadow-sm: 0 1px 2px rgba(0,0,0,.3);
--shadow-md: 0 6px 18px rgba(0,0,0,.25);
--focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* Light mode fallback (optional) */
@media (prefers-color-scheme: light){
:root{
--bg:#ffffff; --panel:#ffffff; --panel-2:#f9fafb; --card:#ffffff;
--surface:#ffffff; --surface-2:#f7f8fb;
--text:#111827; --muted:#6b7280;
--link:#1d4ed8; --link-hover:#2563eb;
--accent:#0ea5e9; --accent-2:#10b981;
--danger:#ef4444; --warn:#f59e0b;
--border:#e5e7eb; --code-bg:#f8fafc; --kbd-bg:#f3f4f6;
--shadow-md: 0 6px 18px rgba(0,0,0,.08);
}
}
:root{
--site-head-h: 60px; /* fallback; will be set precisely by JS */
--toolbar-gap: 6px; /* breathing room between header and toolbar */
}
/* == 02) BASE / RESETS / UTILITIES =================================== */
* { box-sizing: border-box; }
/* 2) Make body stretch at least one viewport (dynamic on mobile) */
body {
background: transparent; /* we paint on now */
display: flex;
flex-direction: column;
color: var(--text);
font: 14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
/* --- GLOBAL BACKGROUND: fills viewport regardless of content height --- */
html, body { min-height: 100%; }
body {
/* we’ll paint on ::before instead */
background: transparent !important;
position: relative; /* establish containing block for ::before z-index */
color: var(--text);
font: 14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
/* The painter lives behind all content and spans the viewport at all times */
body::before {
content: "";
position: fixed; /* ↠key */
inset: 0;
z-index: -1; /* sit behind all content */
pointer-events: none;
background: linear-gradient(180deg, #0b0f14 0%, #0e141b 100%);
}
/* 3) Let the main content grow; keep footer pinned at the bottom if short content */
.page-shell { flex: 1 0 auto; }
a { color: inherit; text-decoration: none; }
a:focus { outline: 2px solid var(--accent); }
button:focus, input:focus { outline: 2px solid var(--accent); }
.hidden{ display:none; }
.muted{ color: var(--muted); }
.tiny{ color: var(--muted); font-size: 12px; }
.flash{ margin-top:12px; padding:10px; border-radius:8px; background:#10202a; border:1px solid #1c3a4d }
.debug *:not(svg):not(path):not(g){
outline:1px solid rgba(255,0,0,.6);
outline-offset:-1px;
}
/* Header layout */
.dfb-header{
display:flex;
flex-direction:column;
align-items:center; /* center on mobile */
gap:.5rem;
margin: .25rem 0 .9rem; /* adds space before the callout */
text-align:center; /* center H1 on mobile */
}
.dfb-header h1,
.dfb-header .dfb-title{
margin:0;
font-size:1.25rem; /* tweak as you like */
line-height:1.25;
}
/* Summary chips row */
.summary-chips{
display:flex;
flex-wrap:wrap;
width:100%;
justify-content:center; /* center on mobile */
gap:.4rem .6rem;
}
/* Chip look (scoped so it won’t affect other chips elsewhere) */
.summary-chips .chip{
display:inline-flex;
align-items:center;
gap:.35rem;
padding:.35rem .6rem;
border:1px solid var(--border);
border-radius:999px;
background:var(--surface-1, transparent);
font-size:.9rem;
line-height:1.1;
cursor:pointer;
}
.summary-chips .chip strong{ font-weight:700; }
/* Breathing room before the callout */
.dfb-header + .callout{ margin-top:.5rem; }
/* Desktop: left align if you prefer a more app-like layout */
@media (min-width:640px){
.dfb-header{ align-items:flex-start; text-align:left; }
.summary-chips{ justify-content:flex-start; }
}
/* == 03) LAYOUT SHELL ================================================= */
.dfb-container{ max-width:1200px; margin:14px auto 24px auto; padding:0 16px; }
.site-head{
position: sticky; top: 0; z-index: 10;
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:12px 16px; margin-bottom:12px;
background:#0c141d; border-bottom:1px solid var(--border);
}
.site-head{
position: sticky;
top: 0;
z-index: 100; /* above toolbar */
background: #0c141d; /* already set; keep it opaque for overlap */
}
.brand{ display:inline-flex; align-items:center; gap:2px; color:var(--text); text-decoration:none; }
.brand-mark{ display:block; }
.brand-word{ display:block; height:60px; padding-top:5px; }
.site-nav { float:right; }
.site-nav a { padding:0 5px; }
.site-foot{
margin-top:24px;
background:#0c141d;
border-top:1px solid var(--border);
color:var(--text);
}
.foot-inner{
max-width:1200px; margin:0 auto; padding:18px 16px;
display:grid; gap:16px;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.foot-bottom{
max-width:1200px; margin:0 auto; padding:10px 16px 16px;
display:flex; align-items:center; justify-content:space-between;
border-top:1px solid var(--border);
}
.foot-title{ font-size:12px; letter-spacing:.3px; text-transform:uppercase; margin:0 0 8px 0; color:var(--muted) }
.foot-list{ list-style:none; padding:0; margin:0 }
.foot-list li{ margin:6px 0 }
.foot-list a{ color:var(--text); opacity:.9 }
.foot-list a:hover{ opacity:1; text-decoration:underline }
.foot-badges{ list-style:none; padding:0; margin:0; display:flex; gap:8px; flex-wrap:wrap }
/* == 04) TYPOGRAPHY & PROSE (FAQ markdown) ============================ */
.page--faq .card{
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow-md);
padding: 1.25rem 1.25rem 1.5rem;
}
.page--faq .prose{
color: var(--text);
line-height: 1.65;
font-size: 1.02rem;
}
/* Headings */
.page--faq .prose h1,
.page--faq .prose h2,
.page--faq .prose h3{
line-height: 1.25;
margin: 1.25em 0 .6em;
font-weight: 700;
letter-spacing: .2px;
}
.page--faq .prose h1{ font-size: clamp(1.6rem, 3vw, 2rem); }
.page--faq .prose h2{
font-size: clamp(1.25rem, 2.2vw, 1.5rem);
border-bottom: 1px solid var(--border);
padding-bottom: .35rem;
}
.page--faq .prose h3{ font-size: 1.1rem; color: var(--text); }
/* Spacing, lists, links */
.page--faq .prose p{ margin: .7em 0; }
.page--faq .prose ul,
.page--faq .prose ol{ margin: .6em 0 .9em 1.25em; }
.page--faq .prose li{ margin: .25em 0; }
.page--faq .prose ul > li{ list-style: disc; }
.page--faq .prose ol > li{ list-style: decimal; }
.page--faq .prose a{
color: var(--link); text-underline-offset: 3px; text-decoration-thickness: .08em;
}
.page--faq .prose a:hover{ color: var(--link-hover); }
/* Code, pre */
.page--faq .prose code{
background: var(--code-bg);
border: 1px solid var(--border);
padding: .2em .4em;
border-radius: 6px;
font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size: .92em;
}
.page--faq .prose pre{
background: var(--code-bg);
border: 1px solid var(--border);
padding: .9rem 1rem;
border-radius: 10px;
overflow: auto;
margin: 1rem 0;
}
.page--faq .prose pre code{ border:none; padding:0; background:transparent; }
/* Blockquotes, tables, hr, images, details/summary */
.page--faq .prose blockquote{
margin: 1rem 0; padding: .75rem 1rem;
border-left: 3px solid var(--accent);
background: linear-gradient(90deg, rgba(94,234,212,.07), transparent);
color: var(--text);
border-radius: 8px;
}
.page--faq .prose table{
width: 100%; border-collapse: collapse;
margin: 1rem 0; font-size: .95rem;
}
.page--faq .prose th, .page--faq .prose td{
border: 1px solid var(--border); padding: .6rem .7rem;
}
.page--faq .prose thead th{ background: var(--kbd-bg); text-align:left; }
.page--faq .prose hr{ border:0; border-top:1px solid var(--border); margin:1.25rem 0; }
.page--faq .prose img{
max-width:100%; height:auto; border-radius:10px; display:block; margin:.5rem 0;
border:1px solid var(--border);
}
.page--faq .prose details{
background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
border: 1px solid var(--border); border-radius: 10px;
padding: .5rem .75rem; margin: .75rem 0;
}
.page--faq .prose details[open]{ box-shadow: var(--shadow-md); }
.page--faq .prose summary{
cursor: pointer; font-weight: 600; color: var(--text); list-style: none;
}
.page--faq .prose summary::-webkit-details-marker { display:none; }
.page--faq .prose summary::after{
content: 'â–¾'; float:right; transition: transform .2s ease; color: var(--muted);
}
.page--faq .prose details[open] summary::after{ transform: rotate(180deg); }
.page--faq .prose details > *:not(summary){ margin-top: .5rem; color: var(--text); }
/* == 05) GENERIC UI ==================================================== */
.card{
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
padding: 12px;
margin-bottom:10px;
}
.card div{ margin-bottom:5px; }
.dfb-widget{ margin:20px 0; }
h1{ font-size:20px; margin:0; letter-spacing:.2px }
/* Chips (single definition for both footer + inline use) */
.chip{
display:inline-block;
padding:6px 10px; border-radius:999px;
background: var(--chip);
border:1px solid var(--chip-border);
color: var(--text);
font-size:12px; line-height:1; white-space:nowrap; opacity:.9;
}
.chip.link{ cursor:pointer; }
.chip.link:hover{ opacity:1; text-decoration:underline; }
.chip.sm{ padding:4px 8px; font-size:11px; }
/* Buttons (unified) */
.btn{
display:inline-flex; align-items:center; justify-content:center;
gap:.5rem; padding:.6rem .9rem; border-radius: var(--radius);
background:#1f2937; border:1px solid var(--border); color:var(--text);
font-weight:600; text-decoration:none; cursor:pointer;
transition: transform .04s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ background:#243042; border-color: color-mix(in srgb, var(--border) 60%, white 10%); }
.btn:active{ transform: translateY(1px); }
.btn:focus{ outline:2px solid var(--accent); outline-offset:2px; }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn--primary{
background: linear-gradient(180deg,
color-mix(in srgb, var(--accent) 55%, #000 45%),
color-mix(in srgb, var(--accent) 35%, #000 65%)
);
border-color: color-mix(in srgb, var(--accent) 60%, #000 40%);
color:#05111a;
}
button.primary {color:#FFF !important}
.btn--primary:hover{ filter: brightness(1.05); }
.btn--alt{ background: linear-gradient(180deg, #1a2434, #141d2b); border-color:#2a3446; }
.btn--danger{ background: linear-gradient(180deg, #b91c1c, #8a1313); border-color:#8a1313; color:#fff; }
.btn--ghost{ background:transparent; border:1px solid var(--border); }
/* Tabs & Toolbar */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.tab{
background:#0e1620; border:1px solid var(--border); color:var(--text);
padding:8px 12px; border-radius:10px; cursor:pointer; user-select:none;
}
.tab.active{ outline:2px solid var(--accent); background:#0b1220; }
input[type="search"], input[type="file"]{
background:#0b1220; color:var(--text); border:1px solid var(--border);
border-radius:8px; padding:8px 10px;
}
input[type="search"]{ min-width:200px; }
.count-badge{ opacity:.8; font-size:12px; margin-left:6px; }
/* == 06) STATUS TAGS & AVATARS ======================================== */
.tag{
display:inline-block; padding:2px 6px;
border-radius:999px; border:1px solid var(--chip-border);
background:var(--chip); font-size:11px; line-height:1.2; margin-right:6px;
color:var(--muted); white-space:nowrap;
}
.tag--ok{ color:#052; border-color:#0a4; background:#0c1a; }
.tag--warn{ color:#FFF; border-color:#a33; background:#1d0b0b; }
.tag--danger{ color:#621; border-color:#d55; background:#2a0d0d; }
.tag--note{ color:#345; border-color:#345; background:#0b1620; }
td.status{ white-space:nowrap; }
.user{ display:inline-flex; align-items:center; gap:8px; }
.avatar{ width:26px; height:26px; border-radius:50%; display:block; flex:0 0 26px; }
/* Set .avatar {display:none} when show_avatars=false */
/* == 07) FORMS (APP-WIDE, scoped to .dfb-container) =================== */
.dfb-container :where(input, select, textarea, button){ font:inherit; color:var(--text); }
.dfb-container .form-grid,
.dfb-container .form-row,
.dfb-container .field{
display:flex; flex-direction:column; gap:.35rem; color:var(--text);
}
.dfb-container .form-grid{ display:grid; gap:.85rem; }
.dfb-container .form-grid .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.dfb-container .form-grid .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem; }
.dfb-container .form-row{ display:flex; gap:.75rem; align-items:center; }
.dfb-container .form-actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:.5rem; }
.dfb-container :where(
input[type="text"], input[type="number"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="tel"], input[type="date"],
input[type="time"], input[type="datetime-local"], select, textarea
){
width:100%;
background: var(--panel);
border:1px solid var(--border);
color:var(--text);
border-radius: calc(var(--radius) - 2px);
padding:.65rem .75rem;
outline:none;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
box-shadow: var(--shadow-sm) inset;
}
.dfb-container textarea{ min-height:120px; resize:vertical; }
.dfb-container :where(input, select, textarea):hover{
border-color: color-mix(in srgb, var(--border) 60%, white 10%);
}
.dfb-container :where(input, select, textarea):focus{
border-color: var(--accent); box-shadow: var(--focus-ring);
}
.dfb-container :where(input, select, textarea):disabled{
opacity:.7; cursor:not-allowed; background: var(--panel-2);
}
/* Help & validation */
.dfb-container .help, .dfb-container .muted.tiny{
font-weight:400; color:var(--muted); font-size:.82rem; line-height:1.2;
}
.dfb-container .field-error,
.dfb-container :where(input, select, textarea)[aria-invalid="true"] + .field-error{
color:var(--danger); font-size:.82rem;
}
.dfb-container :where(input, select, textarea)[aria-invalid="true"]{
border-color:var(--danger);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent);
}
/* Number input tidy */
.dfb-container input[type="number"]{ -moz-appearance:textfield; }
.dfb-container input[type="number"]::-webkit-outer-spin-button,
.dfb-container input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
/* File input within .btn pattern */
.dfb-container .btn input[type="file"]{ display:none; }
/* Align forms inside cards */
.dfb-container .card .form-grid input,
.dfb-container .card .form-grid select,
.dfb-container .card .form-grid textarea{
box-shadow: inset 0 1px 0 rgba(255,255,255,.03), var(--shadow-sm);
}
/* == 08) WIDGETS ====================================================== */
/* Share widget — compact, secondary look */
.share.share--secondary .share-card {
border: 1px solid var(--line, #2a3140);
background: var(--panel, #141922);
}
.share-head { display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.share-tagline { margin:0; }
.share-tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0 .25rem; }
.share-tabs button {
appearance:none; border:1px solid var(--line,#2a3140); background:transparent;
color:inherit; padding:.28rem .5rem; border-radius:.5rem; cursor:pointer; font-weight:600; font-size:.9rem;
}
.share-tabs button[aria-selected="true"]{ background:var(--accent,#9aa3b2); color:#0b0e14; border-color:transparent; }
.share-text {
white-space: pre-line; /* keep line breaks, allow wrapping */
display: -webkit-box; /* clamp preview */
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin: .25rem 0 .35rem;
padding: .6rem .7rem;
border: 1px solid var(--line,#2a3140);
border-radius: .5rem;
background: rgba(255,255,255,.03);
font-size: .95rem;
}
.share-actions { display:flex; gap:.35rem; }
.iconbtn {
display:inline-flex; align-items:center; justify-content:center;
width:36px; height:36px; border:1px solid var(--line,#2a3140);
border-radius:.5rem; background:transparent; cursor:pointer;
}
.iconbtn .icon { width:18px; height:18px; }
.share-note { margin:.4rem 0 0; }
/* Share widget — dark theme */
.share.share--secondary .card {
background:#141922; /* panel */
color:#e5e7eb; /* text */
border:1px solid #2a3140;
}
.share-head h2 { color:#e5e7eb; }
.share-tagline.tiny.muted,
.share-note { color:#9aa3b2; }
/* Tabs */
.share-tabs { gap:.5rem; margin:.5rem 0 0; }
.share-tab {
appearance:none;
border:1px solid #2a3140;
background:#1b2230;
color:#cbd5e1;
padding:.35rem .6rem;
border-radius:.4rem;
cursor:pointer;
font-weight:600;
}
.share-tab.is-active {
background:#223047;
color:#ffffff;
border-color:#40506a;
}
/* Caption panel */
.share-text {
background:#0f1520;
color:#e5e7eb;
border:1px solid #2a3140;
border-radius:.5rem;
padding:.6rem .7rem;
white-space:pre-wrap;
}
/* Action buttons (icon PNGs) */
.share-actions { gap:.4rem; margin-top:.5rem; display:flex; align-items:center; }
.iconbtn {
appearance:none;
border:1px solid #334155;
background:#0f172a;
border-radius:.5rem;
width:36px; height:36px;
display:grid; place-items:center;
cursor:pointer;
}
.iconbtn:hover { background:#17223a; }
.iconbtn:focus-visible,
.share-tab:focus-visible {
outline:2px solid #60a5fa; outline-offset:2px;
}
/* If your PNG icons are dark, invert them for dark mode.
Prefer shipping light (white) PNGs; otherwise keep this: */
/* == 09) PAGINATION ==================================================== */
.pager{
display:flex; justify-content:center; margin:.75rem 0 1rem; font-size:14px;
}
.pager ul{
display:inline-flex; gap:6px; list-style:none; padding:0; margin:0;
}
.pager a.page, .pager .page{
display:inline-flex; align-items:center; justify-content:center;
min-width:34px; height:32px; padding:0 10px; border-radius:8px;
border:1px solid var(--border); background: var(--surface);
color: var(--text); text-decoration:none; line-height:1; user-select:none;
transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pager a.page:hover{ background: var(--surface-2); border-color: #3a4150; }
.pager a.page:focus{ outline:none; }
.pager a.page:focus-visible{
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
}
.pager a.page.current, .pager a.page[aria-current="page"]{
background: var(--accent); color:#0a0f14; border-color:transparent; cursor:default;
}
.pager a.prev, .pager a.next{ min-width:40px; }
.pager .gap{
display:inline-flex; align-items:center; justify-content:center;
min-width:28px; height:32px; padding:0 6px; color: var(--muted);
}
.pager .is-disabled, .pager [aria-disabled="true"]{ opacity:.5; pointer-events:none; }
.pager.pager--compact a.page{ height:28px; min-width:30px; padding:0 8px; }
.pager.pager--compact .gap{ height:28px; min-width:24px; }
@media (max-width:420px){
.pager{ justify-content:flex-start; overflow-x:auto; }
.pager ul{ padding:0 4px; }
}
.icon { width:18px; height:18px; display:block; filter: drop-shadow(0 0 0 transparent);
}
.icon-btn { display:inline-flex; align-items:center; gap:.45rem; }
/* == 10) DEV PANEL (OPTIONAL) ========================================= */
.dfb-container.dev .dev-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dfb-container.dev .dev-actions{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0; }
.dfb-container.dev .kpi{
display:flex; justify-content:space-between; padding:.5rem .6rem;
border:1px solid var(--border); border-radius:8px; background: var(--panel);
}
.dfb-container.dev .kpi-key{ font-size:.8rem; color:var(--muted); }
.dfb-container.dev .kpi-val.ok{ color: var(--accent-2); }
.dfb-container.dev .kpi-val.no{ color: var(--danger); }
/* == 11) FILTERS DROPDOWN ============================================= */
.filter-section + .filter-section{ margin-top:.65rem; }
.filter-panel .label{ font-weight:700; margin-bottom:.35rem; font-size:.9rem; }
.filter-panel label{ display:flex; align-items:center; gap:.5rem; font-weight:500; padding:.15rem 0; }
.filter-actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:.6rem; }
.filter-chips{
flex-wrap:wrap; gap:.35rem; margin-left:.5rem; }
.filter-chip{
display:inline-flex; align-items:center; gap:.35rem; font-size:.85rem; padding:.15rem .4rem;
border:1px solid var(--border); border-radius:999px;
}
.filter-chip button{ border:0; background:transparent; cursor:pointer; font-size:.9em; line-height:1; }
.filter-empty-hint{ margin:.35rem 0 0 .5rem; font-size:.85rem; color: var(--muted); }
.pulse{ animation: pulse 1.2s ease 1; }
@keyframes pulse{ 0%{ background: rgba(94,234,212,.25);} 100%{ background: transparent;} }
/* Hidden by default (no gap) */
.filter-chips{
display:none;
margin:0;
padding:0;
}
/* When active, turn it on */
.filter-chips.is-active{
display:inline-flex;
flex-wrap:wrap;
gap:.35rem;
margin-left:.5rem; /* keep your original spacing only when visible */
}
/* Bonus: also hide when truly empty (extra safety) */
.filter-chips:empty{ display:none; margin:0; padding:0; }
/* Chip styles */
.filter-chip{
display:inline-flex; align-items:center; gap:.35rem;
font-size:.85rem; padding:.15rem .4rem;
border:1px solid var(--border); border-radius:999px;
}
.filter-chip button{
border:0; background:transparent; cursor:pointer; font-size:.9em; line-height:1;
}
/* Mobile tightening */
@media (max-width:480px){
.filter-chip{ font-size:.8rem; padding:.12rem .34rem; }
}
/* == 12) UTILITIES / HELPERS ========================================== */
.paywall{
display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.paycopy{ flex:1 1 420px; min-width:280px; }
.paytitle{ margin:0 0 6px 0; font-size:18px; }
.pricepill{
display:inline-block; margin-top:6px; padding:6px 10px; border-radius:999px;
background:var(--chip); border:1px solid var(--chip-border); font-weight:600; font-size:13px;
}
.payactions{ display:flex; gap:10px; align-items:center; flex:0 0 auto; }
.upload-form{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.post-list{ list-style:none; margin:0; padding:0; }
.post-item{ padding:10px 0; border-bottom:1px solid var(--border); }
.post-link{ text-decoration:none; }
.post-link:hover{ text-decoration:underline; }
.prose p{ margin:12px 0; }
.prose h2{ margin:16px 0 8px; }
.pill{
display:block; border:1px solid var(--border); background:#12141a; color:#eaeef5;
border-radius:999px; padding:.45rem .75rem; text-align:center; cursor:pointer;
font:500 13px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}
.pill:hover,.pill:focus{ border-color:#6b7cff; outline:none; }
.switch{ position:relative; display:inline-block; width:42px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; cursor:pointer; inset:0; background:#2b303b; transition:.2s; border-radius:999px; }
.slider:before{ content:""; position:absolute; height:18px; width:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.switch input:checked + .slider{ background:#6b7cff; }
.switch input:checked + .slider:before{ transform:translateX(18px); }
textarea.mono{ font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; }
.footer-note{ color:var(--muted); font-size:12px; margin-top:8px; }
/* == 13) RESPONSIVE ==================================================== */
@media (max-width: 980px){
.dfb-container .form-grid .grid-3{ grid-template-columns:1fr 1fr; }
.dfb-container.dev .dev-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
.dfb-container .form-grid .grid-2,
.dfb-container .form-grid .grid-3{ grid-template-columns:1fr; }
.dfb-container .form-row{ flex-direction:column; align-items:stretch; }
.payactions{ width:100%; }
.payactions form{ flex:1 1 auto; }
.btn{ width:100%; }
}
/* == 14) REDUCED MOTION =============================================== */
@media (prefers-reduced-motion: reduce){
.share-composer .switch,
.share-composer .switch::after,
#viral-share .switch .slider,
#viral-share .switch .slider::before{ transition:none; }
}
/* Loyalty widget accent — bright blue */
#loyal-card{
margin:.75rem 0;
background:
linear-gradient(180deg, rgba(96,165,250,.10), rgba(96,165,250,.06));
border:1px solid rgba(96,165,250,.45);
box-shadow:0 8px 24px rgba(96,165,250,.20);
border-radius:14px;
}
/* Highlight banner inside the widget */
#loyal-card .callout--highlight{
background:rgba(96,165,250,.12);
border:1px solid rgba(96,165,250,.35);
color:#e5e7eb; /* keep readable on dark */
}
.callout--highlight {
margin:.5rem 0 1rem;padding:.6rem .8rem;border:1px solid var(--border,#222630);border-radius:10px;background:linear-gradient(90deg, rgba(94,234,212,.07), transparent);
}
/* Chip row (moved from inline) */
#loyal-card .chip-cloud{
margin-top:.5rem;
display:flex;
flex-wrap:wrap;
gap:.4rem;
}
/* Chips */
#loyal-card .loyal-tenure{
margin-left:.35rem;
font-size:12px;
color:#93c5fd; /* light-blue text on dark */
}
#loyal-card .loyal-diamond{
margin-left:.25rem;
display:inline-block;
line-height:1;
}
/* ==== Hotfix: force dark UI for unscoped controls & legacy aliases ==== */
/* Hint UA to use dark widgets */
:root { color-scheme: dark; }
/* Any plain buttons/inputs default to themed chrome */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="search"],
input[type="text"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="tel"],
select,
textarea {
background: var(--panel);
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
}
/* Make plain buttons look intentional */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
padding: .6rem .9rem;
cursor: pointer;
}
/* Hover / focus chrome */
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
select:hover,
textarea:hover,
input:hover {
border-color: color-mix(in srgb, var(--border) 60%, white 10%);
}
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
/* Autofill (Chrome/WebKit) — prevent white background */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: var(--text);
transition: background-color 9999s ease-in-out 0s;
box-shadow: 0 0 0px 1000px var(--panel) inset;
}
/* make sure nothing kills the file input */
input[type="file"] { pointer-events: auto !important; }
label[for="export"] { cursor: pointer; }
/* Legacy class aliases -> map to the new button system */
button.primary,
.btn.primary,
.primary {
background: linear-gradient(180deg,
color-mix(in srgb, var(--accent) 55%, #000 45%),
color-mix(in srgb, var(--accent) 35%, #000 65%)
) !important;
border-color: color-mix(in srgb, var(--accent) 60%, #000 40%) !important;
color: #FFF !important;
border-radius: var(--radius);
padding: .6rem .9rem;
}
/* If you used .danger/.alt in older markup */
button.danger, .btn.danger, .danger {
background: linear-gradient(180deg, #b91c1c, #8a1313) !important;
border-color: #8a1313 !important;
color: #fff !important;
}
button.alt, .btn.alt, .alt {
background: linear-gradient(180deg, #1a2434, #141d2b) !important;
border-color: #2a3446 !important;
color: var(--text) !important;
}
/* Clipboard/copy “handles†that may render white if they're plain buttons */
.copy, .copy-btn, [data-action="copy"] {
background: #141922;
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
padding: .45rem .6rem;
}
/* Inputs inside #viral-share that might not use .share-text class */
#viral-share input[type="text"],
#viral-share input[type="search"],
#viral-share input[type="url"] {
background: var(--input-bg, #12141a);
color: var(--text);
border: 1px solid var(--input-border, #2a2f3a);
border-radius: 8px;
padding: .5rem .65rem;
}
.callout { padding:.8rem 1rem; border-radius:10px; margin:0 0 1rem; }
.callout--info { background:#eef4ff; color:#245; }
.callout .tiny { margin-left:.5rem; text-decoration:underline; }
.callout .muted { display:block; margin-top:.25rem; opacity:.8; }
/* Utility */
.u-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Snapshot CTA */
.snapshot-hero { margin-top:1rem; }
.snapshot-hero__body { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.snapshot-hero__buttons { display:flex; gap:.5rem; }
.snapshot-hero__footer { margin-top:.5rem; text-align:right; }
.link.tiny { background:none; border:none; color:var(--muted); cursor:pointer; text-decoration:underline; }
@media (max-width:720px){
.snapshot-hero__body { flex-direction:column; align-items:flex-start; }
}
/* Quick actions */
.snap-quick.card--inline { margin:.75rem 0; padding:.5rem .75rem; border:1px solid var(--line); border-radius:8px; }
.snap-quick__row { display:flex; align-items:center; gap:.75rem; justify-content:space-between; }
.snap-quick__actions { display:flex; gap:.5rem; }
.btn.btn--sm { padding:.375rem .6rem; font-size:.9rem; }
.tab-icon{display:inline-block;margin-right:.4rem;font-size:1.1rem;line-height:1}
.tabs__tab .tabs__label{vertical-align:middle}
/* card background occasionally “cuts off†if children float/overflow:
ensure the card contains its children */
.card.card--results::after { content: ""; display: table; clear: both; }
/* Tabs */
.tabs { display: flex; gap: .5rem; border-bottom: 1px solid var(--line); }
.tabs__tab {
appearance: none; background: none; border: 0; padding: .5rem .75rem;
font: inherit; cursor: pointer; border-bottom: 2px solid transparent;
}
.tabs__tab.is-active { border-color: var(--accent); color: var(--accent); }
.count-badge { opacity: .7; margin-left: .25rem; font-size: .9em; }
/* Filter */
.filter-wrap { margin-left: auto; position: relative; }
.filter-panel {
position: absolute; right: 0; top: 110%;
min-width: 260px; padding: .75rem; border: 1px solid var(--line);
border-radius: 8px; background: var(--surface); box-shadow: var(--elev-1);
}
.filter-panel.is-hidden { display: none; }
.filter-section { margin-bottom: .75rem; }
.filter-section .label { font-weight: 600; margin-bottom: .25rem; }
/* Notes */
.footer-note { color: var(--muted); font-size: .9rem; margin-top: .5rem; }
/* Optional: make the page background follow long tables (if using gradient on body) */
.page-shell { position: relative; }
.tabs__panel.hidden { display: none !important; }
.tabs__panel { display: block; } /* base visible; JS hides as needed */
.hidden, .is-hidden { display: none !important; }
button.primary,
.btn.primary,
.primary {
background: linear-gradient(180deg,
color-mix(in srgb, var(--accent) 55%, #000 45%),
color-mix(in srgb, var(--accent) 35%, #000 65%)
) !important;
border-color: color-mix(in srgb, var(--accent) 60%, #000 40%) !important;
/* FIX: make label readable on the blue gradient */
color: #fff !important;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
border-radius: var(--radius);
padding: .6rem .9rem;
}
@media (max-width: 640px){
/* Filters: button full-width; panel fills screen edge-to-edge */
.filter-wrap{ width:100%; margin-left:0; }
#filterToggle{ width:100%; }
#filterPanel{
position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px;
max-height: 60vh; overflow:auto; padding: .9rem;
border-radius: 12px; box-shadow: var(--shadow-md);
}
/* Row hover isn’t useful on touch; keep subtle */
.results-table tbody tr:hover{ background: var(--card); }
/* Pager: horizontal scroll chips */
.pager{ justify-content:flex-start; overflow-x:auto; padding:0 .25rem; }
.pager ul{ gap:4px; }
.pager a.page{ height:30px; min-width:30px; padding:0 .5rem; border-radius:999px; }
}
/* Small phones: tighten vertical rhythm */
@media (max-width: 380px){
.tabs__tab{ padding:.55rem .9rem; }
}
/
/* Base spacing for status icons everywhere */
td.status,
.status { /* td has class="status" in your tables; .status covers other places if used */
display: inline-flex;
align-items: center;
gap: 6px; /* spacing between icons */
flex-wrap: wrap; /* allow wrap when space is tight */
}
/* Make each icon a tidy square */
.status .ico {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
min-height: 22px;
line-height: 1; /* keeps emojis centered */
}
/* Slight group spacing after "relationship" icons on wider screens */
.status .ico.ico-loyalty,
.status .ico.ico-nfb,
.status .ico.supporter,
.status .ico[title="Mutual"] {
/* no visual change, just mark them for the break rules below */
}
/* Each status row = one line, right-aligned on mobile */
@media (max-width: 640px){
td.status, .status{
display:block;
text-align:right;
margin-left:auto; /* hug the right edge in grid cards */
max-width:48vw; /* avoid crushing username */
}
/* Groups are full width rows that stack */
.status .status-g, td.status .status-g{
display:block; /* stack groups */
width:100%;
margin:2px 0;
}
/* Normalize emoji/char baseline so nothing “hangs†*/
.status .status-g .ico > [aria-hidden="true"]{
display:inline-flex;
width:18px; height:18px;
align-items:center; justify-content:center;
line-height:1;
}
}
/* Mobile: full-bleed top sheet that always shows the first options */
@media (max-width: 640px){
#filterPanel {
position: fixed !important;
left: 12px; right: 12px;
top: max(12px, env(safe-area-inset-top));
bottom: auto;
max-height: calc(100vh - max(12px, env(safe-area-inset-top)) - 12px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: .9rem;
border-radius: 12px;
background: var(--panel);
border: 1px solid var(--border);
z-index: 9999; /* sit above tables/toolbars */
}
/* optional: keep the group label visible as you scroll */
#filterPanel .filter-section .label{
position: sticky; top: 0;
background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--panel) 85%, transparent));
padding: .25rem 0;
z-index: 1;
}
}
/* Analyze button: full-width on mobile */
@media (max-width: 640px){
.upload-form{
display: grid; /* stack file input + button cleanly */
grid-template-columns: 1fr;
gap: .6rem;
}
.upload-form .primary{
display: inline-flex; /* center the text */
justify-content: center;
align-items: center;
width: 100%;
min-height: 44px; /* comfy touch target */
}
/* Make the file input stretch too (optional) */
#export{ width:100%; }
}
.howto-video { margin-top: 16px; }
.video-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* modern browsers */
background: #000;
border-radius: 10px;
overflow: hidden;
}
/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
.video-wrap::before { content:""; display:block; padding-top:56.25%; }
.video-wrap > iframe { position:absolute; inset:0; width:100%; height:100%; }
}
.video-wrap > iframe { width:100%; height:100%; border:0; display:block; }
.video-cta { display:flex; gap:12px; align-items:center; margin-top:10px; flex-wrap:wrap; }
.video-cta .btn.btn-primary {
display:inline-block; padding:10px 14px; border-radius:8px;
background:#111; color:#fff; text-decoration:none; font-weight:600;
}
.video-cta .btn.btn-primary:hover { opacity:.9; }
.video-cta .text-link { opacity:.8; text-decoration:none; }
.video-cta .text-link:hover { text-decoration:underline; opacity:1; }
/* Force dark palette regardless of OS theme */
@media (prefers-color-scheme: light){
:root{
--bg:#0f1521;
--panel:#111827;
--panel-2:#0d1420;
--card:#111318;
--surface:#0e1116;
--surface-2:#151922;
--text:#e5e7eb;
--muted:#9aa0aa;
--link:#7aa2ff;
--link-hover:#9bb8ff;
--accent:#60a5fa;
--accent-2:#34d399;
--danger:#ef4444;
--warn:#f59e0b;
--border:#222630;
--code-bg:#0f131a;
--kbd-bg:#171b22;
--chip:#101826;
--chip-border:#233041;
}
}
/* === Socials (Footer) =============================================== */
.site-foot .socials {
display:flex; flex-wrap:wrap; gap:.6rem 1rem; margin: .75rem 0 0;
list-style:none; padding:0;
}
.site-foot .social-link {
--icon: var(--muted);
--icon-hover: var(--link);
--icon-active: var(--link-hover);
display:inline-flex; align-items:center; gap:.5rem;
color: var(--muted); text-decoration:none; line-height:1;
border:1px solid var(--border); border-radius:999px; padding:.4rem .75rem;
background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.04));
transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.site-foot .social-link:hover { color: var(--link); border-color: #2a3140; }
.site-foot .social-link:active { color: var(--link-hover); }
.site-foot .social-link:focus-visible { outline:2px solid var(--link); outline-offset:2px; }
.site-foot .social-link .handle {
font-size: .85rem; white-space:nowrap;
}
/* Icon base — uses CSS mask so it inherits currentColor */
.site-foot .icon {
width: 18px; height: 18px; display:inline-block; flex:0 0 18px;
background: currentColor;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
-webkit-mask-size:contain; mask-size:contain;
}
/* Default color behavior */
.site-foot .social-link { color: var(--muted); }
.site-foot .social-link:hover { color: var(--link); }
.site-foot .social-link:active { color: var(--link-hover); }
/* === Icon glyphs (monochrome, brand-adjacent) ======================= */
/* Instagram */
.site-foot .icon.ig {
-webkit-mask-image: url('data:image/svg+xml;utf8,\
');
mask-image: url('data:image/svg+xml;utf8,\
');
}
/* TikTok (simplified note) */
.site-foot .icon.tt {
-webkit-mask-image: url('data:image/svg+xml;utf8,\
');
mask-image: url('data:image/svg+xml;utf8,\
');
}
/* YouTube (rounded rect + play) */
.site-foot .icon.yt {
-webkit-mask-image: url('data:image/svg+xml;utf8,\
');
mask-image: url('data:image/svg+xml;utf8,\
');
}
/* X (diagonal cross) */
.site-foot .icon.x {
-webkit-mask-image: url('data:image/svg+xml;utf8,\
');
mask-image: url('data:image/svg+xml;utf8,\
');
}
/* Facebook (circular "f") */
.site-foot .icon.fb {
-webkit-mask-image: url('data:image/svg+xml;utf8,\
');
mask-image: url('data:image/svg+xml;utf8,\
');
}
/* Shopify (simple shopping bag) */
.site-foot .icon.shopify {
-webkit-mask-image: url('data:image/svg+xml;utf8,\
');
mask-image: url('data:image/svg+xml;utf8,\
');
}
/* Compact handles on very small screens */
@media (max-width: 420px) {
.site-foot .social-link .handle { display:none; }
.site-foot .social-link { padding:.45rem; }
}/* === Inline, centered promo code bar (condensed, full-width) === */
/* Accessibility utility (unchanged) */
.sr-only{
position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* micro helper (optional) */
.micro { font-size: .85rem; line-height: 1.35; }
/* center + “micro†by default on the teaser */
.teaser-footer{
display:flex; flex-wrap:wrap; gap:.6rem .8rem;
align-items:center; justify-content:center; /* center row */
text-align:center; /* center text */
margin:.6rem 0; padding:.65rem .75rem;
border:1px dashed var(--border);
background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
border-radius:10px;
font-size:.85rem; line-height:1.35; /* micro */
}
.teaser-main{
display:flex; flex-wrap:wrap; gap:.45rem .6rem;
align-items:center; justify-content:center; /* center items */
}
.teaser-metric{ color:var(--muted); }
/* keep blur + list styles as-is */
.teaser-loyal__title{ font-weight:600; font-size:.9rem; margin-bottom:.25rem; }
.teaser-loyal__list{ list-style:none; margin:0; padding:0; display:flex; gap:.5rem 1rem; flex-wrap:wrap; }
.blurred{ filter: blur(3px); }
/* fix the truncated media query + center on mobile too */
@media (max-width:640px){
.teaser-footer{ flex-direction:column; align-items:center; }
.teaser-main{ justify-content:center; text-align:center; }
}
.screenshot img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.screenshot figcaption {
text-align: center;
font-size: 0.9rem;
color: #666;
margin-top: 4px;
}
/* ---- Responsive images inside blog content ---- */
.prose img,
.blog-post img,
.dfb-container .prose img,
.dfb-container .blog img,
.prose figure img {
display: block;
max-width: 100%;
height: auto;
margin: 12px auto;
border-radius: 8px;
box-sizing: border-box;
}
/* If you keep ![]()
inside , prevent inline weirdness */
.prose p > img {
display: block;
}
/* Optional: cap huge images on wide desktop for nicer line length */
@media (min-width: 900px) {
.prose img { max-width: 720px; }
}
/* Safety net: if any ancestor is causing horizontal scroll, clip it */
.prose,
.blog-post,
.dfb-container .prose {
overflow-x: hidden;
}
/* If your base CSS sets images to fixed widths anywhere, nuke it */
.prose img,
.blog-post img {
width: auto !important;
max-width: 100% !important;
}
/* Optional figure style */
.prose figure { margin: 16px 0; }
.prose figcaption {
text-align: center;
font-size: 0.9rem;
color: #666;
margin-top: 4px;
}
/* Processing state (green highlight) */
.btn.is-processing {
background: #16a34a; /* green-600-ish */
border-color: #15803d;
color: #fff;
cursor: progress;
}
/* Tiny spinner */
.btn .btn-spinner {
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.5em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: btn-spin 0.8s linear infinite;
vertical-align: -0.125em;
color:#FFF;
}
@keyframes dfb-spin { to { transform: rotate(360deg); } }
@keyframes btn-spin {
to { transform: rotate(360deg); }
}
#export_filename{font-size:0.90em;text-align:center;}
/* Container + card use your palette */
.dfb-container { color: var(--text); }
.dfb-container .card {
background: var(--card);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 1.25rem;
}
/* Links inherit your brand colors */
.dfb-container a { color: var(--link); }
.dfb-container a:hover { color: var(--link-hover); }
/* Form spacing & structure */
.dfb-form .field { margin-bottom: 1rem; }
.dfb-form .field-label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text);
}
/* File row layout */
.dfb-form .file-row {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Full-width, dark-UI file input */
.dfb-form input[type="file"] {
display: block;
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: 0.5rem;
background: var(--surface);
color: var(--text);
font-size: 1rem;
line-height: 1.25rem;
}
/* The native "Choose file" button in dark styles */
.dfb-form input[type="file"]::-webkit-file-upload-button,
.dfb-form input[type="file"]::file-selector-button {
margin-right: 0.75rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--chip-border);
border-radius: 0.375rem;
background: var(--chip);
color: var(--text);
cursor: pointer;
}
/* Focus ring uses your tokenized ring */
.dfb-form input[type="file"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: var(--focus-ring);
}
/* Filename + helper text */
.dfb-form .file-name,
.dfb-form .field-hint {
font-size: 0.875rem;
color: var(--muted);
}
/* Full-width primary button */
.btn-block { display: inline-block; width: 100%; }
/* Primary button in your palette */
.btn.btn-primary {
background: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 70%, black);
color: #fff;
border-radius: 0.5rem;
padding: 0.75rem 1rem;
font-weight: 600;
}
.btn.btn-primary:hover {
background: color-mix(in srgb, var(--accent) 85%, black);
border-color: color-mix(in srgb, var(--accent) 80%, black);
}
.btn.btn-primary:focus {
outline: none;
box-shadow: var(--focus-ring);
}
/* Space so input & button never touch */
.dfb-form .btn { margin-top: 0.75rem; }
/* Processing state uses your green accent-2 */
.btn.is-processing {
background: var(--accent-2);
border-color: color-mix(in srgb, var(--accent-2) 70%, black);
color: #03130c; /* readable on green; tweak if you want pure white */
cursor: progress;
}
/* Spinner inherits currentColor */
.btn .btn-spinner {
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.5em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: btn-spin 0.8s linear infinite;
vertical-align: -0.125em;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* Mobile tighten */
@media (min-width: 640px) {
.dfb-form .file-row { gap: 0.375rem; }
.dfb-form .btn { margin-top: 0.75rem; }
}
/* Paywall layout */
.card.paywall { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.paycopy { margin-bottom: 1rem; }
.paytitle { margin: 0 0 .25rem; }
.pricepill {
display: inline-block;
margin-top: .5rem;
padding: .375rem .625rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: .5rem;
font-weight: 600;
}
/* Value stack */
.benefits { margin: .5rem 0 .25rem; padding-left: 1.25rem; }
.benefits li { margin: .25rem 0; }
/* Methods + assurances */
.methods { margin-top: .25rem; }
.assure { margin-top: .5rem; }
/* Actions: keep buttons side-by-side; stack on small screens */
.payactions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .5rem;
align-items: stretch;
margin-top: .75rem;
}
.payactions .btn { width: 100%; }
@media (max-width: 420px) {
.payactions { grid-template-columns: 1fr; }
}
/* Buttons (example variants hooking into your palette) */
.btn.btn--primary {
background: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 70%, black);
color: #fff;
border-radius: .5rem;
padding: .75rem 1rem;
font-weight: 700;
}
.btn.btn--primary:hover {
background: color-mix(in srgb, var(--accent) 85%, black);
border-color: color-mix(in srgb, var(--accent) 80%, black);
}
.btn.btn--alt {
background: var(--chip);
border: 1px solid var(--chip-border);
color: var(--text);
border-radius: .5rem;
padding: .75rem 1rem;
font-weight: 700;
}
.btn.btn--alt:hover {
background: var(--surface-2);
border-color: var(--border);
}
/* XS button for promo apply */
.btn.btn--xs { padding: .5rem .75rem; border-radius: .375rem; }
/* Processing state (hooks into your JS helper) */
.payform[data-processing] .btn.is-processing { background: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 70%, black); }
/* Mini card container */
.snapshot-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 0.875rem 1rem;
}
/* Header */
.snapshot-card__head h3 {
margin: 0 0 .25rem;
font-size: 1rem;
line-height: 1.25rem;
}
/* Body */
.snapshot-card__body { margin-top: .5rem; }
/* Actions layout: stack on mobile, two columns on wider screens */
.snapshot-card__actions {
display: grid;
grid-template-columns: 1fr;
gap: .75rem;
}
@media (min-width: 520px) {
.snapshot-card__actions { grid-template-columns: 1fr 1fr; }
}
/* Forms inside the card */
.snapshot-card__form { display: flex; flex-direction: column; gap: .375rem; }
/* Button variants (use your palette) */
.btn.btn--primary {
background: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 70%, black);
color: #fff;
border-radius: .5rem;
padding: .625rem .875rem;
font-weight: 700;
}
.btn.btn--primary:hover {
background: color-mix(in srgb, var(--accent) 85%, black);
border-color: color-mix(in srgb, var(--accent) 80%, black);
}
.btn.btn--alt {
background: var(--chip);
border: 1px solid var(--chip-border);
color: var(--text);
border-radius: .5rem;
padding: .625rem .875rem;
font-weight: 700;
}
.btn.btn--alt:hover {
background: var(--surface-2);
border-color: var(--border);
}
/* Help lines */
.snapshot-card .help { margin: 0; }
/* Hidden input utility already present but ensure it's safe */
.u-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; border: 0; padding: 0;
clip: rect(0 0 0 0); overflow: hidden;
}
/* Processing state (hooks into your existing JS) */
.btn.is-processing {
background: var(--accent-2);
border-color: color-mix(in srgb, var(--accent-2) 70%, black);
color: #03130c; /* change to #fff if you prefer */
cursor: progress;
}
.btn .btn-spinner {
display: inline-block;
width: 1em; height: 1em;
margin-left: 0.5em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: btn-spin 0.8s linear infinite;
vertical-align: -0.125em;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
#loyal-card .loyal-actions { display: flex; gap: .5rem; }
.chip-cloud.is-locked .chip {
pointer-events: none;
opacity: .7;
border-style: dashed;
}
/* If you’d rather blur the handles: */
/* .chip-cloud.is-locked .chip { filter: blur(2px); } */
/* Base card tweak (optional, keeps consistency) */
.loyal-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
/* Header actions (paid view) */
.loyal-card__head .loyal-actions {
display: inline-flex;
gap: .5rem;
align-items: center;
}
/* Unpaid teaser: CTA row */
.loyal-cta {
display: grid;
grid-template-columns: 1fr;
gap: .5rem;
margin-top: .5rem;
}
/* Desktop: side-by-side and aligned */
@media (min-width: 640px) {
.loyal-cta {
grid-template-columns: 1fr 1fr;
align-items: stretch; /* equal heights */
}
}
/* Ensure both items behave identically (form + ) */
.loyal-cta__item { display: block; }
/* Buttons: unify sizing/alignment and allow full-width */
.btn { display: inline-flex; align-items: center; justify-content: center; }
.btn--block { display: inline-flex; width: 100%; }
/* Mobile-only sticky CTA */
#sticky-cta {
position: sticky; bottom: .5rem; display: none;
margin: .75rem auto ; width: 100%;
text-align: center; z-index: 20;
}
@media (max-width: 640px) { #sticky-cta { display: inline-block; } }
.snapshot-hero {
margin:20px 0;
}
/* Global anchor offset so in-page links don’t hide under the header */
html{ scroll-padding-top: calc(var(--site-head-h) + 12px); }
/* Base header keeps a fixed height; nav won’t push it on mobile */
.site-head{
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 12px 16px; background:#0c141d; border-bottom:1px solid var(--border);
min-height: 56px; /* stable height on mobile */
}
.site-nav { display:flex; gap:.75rem; align-items:center; }
.site-nav a { padding:.25rem .35rem; }
/* “Unlock†can be styled as a pill without changing layout */
.site-nav .unlock-link{
border:1px solid var(--chip-border);
background: var(--chip);
border-radius: 999px;
padding:.35rem .6rem;
font-weight: 600;
}
/* Hamburger button */
.nav-toggle{
display:none; /* hidden on desktop */
width:40px; height:40px; border:1px solid var(--chip-border);
border-radius:.6rem; background:var(--chip); color:var(--text);
align-items:center; justify-content:center;
}
.nav-toggle .icon{ width:20px; height:20px; }
/* ===== Mobile: off-canvas/top-sheet nav ===== */
@media (max-width:640px){
.nav-toggle{ display:inline-flex; }
/* Keep brand left, toggle right; hide inline nav */
.site-nav{
position: fixed;
left: 12px; right: 12px;
top: calc(env(safe-area-inset-top, 0px) + var(--site-head-h));
/* panel look */
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow-md);
padding: .6rem;
display: grid; gap:.25rem;
/* hidden by default */
opacity: 0; transform: translateY(-8px);
pointer-events: none;
transition: opacity .15s ease, transform .15s ease;
z-index: 1000;
}
.site-nav.is-open{
opacity: 1; transform: translateY(6px);
pointer-events: auto;
}
.site-nav a{
display:block;
padding:.55rem .6rem;
border-radius:8px;
}
.site-nav a:active{ background: var(--surface-2); }
}
/* Optional desktop stabilization */
@media (min-width:641px){
.unlock-placeholder { visibility: hidden; }
}
/* Make the placeholder occupy space on desktop only */
@media (min-width: 641px){
.site-nav .unlock-placeholder { visibility: hidden; }
}
@media (max-width: 640px){
.site-nav .unlock-placeholder { display: none; }
}
/* Optional: emphasize Unlock a bit */
.site-nav .unlock-link{
border:1px solid var(--chip-border);
background: var(--chip);
border-radius: 999px;
padding:.35rem .6rem;
font-weight: 600;
}
/* Show detail on desktop, keep one-word on mobile */
.hide-sm { display: inline; }
@media (max-width:640px){ .hide-sm { display: none; } }
/* CTA polish */
.site-nav .unlock-link{
border:1px solid var(--chip-border);
background: var(--chip);
border-radius: 999px;
padding:.35rem .6rem;
font-weight: 700;
}
@media (min-width:641px){
/* reserve space when placeholder is rendered */
.site-nav .unlock-placeholder { visibility: hidden; }
}
@media (max-width:640px){
/* placeholders don’t need to show in mobile menu */
.site-nav .unlock-placeholder { display: none; }
}
/* === MOBILE GUTTERS: 3px + full-width rows (Android friendly) === */
/* kill UA body margin that can add mystery side space */
html, body { margin: 0; }
/* clamp the mobile pad var small */
:root { --pad-x-mobile: 5px; }
@media (max-width:640px){
/* 1) global gutters */
.dfb-container,
main.container,
.site-head,
.toolbar--compact {
padding-left: max(var(--pad-x-mobile), env(safe-area-inset-left)) !important;
padding-right: max(var(--pad-x-mobile), env(safe-area-inset-right)) !important;
}
/* 2) any panels that were using hard 12px in earlier rules */
#filterPanel,
.site-nav {
left: max(var(--pad-x-mobile), env(safe-area-inset-left)) !important;
right: max(var(--pad-x-mobile), env(safe-area-inset-right)) !important;
}
/* 3) results card: remove extra inner padding so rows can breathe edge-to-edge */
.card--results { padding-left: 8px !important; padding-right: 8px !important; }
/* let the table content reach the card edges */
.card--results .table-wrap{
margin-left: calc(-1 * var(--pad-x-mobile)) !important;
margin-right: calc(-1 * var(--pad-x-mobile)) !important;
border: 0 !important;
}
}
/* ===== Why Use — layout polish ===== */
#why-use {
/* optional: helps separate this card from neighbors */
scroll-margin-top: 80px;
}
/* trust badges (No login / signup / risk) */
#why-use .trust-badges {
display: flex;
flex-wrap: wrap;
gap: .5rem .6rem; /* row / column gap */
margin: .75rem 0 1rem;
}
#why-use .badge {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .35rem .6rem;
border-radius: 999px;
font-size: .92rem;
font-weight: 600;
line-height: 1;
background: var(--chip-bg, rgba(16,185,129,.15)); /* soft green */
color: var(--chip-fg, #10b981); /* emerald */
border: 1px solid rgba(16,185,129,.35);
white-space: nowrap;
}
/* callout spacing tweak */
#why-use .callout {
margin-top: .5rem;
margin-bottom: 1.25rem;
}
/* list readability */
#why-use .post-list {
list-style: disc;
padding-left: 1.25rem; /* keep bullets aligned */
margin: 0; /* reset inconsistent UA styles */
}
#why-use .post-list li {
margin: 0 0 1rem; /* space each bullet */
line-height: 1.6; /* easier reading */
}
#why-use .post-list li:last-child {
margin-bottom: 0;
}
/* optional: emphasize bold lead-in and wrap better on mobile */
#why-use .post-list li > strong {
font-weight: 700;
}
/* mobile niceties */
@media (max-width: 640px) {
#why-use .badge {
font-size: .9rem;
padding: .32rem .55rem;
}
#why-use .post-list {
padding-left: 1.1rem;
}
#why-use .post-list li {
margin-bottom: .9rem;
}
}
@media (min-width: 640px) {
.dfb-form {
max-width: 520px; /* or whatever fits your layout */
}
}
.aff-cards .aff-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.aff-card { background: var(--card); border-radius: 10px; overflow: hidden; border:1px solid #1f2937; }
.aff-card__img img { display:block; width:100%; height:auto; }
.aff-card__body { padding:12px; }
.aff-card__title { font-weight:600; line-height:1.2; display:block; margin-bottom:6px; }
.badge-row .badge { display:inline-block; font-size:12px; background:#1f2937; padding:2px 8px; border-radius:999px; margin-right:6px; }
.aff-inline-card { display:flex; gap:12px; border:1px dashed #334155; padding:12px; border-radius:10px; background: var(--panel-2); margin:12px 0; }
.aff-inline-card__media img { width:140px; max-width:40vw; border-radius:8px; }
.aff-inline-card__body .aff-title { font-weight:600; display:block; margin-bottom:6px; }
/* Affiliate cards */
.aff-cards { padding: 14px; }
.aff-cards .section-head { margin-bottom: 10px; }
.aff-cards .section-head .kicker { text-transform: uppercase; letter-spacing: .04em; }
.aff-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
/* Each card */
.aff-card {
background: var(--card);
border: 1px solid #1f2937;
border-radius: 10px;
overflow: hidden;
}
/* Media block with controlled aspect on mobile */
.aff-thumb {
width: 100%;
aspect-ratio: 4 / 3; /* keeps images from towering */
display: grid;
place-items: center;
background: var(--panel-2);
}
.aff-thumb img {
max-width: 90%;
max-height: 90%;
width: auto;
height: auto;
object-fit: contain;
}
/* Body */
.aff-card__body { padding: 10px 12px 12px; }
.aff-card__title {
font-weight: 600;
line-height: 1.25;
display: block;
margin-bottom: 6px;
}
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-row .badge {
font-size: 12px;
background: #1f2937;
padding: 2px 8px;
border-radius: 999px;
}
.aff-cards--compact .aff-thumb { aspect-ratio: 5 / 4; }
.aff-cards--compact .aff-card__title { font-size: 0.95rem; }
.aff-cards .section-head { margin-bottom: 10px; }
.aff-cards .section-head .section-intro {
margin: 6px 0 0;
line-height: 1.5;
}
.aff-cards .section-head .text-link {
white-space: nowrap;
margin-left: 6px;
}
.aff-cards .kicker {
text-transform: none; /* keep conversational */
letter-spacing: .02em;
opacity: .8;
}
.aff-cards .section-head {
border-left: 3px solid #334155; /* subtle “note†vibe */
padding-left: 10px;
margin-bottom: 10px;
}
/* High-contrast CTA chip */
.cta-chip{
display:inline-flex; align-items:center; gap:6px;
padding:6px 12px; border-radius:999px;
/* solid accent w/ subtle sheen for max contrast */
background: var(--accent, #3b82f6);
color: #ffffff !important; /* force readable text */
font-weight: 700;
text-decoration: none;
border: 1px solid rgba(255,255,255,.18);
box-shadow: 0 2px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
white-space: nowrap;
}
.cta-chip .arrow{ transition: transform .15s ease; }
.cta-chip:hover{ transform: translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.35); }
.cta-chip:hover .arrow{ transform: translateX(2px); }
.cta-chip:active{ transform: translateY(0); box-shadow:0 3px 12px rgba(0,0,0,.3); }
/* ensure it never inherits "muted" coloring */
.aff-cards .section-head .cta-chip,
.section-intro .cta-chip{
filter: none; opacity: 1; color: #ffffff !important;
}
/* tidy spacing in the intro */
.aff-cards .section-head .section-intro{ margin:8px 0 0; line-height:1.5; }
.aff-cards .section-head .cta-chip{ margin-left:8px; }
@media (max-width:520px){
.aff-cards .section-head .cta-chip{ display:inline-flex; margin-left:0; margin-top:8px; }
}
/* accessibility: high-contrast users */
@media (prefers-contrast: more) {
.cta-chip{
box-shadow: none;
border-color: #ffffff;
}
}
/* Windows forced-colors mode */
@media (forced-colors: active) {
.cta-chip { border: 1px solid CanvasText; color: ButtonText !important; background: ButtonFace; }
}
/* Larger screens: grid of tiles, slightly taller thumbs */
@media (min-width: 600px) {
.aff-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.aff-thumb { aspect-ratio: 16 / 10; }
}
/* Desktop polish */
@media (min-width: 980px) {
.aff-grid { gap: 14px; }
.aff-card__body { padding: 12px 14px 14px; }
}
/* keep affiliate blocks breathable between regular cards */
.aff-cards { margin: 10px 0; }
@media (min-width: 720px){
.aff-cards { margin: 12px 0; }
}
/* if two cards in a slot, let them wrap nicely */
.aff-grid { display:grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) {
.aff-grid { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
}
@media (max-width: 600px) {
.disclosure {text-align:center;}
}
.badge.tiny {
display:inline-block; font-size:.7rem; line-height:1;
padding:.2rem .4rem; margin-left:.35rem; border-radius:.35rem;
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
}
.post-item .pin {
margin-right:.35rem;
transform: translateY(1px);
font-size: 0.95em;
}
.post-item .pin { text-shadow: 0 0 0.5px rgba(0,0,0,.4); }
.blog-post .tiny { font-size: .8rem; }
.blog-post [role="note"] { margin: .3rem 0 1rem; }
.summary-chips{
display:flex;
flex-wrap: nowrap; /* keep in one row */
justify-content: center;
gap: .45rem;
overflow-x: auto; /* allow scroll if needed */
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.summary-chips .chip{
flex: 0 0 auto; /* don't shrink/grow, no wrapping */
scroll-snap-align: center;
}
@media (max-width: 420px){
.summary-chips{ flex-wrap: nowrap; overflow-x: auto; }
.summary-chips .chip{ flex: 0 0 auto; }
}
/* Toolbar container */
.toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
/* Search form */
.toolbar__search {
display: flex;
align-items: stretch;
flex: 1 1 420px;
min-width: 220px;
max-width: 520px;
}
.toolbar__search input[type="search"] {
flex: 1;
font-size: 16px; /* iOS zoom fix */
border: 1px solid var(--border);
border-right: 0;
border-radius: 10px 0 0 10px;
padding: 0.55rem 0.75rem;
background: var(--panel);
color: var(--text);
height: 42px;
}
.toolbar__search .icon-btn {
border-radius: 0 10px 10px 0;
border: 1px solid var(--border);
border-left: 0;
width: 42px;
height: 42px;
background: var(--panel);
display: flex; align-items: center; justify-content: center;
}
/* Icon buttons outside search */
.toolbar__icons {
display: flex;
align-items: center;
gap: 6px;
}
.icon-btn {
width: 42px; height: 42px;
border-radius: 10px;
border: 1px solid var(--border);
background: var(--panel);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s ease;
}
.icon-btn:hover {
background: var(--panel-hover, #141c2e);
}
.icon-btn .icon {
width: 20px; height: 20px;
}
.undo{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;z-index:9999;
background:var(--panel,#222);color:var(--fg,#fff);padding:.6rem .8rem;border-radius:.6rem;
box-shadow:0 6px 20px rgba(0,0,0,.25);display:flex;gap:.75rem;align-items:center}
.undo.is-hidden{display:none}
.undo__btn{appearance:none;border:0;padding:.35rem .6rem;border-radius:.4rem;cursor:pointer;
background:var(--accent,#3aa3ff);color:#fff;font-weight:600}
/* Softer, on-brand pin wash (no harsh line) */
.post-item.is-pinned{
background:
linear-gradient(
90deg,
color-mix(in srgb, var(--accent) 18%, transparent) 0%,
color-mix(in srgb, var(--accent) 10%, transparent) 22%,
transparent 60%
);
}
/* If you prefer the green accent for pinned items, swap to --accent-2: */
.post-item.is-pinned--green{
background:
linear-gradient(
90deg,
color-mix(in srgb, var(--accent-2) 18%, transparent) 0%,
color-mix(in srgb, var(--accent-2) 10%, transparent) 22%,
transparent 60%
);
}
/* Light mode tune (slightly lower intensity keeps it airy) */
@media (prefers-color-scheme: light){
.post-item.is-pinned{
background:
linear-gradient(
90deg,
color-mix(in srgb, var(--accent) 12%, transparent) 0%,
color-mix(in srgb, var(--accent) 7%, transparent) 22%,
transparent 60%
);
}
}
.pin { display:inline-block; vertical-align:middle; margin-right:6px; }
.badge { display:inline-block; font-size:.7rem; line-height:1; padding:2px 6px; border-radius:4px; margin-left:8px; vertical-align:middle; }
.badge--new { background:#1f7a1f; color:#fff; } /* or use your --accent */
/* Replace refresh.png with the recycle emoji */
.iconbtn[data-act="refresh"] .icon { display: none; }
.iconbtn[data-act="refresh"]::before {
content: "♻️";
font-size: 18px; /* tweak to match your other icons */
line-height: 1;
display: inline-block;
transform: translateY(1px); /* subtle vertical alignment */
}
.chip-cloud--locked { opacity: .7; filter: grayscale(1); pointer-events: none; }
.chip-cloud--locked .chip { user-select: none; }
.pay-grid{
/* Two buttons, side-by-side everywhere */
.pay-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:10px;
align-items:stretch; /* equal heights */
}
.pay-grid .payform{ margin:0; } /* kill default form margin */
.pay-grid .btn{ width:100%; display:block; }
/* If you ever keep the old class on the same node, neutralize it here */
.pay-grid.pay-actions-stack > * + *{ margin-top:0; }
/* Your existing mobile note can remain, but it's already 2-up via grid */
@media (max-width:480px){
.pay-grid{ gap:10px; }
}
/* Keep the crypto block spaced from the grid below it */
.pay-crypto{ margin-top:12px; }
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:10px;
align-items:stretch; /* equal heights */
}
.pay-grid .payform{ margin:0; } /* kill default form margin */
.pay-grid .btn{ width:100%; display:block; }
/* If you ever keep the old class on the same node, neutralize it here */
.pay-grid.pay-actions-stack > * + *{ margin-top:0; }
/* Your existing mobile note can remain, but it's already 2-up via grid */
@media (max-width:480px){
.pay-grid{ gap:10px; }
}/* Two buttons, side-by-side everywhere */
.pay-grid{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:10px;
align-items:stretch; /* equal heights */
}
.pay-grid .payform{ margin:0; } /* kill default form margin */
.pay-grid .btn{ width:100%; display:block; }
/* If you ever keep the old class on the same node, neutralize it here */
.pay-grid.pay-actions-stack > * + *{ margin-top:0; }
/* Your existing mobile note can remain, but it's already 2-up via grid */
@media (max-width:480px){
.pay-grid{ gap:10px; }
}
/* Keep the crypto block spaced from the grid below it */
.pay-crypto{ margin-top:12px; }
/* Keep the crypto block spaced from the grid below it */
.pay-crypto{ margin-top:12px; }
/* Crypto widget */
:root{ --crypto-orange:#f7931a; }
.pay-crypto{
display:flex; align-items:center; gap:12px;
background: color-mix(in srgb, var(--panel,#0f1218) 94%, white 6%);
border:1px solid color-mix(in srgb, var(--border,#222630) 82%, black);
border-radius:12px; padding:12px 14px; margin-top:12px; max-width:640px;
box-shadow: inset 0 -1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(0,0,0,.22);
}
.pay-crypto__icon{ width:28px; height:28px; flex:0 0 28px; }
.pay-crypto__body{ flex:1 1 auto; min-width:0; }
.pay-crypto__title{ margin:0 0 4px 0; font-weight:700; }
.pay-crypto__copy{ margin:0; font-size:.92rem; opacity:.9; }
.pay-crypto__cta .btn--crypto{
background: var(--crypto-orange); color:#111; border:1px solid rgba(0,0,0,.15);
font-weight:800;
}
.pay-crypto__brands{ display:flex; align-items:center; gap:8px; opacity:.85; margin-top:6px; }
.pay-crypto__brands svg{ height:16px; width:auto; }
/* Tighten helper texts under buttons */
.pay-hint{ width:100%; margin-top:4px; }
.tiny.muted.pay-hint{ display:block; }
/* --- Paywall: Stripe + PayPal side-by-side, no vertical offset --- */
.paywall .payactions{
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
align-items: stretch;
}
/* kill any legacy stack spacing */
.paywall .payactions.pay-actions-stack > * + *{ margin-top: 0 !important; }
/* normalize forms/buttons */
.paywall .payactions .payform{ margin: 0; }
.paywall .payactions .btn{ display: block; width: 100%; }
/* If only one payment method is shown, make it full width (modern browsers) */
@supports(selector(:has(*))){
.paywall .payactions:has(> :only-child){ grid-template-columns: 1fr; }
}
/* Crypto card spacing under the grid */
.pay-crypto{ margin-top: 12px; }
/* (optional) tiny helper text under buttons spans both columns */
.paywall .payactions .pay-hint{ grid-column: 1 / -1; }
/* Trust pill for dark themes (non-pressable) */
.micro-badge{
--badge-bg: color-mix(in srgb, var(--accent) 16%, transparent);
--badge-border: color-mix(in srgb, var(--accent) 38%, var(--border) 62%);
--badge-ink: color-mix(in srgb, var(--text) 92%, var(--accent) 8%);
display:inline-block;
padding:.28rem .6rem;
margin:.35rem 0 0;
font-size:.78rem;
font-weight:600;
line-height:1.1;
color:var(--badge-ink);
background:var(--badge-bg);
border:1px solid var(--badge-border);
border-radius:8px; /* a bit more “pill”, less “button” */
box-shadow:none; /* avoid button-y depth */
cursor:default; /* not clickable */
user-select:text; /* allow copying the text */
letter-spacing:.01em;
}
/* center helper if you want it centered under the upload */
.micro-badge--center{
display:inline-block;
margin:.5rem auto 0;
text-align:center;
}
/* Strong text inside the pill—keep it subtle, not blinding */
.micro-badge strong{
font-weight:700;
color:inherit; /* no extra brightening */
}
/* Optional: hover should NOT look interactive */
.micro-badge:hover{
filter:none;
transform:none;
}
.field-label{
display:inline-flex; /* keeps hint from going full width */
align-items:baseline;
gap:.5rem;
flex-wrap:wrap; /* avoids overflow on small screens */
}
.testimonial.t--inline{
margin:.35rem 0 0;
font-style:italic;
color:#3a5660;
}
.testimonial.t--inline .source{
font-style:normal;
font-weight:600;
color:#2a4250;
margin-left:.35rem;
}
.hint-inline{
font-size:.88em;
color:#6f8b8b; /* muted “hint” color */
font-weight:500;
white-space:nowrap; /* stays on one line if possible */
}
/* ==== Unfollower Check — Result (scoped page polish) ================== */
/* Scope to the page card so we don't fight the rest of the app */
.dfb-container .card--page{
background: var(--card);
border: 1px solid var(--border);
border-radius: calc(var(--radius) + 2px);
box-shadow: var(--shadow-md);
padding: 1.1rem 1.1rem 1.25rem;
}
/* Hero */
.dfb-container .card--page .hero{
margin: .15rem 0 .75rem;
}
.dfb-container .card--page .hero .h1{
margin: 0 0 .25rem;
font-size: clamp(1.15rem, 2.6vw, 1.45rem);
letter-spacing: .2px;
}
.dfb-container .card--page .hero .muted{
font-size: .92rem;
}
/* Lede line in result callouts */
.dfb-container .card--page .lede{
margin: 0 0 .3rem;
font-size: 1rem;
line-height: 1.35;
}
/* Callouts: success / highlight */
.dfb-container .card--page .callout{
border: 1px solid var(--border);
border-radius: 10px;
padding: .7rem .85rem;
}
.dfb-container .card--page .callout--success{
background:
linear-gradient(180deg,
color-mix(in srgb, var(--accent-2) 14%, transparent),
transparent 85%);
border-color: color-mix(in srgb, var(--accent-2) 40%, var(--border) 60%);
}
.dfb-container .card--page .callout--highlight{
background:
linear-gradient(180deg,
color-mix(in srgb, var(--accent) 14%, transparent),
transparent 85%);
border-color: color-mix(in srgb, var(--accent) 40%, var(--border) 60%);
}
/* Zero-state next steps */
.dfb-container .card--page .next-steps{ margin-top: .6rem; }
.dfb-container .card--page .step-grid{
display: grid;
gap: .65rem;
grid-template-columns: 1fr;
}
@media (min-width: 740px){
.dfb-container .card--page .step-grid{ grid-template-columns: repeat(3, 1fr); }
}
.dfb-container .card--page .step{
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: .8rem .9rem;
}
.dfb-container .card--page .step .h3{
margin: 0 0 .25rem;
font-size: 1rem;
}
/* Paywall block */
.dfb-container .card--page .paywall{
margin-top: .6rem;
padding: .9rem;
border: 1px solid var(--border);
border-radius: 12px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--accent) 10%, transparent),
color-mix(in srgb, #000 6%, transparent));
}
/* Big metric */
.dfb-container .card--page .metric{
display: inline-grid;
gap: .1rem;
margin: .15rem .9rem .4rem 0;
}
.dfb-container .card--page .metric__num{
font-weight: 900;
font-size: clamp(1.6rem, 5.2vw, 2.4rem);
line-height: 1;
letter-spacing: .3px;
color: color-mix(in srgb, var(--accent) 70%, #fff 30%);
text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.dfb-container .card--page .metric__label{
font-size: .9rem;
color: var(--muted);
}
/* ===========================
Unfollower Checker — Dark
=========================== */
.cta-row--inline { margin: 1rem 0 1.25rem; }
.cta-row--inline .cta-copy { margin: 0 0 .25rem; }
.callout--cta { border-left: 4px solid var(--accent, #6cf); padding: 1rem; border-radius: 8px; background: rgba(108, 204, 255, .06); }
.callout--cta .h4 { margin: 0 0 .25rem; }
/* header */
.hero--tight { margin-bottom: .75rem; }
.lede { font-size: 1.05rem; line-height: 1.5; color: var(--text); }