/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   Single source of truth for the brand palette. Light-mode values
   are identical to the previously-hardcoded literals, so migrating
   `#f08fca` → `var(--fp-pink)` etc. is a no-op visually. The dark
   theme (bottom of this file) simply re-points these tokens.
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Brand — violet/magenta (GoonXXX) */
    --fp-pink: #7c3aed;         /* primary brand (violet) */
    --fp-pink-hover: #6d28d9;   /* primary hover/active */
    --fp-pink-deep: #ec4899;    /* gradient partner / CTA (magenta) */
    --fp-pink-dark: #6d28d9;    /* deep violet text/links */
    --fp-pink-text: #7c3aed;    /* readable brand on tinted chips */
    --fp-magenta: #ec4899;      /* magenta accent / link hover */
    /* Follow/action */
    --fp-rose: #ec4899;
    --fp-rose-hover: #db2777;
    /* Accent */
    --fp-onlyfans: #00aff0;

    /* Text ramp (on light surfaces) */
    --fp-text: #333;
    --fp-text-soft: #555;
    --fp-text-muted: #888;
    --fp-text-dim: #777;
    --fp-text-faint: #aaa;
    --fp-text-faint2: #bbb;

    /* Surfaces */
    --fp-bg: #fff;              /* page background */
    --fp-surface: #fff;        /* cards / raised panels */
    --fp-surface-soft: #faf7ff;/* tinted ad / soft panels */
    --fp-surface-pink: #f3ecfe;/* brand chip background (violet tint) */
    --fp-surface-pink-soft: #f8f4ff;

    /* Borders */
    --fp-border: #eee;
    --fp-border-pink: #e7ddf9;
    --fp-border-pink2: #d9c6f5;
    --fp-border-pinkchip: #e6d8fb;

    /* Elevation */
    --fp-shadow: rgba(0,0,0,.07);
    --fp-shadow-hover: rgba(0,0,0,.13);
}

/* Drive the page surface off tokens (Bootstrap's app.min.css sets these to
   the same literals; style.css loads after it, so this wins and lets the
   dark theme flip the whole page by re-pointing the tokens). */
body {
    background: var(--fp-bg);
    color: var(--fp-text);
    /* Safety net only — root causes (ad slots forcing fixed widths) are
       fixed at the .ad-lazy / .fp-sticky-ad level above. Don't rely on this
       alone to hide a new overflow bug. */
    overflow-x: hidden;
}

/* Follow button on post/show sidebar */
.follow-pastel-label {
	display: inline-block;
	margin-top: 4px;
	padding: 2px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	user-select: none;
}
.follow-pastel-label.label-follow {
	background: var(--fp-rose);
	color: #fff;
	border: none;
}
.follow-pastel-label.label-follow:hover {
	background: var(--fp-rose-hover);
}
.follow-pastel-label.label-unfollow {
	background: transparent;
	color: #aaa;
	border: 1px solid #555;
}
.follow-pastel-label.label-unfollow:hover {
	background: #333;
	color: #fff;
}

/* Follow button on profile page */
.follow-pastel-btn {
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 14px;
	line-height: 1.4;
	transition: background .15s, color .15s, border-color .15s;
}
.follow-pastel-btn.follow-active {
	background: var(--fp-rose);
	color: #fff;
	border: 1px solid var(--fp-rose);
}
.follow-pastel-btn.follow-active:hover {
	background: var(--fp-rose-hover);
	border-color: var(--fp-rose-hover);
	color: #fff;
}
/* "Following" = neutral, matching the sibling .btn-default (Message/Gift) in both themes */
.follow-pastel-btn.unfollow-active {
	background: #fff;
	color: #555;
	border: 1px solid #ccc;
}
.follow-pastel-btn.unfollow-active:hover {
	background: #f5f5f5;
	color: #333;
	border-color: #adadad;
}

/* Social link labels (OnlyFans, Fansly, Website) — same pill style as follow labels */
.social-link-label {
	display: inline-block;
	margin-top: 4px;
	padding: 2px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.15s;
}
.social-link-label:hover {
	opacity: 0.8;
	text-decoration: none;
	color: #fff;
}
.social-link-label.label-onlyfans {
	background: transparent;
	color: var(--fp-onlyfans);
	border: 1px solid var(--fp-onlyfans);
}
.social-link-label.label-fansly {
	background: #1a9cd8;
	color: #fff;
}
.social-link-label.label-website {
	background: transparent;
	color: #aaa;
	border: 1px solid #555;
}
.social-link-label.label-website:hover {
	background: #333;
	color: #fff;
}
.social-link-label.label-custom {
	background: transparent;
	color: #aaa;
	border: 1px solid #555;
}
.social-link-label.label-custom:hover {
	background: #333;
	color: #fff;
}

/* ── Profile: About + creator link hub ── */
.fp-about {
	max-width: 640px;
	margin: 0 auto 6px;
}
.fp-about-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lp-text, var(--fp-text-muted));
	opacity: .85;
	margin: 0 0 4px;
}
.fp-about-body {
	font-size: 15px;
	line-height: 1.5;
	color: var(--lp-text, var(--fp-text));
	margin: 0;
}
.fp-about-empty p { color: var(--lp-text, var(--fp-text-muted)); font-size: 13px; }
/* Rich-text bio content spacing (sanitized HTML). */
.fp-about-body p { margin: 0 0 6px; }
.fp-about-body p:last-child { margin-bottom: 0; }
.fp-about-body ul, .fp-about-body ol { margin: 4px 0 6px; padding-left: 22px; text-align: left; display: inline-block; }
.fp-about-body ul { list-style-type: disc; }
.fp-about-body ol { list-style-type: decimal; }
/* Quill 2 marks bullet items with data-list; render them as bullets even in <ol>. */
.fp-about-body li[data-list="bullet"] { list-style-type: disc; }
.fp-about-body a { color: var(--lp-accent, var(--fp-pink-dark)); text-decoration: underline; }

/* ── Rich-text bio editor (Quill, settings) ── */
.rte-quill .ql-editor { min-height: 120px; font-size: 14px; text-align: left; }
.rte-quill .ql-toolbar { border-top-left-radius: 6px; border-top-right-radius: 6px; }
.rte-quill .ql-container { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; font-family: inherit; }

/* Guest-post article editor — same widget, taller, with a live length counter. */
.gp-editor .ql-editor { min-height: 300px; font-size: 15px; line-height: 1.7; }
.gp-editor .ql-editor.ql-blank::before { font-style: normal; color: var(--fp-text-faint); }
.gp-editor .ql-container.gp-editor-invalid,
.ql-container.gp-editor-invalid { border-color: var(--fp-rose); }
.gp-count { font-weight: 700; color: var(--fp-text-faint); }
.gp-count.is-ok { color: #3d9970; }
html[data-theme="dark"] .gp-count.is-ok { color: #7fd6a3; }
.fp-location {
	font-size: 13px;
	color: var(--lp-text, var(--fp-text-muted));
	margin: 2px 0 0;
}
.fp-linkhub {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 12px;
}
.fp-linkhub-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	transition: opacity .15s, transform .1s;
}
.fp-linkhub-btn:hover { opacity: .85; text-decoration: none; transform: translateY(-1px); }
.fp-linkhub-btn.is-of { background: transparent; color: var(--fp-onlyfans); border-color: var(--fp-onlyfans); }
.fp-linkhub-btn.is-fansly { background: #1a9cd8; color: #fff; }
.fp-linkhub-btn.is-web { background: transparent; color: var(--fp-text-soft); border-color: var(--fp-text-soft); }
.fp-linkhub-btn.is-web:hover { background: #333; color: #fff; }
.fp-linkhub-promo {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 13px;
	background: var(--fp-surface-pink-soft);
	border: 1px solid var(--fp-pink);
	color: var(--fp-pink-dark);
	cursor: pointer;
	transition: background .15s;
}
.fp-linkhub-promo:hover { background: var(--fp-surface-pink); }
.fp-linkhub-promo.is-copied { background: #dff5e1; border-color: #57b368; color: #2e7d3a; }
.fp-linkhub-promo .fp-promo-label { font-weight: 600; }
.fp-linkhub-promo .fp-promo-code {
	font-family: monospace;
	font-weight: 700;
	background: #fff;
	border: 1px dashed var(--fp-pink);
	border-radius: 6px;
	padding: 1px 7px;
}
.fp-linkhub-promo.is-copied .fp-promo-code::after { content: ' ✓ copied'; font-family: inherit; font-weight: 600; }
.fp-linkhub-promo .fp-promo-go { color: inherit; margin-left: 2px; }
.fp-linkhub-promo .fp-promo-go:hover { opacity: .7; }

/* ── Creator link page (Linktree-style landing) ── */
.lp-hero {
	/* --lp-accent / --lp-btn-text / --lp-text are set on #tab-about (resolved in
	   PHP so contrast can be computed); the hero just inherits them. */
	max-width: 560px;
	margin: 16px auto 4px;
	padding: 4px 0;
	font-family: var(--lp-font, inherit);
}
.lp-hero[style*="--lp-bg"] {
	background: var(--lp-bg) center/cover no-repeat;
	padding: 22px 20px;
	border-radius: 16px;
}
.lp-socials { display: flex; justify-content: center; gap: 14px; margin-bottom: 14px; }
.lp-social {
	width: 44px; height: 44px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	/* Filled with the accent + auto-contrast icon colour, so a light accent
	   never yields an invisible glyph. */
	background: var(--lp-accent); border: 1px solid var(--lp-accent);
	color: var(--lp-btn-text, #fff); font-size: 18px; text-decoration: none;
	transition: transform .1s, box-shadow .15s, filter .15s;
}
.lp-social:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--fp-shadow); color: var(--lp-btn-text, #fff); text-decoration: none; filter: brightness(1.04); }
.lp-social img { border-radius: 5px; display: block; }

.lp-btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; margin: 0 auto 10px; padding: 14px 18px;
	border-radius: 12px; font-size: 15px; font-weight: 700;
	text-decoration: none; text-align: center; cursor: pointer;
	/* Label colour is auto-picked (dark/light) from accent brightness. */
	background: var(--lp-accent); color: var(--lp-btn-text, #fff);
	border: 2px solid var(--lp-accent);
	transition: transform .1s, box-shadow .15s, filter .15s;
	box-shadow: 0 2px 8px var(--fp-shadow);
}
.lp-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--fp-shadow-hover); color: var(--lp-btn-text, #fff); text-decoration: none; filter: brightness(1.04); }
.lp-btn.is-highlight { font-size: 17px; padding: 18px; }

/* Button-style variants (Premium) — class sits on .lp-hero */
.lp-btn-outline .lp-btn { background: transparent; color: var(--lp-text, var(--lp-accent)); }
.lp-btn-outline .lp-btn:hover { background: var(--lp-accent); color: var(--lp-btn-text, #fff); }
.lp-btn-pill .lp-btn { border-radius: 999px; }
.lp-btn-square .lp-btn { border-radius: 3px; }

.lp-promo { justify-content: space-between; }
.lp-promo .fp-promo-code { font-family: monospace; background: rgba(255,255,255,.25); border-radius: 6px; padding: 1px 7px; margin-left: 6px; }
.lp-promo.is-copied { background: #2e7d3a !important; border-color: #2e7d3a !important; color: #fff; }
.lp-promo .fp-promo-go { color: #fff; }

.lp-edit { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--lp-text, var(--fp-text-muted)); opacity: .8; text-decoration: none; }
.lp-edit:hover { opacity: 1; }
.lp-empty { color: var(--lp-text, var(--fp-text-muted)); font-size: 13px; }
/* Keep bare text legible over a custom background image. */
.lp-hero[style*="--lp-bg"] .lp-edit,
.lp-hero[style*="--lp-bg"] .lp-empty { text-shadow: 0 1px 3px rgba(0,0,0,.55); }

/* Preset themes re-point the accent (custom inline --lp-accent overrides these) */
.lp-theme-midnight { --lp-accent: #6c8cff; }
.lp-theme-sunset   { --lp-accent: #ff7a59; }
.lp-theme-mono     { --lp-accent: #444; }
.lp-theme-neon     { --lp-accent: #00d69a; }

/* ── Collapsible "Advanced" / "More" sections (settings + dashboard) ── */
.settings-advanced > summary,
.cd-more > summary {
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	color: var(--fp-text-soft);
	padding: 12px 14px;
	background: var(--fp-surface);
	border: 1px solid var(--fp-border);
	border-radius: 8px;
	user-select: none;
}
.settings-advanced > summary::-webkit-details-marker,
.cd-more > summary::-webkit-details-marker { display: none; }
.settings-advanced > summary::after,
.cd-more > summary::after { content: ' ▸'; color: var(--fp-text-muted); }
.settings-advanced[open] > summary::after,
.cd-more[open] > summary::after { content: ' ▾'; }
.settings-advanced > summary:hover,
.cd-more > summary:hover { color: var(--fp-pink-dark); }
.cd-more { margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════
   FEED PAGE — fp- namespace
═══════════════════════════════════════════════════════════════ */

/* Page wrapper */
.fp-page {
    display: flex;
    align-items: stretch;
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 12px 40px;
}

/* Feed column */
.fp-feed-col {
    flex: 1;
    min-width: 0;
}

/* Sidebar — desktop only */
.fp-sidebar {
    width: 320px;
    flex-shrink: 0;
    padding-left: 16px;
}
@media (max-width: 1100px) {
    .fp-sidebar { display: none; }
}

.fp-sidebar-sticky {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── HEADER BAR ── */
.fp-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    border-bottom: 1px solid #e7ddf9;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.fp-page-title {
    font-size: 15px;
    font-weight: 700;
    color: #555;
    margin: 0;
    padding: 0 6px 0 0;
}

.fp-tab {
    padding: 5px 13px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
}
.fp-tab:hover { background: #f3ecfe; color: var(--fp-pink-text); text-decoration: none; }
.fp-tab.fp-tab-active { background: var(--fp-pink); color: #fff !important; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.fp-tab.fp-tab-active:hover { background: var(--fp-pink-hover); text-decoration: none; }
.fp-tab.fp-tab-ad {
    border: 1px dashed #f3b8d8;
    background: linear-gradient(135deg, #f6f1fe, #f3ecfe);
    color: var(--fp-pink-text);
    margin-left: 4px;
    box-shadow: 0 0 6px rgba(240, 143, 202, .25);
}
.fp-tab.fp-tab-ad:hover { border-color: var(--fp-pink); box-shadow: 0 0 10px rgba(240, 143, 202, .4); }
html[data-theme="dark"] .fp-tab.fp-tab-ad {
    border-color: #6b3f57;
    background: linear-gradient(135deg, #2b1f26, #331f2b);
    color: var(--fp-pink-text);
    box-shadow: 0 0 6px rgba(240, 143, 202, .15);
}

.fp-upload-btn {
    margin-left: auto !important;
    margin-top: 0 !important;
    padding: 5px 14px !important;
    font-size: 12px !important;
    border-radius: 18px !important;
    flex-shrink: 0;
}

/* ── TAGS BAR ── */
.fp-tags-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    border-bottom: 1px solid #e7ddf9;
    margin-bottom: 10px;
}
.fp-tags-bar::-webkit-scrollbar { display: none; }

.fp-tags-label {
    font-size: 10px;
    font-weight: 700;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: .6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.fp-tag-chip {
    font-size: 12px;
    background: #f3ecfe;
    color: var(--fp-pink-text);
    border-radius: 12px;
    padding: 3px 11px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
    font-weight: 500;
    text-decoration: none;
    flex-shrink: 0;
}
.fp-tag-chip:hover { background: var(--fp-pink); color: #fff; text-decoration: none; }

.fp-tag-description {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    padding: 8px 2px 12px;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 4px;
}

/* ── FEATURED STRIP ── */
.fp-featured {
    margin-bottom: 10px;
    padding: 8px 10px;
    background: #fffbea;
    border: 1px solid #e6c200;
    border-radius: 8px;
}

.fp-featured-label {
    font-size: 10px;
    font-weight: 700;
    color: #b8860b;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 7px;
}

.fp-featured-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
.fp-featured-scroll::-webkit-scrollbar { display: none; }

.fp-featured-thumb {
    flex-shrink: 0;
    width: 120px;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    display: block;
    text-decoration: none;
}
.fp-featured-thumb img,
.fp-featured-placeholder {
    width: 120px;
    height: 78px;
    object-fit: cover;
    display: block;
}
.fp-featured-placeholder {
    background: linear-gradient(145deg, #1c1028 0%, #2b1040 60%, #1a0a30 100%);
}
.fp-featured-title {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 3px 6px;
    background: rgba(0,0,0,.55);
    font-size: 10px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fp-featured-star {
    position: absolute;
    top: 4px; right: 4px;
    background: #e6b800;
    color: #fff;
    font-size: 9px;
    border-radius: 6px;
    padding: 1px 5px;
    font-weight: 700;
}

/* ── RECENTLY VIEWED ── */
#recently-viewed { padding: 0 0 4px; margin-bottom: 10px; }
.rv-label { font-size: 11px; font-weight: 700; color: #aaa; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.rv-thumb { display: block; border-radius: 6px; overflow: hidden; position: relative; margin-bottom: 8px; }
.rv-thumb img { width: 100%; height: 72px; object-fit: cover; display: block; }
.rv-thumb-title { position: absolute; bottom: 0; left: 0; right: 0; padding: 3px 5px; background: rgba(0,0,0,.55); font-size: 10px; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ── POST GRID ── */
.fp-grid {
    display: grid;
    /* minmax(0, 1fr) — NOT plain 1fr. A 1fr track's implicit minimum is the
       item's min-content, so a card whose content (e.g. the nowrap tag-chip
       row) is wider than an equal split pushes the track — and the whole grid —
       past the viewport, causing page-wide horizontal scroll on phones. The
       0 minimum lets tracks stay equal halves and clip inner content instead. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
@media (max-width: 860px) {
    .fp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
}
@media (max-width: 480px) {
    .fp-page { padding: 6px 8px 60px; }
}

/* ── POST CARD ── */
.fp-card {
    border-radius: 14px;
    overflow: visible;
    background: var(--fp-surface);
    box-shadow: 0 1px 5px var(--fp-shadow);
    transition: transform .15s, box-shadow .15s;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0; /* let the grid track shrink below the card's min-content */
    /* Skip layout/paint for off-screen cards — big scroll win on low-end CPUs.
       contain-intrinsic-height reserves height so the scrollbar doesn't jump.
       Using the height-only longhand (not the `contain-intrinsic-size`
       shorthand) is deliberate: the shorthand's single value applies to
       BOTH axes, so it was also pinning skipped cards to 300px *wide* —
       blowing out the 2-col mobile grid and causing page-wide horizontal
       scroll. Width must stay controlled by the grid track, not this. */
    content-visibility: auto;
    contain-intrinsic-height: auto 300px;
}
/* content-visibility applies paint containment, which would clip the in-card
   "Save to album" dropdown. Lift it while the dropdown is open (:has is
   universally supported now). */
.fp-card:has(.dropdown.open) { content-visibility: visible; }
.fp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px var(--fp-shadow-hover);
}

.fp-card-thumb {
    position: relative;
    padding-top: 75%;
    background: #111;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
}
.fp-card-thumb img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .2s;
}
.fp-card:hover .fp-card-thumb img { transform: scale(1.04); }

.fp-thumb-link {
    display: block;
    text-decoration: none;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

.fp-no-media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 24px;
}

.fp-type-badge {
    position: absolute;
    top: 6px; left: 6px;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(2px);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    pointer-events: none;
    z-index: 4;
}

.fp-play-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
}

.fp-thumb-stats {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 22px 8px 5px;
    background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 2;
}
.fp-thumb-stat {
    color: rgba(255,255,255,.9);
    font-size: 10px;
    font-weight: 600;
}

/* Profile tab bodies live directly inside a Bootstrap .row alongside the
   floated col-md-12 header/tabs. A grid establishes its own formatting context,
   so without clearing it would be laid out BESIDE those floats (pushed off the
   right edge) instead of below them. Clear + edge padding keeps it full-width. */
.profile-tab-content { clear: both; }
.profile-tab-content > .fp-grid { padding: 15px 15px 0; }
/* Same issue on the standalone Liked page: grid follows a floated tabs bar. */
#display-posts > .fp-grid { clear: both; }

/* Caption overlay — profile-variant card (.fp-card with show_caption). Sits at
   the top so it never collides with the bottom stats overlay. */
.fp-card-caption {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 7px 10px 18px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    background: linear-gradient(to bottom, rgba(0,0,0,.72), transparent);
    text-shadow: 0 1px 2px rgba(0,0,0,.85);
    z-index: 3;
    pointer-events: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fp-card-actions {
    position: absolute;
    top: 6px; right: 6px;
    display: flex;
    gap: 4px;
    z-index: 10;
}

.fp-icon-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s;
    border: none;
    text-decoration: none;
    line-height: 1;
    padding: 0;
}
.fp-icon-btn:hover,
.fp-icon-btn.liked { background: #e74c7c; color: #fff !important; text-decoration: none; }
.fp-icon-btn:focus { outline: none; }
.fp-icon-btn .fa.active { color: #ff6b9d; }

.fp-flag-badge {
    position: absolute;
    top: 0; right: 0;
    background: #e74c3c;
    color: #fff;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 11;
}

.fp-card-actions .dropdown-menu {
    top: 100%;
    right: 0;
    left: auto;
    min-width: 160px;
    font-size: 13px;
}

.fp-card-footer {
    padding: 8px 9px 9px;
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--fp-surface);
    border-radius: 0 0 14px 14px;
    flex-shrink: 0;
}
.fp-card-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}
.fp-card-username {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
}
.fp-card-username:hover { color: var(--fp-pink); text-decoration: none; }
.fp-card-time {
    font-size: 10px;
    color: #bbb;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Card tag chips (signature row) ── */
.fp-card-tags {
    display: flex; flex-wrap: nowrap; gap: 5px; overflow: hidden;
    padding: 8px 9px 0; background: var(--fp-surface);
}
.fp-card-tag {
    font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 7px;
    background: var(--fp-surface-pink); white-space: nowrap; text-decoration: none;
    text-transform: capitalize; transition: background .15s, color .15s;
}
.fp-card-tag, .fp-card-tag:link, .fp-card-tag:visited { color: #7c3aed !important; }
.fp-card-tag:hover { background: var(--fp-pink); color: #fff !important; text-decoration: none; }
html[data-theme="dark"] .fp-card-tag, html[data-theme="dark"] .fp-card-tag:link, html[data-theme="dark"] .fp-card-tag:visited { color: #c4b5fd !important; }
html[data-theme="dark"] .fp-card-tag:hover { color: #fff !important; }

/* ── Card metrics (footer right) ── */
.fp-card-metrics {
    display: flex; gap: 10px; align-items: center; flex-shrink: 0;
    font-size: 10.5px; color: var(--fp-text-faint); font-variant-numeric: tabular-nums;
}
.fp-card-metrics i { margin-right: 2px; opacity: .8; }

/* ── LOCKED CARDS ── */
.fp-locked-link {
    display: block;
    text-decoration: none;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}
.fp-locked-thumb {
    width: 100%;
    padding-top: 75%;
    position: relative;
    background: linear-gradient(145deg, #1c1028 0%, #2b1040 60%, #1a0a30 100%);
    overflow: hidden;
}
.fp-locked-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 40%, rgba(124,58,237,.15) 0%, transparent 70%);
}
.fp-locked-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    gap: 8px;
}
.fp-locked-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fp-pink);
    border: 1px solid rgba(124,58,237,.4);
    border-radius: 10px;
    padding: 2px 10px;
}
.fp-locked-cta {
    background: var(--fp-pink);
    color: #fff;
    border-radius: 14px;
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 600;
    transition: background .2s;
    display: inline-block;
    text-decoration: none;
}
.fp-locked-cta:hover { background: var(--fp-pink-hover); color: #fff; text-decoration: none; }

/* ── EMPTY STATE ── */
.fp-empty {
    grid-column: 1 / -1;
    padding: 48px 0;
    text-align: center;
    color: #bbb;
}
.fp-empty i { font-size: 36px; display: block; margin-bottom: 12px; }

/* ── AD SLOTS ── */

.fp-card-ad {
    border: 1px dashed #f5d0e8;
    background: #fff8fc;
    box-shadow: none;
}
.fp-card-ad .fp-card-thumb {
    padding-top: 75%; /* match post-card 4:3 ratio so ad cards line up with the grid */
    background: linear-gradient(135deg, #f3ecfe, #e2d3f7);
    overflow: hidden;
}
.fp-card-ad-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    overflow: hidden;
}
.fp-card-ad-inner .ad-lazy {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Ad codes are raw HTML pasted by admins (see AdController::slot) — anything
   from a plain <iframe> to a script-injected <div> with a hardcoded pixel
   width. The JS auto-fit below only rescales <iframe>/<img>, so this slot
   itself must never be allowed to grow past its container. */
.ad-lazy { max-width: 100%; overflow: hidden; }
/* Auto-fit (base.html.twig ad loader): fixed-size creatives get wrapped in
   .ad-fit > .ad-fit-scaler and scaled with a transform to fit the slot. */
.ad-fit { overflow: hidden; margin: 0 auto; flex-shrink: 0; }
.ad-fit-scaler { transform-origin: 0 0; }
/* Responsive (percent-sized) creatives stretch over height-bounded slots. */
.ad-lazy.ad-fill { display: block; }
.ad-lazy.ad-fill iframe { width: 100%; height: 100%; border: 0; display: block; }
.fp-ad-badge {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    background: rgba(124,58,237,.25);
    color: var(--fp-pink-text);
    border-radius: 6px;
    padding: 2px 8px;
    border: 1px solid rgba(124,58,237,.4);
}

.fp-banner-ad {
    grid-column: 1 / -1;
    min-height: 90px;
    border-radius: 8px;
    background: #fff8fc;
    border: 1px dashed #f5d0e8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* Full-width so width:100% creatives span the strip instead of shrink-wrapping to ~300px */
.fp-banner-ad .ad-lazy { width: 100%; }

/* Phones: a 2-col grid cell (~175px) can't hold any standard creative —
   span the full row so a 300x250 fits without scaling. */
@media (max-width: 860px) {
    .fp-card-ad { grid-column: 1 / -1; }
    .fp-card-ad .fp-card-thumb { padding-top: 0; height: 264px; }
}

.fp-sidebar-ad {
    border-radius: 10px;
    background: #fff8fc;
    border: 1px dashed #f5d0e8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 300px;
}
.fp-sidebar-ad-250 { min-height: 250px; }
.fp-sidebar-ad-600 { min-height: 600px; }

.fp-sticky-ad {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: rgba(255,255,255,.97);
    border-top: 1px solid #f5d0e8;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 500;
    box-shadow: 0 -2px 10px rgba(0,0,0,.07);
    /* Fixed elements wider than the viewport still force a page-level
       horizontal scrollbar — clip whatever the ad code injects. */
    overflow: hidden;
}
@media (max-width: 1100px) {
    .fp-sticky-ad { display: flex; }
    body { padding-bottom: 64px; }
}
.fp-sticky-ad-close {
    position: absolute;
    top: 50%; right: 10px;
    transform: translateY(-50%);
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #e7ddf9;
    border: none;
    color: #888;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════════
   BLOG — moved out of the per-page <style> blocks so it downloads once and
   is cached, instead of being re-sent (render-blocking) on every blog page.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Blog listing (index) ───────────────────────────────────────────────── */
.blog-container { max-width: 900px; margin: 80px auto 60px; padding: 0 20px; }
.blog-header { text-align: center; margin-bottom: 40px; }
.blog-header h1 { font-size: 32px; font-weight: 800; color: #333; margin: 0 0 8px; }
.blog-subtitle { color: #aaa; font-size: 15px; margin: 0; }
.blog-empty { text-align: center; padding: 60px 20px; color: #aaa; font-size: 15px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.blog-card { position: relative; background: #fff; border: 1px solid #eee; border-radius: 12px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.blog-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.08); transform: translateY(-2px); }
.blog-card-image { display: block; height: 180px; overflow: hidden; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.blog-card:hover .blog-card-image img { transform: scale(1.04); }
.blog-card-body { padding: 22px; }
.blog-card-date { font-size: 12px; color: #bbb; margin-bottom: 10px; }
.blog-card-date i { margin-right: 4px; }
.blog-card-title { font-size: 17px; font-weight: 700; margin: 0 0 10px; line-height: 1.4; }
.blog-card-title a { color: #333; text-decoration: none; }
.blog-card-title a:hover { color: var(--fp-pink); }
.blog-card-excerpt { font-size: 13px; color: #777; line-height: 1.6; margin: 0 0 14px; }
.blog-card-link { font-size: 13px; font-weight: 600; color: var(--fp-pink); text-decoration: none; }
.blog-card-link:hover { color: var(--fp-magenta); }
.blog-card-link i { margin-left: 4px; }
.blog-index-ad-row { grid-column: 1 / -1; text-align: center; padding: 4px 0; min-height: 1px; }
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 48px; }
.page-btn { background: var(--fp-pink); color: #fff; border-radius: 8px; padding: 8px 18px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s; }
.page-btn:hover { background: var(--fp-magenta); }
.page-info { font-size: 13px; color: #aaa; }

/* ── Blog post (show) ───────────────────────────────────────────────────── */
.blog-content-image { margin: 24px 0; text-align: center; }
.blog-content-image img { max-width: 100%; max-height: 480px; object-fit: cover; border-radius: 8px; width: auto; }
.blog-post-container { max-width: 740px; margin: 80px auto 60px; padding: 0 20px; }
.blog-breadcrumb { font-size: 13px; color: #aaa; margin-bottom: 32px; }
.blog-breadcrumb a { color: var(--fp-pink); text-decoration: none; }
.blog-breadcrumb a:hover { text-decoration: underline; }
.blog-breadcrumb .sep { margin: 0 8px; }
.blog-post-topic { font-size: 12px; font-weight: 600; color: var(--fp-pink); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.blog-post-topic i { margin-right: 4px; }
.blog-post-title { font-size: 30px; font-weight: 800; color: #222; margin: 0 0 12px; line-height: 1.3; }
.blog-post-meta { font-size: 13px; color: #aaa; margin-bottom: 28px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.blog-post-meta i { margin-right: 4px; }
.blog-post-meta a { color: var(--fp-pink-dark); text-decoration: none; font-weight: 600; }
.blog-post-meta a:hover { text-decoration: underline; }
.blog-post-excerpt { font-size: 16px; color: #666; line-height: 1.7; border-left: 3px solid var(--fp-pink); padding: 10px 16px; background: #fdf4fa; border-radius: 0 8px 8px 0; margin-bottom: 32px; font-style: italic; }
.blog-post-content { font-size: 15px; color: #333; line-height: 1.8; }
.blog-post-content h2 { font-size: 22px; font-weight: 700; color: #222; margin: 36px 0 14px; scroll-margin-top: 66px; }
.blog-post-content h3 { font-size: 18px; font-weight: 700; color: #333; margin: 28px 0 10px; }
.blog-post-content p { margin: 0 0 18px; }
.blog-post-content ul, .blog-post-content ol { margin: 0 0 18px; padding-left: 24px; }
.blog-post-content li { margin-bottom: 6px; }
/* Quill 2 marks bullet items with data-list; render them as bullets even in <ol>. */
.blog-post-content li[data-list="bullet"], .gp-preview li[data-list="bullet"] { list-style-type: disc; }

/* Admin guest-post preview — rendered rich text needs its own compact typography. */
.gp-preview { line-height: 1.6; color: #444; }
.gp-preview p { margin: 0 0 8px; }
.gp-preview h2, .gp-preview h3, .gp-preview h4 { margin: 12px 0 6px; font-weight: 700; line-height: 1.3; }
.gp-preview h2 { font-size: 16px; } .gp-preview h3 { font-size: 15px; } .gp-preview h4 { font-size: 14px; }
.gp-preview ul, .gp-preview ol { margin: 0 0 8px; padding-left: 22px; }
.gp-preview ul { list-style-type: disc; } .gp-preview ol { list-style-type: decimal; }
.gp-preview li { margin-bottom: 3px; }
.gp-preview blockquote { margin: 0 0 8px; padding: 4px 0 4px 12px; border-left: 3px solid var(--fp-pink); color: #666; }
.gp-preview a { color: var(--fp-pink-dark); text-decoration: underline; word-break: break-all; }
.gp-preview :last-child { margin-bottom: 0; }
html[data-theme="dark"] .gp-preview { background: #241f2b !important; color: var(--fp-text-soft); }
html[data-theme="dark"] .gp-preview blockquote { color: var(--fp-text-muted); }
.blog-post-content h4 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; }
.blog-post-content blockquote {
    margin: 0 0 18px; padding: 8px 0 8px 16px; font-size: 15px;
    border-left: 3px solid var(--fp-pink); color: var(--fp-text-soft);
}
.blog-post-footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid #eee; }
.back-link { font-size: 13px; font-weight: 600; color: var(--fp-pink); text-decoration: none; }
.back-link:hover { color: var(--fp-magenta); }
.back-link i { margin-right: 6px; }
.blog-post-image { margin-bottom: 28px; border-radius: 12px; overflow: hidden; max-height: 420px; }
.blog-post-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-author-card { display: flex; align-items: flex-start; gap: 16px; margin-top: 48px; padding: 22px; background: #fafafa; border: 1px solid #eee; border-radius: 12px; }
.author-card-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid #ddc9f6; flex-shrink: 0; }
.author-card-initial { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #ddc9f6, var(--fp-pink)); color: #fff; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.author-card-name { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 5px; }
.author-card-name a { color: #333; text-decoration: none; }
.author-card-name a:hover { color: var(--fp-pink); }
.author-card-bio { font-size: 13px; color: #777; line-height: 1.6; }
.author-card-more { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--fp-pink); text-decoration: none; }
.author-card-more:hover { text-decoration: underline; }
.blog-related-tags { margin-top: 48px; padding: 24px; background: #fdf4fa; border: 1px solid #ddc9f6; border-radius: 12px; }
.related-tags-title { font-size: 14px; font-weight: 700; color: var(--fp-pink); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .06em; }
.related-tags-title i { margin-right: 7px; }
.related-tags-list { display: flex; flex-wrap: wrap; gap: 8px; }
.related-tag-chip { display: inline-block; background: #fff; border: 1px solid #d9c6f5; color: var(--fp-pink-dark); border-radius: 20px; padding: 5px 14px; font-size: 13px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.related-tag-chip:hover { background: var(--fp-pink); color: #fff; border-color: var(--fp-pink); }
.blog-ad-slot { margin: 32px 0; text-align: center; min-height: 1px; }
.blog-ad-top { margin-top: 0; margin-bottom: 28px; }
.blog-ad-mid { margin: 36px 0; }
.blog-ad-bottom { margin: 36px 0 28px; }
.blog-ad-inline { margin: 30px 0; }
.blog-callout-box { display: flex; align-items: center; gap: 14px; margin: 32px 0; padding: 16px 20px; background: linear-gradient(135deg, #f6f1fe 0%, #f0e6fd 100%); border: 1.5px solid #d9c6f5; border-radius: 12px; text-decoration: none; transition: box-shadow .2s, transform .2s; color: inherit; }
.blog-callout-box:hover { box-shadow: 0 4px 20px rgba(124,58,237,.25); transform: translateY(-1px); text-decoration: none; color: inherit; }
.bcb-icon { font-size: 28px; flex-shrink: 0; }
.bcb-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.bcb-title { font-size: 15px; font-weight: 700; color: #333; }
.bcb-desc { font-size: 13px; color: #888; }
.bcb-btn { flex-shrink: 0; background: linear-gradient(135deg, var(--fp-pink), var(--fp-pink-deep)); color: #fff; border-radius: 22px; padding: 9px 20px; font-size: 13px; font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) { .blog-callout-box { flex-wrap: wrap; } .bcb-btn { width: 100%; text-align: center; } }
.blog-post-cta { position: relative; margin: 48px 0 40px; border-radius: 16px; overflow: hidden; background: linear-gradient(135deg, #2a0e1e 0%, #4a1535 50%, #2a0e1e 100%); text-align: center; padding: 40px 32px; }
.bpc-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(124,58,237,.35) 0%, transparent 70%); pointer-events: none; }
.bpc-inner { position: relative; z-index: 1; }
.bpc-live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--fp-pink); margin-bottom: 14px; text-transform: uppercase; }
.bpc-live-dot span { width: 8px; height: 8px; background: #ff3b6b; border-radius: 50%; animation: bpcPulse 1.6s ease-in-out infinite; }
@keyframes bpcPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,107,.6); } 50% { box-shadow: 0 0 0 6px rgba(255,59,107,0); } }
.bpc-title { font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 10px; line-height: 1.3; }
.bpc-desc { font-size: 14px; color: rgba(255,255,255,.65); margin: 0 0 24px; line-height: 1.6; }
.bpc-btn { display: inline-block; background: linear-gradient(135deg, var(--fp-pink) 0%, var(--fp-pink-deep) 100%); color: #fff; border-radius: 28px; padding: 13px 36px; font-size: 15px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 20px rgba(212,82,158,.5); transition: transform .15s, box-shadow .15s; }
.bpc-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(212,82,158,.65); color: #fff; text-decoration: none; }
.blog-related-posts { margin-top: 48px; }
.related-posts-title { font-size: 14px; font-weight: 700; color: var(--fp-pink); margin: 0 0 16px; text-transform: uppercase; letter-spacing: .06em; }
.related-posts-title i { margin-right: 7px; }
.related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 600px) { .related-posts-grid { grid-template-columns: 1fr; } }
.related-post-card { position: relative; display: flex; flex-direction: column; border: 1px solid #eee; border-radius: 10px; overflow: hidden; text-decoration: none; transition: box-shadow .15s, transform .15s; background: #fff; }
.related-post-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.10); transform: translateY(-2px); }
.related-post-thumb { height: 110px; background-size: cover; background-position: center; background-color: #f5e8f5; }
.related-post-thumb--empty { background: linear-gradient(135deg, #ddc9f6 0%, #e8d5f0 100%); }
.related-post-info { padding: 12px 14px; }
.related-post-topic { font-size: 10px; font-weight: 700; color: var(--fp-pink); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 5px; }
.related-post-title { font-size: 13px; font-weight: 700; color: #333; line-height: 1.45; margin-bottom: 6px; }
.related-post-date { font-size: 11px; color: #aaa; }
p.blog-section-tags { font-size: 12px; color: #aaa; margin: -8px 0 28px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
p.blog-section-tags span { font-weight: 600; color: #bbb; flex-shrink: 0; }
.section-tag-chip { display: inline-block; background: #fff; border: 1px solid #d9c6f5; color: var(--fp-pink-dark); border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.section-tag-chip:hover { background: var(--fp-pink); color: #fff; border-color: var(--fp-pink); }
.blog-post-content a.blog-tag-link { color: var(--fp-pink-dark); text-decoration: underline dotted; text-underline-offset: 3px; font-weight: 600; transition: color .15s; }
.blog-post-content a.blog-tag-link:hover { color: var(--fp-pink); text-decoration: underline; }

/* ── Reading meta (reading time + updated line) ─────────────────────────── */
.blog-reading-meta { font-size: 13px; color: #aaa; }
.blog-updated-line { font-size: 12px; color: #b0a0aa; margin: -18px 0 26px; }
.blog-updated-line i { margin-right: 4px; }

/* ── Table of contents ──────────────────────────────────────────────────── */
.blog-toc { margin: 0 0 32px; padding: 16px 20px; background: #f9f6ff; border: 1px solid #e7ddf9; border-radius: 12px; }
.blog-toc-title { font-size: 12px; font-weight: 700; color: #b06aa0; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; }
.blog-toc-title i { margin-right: 6px; }
.blog-toc ol { margin: 0; padding-left: 20px; }
.blog-toc li { margin-bottom: 5px; }
.blog-toc a { color: #555; text-decoration: none; font-size: 14px; }
.blog-toc a:hover { color: var(--fp-pink); text-decoration: underline; }

/* ── Post page layout with optional sidebar rail ────────────────────────── */
.blog-layout { display: block; }
.blog-sidebar { display: none; }
@media (min-width: 1100px) {
    .blog-layout.has-sidebar { display: flex; gap: 32px; align-items: flex-start; max-width: 1120px; margin: 80px auto 60px; padding: 0 20px; justify-content: center; }
    .blog-layout.has-sidebar .blog-post-container { margin: 0; padding: 0; flex: 0 1 740px; min-width: 0; }
    .blog-layout.has-sidebar .blog-sidebar { display: block; flex: 0 0 300px; }
    .blog-layout.has-sidebar .blog-sidebar-sticky { position: sticky; top: 66px; text-align: center; min-height: 1px; }
}

/* ── Sponsored badge on cards ───────────────────────────────────────────── */
.blog-sponsored-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(255,251,235,.96); border: 1px solid #f6d860; color: #8a6d0b; border-radius: 20px; padding: 2px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.related-post-card .blog-sponsored-badge { top: 8px; left: 8px; font-size: 9px; padding: 1px 8px; }

/* ── "Write for us" strip (blog listing footer) ─────────────────────────── */
.blog-writeforus { margin: 44px 0 0; padding: 22px 24px; background: linear-gradient(135deg, #f6f1fe 0%, #f0e6fd 100%); border: 1px solid #d9c6f5; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.blog-writeforus-text b { display: block; font-size: 16px; color: #333; margin-bottom: 3px; }
.blog-writeforus-text span { font-size: 13px; color: #888; }
.blog-writeforus-btn { flex-shrink: 0; background: linear-gradient(135deg, var(--fp-pink), var(--fp-pink-deep)); color: #fff; border-radius: 22px; padding: 10px 22px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.blog-writeforus-btn:hover { color: #fff; text-decoration: none; box-shadow: 0 4px 16px rgba(212,82,158,.4); }

/* ── Author archive page ────────────────────────────────────────────────── */
.blog-author-hero { max-width: 900px; margin: 80px auto 30px; padding: 0 20px; display: flex; align-items: center; gap: 20px; }
.blog-author-hero-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid #ddc9f6; flex-shrink: 0; }
.blog-author-hero-initial { width: 84px; height: 84px; border-radius: 50%; background: linear-gradient(135deg, #ddc9f6, var(--fp-pink)); color: #fff; font-size: 34px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.blog-author-hero h1 { font-size: 26px; font-weight: 800; color: #333; margin: 0 0 6px; }
.blog-author-hero .blog-author-hero-bio { font-size: 14px; color: #777; line-height: 1.6; margin: 0; }
.blog-author-hero-count { font-size: 12px; color: #aaa; margin-top: 6px; }

/* ── Site-wide "From the Blog" pre-footer band ──────────────────────────── */
/* A normal-flow section that sits ABOVE the (absolutely-positioned, fixed-
   height) .main-footer — never inside it — so it can be any height without
   colliding with the footer nav. */
.blog-prefooter { background: #faf7fa; border-top: 1px solid #ececec; padding: 30px 20px 34px; }
.blog-prefooter-inner { max-width: 960px; margin: 0 auto; }
.blog-prefooter-title { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #9a8fa4; margin: 0 0 22px; }
.blog-prefooter-title i { color: var(--fp-pink); margin-right: 7px; }
.blog-prefooter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.blog-prefooter-post { display: flex; gap: 12px; align-items: center; text-decoration: none; padding: 8px 10px; border-radius: 10px; transition: background .15s, box-shadow .15s; }
.blog-prefooter-post:hover { background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.06); }
.blog-prefooter-thumb { width: 64px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: linear-gradient(135deg,#f8d5ec,#ecdcf3); }
.blog-prefooter-ttl { font-size: 13px; font-weight: 600; color: #555; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-prefooter-post:hover .blog-prefooter-ttl { color: var(--fp-pink-deep); }
@media (max-width: 600px) { .blog-prefooter-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .blog-prefooter-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   DARK THEME  (v1 — navbar, feed & core chrome + blog shells)
   Activated by html[data-theme="dark"], set by the no-flash script in
   base.html.twig (localStorage → OS prefers-color-scheme fallback).
   Re-points the design tokens, then patches Bootstrap chrome and the
   class-driven surfaces that still carry literal colours.
   NOTE: elements built with inline style="" in templates (some
   secondary strips/modals) are not yet themed — follow-up pass.
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
    --fp-pink-text: #c4b5fd;
    --fp-pink-dark: #c4b5fd;
    --fp-text: #efecf8;
    --fp-text-soft: #cbc4d4;
    --fp-text-muted: #a79fc0;
    --fp-text-dim: #a99fb4;
    --fp-text-faint: #857b90;
    --fp-text-faint2: #6f6679;
    --fp-bg: #0b0910;
    --fp-surface: #151020;
    --fp-surface-soft: #1c1530;
    --fp-surface-pink: #241a3a;
    --fp-surface-pink-soft: #1c1530;
    --fp-border: #241d33;
    --fp-border-pink: #2c2340;
    --fp-border-pink2: #3a2f52;
    --fp-border-pinkchip: #2f2545;
    --fp-shadow: rgba(0,0,0,.45);
    --fp-shadow-hover: rgba(0,0,0,.6);
    color-scheme: dark;
}

/* ---- Bootstrap chrome ---- */
html[data-theme="dark"] .navbar-default { background:#181520; border-color:#2a2531; }
html[data-theme="dark"] .navbar-default .navbar-brand,
html[data-theme="dark"] .navbar-default .navbar-nav > li > a { color:#cbc4d4; }
html[data-theme="dark"] .navbar-default .navbar-nav > li > a:hover,
html[data-theme="dark"] .navbar-default .navbar-nav > li > a:focus,
html[data-theme="dark"] .navbar-default .navbar-nav > .open > a { color:#fff; background:#221d2b; }
html[data-theme="dark"] .navbar-default .navbar-toggle { border-color:#3a3342; }
html[data-theme="dark"] .navbar-default .navbar-toggle .icon-bar { background:#cbc4d4; }
html[data-theme="dark"] .dropdown-menu { background:#1d1a24; border-color:#2e2836; box-shadow:0 6px 22px rgba(0,0,0,.55); }
html[data-theme="dark"] .dropdown-menu > li > a { color:#cbc4d4; }
html[data-theme="dark"] .dropdown-menu > li > a:hover,
html[data-theme="dark"] .dropdown-menu > li > a:focus { background:#2a2431; color:#fff; }
html[data-theme="dark"] .dropdown-menu .divider { background:#2e2836; }
html[data-theme="dark"] .dropdown-header { color:#8a8194; }
html[data-theme="dark"] .form-control { background:#1d1a24; border-color:#332c3b; color:#e7e2ec; }
html[data-theme="dark"] .form-control::placeholder { color:#8a8194; }
html[data-theme="dark"] .btn-default { background:#252030; border-color:#332c3b; color:#cbc4d4; }
html[data-theme="dark"] .btn-default:hover { background:#2f2839; color:#fff; }
html[data-theme="dark"] .modal-content { background:#1d1a24; color:#e7e2ec; }
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color:#2e2836; }
html[data-theme="dark"] .close { color:#e7e2ec; text-shadow:none; opacity:.7; }
html[data-theme="dark"] .main-footer { background:#100e16; border-top:1px solid #241f2b; }
html[data-theme="dark"] .main-footer a { color:#9c93a8; }
html[data-theme="dark"] .main-footer a:hover { color:var(--fp-pink); }

/* ---- Feed surfaces still carrying literal colours ---- */
html[data-theme="dark"] .fp-header,
html[data-theme="dark"] .fp-tags-bar { border-bottom-color:#2a2431; }
html[data-theme="dark"] .fp-page-title { color:var(--fp-text-soft); }
html[data-theme="dark"] .fp-tab { color:var(--fp-text-muted); }
html[data-theme="dark"] .fp-tab:hover { background:#2b2030; color:var(--fp-pink-text); }
html[data-theme="dark"] .fp-tags-label,
html[data-theme="dark"] .fp-empty,
html[data-theme="dark"] .rv-label { color:var(--fp-text-faint); }
html[data-theme="dark"] .fp-tag-chip { background:#2b2030; color:var(--fp-pink-text); }
html[data-theme="dark"] .fp-tag-chip:hover { background:var(--fp-pink); color:#fff; }
html[data-theme="dark"] .fp-tag-description { color:var(--fp-text-muted); border-bottom-color:#241f2b; }
html[data-theme="dark"] .fp-card-username { color:var(--fp-text-soft); }
html[data-theme="dark"] .fp-card-time { color:var(--fp-text-faint2); }
html[data-theme="dark"] .fp-card-ad,
html[data-theme="dark"] .fp-banner-ad,
html[data-theme="dark"] .fp-sidebar-ad { background:#1b1622; border-color:#3a2f40; }
html[data-theme="dark"] .fp-sticky-ad { background:rgba(20,17,26,.97); border-top-color:#3a2f40; }
html[data-theme="dark"] .fp-sticky-ad-close { background:#2f2839; color:#cbc4d4; }
html[data-theme="dark"] .fp-home-intro { color:var(--fp-text-muted); }

/* ---- Blog shells ---- */
html[data-theme="dark"] .blog-card,
html[data-theme="dark"] .related-post-card { background:#1d1a24; border-color:#2a2431; }
html[data-theme="dark"] .blog-header h1,
html[data-theme="dark"] .blog-card-title a,
html[data-theme="dark"] .blog-post-title,
html[data-theme="dark"] .blog-post-content,
html[data-theme="dark"] .author-card-name,
html[data-theme="dark"] .author-card-name a,
html[data-theme="dark"] .bcb-title,
html[data-theme="dark"] .related-post-title,
html[data-theme="dark"] .blog-author-hero h1,
html[data-theme="dark"] .blog-writeforus-text b { color:var(--fp-text); }
html[data-theme="dark"] .blog-post-content h2,
html[data-theme="dark"] .blog-post-content h3 { color:var(--fp-text); }
html[data-theme="dark"] .blog-subtitle,
html[data-theme="dark"] .blog-empty,
html[data-theme="dark"] .blog-card-excerpt,
html[data-theme="dark"] .blog-card-date,
html[data-theme="dark"] .page-info,
html[data-theme="dark"] .blog-breadcrumb,
html[data-theme="dark"] .blog-post-meta,
html[data-theme="dark"] .author-card-bio,
html[data-theme="dark"] .bcb-desc,
html[data-theme="dark"] .related-post-date,
html[data-theme="dark"] .blog-reading-meta,
html[data-theme="dark"] .blog-author-hero-bio,
html[data-theme="dark"] .blog-writeforus-text span,
html[data-theme="dark"] .blog-prefooter-ttl,
html[data-theme="dark"] .blog-toc a { color:var(--fp-text-muted); }
html[data-theme="dark"] .blog-post-excerpt { background:#221a26; color:var(--fp-text-soft); }
html[data-theme="dark"] .blog-toc,
html[data-theme="dark"] .blog-author-card,
html[data-theme="dark"] .blog-related-tags { background:#1b1622; border-color:#322a39; }
html[data-theme="dark"] .related-tag-chip,
html[data-theme="dark"] .section-tag-chip { background:#241f2b; border-color:#443a4a; color:var(--fp-pink-text); }
html[data-theme="dark"] .blog-post-footer { border-top-color:#2a2431; }
html[data-theme="dark"] .blog-prefooter { background:#100e16; border-top-color:#241f2b; }
html[data-theme="dark"] .blog-prefooter-post:hover { background:#1d1a24; }
html[data-theme="dark"] .blog-updated-line { color:#9a8fa0; }

/* ---- base.html.twig inline <style> patches ---- */
html[data-theme="dark"] .streak-pill { background:#2b2030; border-color:#443a4a; color:#ef93c6; }
html[data-theme="dark"] .tag-ac-list { background:#1d1a24; border-color:#332c3b; }
html[data-theme="dark"] .tag-ac-list li a { color:#cbc4d4; }
html[data-theme="dark"] .tag-ac-list li a:hover,
html[data-theme="dark"] .tag-ac-list li.ac-active a { background:#2b2030; color:var(--fp-pink); }

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE FEED STRIPS  (migrated out of inline style="" so they
   theme in dark mode). Light values match the previous inline ones.
   ═══════════════════════════════════════════════════════════════ */
.fp-welcome-strip {
    display: flex; align-items: center; gap: 10px;
    background: var(--fp-surface);
    border: 1px solid #f1d9ea;
    border-left: 4px solid var(--fp-pink);
    border-radius: 10px;
    padding: 12px 16px; margin: 0 0 12px;
    font-size: 14px; color: var(--fp-text-soft); text-decoration: none;
}
.fp-welcome-strip:hover { text-decoration: none; }
.fp-welcome-strip:hover .fp-welcome-strip__cta { background: var(--fp-pink-hover); }
/* Own color so hovering the (link) strip can't recolor the text — only the
   button gets the hover. */
.fp-welcome-strip__body { flex: 1; color: var(--fp-text-soft); }
.fp-welcome-strip:hover .fp-welcome-strip__body { color: var(--fp-text-soft); }
.fp-welcome-strip__body strong { color: #e05c9a; }
.fp-welcome-strip__cta {
    background: var(--fp-pink); color: #fff;
    border-radius: 20px; padding: 7px 18px; font-size: 13px; font-weight: 600; white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,.28);
}

.fp-challenge {
    background: var(--fp-surface);
    border: 1px solid #f1d9ea;
    border-radius: 12px; padding: 14px 16px; margin: 0 0 16px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.fp-challenge.is-claimed { background: #f2fbf4; border-color: #c8e6c9; }
.fp-challenge-emoji { font-size: 30px; line-height: 1; }
.fp-challenge-main { flex: 1; min-width: 200px; }
.fp-challenge-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fp-pink-dark); }
.fp-challenge-label { font-size: 15px; font-weight: 700; color: var(--fp-text); }
.fp-challenge-done { font-size: 13px; color: #2e7d32; font-weight: 600; }
.fp-challenge-bar { margin-top: 6px; height: 8px; background: #f3e3ef; border-radius: 6px; overflow: hidden; max-width: 280px; }
.fp-challenge-bar-fill { height: 100%; background: linear-gradient(90deg, #f5b0d8, var(--fp-pink)); }
.fp-challenge-meta { font-size: 12px; color: #8a8a8a; margin-top: 4px; }
.fp-challenge-meta strong { color: #e05c9a; }
.fp-challenge-cta { background: var(--fp-pink); border-radius: 20px; padding: 7px 18px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.28); }
/* Force white across ALL link states — :visited was painting it dark. */
.fp-challenge-cta,
.fp-challenge-cta:link,
.fp-challenge-cta:visited,
.fp-challenge-cta:hover,
.fp-challenge-cta:focus,
.fp-challenge-cta:active { color: #fff !important; text-decoration: none; }
.fp-challenge-cta:hover { background: var(--fp-pink-hover); }

/* Dark variants for the strips */
html[data-theme="dark"] .fp-welcome-strip { border-color: #3a2f3d; border-left-color: var(--fp-pink); }
html[data-theme="dark"] .fp-challenge { border-color: #3a2f3d; }
html[data-theme="dark"] .fp-challenge.is-claimed { background: #16241a; border-color: #2b4a30; }
html[data-theme="dark"] .fp-challenge-done { color: #7bd88a; }
html[data-theme="dark"] .fp-challenge-bar { background: #2b2030; }
html[data-theme="dark"] .fp-challenge-meta { color: var(--fp-text-muted); }

/* ── post/show: structural wrappers are transparent (body shows through);
   only the inline dark text + the light tag-chip need patching. Scoped
   !important beats the non-important inline color= declarations. ── */
html[data-theme="dark"] .tag-chip { background:#2b2030; color:var(--fp-text-soft); }
html[data-theme="dark"] .post-details h1,
html[data-theme="dark"] .post-details h2 { color:var(--fp-text) !important; }
html[data-theme="dark"] .post-details nav a,
html[data-theme="dark"] .post-details nav span { color:var(--fp-text-muted) !important; }
html[data-theme="dark"] .post-details > p { color:var(--fp-text-soft) !important; }
html[data-theme="dark"] .post-details .text-muted { color:var(--fp-text-faint) !important; }
html[data-theme="dark"] .col-user-info h2 a { color:var(--fp-text); }

/* ── Bootstrap surfaces: panels/wells/tables/lists (settings, admin, points) ── */
html[data-theme="dark"] .panel { background:var(--fp-surface); border-color:var(--fp-border); box-shadow:0 1px 3px rgba(0,0,0,.4); }
html[data-theme="dark"] .panel-default > .panel-heading,
html[data-theme="dark"] .panel-heading { background:#241f2b; border-color:var(--fp-border); color:var(--fp-text); }
html[data-theme="dark"] .panel-title { color:var(--fp-text); }
html[data-theme="dark"] .panel-body { color:var(--fp-text-soft); }
html[data-theme="dark"] .panel-footer { background:#221d2a; border-color:var(--fp-border); }
html[data-theme="dark"] .well { background:#1b1622; border-color:var(--fp-border); }
html[data-theme="dark"] .list-group-item { background:var(--fp-surface); border-color:var(--fp-border); color:var(--fp-text-soft); }
html[data-theme="dark"] .table { color:var(--fp-text-soft); }
html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table > tbody > tr > td,
html[data-theme="dark"] .table > tbody > tr > th,
html[data-theme="dark"] .table > tfoot > tr > td { border-color:var(--fp-border); }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background:#1b1622; }
html[data-theme="dark"] .table-hover > tbody > tr:hover { background:#241f2b; }
html[data-theme="dark"] .text-muted { color:var(--fp-text-faint) !important; }
html[data-theme="dark"] hr { border-top-color:var(--fp-border); }
html[data-theme="dark"] label,
html[data-theme="dark"] .control-label { color:var(--fp-text-soft); }

/* ── Notifications (inline bg on .media, needs !important) ── */
html[data-theme="dark"] .media { background:var(--fp-surface) !important; border-color:var(--fp-border) !important; }

/* ── Profile post-card tag chip ── */
html[data-theme="dark"] .post-card-tag { background:#2b2030; color:var(--fp-text-muted); }

/* ── Fill the page behind the absolutely-positioned .main-footer.
   In the sticky-footer layout the footer is out of flow, so where the
   in-flow body ends the default-white <html> background shows through
   ("scroll down and it turns white"). Painting <html> dark closes it. ── */
html[data-theme="dark"] { background: var(--fp-bg); }

/* ── Profile own-view: creator tools, tab bar, badges panel ── */
html[data-theme="dark"] .creator-tools { background:var(--fp-surface) !important; border-color:var(--fp-border) !important; }
html[data-theme="dark"] .ct-card { background:#241f2b !important; border-color:var(--fp-border) !important; }
html[data-theme="dark"] .ct-body h4 { color:var(--fp-text); }
html[data-theme="dark"] .ct-body p,
html[data-theme="dark"] .ct-step,
html[data-theme="dark"] .ct-head .muted { color:var(--fp-text-muted); }
html[data-theme="dark"] .ct-verify input { background:#1d1a24; border-color:#332c3b; color:var(--fp-text); }
html[data-theme="dark"] .site-tabs-bar { background:var(--fp-surface) !important; border-color:var(--fp-border) !important; }
html[data-theme="dark"] .btn-tab { color:var(--fp-text-muted); }
html[data-theme="dark"] .btn-tab.tab-active { color:var(--fp-pink); }
html[data-theme="dark"] .profile-badges { background:var(--fp-surface) !important; border-color:var(--fp-border) !important; }
html[data-theme="dark"] .profile-badges > div:first-child { color:var(--fp-text) !important; }
html[data-theme="dark"] .profile-badges span[style*="background:#fdf4fa"] { background:#2b2030 !important; border-color:#443a4a !important; }
html[data-theme="dark"] .profile-badges span[style*="background:#fafafa"] { background:#1b1622 !important; border-color:#3a3342 !important; }

/* Tab bar: the white block is the inner col-md-10 row, not the outer wrapper. */
html[data-theme="dark"] .site-tabs-bar,
html[data-theme="dark"] .site-tabs-bar-1,
html[data-theme="dark"] .col-btns,
html[data-theme="dark"] .site-tabs { background:var(--fp-surface) !important; border-color:var(--fp-border) !important; }
html[data-theme="dark"] .site-tabs a,
html[data-theme="dark"] .btn-tab { color:var(--fp-text-soft); }
html[data-theme="dark"] .btn-tab.tab-active { color:var(--fp-pink); }

/* ── post/show: Share button (Bootstrap .alert-info), media letterbox, borders ── */
html[data-theme="dark"] .post-action-bar .alert-info { background:#241f2b; border-color:var(--fp-border); color:var(--fp-text); }
html[data-theme="dark"] .post-media,
html[data-theme="dark"] #picture,
html[data-theme="dark"] .video-container { background:#000; }
html[data-theme="dark"] .col-inner,
html[data-theme="dark"] .col-user-info,
html[data-theme="dark"] .other-box { border-color:var(--fp-border); }

/* ── Profile post grid — match the dark .fp-card on the index for consistency ── */
html[data-theme="dark"] .col-post { background:var(--fp-surface); border-color:var(--fp-border); }
html[data-theme="dark"] .post-footer,
html[data-theme="dark"] .post-card-tags { background:var(--fp-surface); }
html[data-theme="dark"] .post-footer,
html[data-theme="dark"] .post-footer li,
html[data-theme="dark"] .post-footer a,
html[data-theme="dark"] .post-footer small { color:var(--fp-text-soft); }
html[data-theme="dark"] .post-img { background:#000; }

/* ── Points & Ranks page ── */
html[data-theme="dark"] .rank-card { background:var(--fp-surface); border-color:var(--fp-border); }
html[data-theme="dark"] .rank-current { background:#241c28; border-color:var(--fp-pink); }
html[data-theme="dark"] .rank-card-premium { background:linear-gradient(135deg,#2a1a26 0%,#241a24 100%); border-color:#5a3a50; }
html[data-theme="dark"] .rank-pts { color:var(--fp-text-faint); }
html[data-theme="dark"] .premium-callout { background:linear-gradient(135deg,#241620 0%,#1f1a24 100%); border-color:#4a2f42; }
html[data-theme="dark"] .premium-callout-body ul { color:var(--fp-text-muted); }
html[data-theme="dark"] .my-progress { background:var(--fp-surface); border-color:var(--fp-border); }
html[data-theme="dark"] .progress-bar-track { background:#2b2030; }
html[data-theme="dark"] .action-table { background:var(--fp-surface); border-color:var(--fp-border); }
html[data-theme="dark"] .action-table th { background:#241f2b; color:var(--fp-text-faint); border-bottom-color:var(--fp-border); }
html[data-theme="dark"] .action-table td { border-bottom-color:var(--fp-border); }
html[data-theme="dark"] .rank-badge-nsfw { background:#2b2030; color:#e58bbf; }
html[data-theme="dark"] .rank-badge-gate { background:#1a2733; color:#6db3e8; }
html[data-theme="dark"] .rank-badge-dl { background:#16281c; color:#6fc98a; }
html[data-theme="dark"] .rank-badge-noDl { background:#1f1a26; color:var(--fp-text-faint2); }
html[data-theme="dark"] .pts-pill { background:#2b2030; color:#e58bbf; }
html[data-theme="dark"] .points-balance-card { background:#241620 !important; border-color:#4a2f42 !important; }
html[data-theme="dark"] .points-balance-card div[style*="color:#8a6d1a"] { color:var(--fp-text-soft) !important; }
html[data-theme="dark"] .points-streak-card { background:var(--fp-surface) !important; }
html[data-theme="dark"] .points-streak-card div[style*="color:#333"] { color:var(--fp-text) !important; }

/* ── TikTok feed / post-show info-panel buttons (white → dark) ── */
html[data-theme="dark"] .fp-panel-like-btn { background:#2b2030; color:#e58bbf; }
html[data-theme="dark"] .fp-panel-like-btn:hover { background:var(--fp-pink); color:#fff; }
html[data-theme="dark"] .fp-panel-open-btn,
html[data-theme="dark"] .fp-panel-share-btn { background:#1d1a24; color:var(--fp-text-soft); border-color:#332c3b; }
html[data-theme="dark"] .fp-panel-open-btn:hover,
html[data-theme="dark"] .fp-panel-share-btn:hover { border-color:var(--fp-pink); color:var(--fp-pink); }

/* ── Upload / create-post page ── */
html[data-theme="dark"] .upload-card { background:var(--fp-surface); border-color:var(--fp-border); }
html[data-theme="dark"] .upload-card hr { border-top-color:var(--fp-border); }
html[data-theme="dark"] .type-tab { border-color:#332c3b; background:#241f2b; color:var(--fp-text-soft); }
html[data-theme="dark"] .type-tab:hover { border-color:#5a3a50; color:var(--fp-text); }
html[data-theme="dark"] .type-tab.active { border-color:var(--fp-pink); background:#2b2030; color:#e58bbf; }
html[data-theme="dark"] .drop-zone { border-color:#3a3342; background:#17141d; }
html[data-theme="dark"] .drop-zone:hover,
html[data-theme="dark"] .drop-zone.drag-over { border-color:var(--fp-pink); background:#241620; }
html[data-theme="dark"] .dz-idle i { color:#4a4352; }
html[data-theme="dark"] .dz-idle p { color:var(--fp-text-soft); }
html[data-theme="dark"] .dz-idle small { color:var(--fp-text-faint); }
html[data-theme="dark"] .drop-zone.has-file { border-color:#4c8a4c; background:#16211a; }
html[data-theme="dark"] .drop-zone.has-file:hover { border-color:#5cb85c; background:#1b271e; }
html[data-theme="dark"] .dz-fname { color:var(--fp-text); }
html[data-theme="dark"] .dz-thumb { border-color:#2f4a2f; }
/* Caption creator */
html[data-theme="dark"] #caption-creator { background:var(--fp-surface-pink-soft); border-color:var(--fp-border-pink2); }
html[data-theme="dark"] #cc-canvas { border-color:#3a2f40; }
html[data-theme="dark"] .cc-controls input[type=text],
html[data-theme="dark"] .cc-controls select { background:#17141d; border-color:#332c3b; color:var(--fp-text); }
html[data-theme="dark"] .cc-hint { color:var(--fp-text-faint); }
/* Tags */
html[data-theme="dark"] .pop-tag-bubble { background:#241f2b; color:var(--fp-text-soft); border-color:#332c3b; }
html[data-theme="dark"] .pop-tag-bubble:hover { background:#2b2030; border-color:#5a3a50; color:#e58bbf; }
html[data-theme="dark"] #tag-suggestions { background:#1d1a24; border-color:#332c3b; }
html[data-theme="dark"] #tag-suggestions .sug-item { border-bottom-color:var(--fp-border); color:var(--fp-text-soft); }
html[data-theme="dark"] #tag-suggestions .sug-item:hover { background:#2b2030; }

/* ── Blog: light-pink callout / write-for-us bands ── */
html[data-theme="dark"] .blog-callout-box,
html[data-theme="dark"] .blog-writeforus { background:linear-gradient(135deg,#241620 0%,#1f1a24 100%); border-color:#4a2f42; }
html[data-theme="dark"] .blog-writeforus-text b { color:var(--fp-text); }
html[data-theme="dark"] .blog-writeforus-text span { color:var(--fp-text-muted); }

/* ── Bootstrap pagination (KNP paginator) ── */
html[data-theme="dark"] .pagination > li > a,
html[data-theme="dark"] .pagination > li > span { background:var(--fp-surface); border-color:var(--fp-border); color:var(--fp-text-soft); }
html[data-theme="dark"] .pagination > li > a:hover,
html[data-theme="dark"] .pagination > li > a:focus { background:#2b2030; border-color:var(--fp-border); color:var(--fp-pink); }
html[data-theme="dark"] .pagination > .active > a,
html[data-theme="dark"] .pagination > .active > span,
html[data-theme="dark"] .pagination > .active > a:hover,
html[data-theme="dark"] .pagination > .active > span:hover { background:var(--fp-pink); border-color:var(--fp-pink); color:#fff; }
html[data-theme="dark"] .pagination > .disabled > a,
html[data-theme="dark"] .pagination > .disabled > span,
html[data-theme="dark"] .pagination > .disabled > span:hover { background:var(--fp-surface); border-color:var(--fp-border); color:var(--fp-text-faint2); }

/* ── Creator Dashboard ── */
html[data-theme="dark"] .cd-stat,
html[data-theme="dark"] .cd-action,
html[data-theme="dark"] .cd-panel { background:var(--fp-surface); border-color:var(--fp-border); }
html[data-theme="dark"] .cd-action h4,
html[data-theme="dark"] .cd-boost-title,
html[data-theme="dark"] .cd-panel h3 { color:var(--fp-text); }
html[data-theme="dark"] .cd-share input { background:#1d1a24; border-color:#332c3b; color:var(--fp-text); }
html[data-theme="dark"] .cd-links li,
html[data-theme="dark"] .cd-boost-row { border-top-color:var(--fp-border); }
html[data-theme="dark"] .cd-card { background:#1d1a24; border-color:var(--fp-border); }
html[data-theme="dark"] .cd-thumb { background:#2b2030; }
html[data-theme="dark"] .cd-clicks { color:var(--fp-text-soft); }
html[data-theme="dark"] .cd-boost-extend { border-color:var(--fp-border); }
html[data-theme="dark"] .cd-boost-extend:hover { background:#241620; }
html[data-theme="dark"] .cd-btn-ghost { border-color:var(--fp-border); }
html[data-theme="dark"] .cd-btn-ghost:hover, html[data-theme="dark"] .cd-btn-ghost:focus { background:#241620; }
html[data-theme="dark"] .cd-boost-suggest { background:linear-gradient(135deg,#241620,#1f1a24); border-color:#4a2f42; color:var(--fp-text-soft); }

/* ── Point history (inline-styled rows) ── */
html[data-theme="dark"] .points-history-list { border-color:var(--fp-border) !important; }
html[data-theme="dark"] .points-history-list > div { background:var(--fp-surface) !important; border-bottom-color:var(--fp-border) !important; }
html[data-theme="dark"] .points-history-list > div:nth-child(even) { background:#191620 !important; }
html[data-theme="dark"] .points-history-list > div > div:first-child { color:var(--fp-text-soft) !important; }

/* ══════════════════════════════════════════════════════════════════
   ADMIN CP  — shared chrome (admin/base.html.twig) applies to every
   admin page; per-page bespoke panels are themed page-by-page.
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .admin-sidebar { background:#181520; border-right-color:var(--fp-border); }
html[data-theme="dark"] .admin-sidebar .logo { border-bottom-color:var(--fp-border); }
html[data-theme="dark"] .admin-sidebar a { color:var(--fp-text-soft); }
html[data-theme="dark"] .admin-sidebar a:hover,
html[data-theme="dark"] .admin-sidebar a.active { background:#241620; color:var(--fp-pink); }
html[data-theme="dark"] .nav-section { color:var(--fp-text-faint2); }
html[data-theme="dark"] .sidebar-divider { border-top-color:var(--fp-border); }
html[data-theme="dark"] .adm-alert-success { background:#132a1c; border-color:#2b5a3a; color:#8fe0aa; }
html[data-theme="dark"] .adm-alert-danger  { background:#2c1618; border-color:#5a2b30; color:#f0a0a6; }
html[data-theme="dark"] .adm-alert-warning { background:#2a2410; border-color:#5a4d1f; color:#e6d38a; }
html[data-theme="dark"] .adm-alert-info    { background:#132430; border-color:#2b4a5a; color:#8fc9e6; }

/* Admin: Affiliate Keywords page */
html[data-theme="dark"] .aff-card,
html[data-theme="dark"] .aff-stat { background:var(--fp-surface); border-color:var(--fp-border); }
html[data-theme="dark"] .aff-field input,
html[data-theme="dark"] .aff-field select { background:#1d1a24; border-color:#332c3b; color:var(--fp-text); }
html[data-theme="dark"] .aff-field input:focus,
html[data-theme="dark"] .aff-field select:focus { background:#241620; border-color:var(--fp-pink); }
html[data-theme="dark"] .aff-table th { color:var(--fp-text-faint); border-bottom-color:var(--fp-border); }
html[data-theme="dark"] .aff-table td { border-bottom-color:var(--fp-border); }
html[data-theme="dark"] .aff-table tr:hover td { background:#241f2b; }
html[data-theme="dark"] .aff-keyword-chip { background:#2b2030; border-color:#443a4a; color:#e58bbf; }
html[data-theme="dark"] .aff-group-header { background:#241620; color:var(--fp-pink); }
html[data-theme="dark"] .toggle-slider { background:#3a3342; }
html[data-theme="dark"] .aff-del-btn { border-color:#5a2b30; color:#e57373; }
html[data-theme="dark"] .aff-del-btn:hover { background:#2c1618; }

/* ── Profile "Following" button: match .btn-default in dark ── */
html[data-theme="dark"] .follow-pastel-btn.unfollow-active { background:#252030; color:#cbc4d4; border-color:#332c3b; }
html[data-theme="dark"] .follow-pastel-btn.unfollow-active:hover { background:#2f2839; color:#fff; border-color:#3a3342; }

/* ── Default profile banner (no custom upload): a token-friendly gradient that
   suits both themes, replacing the light cream default-banner.jpeg. Custom
   user banners still render via the inline background-image. ── */
.card-profile--default { background: linear-gradient(120deg, #f3b3d6 0%, #e488bf 50%, #cf72ab 100%); }
html[data-theme="dark"] .card-profile--default { background: linear-gradient(120deg, #2b1c30 0%, #201826 55%, #15111b 100%); }

/* ── Ad filler cards: tone down the light-pink gradient/badge on dark ── */
html[data-theme="dark"] .fp-card-ad .fp-card-thumb { background: linear-gradient(135deg, #241620, #1f1a24); }
html[data-theme="dark"] .fp-ad-badge { background: rgba(124,58,237,.14); color: #e58bbf; }

/* ── /tags/ browse page ── */
html[data-theme="dark"] .tag-category-header { border-bottom-color: #3a2f3d; }
html[data-theme="dark"] .tag-category-header a { color: var(--fp-text); }
html[data-theme="dark"] .tag-category-header a:hover { color: var(--fp-pink); }
html[data-theme="dark"] .tag-category-count { background: #241f2b; color: var(--fp-text-faint); }
html[data-theme="dark"] .tag-card { background: var(--fp-surface); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
html[data-theme="dark"] .tag-info-name { color: var(--fp-text); }
html[data-theme="dark"] .tags-page .page-sub,
html[data-theme="dark"] .tag-info-count { color: var(--fp-text-faint); }

/* ── Feedback page (inline-styled) ── */
html[data-theme="dark"] .fb-page h1 { color: var(--fp-text) !important; }
html[data-theme="dark"] .fb-page > p { color: var(--fp-text-muted) !important; }
html[data-theme="dark"] .fb-page label[style*="color:#444"] { color: var(--fp-text-soft) !important; }
html[data-theme="dark"] .fb-page textarea { border-color: #332c3b !important; }
html[data-theme="dark"] .fb-radio-label { background: #241f2b; border-color: #3a2f3d; color: var(--fp-text-soft); }
html[data-theme="dark"] .fb-page div[style*="#fffbeb"] { background: #2a2410 !important; border-color: #5a4d1f !important; color: #e6d38a !important; }

/* ── Quill editor, dark theme (snow ships light-only) ── */
html[data-theme="dark"] .rte-quill .ql-toolbar,
html[data-theme="dark"] .rte-quill .ql-container { border-color: #332c3b; }
html[data-theme="dark"] .rte-quill .ql-toolbar { background: #241f2b; }
html[data-theme="dark"] .rte-quill .ql-container { background: var(--fp-surface); }
html[data-theme="dark"] .rte-quill .ql-editor { color: var(--fp-text); }
html[data-theme="dark"] .rte-quill .ql-editor.ql-blank::before { color: var(--fp-text-faint); }
html[data-theme="dark"] .rte-quill .ql-editor blockquote { border-left-color: #3a3342; color: var(--fp-text-soft); }
/* Toolbar glyphs are inline SVG paths — recolour stroke/fill, not `color`. */
html[data-theme="dark"] .rte-quill .ql-snow .ql-stroke { stroke: var(--fp-text-soft); }
html[data-theme="dark"] .rte-quill .ql-snow .ql-fill { fill: var(--fp-text-soft); }
html[data-theme="dark"] .rte-quill .ql-snow .ql-picker { color: var(--fp-text-soft); }
html[data-theme="dark"] .rte-quill .ql-snow .ql-picker-options { background: #241f2b; border-color: #332c3b; }
html[data-theme="dark"] .rte-quill .ql-snow.ql-toolbar button:hover .ql-stroke,
html[data-theme="dark"] .rte-quill .ql-snow.ql-toolbar button.ql-active .ql-stroke,
html[data-theme="dark"] .rte-quill .ql-snow .ql-picker-label:hover .ql-stroke { stroke: var(--fp-pink); }
html[data-theme="dark"] .rte-quill .ql-snow.ql-toolbar button:hover .ql-fill,
html[data-theme="dark"] .rte-quill .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--fp-pink); }
html[data-theme="dark"] .rte-quill .ql-snow.ql-toolbar button:hover,
html[data-theme="dark"] .rte-quill .ql-snow.ql-toolbar button.ql-active,
html[data-theme="dark"] .rte-quill .ql-snow .ql-picker-label:hover,
html[data-theme="dark"] .rte-quill .ql-snow .ql-picker-item:hover { color: var(--fp-pink); }
/* Link tooltip (shown when adding/editing a link) */
html[data-theme="dark"] .rte-quill .ql-snow .ql-tooltip {
    background: #241f2b; border-color: #332c3b; color: var(--fp-text-soft);
    box-shadow: 0 2px 10px rgba(0,0,0,.6);
}
html[data-theme="dark"] .rte-quill .ql-snow .ql-tooltip input[type=text] {
    background: var(--fp-surface); border-color: #332c3b; color: var(--fp-text);
}

/* ── Write-for-us / guest post page ── */
/* Teal "link exchange" callout — the one accent on the page with no token. */
.gp-exchange-box   { border: 1.5px dashed #7cc; background: #f2fbfb; }
.gp-exchange-title { color: #2a8a8a; }
html[data-theme="dark"] .gp-exchange-box   { border-color: #2f5f5f; background: #14232a; }
html[data-theme="dark"] .gp-exchange-title { color: #7fd0d0; }

/* ── For-Creators landing page ── */
/* CTA is an <a> — :visited was darkening it; force white in all states (both themes) */
.cl-cta, .cl-cta:link, .cl-cta:visited, .cl-cta:hover, .cl-cta:focus, .cl-cta:active { color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.28); }
html[data-theme="dark"] .cl-hero { background: linear-gradient(135deg, #241620, #1f1a24); border-color: #3a2f3d; }
html[data-theme="dark"] .cl-hero h1 { color: var(--fp-text); }
html[data-theme="dark"] .cl-hero p { color: var(--fp-text-soft); }
html[data-theme="dark"] .cl-stat,
html[data-theme="dark"] .cl-feature,
html[data-theme="dark"] .cl-steps,
html[data-theme="dark"] .cl-bottom { background: var(--fp-surface); border-color: var(--fp-border); }
html[data-theme="dark"] .cl-feature h3,
html[data-theme="dark"] .cl-steps h2,
html[data-theme="dark"] .cl-steps h4,
html[data-theme="dark"] .cl-bottom h2 { color: var(--fp-text); }
html[data-theme="dark"] .cl-feature p,
html[data-theme="dark"] .cl-steps p,
html[data-theme="dark"] .cl-bottom p { color: var(--fp-text-muted); }
html[data-theme="dark"] .cl-stat .l,
html[data-theme="dark"] .cl-cta-sub { color: var(--fp-text-faint); }

/* ── Homepage "Got a suggestion?" feedback banner (light-pink gradient) ── */
html[data-theme="dark"] .fp-feedback-banner { background: linear-gradient(135deg, #1f1a24 0%, #241620 100%); border-color: #3a2f3d; }
html[data-theme="dark"] .fp-feedback-banner:hover { border-color: var(--fp-pink); box-shadow: 0 2px 10px rgba(124,58,237,.15); }
html[data-theme="dark"] .fp-feedback-text strong { color: var(--fp-text); }

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN CP — shared responsive + dark-mode safety net
   ───────────────────────────────────────────────────────────────────────
   AdminCP was built with hardcoded light colours in per-page <style> blocks
   and predates the token system. The chrome (templates/admin/base.html.twig)
   is now token-driven; this block is the shared fallback that (1) makes every
   admin table scroll on mobile without a wrapper and (2) re-themes the common
   hardcoded surfaces in dark mode. Per-page style-blocks are being migrated to
   tokens page-by-page — until then these rules keep the panels usable.
   ═══════════════════════════════════════════════════════════════════════ */

/* ---- Responsive: contain wide content on phones/tablets ---- */
@media (max-width: 768px) {
    /* GitHub-style scroll: any admin table shrinks to content and scrolls
       horizontally instead of blowing out the viewport. !important overrides
       the inline width:100% many admin tables carry. */
    .admin-content table {
        display: block !important;
        width: max-content !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .admin-content img { max-width: 100%; height: auto; }
    .admin-content pre { overflow-x: auto; max-width: 100%; }
    /* Tame fixed-pixel panels/inputs that overflow narrow screens */
    .admin-content input,
    .admin-content select,
    .admin-content textarea { max-width: 100%; }
}

/* ---- Dark mode: re-theme hardcoded admin surfaces ---- */
html[data-theme="dark"] .admin-content { color: var(--fp-text); }

/* Tables — element-level selectors catch every admin table regardless of the
   per-page class name; !important beats the class rules in page <style> blocks. */
html[data-theme="dark"] .admin-content table { background: var(--fp-surface); color: var(--fp-text); }
html[data-theme="dark"] .admin-content th {
    background: var(--fp-surface-soft) !important;
    color: var(--fp-text-soft) !important;
    border-color: var(--fp-border) !important;
}
html[data-theme="dark"] .admin-content td { border-color: var(--fp-border) !important; color: var(--fp-text); }
html[data-theme="dark"] .admin-content tbody tr:hover td { background: var(--fp-surface-pink-soft) !important; }

/* Inline-styled panels/cards that still carry literal light colours */
html[data-theme="dark"] .admin-content [style*="background:#fff"],
html[data-theme="dark"] .admin-content [style*="background: #fff"],
html[data-theme="dark"] .admin-content [style*="background:#fafafa"],
html[data-theme="dark"] .admin-content [style*="background:#f9f9f9"],
html[data-theme="dark"] .admin-content [style*="background:#f7f7f7"],
html[data-theme="dark"] .admin-content [style*="background:#f5f5f5"],
html[data-theme="dark"] .admin-content [style*="background:#fdf4fa"] { background: var(--fp-surface) !important; }
html[data-theme="dark"] .admin-content [style*="border:1px solid #eee"],
html[data-theme="dark"] .admin-content [style*="border:1px solid #f0f0f0"],
html[data-theme="dark"] .admin-content [style*="border:1px solid #e5e5e5"],
html[data-theme="dark"] .admin-content [style*="border:1px solid #ddd"] { border-color: var(--fp-border) !important; }

/* Flash-alert tints (defined light in base.html.twig) — dark variants */
html[data-theme="dark"] .adm-alert-success { background:#16281c; border-color:#2f5138; color:#9ae6b4; }
html[data-theme="dark"] .adm-alert-danger  { background:#2a1616; border-color:#5a2d2d; color:#feb2b2; }
html[data-theme="dark"] .adm-alert-warning { background:#2a2410; border-color:#57491a; color:#f6d860; }
html[data-theme="dark"] .adm-alert-info    { background:#132430; border-color:#254a5a; color:#90cdf4; }