/* Gaystud Models Dual-Theme Design System tokens.
   Light mode: Warm, friendly, approachable (Ivory 50 / Coral 500-600).
   Dark mode: Premium, modern, immersive (Navy 950 / Purple 500-600 / Magenta 500). */
:root {
  color-scheme: light;
  /* Surfaces & Neutrals (Light Mode) */
  --bg: #FFFCF9;                 /* Ivory 50: Surface 1 / Page Background */
  --bg-soft: #FFF6EE;            /* Beige 100: Surface 2 / Elevated sections */
  --surface: #FFFFFF;            /* Cards & dialog surfaces */
  --surface-elevated: #FFF6EE;   /* Surface 2 */
  --surface-nested: #FFEFE4;     /* Beige 200: Surface 3 */
  --border: #FDE6D7;             /* Beige 300: Neutral border */
  --border-subtle: rgba(253, 230, 215, 0.7);
  --text: #251817;               /* Brown 800: Primary high-contrast text */
  --muted: #5B4136;              /* Brown 600: Accessible secondary text */
  --muted-soft: #7A6E66;         /* Gray 500: Tertiary text / placeholders */

  /* Primary & Brand (Light Mode) */
  --primary: #F05A36;            /* Primary 500: Vibrant coral orange */
  --primary-hover: #D9440A;      /* Primary 600: Deep coral orange */
  --accent: #FF8A65;             /* Accent 500: Warm coral highlight */
  --accent-soft: #FFEFE4;        /* Soft coral / beige badge background */
  --accent-ink: #D9440A;         /* High-contrast ink on accent-soft */

  /* Gradients */
  --grad: linear-gradient(135deg, #FF8A65 0%, #F05A36 60%, #D9440A 100%); /* Hero & Brand Gradient */
  --btn-grad: linear-gradient(135deg, #F05A36 0%, #D9440A 100%);         /* Button Gradient */

  /* Semantics */
  --ok-bg: #E6F4EA; --ok-ink: #0F5132;
  --err-bg: #FDE8E8; --err-ink: #9F1D1D;
  --warn-bg: #FEF3C7; --warn-ink: #92400E;
  --info-bg: #EFF6FF; --info-ink: #1E40AF;

  --radius: 16px;
  --shadow: 0 1px 3px rgba(37, 24, 23, .04), 0 8px 24px rgba(37, 24, 23, .06);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
h1, h2, h3 { line-height: 1.2; margin: 1.2em 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-top: .4em; }
h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; margin-top: 0; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; }
code, .mono { font-family: var(--mono); font-size: .92em; word-break: break-all; }
table { width: 100%; border-collapse: collapse; margin: .5rem 0 1.5rem; display: block; overflow-x: auto; }
th, td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }

.container { width: min(1080px, 100% - 2rem); margin-inline: auto; }
.narrow { max-width: 640px; margin-inline: auto; }
.center { text-align: center; }
.section-tight { padding-block: 1.25rem 3rem; }
.muted { color: var(--muted); } .small { font-size: .875rem; }
.inline { display: inline; }
.block { display: block; text-decoration: none; color: inherit; }
.plain { list-style: none; padding: 0; margin: 0; }

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; gap: 1rem; min-height: 64px; flex-wrap: wrap; padding-block: .4rem; }
.brand { font-weight: 800; font-size: 1.35rem; text-decoration: none; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav-links { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.nav-link { color: var(--text); text-decoration: none; padding: .4rem .7rem; border-radius: 999px; font-weight: 500; }
.nav-link:hover { background: var(--accent-soft); color: var(--accent-ink); }
.site-footer { padding-block: 2rem; border-top: 1px solid var(--border); font-size: .875rem; }

/* buttons + forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 0; cursor: pointer; font: inherit; font-weight: 600; text-decoration: none;
  background: var(--primary); color: #fff; padding: .65rem 1.2rem; border-radius: 999px; min-height: 44px; transition: background .15s, transform .05s; }
.btn:hover { background: var(--primary-hover); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-secondary { background: var(--accent-soft); color: var(--accent-ink); }
.btn-secondary:hover { background: #ffd9b8; color: var(--accent-ink); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.field { width: 100%; font: inherit; color: var(--text); background: #fff; border: 1.5px solid #e6d3c1; border-radius: 12px; padding: .6rem .8rem; min-height: 44px; }
.field:focus { border-color: var(--accent); outline: 3px solid var(--accent-soft); }
textarea.field { resize: vertical; }
label { display: grid; gap: .3rem; font-weight: 500; font-size: .95rem; }
label.check { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
label.check input { width: 18px; height: 18px; accent-color: var(--primary); }
fieldset { border: 0; padding: 0; margin: 0; }
.check-row { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.stack { display: grid; gap: .85rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row.between, .between { justify-content: space-between; }
.row .field { flex: 1; min-width: 180px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-block: 1rem; }

/* surfaces */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.pad { padding: 1.1rem 1.25rem; }
a.panel { text-decoration: none; color: inherit; } a.panel:hover { border-color: var(--accent); }
.callout { background: var(--bg-soft); border: 1px dashed #f0c8a4; border-radius: 12px; padding: .8rem 1rem; margin-block: .6rem; }
.pill { display: inline-block; background: var(--accent-soft); color: var(--accent-ink); font-size: .78rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; }
.flash { border-radius: 12px; padding: .75rem 1rem; margin-bottom: 1rem; font-weight: 500; }
.flash-ok { background: var(--ok-bg); color: var(--ok-ink); }
.flash-err { background: var(--err-bg); color: var(--err-ink); }

/* hero */
.hero { text-align: center; padding: 3rem 1rem 2rem; background: radial-gradient(900px 300px at 50% -10%, #ffe2c7 0%, transparent 70%); border-radius: 0 0 var(--radius) var(--radius); }
.hero .lead { max-width: 640px; margin: 0 auto 1.5rem; font-size: 1.1rem; }
.hero .row { justify-content: center; }
.eyebrow { display: inline-block; background: var(--grad); color: #1d1a17; font-weight: 700; font-size: .8rem; padding: .25rem .8rem; border-radius: 999px; }
.gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* booking, video, content */
.slot-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.slot { min-width: 120px; }
.video { width: 100%; height: min(70vh, 640px); border: 0; border-radius: var(--radius); background: #111; margin-top: 1rem; }
.timer b { font-size: 1.4rem; color: var(--primary); }
.prose { font-size: 1.05rem; } .prose h2, .prose h3, .prose h4 { margin-top: 1.4em; }
.prose pre { background: #2a211b; color: #ffe7d1; padding: 1rem; border-radius: 12px; overflow-x: auto; }
.prose code { background: var(--accent-soft); padding: .1em .35em; border-radius: 6px; } .prose pre code { background: transparent; padding: 0; }
.prose blockquote { margin: 1rem 0; padding: .2rem 1rem; border-left: 4px solid var(--accent); color: var(--muted); }
.art { border-radius: 12px; max-height: 220px; object-fit: cover; width: 100%; }
.giftcard-preview { position: relative; min-height: 170px; border-radius: 18px; background: var(--grad) center/cover no-repeat; color: #1d1a17; padding: 1.1rem; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; box-shadow: var(--shadow); }
.giftcard-preview::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .55)); }
.gc-amount, .gc-msg { position: relative; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.gc-amount { font-size: 2rem; font-weight: 800; } .gc-msg { font-size: .95rem; }
.pay select { margin-bottom: .6rem; }

@media (max-width: 640px) {
  .nav-links { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .hero { padding-top: 2rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Creator subscription platform */
.creator-hero { margin-bottom: 1.6rem; padding: clamp(2rem, 6vw, 4rem) 1rem 2.5rem; }
.creator-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem; margin:1rem 0 2rem; }
.creator-card { overflow:hidden; display:flex; flex-direction:column; }
.creator-avatar { width:58px; height:58px; border-radius:50%; display:grid; place-items:center; flex:none; color:#fff; font-size:1.45rem; font-weight:800; background:var(--grad); box-shadow:0 6px 20px rgba(201,74,0,.15); }
.creator-avatar.large { width:84px; height:84px; font-size:2rem; }
.creator-card .creator-avatar { margin:1.25rem 1.25rem 0; }
.creator-card-body { padding:1rem 1.25rem 1.25rem; display:flex; flex-direction:column; flex:1; }
.creator-card-body h3 { margin:.8rem 0 .1rem; }
.creator-card-body p { margin:.35rem 0; }
.creator-bio { min-height:3.4em; }
.creator-card-footer { margin-top:auto; padding-top:1rem; }
.creator-profile-head { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1rem; }
.creator-profile-info { min-width:0; flex:1; }
.creator-profile-info h1 { margin:.35rem 0; }
.feature-icon { width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);font-size:1.4rem;font-weight:800;margin-bottom:1rem; }
.feature-card h3 { margin-bottom:.4rem; }
.creator-cta { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:2rem 0; }
.creator-cta h2 { margin:.2rem 0; }
.studio-heading { align-items:flex-end; margin-bottom:1.5rem; }
.studio-heading h1 { margin:.35rem 0; }
.studio-layout { display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.4fr);gap:1rem;align-items:start; }
.creator-post-list { display:grid;gap:.75rem; }
.post-media { overflow:hidden;border-radius:14px;background:#17120f; }
.post-media img { width:100%;max-height:720px;object-fit:contain;display:block; }
.post-media video { display:block;width:100%;max-height:720px; }
.locked-content { padding:2rem 1rem;text-align:center;border:1px dashed var(--border);border-radius:14px;background:var(--bg-soft); }
.lock-symbol { font-size:2rem;color:var(--primary); }
.adult-gate { margin:2rem auto; }
@media(max-width:700px) { .studio-layout {grid-template-columns:1fr;} .creator-profile-head {align-items:flex-start;} .creator-cta {align-items:flex-start;} }


/* Gaystud Models theme toggle: keep the original light-mode design unchanged. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .45rem .8rem; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.theme-toggle:hover { background: var(--accent-soft); color: var(--accent-ink); }
.theme-toggle .theme-icon { font-size: 1.05rem; line-height: 1; }

/* Dark theme overrides only. Original PHP templates and light-mode CSS remain intact. */
[data-theme="dark"] {
  color-scheme: dark;
  /* Surfaces & Neutrals (Dark Mode) */
  --bg: #050B1A;                 /* Navy 950: Surface 1 / Page Background */
  --bg-soft: #0B1226;            /* Navy 900: Surface 2 / Elevated background */
  --surface: #0E142B;            /* Surface 2: Card & elevated panel */
  --surface-elevated: #111A33;   /* Navy 800: Surface 3 */
  --surface-nested: #1A2448;     /* Navy 700: Nested panels */
  --border: #2A3456;             /* Gray 600: Neutral border for subtle separation */
  --border-subtle: rgba(42, 52, 86, 0.6);
  --text: #F8FAFF;               /* High-contrast crisp light text */
  --muted: #94A3B8;              /* Gray 300 / 400: Clear secondary text */
  --muted-soft: #64748B;         /* Gray 500: Subtle muted text / placeholders */

  /* Primary & Brand (Dark Mode) */
  --primary: #8B5CF6;            /* Primary 500: Vibrant purple */
  --primary-hover: #7C3AED;      /* Primary 600: Deep purple */
  --accent: #FF2D9B;             /* Accent 500: Neon magenta */
  --accent-soft: rgba(139, 92, 246, 0.16);
  --accent-ink: #E9DFFF;

  /* Gradients */
  --grad: linear-gradient(135deg, #8B5CF6 0%, #C026D3 50%, #FF2D9B 100%); /* Hero Gradient */
  --btn-grad: linear-gradient(135deg, #7C3AED 0%, #FF2D9B 100%);         /* Button Gradient */

  /* Semantics */
  --ok-bg: #123526; --ok-ink: #86EFAC;
  --err-bg: #421E2A; --err-ink: #FCA5A5;
  --warn-bg: #38240D; --warn-ink: #FCD34D;
  --info-bg: #132742; --info-ink: #93C5FD;

  --shadow: 0 4px 20px rgba(0, 0, 0, .45), 0 0 35px rgba(139, 92, 246, .08);
}
[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] .site-header { background: rgba(5, 11, 26, .95); border-bottom-color: var(--border); }
[data-theme="dark"] .btn-secondary:hover { background: #1A2448; color: var(--text); }
[data-theme="dark"] .field { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .field::placeholder { color: var(--muted-soft); }
[data-theme="dark"] .callout { border-color: var(--border); }
[data-theme="dark"] .hero { background: radial-gradient(900px 300px at 50% -10%, rgba(124, 58, 237, .24) 0%, transparent 70%); }
[data-theme="dark"] .prose pre { background: #050811; color: #E9DFFF; }
[data-theme="dark"] .post-media { background: #050811; }
[data-theme="dark"] .theme-toggle { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .theme-toggle:hover { background: var(--accent-soft); color: var(--text); }
[data-theme="dark"] .flash-ok { background: var(--ok-bg); color: var(--ok-ink); }
[data-theme="dark"] .flash-err { background: var(--err-bg); color: var(--err-ink); }
@media (prefers-reduced-motion: reduce) { .theme-toggle, body { transition: none !important; } }

/* Homepage adaptation of the supplied index.html concept. Uses the existing
   Gaystud Models layout, routes and theme tokens rather than replacing the app shell. */
.landing-hero { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(320px,.96fr); gap:clamp(2rem,5vw,5rem); align-items:center; padding:clamp(2.5rem,6vw,5.5rem) 0 clamp(2rem,4vw,4rem); }
.landing-hero-copy { max-width:650px; }
.landing-hero .eyebrow { display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .8rem; background:#ffebe1; color:#8c3518; font-size:.73rem; letter-spacing:.07em; text-transform:uppercase; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:#f05a36; box-shadow:0 0 0 4px rgba(240,90,54,.12); }
.landing-hero h1 { max-width:680px; margin:1.1rem 0 .8rem; font-size:clamp(2.8rem,5.3vw,4.7rem); line-height:1.02; letter-spacing:-.055em; font-weight:800; }
.landing-hero .gradient-text { background:linear-gradient(105deg,#f05a36 5%,#ef4c57 95%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.landing-lead { max-width:600px; color:var(--muted); font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.75; }
.landing-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.45rem; }
.landing-actions .btn { border-radius:13px; padding:.78rem 1.2rem; box-shadow:0 7px 18px rgba(201,74,0,.12); }
.landing-actions .btn-secondary { box-shadow:none; }
.landing-note { display:flex; gap:.65rem; align-items:center; margin-top:1.1rem; color:var(--muted); font-size:.88rem; }
.landing-note span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); }
.landing-hero-art { position:relative; min-height:390px; display:grid; place-items:center; isolation:isolate; }
.landing-orbit { position:absolute; width:min(90%,390px); aspect-ratio:1; border:1px solid rgba(240,90,54,.15); border-radius:50%; transform:rotate(-24deg) scaleY(.78); }
.landing-orbit-two { width:min(100%,450px); transform:rotate(28deg) scaleY(.7); border-color:rgba(240,90,54,.11); }
.landing-portrait-wrap { width:min(68%,285px); aspect-ratio: .76; overflow:hidden; border-radius:46% 46% 38% 38% / 32% 32% 24% 24%; background:var(--accent-soft); box-shadow:0 28px 65px rgba(122,53,28,.18); transform:rotate(3deg); }
.landing-portrait { width:100%; height:100%; display:block; object-fit:cover; object-position:center 28%; }
.landing-float { position:absolute; z-index:2; display:flex; align-items:center; gap:.75rem; padding:.9rem 1rem; border:1px solid var(--border); border-radius:15px; background:var(--surface); box-shadow:var(--shadow); max-width:245px; }
.landing-float b,.landing-float small { display:block; }
.landing-float b { font-size:.87rem; }
.landing-float small { margin-top:.15rem; color:var(--muted); font-size:.73rem; }
.landing-float-top { right:0; top:13%; }
.landing-float-bottom { left:0; bottom:15%; }
.landing-float-icon { display:grid; place-items:center; flex:0 0 36px; height:36px; border-radius:11px; background:var(--accent-soft); color:var(--primary); font-size:1.2rem; }
.landing-status-dot { flex:0 0 10px; height:10px; border-radius:50%; background:#35ad7b; box-shadow:0 0 0 5px rgba(53,173,123,.14); margin:0 .55rem; }
.landing-section { padding:2.4rem 0; }
.landing-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:1.25rem; }
.landing-section-heading h2,.landing-connection h2 { margin:.35rem 0 .4rem; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.12; letter-spacing:-.04em; }
.landing-section-heading p { margin:.4rem 0 0; }
.section-kicker { color:var(--primary); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.landing-text-link { flex-shrink:0; font-size:.9rem; font-weight:700; text-decoration:none; }
.landing-category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.landing-category { position:relative; display:block; overflow:hidden; min-height:190px; aspect-ratio:1.08; border-radius:18px; color:#fff; text-decoration:none; background:#2a201d; isolation:isolate; }
.landing-category img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.landing-category:hover img { transform:scale(1.05); }
.landing-category-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,12,15,.02) 18%,rgba(15,12,15,.8) 100%); }
.landing-category-copy { position:absolute; left:1rem; right:1rem; bottom:1rem; display:grid; gap:.15rem; }
.landing-category-copy b { font-size:1.12rem; }
.landing-category-copy small { font-size:.8rem; color:rgba(255,255,255,.82); }
.landing-category-arrow { position:absolute; top:.8rem; right:.8rem; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.92); color:#39261f; }
.landing-audience-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.landing-audience-links>a { display:flex; align-items:center; gap:.9rem; min-width:0; padding:1.05rem; border:1px solid var(--border); border-radius:16px; background:linear-gradient(110deg,var(--bg-soft),var(--surface)); color:var(--text); text-decoration:none; }
.landing-audience-links>a:hover { border-color:var(--accent); }
.landing-audience-links b,.landing-audience-links small { display:block; }
.landing-audience-links b { font-size:.94rem; }
.landing-audience-links small { color:var(--muted); font-size:.8rem; margin-top:.18rem; }
.audience-symbol { display:grid; place-items:center; flex:0 0 46px; height:46px; border-radius:14px; background:var(--surface); color:var(--primary); font-size:1.5rem; box-shadow:0 4px 14px rgba(30,20,15,.05); }
.audience-symbol-18 { color:#8756c8; font-weight:800; font-size:1.1rem; }
.audience-symbol-18 span { font-size:.7rem; }
.audience-arrow { margin-left:auto; color:var(--muted); }
.landing-popular { padding-top:3rem; }
.landing-creator-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.landing-creator-card { display:flex; flex-direction:column; min-width:0; padding:1.1rem; border:1px solid var(--border); border-radius:18px; background:var(--surface); box-shadow:var(--shadow); }
.landing-creator-avatar { display:grid; place-items:center; width:52px; height:52px; border-radius:17px; background:var(--accent-soft); color:var(--accent-ink); font-size:1.3rem; font-weight:800; }
.landing-creator-details { padding:.8rem 0 1rem; }
.landing-creator-category { color:var(--primary); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.landing-creator-details h3 { margin:.25rem 0 0; }
.landing-creator-details p { margin:.15rem 0; }
.landing-creator-bio { min-height:2.6em; font-size:.9rem; }
.landing-creator-footer { display:flex; align-items:center; justify-content:space-between; gap:.5rem; border-top:1px solid var(--border); padding-top:.85rem; margin-top:auto; }
.landing-creator-footer small { color:var(--muted); font-size:.75rem; }
.landing-creator-footer a { font-size:.84rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.landing-empty-state { text-align:center; padding:2.5rem 1rem; border:1px dashed var(--border); border-radius:18px; background:var(--bg-soft); }
.landing-empty-icon { display:grid; place-items:center; width:50px; height:50px; margin:0 auto; border-radius:16px; background:var(--accent-soft); color:var(--primary); font-size:1.5rem; }
.landing-empty-state h3 { margin:.9rem 0 .4rem; }
.landing-empty-state p { max-width:480px; margin:0 auto 1rem; }
.landing-connection { padding:3rem 0; }
.landing-connection-heading { text-align:center; max-width:650px; margin:0 auto 1.5rem; }
.landing-connection-heading p { color:var(--muted); margin:.4rem 0 0; }
.landing-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.landing-benefit-card { padding:1.25rem; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.landing-benefit-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; background:var(--accent-soft); color:var(--primary); font-size:1.25rem; margin-bottom:.9rem; }
.landing-benefit-icon.benefit-purple { background:#f0e9ff; color:#8154c8; }
.landing-benefit-icon.benefit-green { background:#e0f5ea; color:#21845d; }
.landing-benefit-card h3 { margin:.15rem 0 .45rem; }
.landing-benefit-card p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.65; }
.landing-cta { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin:2rem 0 3rem; padding:clamp(1.5rem,4vw,2.8rem); border-radius:22px; color:#fff; background:radial-gradient(500px 250px at 75% 0%,rgba(255,136,101,.24),transparent 70%),linear-gradient(115deg,#2d211d,#67392f); }
.landing-cta>div { max-width:620px; }
.landing-cta-kicker { color:#ffb99d; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.landing-cta h2 { margin:.5rem 0 .45rem; font-size:clamp(1.8rem,3.3vw,2.6rem); line-height:1.1; letter-spacing:-.04em; }
.landing-cta p { color:rgba(255,255,255,.78); margin:0; }
.landing-cta-button { flex-shrink:0; color:#3a241d; background:#fff; border-radius:12px; }
.landing-cta-button:hover { background:#fff0e5; color:#3a241d; }
[data-theme="dark"] .landing-hero .eyebrow { background:#2a203f; color:#e9ddff; }
[data-theme="dark"] .eyebrow-dot { background:#a78bfa; box-shadow:0 0 0 4px rgba(167,139,250,.16); }
[data-theme="dark"] .landing-hero .gradient-text { background:linear-gradient(105deg,#c4b5fd,#f0abfc); -webkit-background-clip:text; background-clip:text; }
[data-theme="dark"] .landing-orbit { border-color:rgba(167,139,250,.2); }
[data-theme="dark"] .landing-orbit-two { border-color:rgba(217,70,239,.16); }
[data-theme="dark"] .landing-portrait-wrap { box-shadow:0 28px 65px rgba(0,0,0,.35); }
[data-theme="dark"] .landing-audience-links>a { background:linear-gradient(110deg,#0B1226,#0E142B); border-color:var(--border); }
[data-theme="dark"] .audience-symbol { background:#111A33; box-shadow:none; }
[data-theme="dark"] .landing-benefit-icon.benefit-purple { background:#2a2044; color:#d8c4ff; }
[data-theme="dark"] .landing-benefit-icon.benefit-green { background:#14392f; color:#7ee3b4; }
[data-theme="dark"] .landing-cta { background:radial-gradient(500px 250px at 75% 0%,rgba(217,70,239,.22),transparent 70%),linear-gradient(115deg,#111a2c,#28203e); }
@media(max-width:850px) { .landing-hero { grid-template-columns:1fr; gap:1rem; padding-top:2.5rem; } .landing-hero-copy { max-width:720px; } .landing-hero-art { min-height:330px; } .landing-portrait-wrap { width:min(55%,245px); } .landing-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .landing-creator-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .landing-hero h1 { font-size:clamp(2.45rem,12vw,3.5rem); } .landing-hero-art { min-height:290px; } .landing-portrait-wrap { width:56%; } .landing-float { max-width:205px; padding:.7rem; } .landing-float-top { top:8%; } .landing-float-bottom { bottom:8%; } .landing-section-heading { align-items:flex-start; flex-direction:column; gap:.6rem; } .landing-category-grid { gap:.65rem; } .landing-category { min-height:160px; border-radius:14px; } .landing-category-copy { left:.75rem; bottom:.75rem; } .landing-category-copy b { font-size:1rem; } .landing-category-copy small { font-size:.72rem; } .landing-audience-links { grid-template-columns:1fr; } .landing-creator-grid,.landing-benefit-grid { grid-template-columns:1fr; } .landing-cta { align-items:flex-start; flex-direction:column; gap:1.2rem; } }
@media(prefers-reduced-motion:reduce) { .landing-category img { transition:none; } }

/* Approved homepage visual reconciliation: aligned with Gaystud Models dual-theme design system. */
:root { --radius:16px; }
body { font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); }
.approved-header { background:color-mix(in srgb,var(--bg) 94%,transparent); border-bottom:1px solid var(--border); }
.approved-nav { width:min(1240px,calc(100% - 2.2rem)); min-height:58px; display:flex; flex-wrap:nowrap; gap:clamp(.65rem,1.5vw,1.4rem); padding-block:.35rem; }
.approved-nav .brand { flex:0 0 auto; font-size:1.35rem; letter-spacing:-.055em; }
.approved-nav-links { display:flex; align-items:center; gap:clamp(.55rem,1.25vw,1.25rem); flex:0 0 auto; }
.approved-nav-links a,.approved-login { color:var(--text); font-size:.79rem; text-decoration:none; white-space:nowrap; }
.approved-nav-links a:hover,.approved-login:hover { color:var(--primary); }
.approved-search { display:flex; align-items:center; gap:.45rem; margin-left:auto; width:min(245px,22vw); min-width:130px; height:36px; padding:0 .7rem; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--muted); }
.approved-search span { font-size:1.15rem; line-height:1; }
.approved-search input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:.72rem; }
.approved-search input::placeholder { color:#a08e83; }
.approved-nav-actions { display:flex; align-items:center; justify-content:flex-end; gap:.65rem; flex:0 0 auto; }
.approved-theme-toggle { display:inline-flex; align-items:center; gap:.35rem; min-height:35px; padding:.35rem .65rem; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font-size:.72rem; white-space:nowrap; }
.approved-theme-toggle [data-theme-icon] { font-size:1rem; }
.approved-login { color:var(--primary); }
.approved-signup { border:0; border-radius:10px; background:var(--primary); color:#fff; padding:.6rem .9rem; font:inherit; font-size:.75rem; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap; }
.approved-signup:hover { color:#fff; background:var(--primary-hover); }
.approved-main { width:min(1240px,calc(100% - 2.2rem)); max-width:none; padding:0 0 3rem; }
.approved-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.96fr); align-items:center; gap:clamp(2rem,5vw,5rem); min-height:480px; padding:2.4rem 0 3rem; border-bottom:1px solid var(--border); }
.approved-hero-copy { max-width:570px; }
.approved-eyebrow { display:inline-flex; align-items:center; gap:.5rem; padding:.3rem .65rem; border:1px solid #ffbca7; border-radius:999px; background:var(--accent-soft); color:var(--accent-ink); font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.025em; }
.approved-eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 3px rgba(240,78,37,.1); }
.approved-hero h1 { margin:1.25rem 0 .8rem; font-size:clamp(2.6rem,4.2vw,4.2rem); font-weight:800; line-height:1.08; letter-spacing:-.065em; }
.approved-hero h1 span { color:var(--accent); }
.approved-hero-copy>p { max-width:500px; color:var(--muted); font-size:.94rem; line-height:1.75; }
.approved-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.7rem; margin-top:1.35rem; }
.approved-btn { display:inline-flex; justify-content:center; align-items:center; gap:.5rem; min-height:43px; padding:.7rem 1rem; border:1px solid transparent; border-radius:12px; background:var(--primary); color:#fff; text-decoration:none; font-size:.77rem; font-weight:700; box-shadow:0 5px 14px rgba(240,78,37,.12); }
.approved-btn:hover { background:var(--primary-hover); color:#fff; }
.approved-btn-light { border-color:var(--border); background:var(--surface); color:var(--text); box-shadow:none; }
.approved-btn-light:hover { background:var(--bg-soft); color:var(--text); }
.approved-social-proof { display:flex; align-items:center; gap:.8rem; margin-top:1.55rem; }
.approved-proof-icons { display:flex; padding-left:3px; }
.approved-proof-icons img { width:29px; height:29px; object-fit:cover; border:2px solid var(--bg); border-radius:50%; margin-left:-5px; }
.approved-social-proof b,.approved-social-proof small { display:block; }
.approved-social-proof b { font-size:.7rem; font-weight:700; }
.approved-social-proof small { color:var(--muted); font-size:.68rem; }
.approved-hero-visual { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:410px; isolation:isolate; }
.approved-hero-glow { position:absolute; z-index:-1; width:90%; height:90%; border-radius:50%; background:radial-gradient(ellipse,rgba(255,136,101,.3),rgba(255,214,196,.16) 48%,transparent 72%); filter:blur(8px); }
.approved-hero-photo { display:block; width:min(78%,390px); height:390px; object-fit:cover; object-position:center 28%; border-radius:28px; box-shadow:0 20px 55px rgba(113,48,30,.16); }
.approved-float { position:absolute; display:flex; align-items:center; gap:.6rem; padding:.7rem .8rem; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:0 12px 35px rgba(70,40,25,.1); }
.approved-float-top { top:11%; right:2%; }
.approved-float-bottom { bottom:12%; left:1%; }
.approved-float-icon { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border-radius:9px; background:var(--accent-soft); color:var(--primary); }
.approved-float b,.approved-float small { display:block; white-space:nowrap; }
.approved-float b { font-size:.7rem; }
.approved-float small { margin-top:.12rem; color:var(--muted); font-size:.61rem; }
.approved-section { padding:2.8rem 0 1.6rem; scroll-margin-top:80px; }
.approved-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.3rem; }
.approved-kicker { display:block; margin-bottom:.4rem; color:var(--primary); font-size:.65rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.approved-section-head h2 { margin:0 0 .35rem; font-size:clamp(1.45rem,2.5vw,2rem); line-height:1.2; letter-spacing:-.045em; }
.approved-section-head p { margin:0; color:var(--muted); font-size:.78rem; }
.approved-section-head>a { flex:0 0 auto; color:var(--primary); font-size:.72rem; text-decoration:none; font-weight:600; white-space:nowrap; }
.approved-category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.approved-category { display:block; min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); color:var(--text); text-decoration:none; transition:transform .18s ease,box-shadow .18s ease; }
.approved-category:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.approved-category img { display:block; width:100%; height:clamp(135px,17vw,205px); object-fit:cover; }
.approved-category-info { display:block; padding:.8rem .85rem .9rem; }
.approved-category-info b,.approved-category-info small { display:block; }
.approved-category-info b { font-size:.83rem; }
.approved-category-info small { margin-top:.25rem; color:var(--muted); font-size:.68rem; }
.approved-popular { padding-top:3.1rem; }
.approved-creator-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.9rem; }
.approved-creator-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.approved-creator-image { display:block; margin:.5rem .5rem 0; overflow:hidden; height:clamp(115px,13vw,170px); border-radius:12px; background:var(--bg-soft); }
.approved-creator-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.approved-creator-card:hover .approved-creator-image img { transform:scale(1.035); }
.approved-creator-meta { padding:.65rem .65rem .7rem; }
.approved-creator-meta h3 { overflow:hidden; margin:0; font-size:.76rem; white-space:nowrap; text-overflow:ellipsis; }
.approved-creator-meta p { overflow:hidden; margin:.15rem 0 .45rem; color:var(--muted); font-size:.62rem; white-space:nowrap; text-overflow:ellipsis; }
.approved-creator-price { margin-bottom:.5rem; color:var(--muted); font-size:.64rem; }
.approved-creator-price small { color:var(--muted); }
.approved-subscribe { display:flex; justify-content:center; width:100%; padding:.48rem .35rem; border-radius:9px; background:var(--grad); color:white; font-size:.65rem; font-weight:700; text-decoration:none; }
.approved-subscribe:hover { color:white; filter:brightness(.96); }
.approved-cta { position:relative; display:flex; align-items:center; min-height:245px; overflow:hidden; margin:2.7rem 0 0; border:1px solid #ffc0a8; border-radius:20px; background:linear-gradient(100deg,#fff7f0 0%,#ffede3 60%,#f7c6b6 100%); }
.approved-cta-copy { position:relative; z-index:2; width:63%; padding:clamp(1.4rem,4vw,2.6rem); }
.approved-cta h2 { max-width:480px; margin:.5rem 0 .55rem; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.15; letter-spacing:-.05em; }
.approved-cta h2 span { color:var(--primary); }
.approved-cta p { margin:0; color:#826b60; font-size:.8rem; }
.approved-cta .approved-actions { margin-top:1rem; }
.approved-cta-image { position:absolute; right:0; top:0; bottom:0; width:43%; overflow:hidden; }
.approved-cta-image:before { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,#ffede3 0%,rgba(255,237,227,.3) 38%,transparent 75%); }
.approved-cta-image img { width:100%; height:100%; object-fit:cover; object-position:center 24%; }
.approved-footer { border-top:1px solid var(--border); }
.approved-footer-top,.approved-footer-bottom { display:flex; align-items:center; gap:1.2rem; }
.approved-footer-top { min-height:62px; }
.approved-footer-top .brand { font-size:1.15rem; }
.approved-footer-top nav { display:flex; flex-wrap:wrap; gap:1rem; flex:1; }
.approved-footer-top nav a { color:var(--muted); font-size:.68rem; text-decoration:none; }
.approved-social { color:var(--muted); font-size:.9rem; }
.approved-footer-bottom { justify-content:space-between; min-height:38px; border-top:1px solid var(--border); color:var(--muted); font-size:.6rem; }
[data-theme="dark"] .approved-header { background:rgba(5,11,26,.95); border-bottom-color: var(--border); }
[data-theme="dark"] .approved-search { background:var(--surface); }
[data-theme="dark"] .approved-hero-glow { background:radial-gradient(ellipse,rgba(139,92,246,.28),rgba(255,45,155,.16) 48%,transparent 72%); }
[data-theme="dark"] .approved-hero-photo { box-shadow:0 20px 55px rgba(0,0,0,.35); }
[data-theme="dark"] .approved-float { box-shadow:0 12px 35px rgba(0,0,0,.28); }
[data-theme="dark"] .approved-cta { border-color:var(--border); background:linear-gradient(100deg,#0B1226 0%,#111A33 60%,#1A2448 100%); }
[data-theme="dark"] .approved-cta p { color:#c3b9d0; }
[data-theme="dark"] .approved-cta-image:before { background:linear-gradient(90deg,#0B1226 0%,rgba(11,18,38,.3) 38%,transparent 75%); }
@media(max-width:900px) { .approved-nav { flex-wrap:wrap; } .approved-nav-links { order:3; flex:1 1 100%; } .approved-search { width:190px; } .approved-hero { grid-template-columns:1fr .85fr; gap:1.2rem; min-height:420px; } .approved-hero-photo { width:85%; height:330px; } .approved-float { padding:.55rem; } .approved-float-top { right:0; } .approved-creator-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:620px) { .approved-nav { gap:.55rem; } .approved-nav-links { overflow-x:auto; gap:.9rem; } .approved-search { order:4; width:100%; max-width:none; margin:0; flex-basis:100%; } .approved-nav-actions { margin-left:auto; gap:.4rem; } .approved-theme-toggle [data-theme-label] { display:none; } .approved-main { width:calc(100% - 1.4rem); } .approved-hero { grid-template-columns:1fr; gap:.8rem; padding:2rem 0 1.8rem; } .approved-hero h1 { font-size:clamp(2.45rem,11vw,3.6rem); } .approved-hero-visual { min-height:330px; } .approved-hero-photo { width:min(74%,320px); height:320px; } .approved-float-top { top:6%; right:0; } .approved-float-bottom { bottom:7%; left:0; } .approved-section { padding-top:2rem; } .approved-section-head { align-items:flex-start; flex-direction:column; gap:.6rem; } .approved-category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; } .approved-category img { height:150px; } .approved-creator-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .approved-creator-image { height:180px; } .approved-cta { min-height:290px; align-items:flex-start; } .approved-cta-copy { width:100%; padding:1.3rem; } .approved-cta-image { width:56%; opacity:.34; } .approved-cta-image:before { background:linear-gradient(90deg,#ffede3 0%,rgba(255,237,227,.8) 35%,rgba(255,237,227,.1) 100%); } [data-theme="dark"] .approved-cta-image:before { background:linear-gradient(90deg,#0B1226 0%,rgba(11,18,38,.8) 35%,rgba(11,18,38,.1) 100%); } .approved-footer-top { align-items:flex-start; flex-wrap:wrap; padding-block:1rem; } .approved-footer-top nav { order:3; flex-basis:100%; gap:.7rem; } .approved-footer-bottom { gap:.5rem; flex-wrap:wrap; padding-block:.6rem; } }
@media(prefers-reduced-motion:reduce) { .approved-category,.approved-category img,.approved-creator-image img { transition:none!important; } }

/* ==========================================================================
   CREATOR DASHBOARD (DUAL-THEME SPECIFICATION)
   ========================================================================== */

.dash-wrapper {
  width: min(1360px, 100%);
  margin-inline: auto;
  padding-bottom: 3.5rem;
}

/* Sub-Navigation Pills */
.dash-subnav {
  display: flex;
  align-items: center;
  gap: .5rem;
  overflow-x: auto;
  padding: .35rem 0 1.2rem;
  scrollbar-width: none;
}
.dash-subnav::-webkit-scrollbar { display: none; }

.dash-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: all .16s ease;
}
.dash-nav-pill:hover {
  color: var(--text);
  border-color: var(--primary);
  transform: translateY(-1px);
}
.dash-nav-pill.active {
  background: var(--grad);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(240, 90, 54, .25);
}
[data-theme="dark"] .dash-nav-pill.active {
  box-shadow: 0 4px 18px rgba(139, 92, 246, .35);
}
.dash-nav-pill .pill-icon {
  font-size: .88rem;
  opacity: .9;
}

/* Creator Hero Banner */
.dash-hero-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 2rem;
  border-radius: 20px;
  background: linear-gradient(135deg, #FFF6EE 0%, #FDE6D7 100%);
  border: 1px solid #F6D2BA;
  box-shadow: 0 6px 20px rgba(201, 74, 0, .06);
  margin-bottom: 1.4rem;
}
[data-theme="dark"] .dash-hero-banner {
  background: linear-gradient(135deg, #0E142B 0%, #171E3A 100%);
  border-color: #2A3456;
  box-shadow: 0 8px 32px rgba(5, 11, 26, .5), 0 0 24px -6px rgba(139, 92, 246, .25);
}
.dash-hero-main {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.dash-avatar-ring {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grad);
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
.dash-status-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #10B981;
  border: 2.5px solid var(--surface);
}
.dash-hero-info h1 {
  margin: 0;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.2;
}
.dash-hero-title-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.dash-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: var(--grad);
  color: #ffffff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.dash-hero-sub {
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: .82rem;
}
.dash-meta-chips {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .65rem;
  flex-wrap: wrap;
}
.dash-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .74rem;
  font-weight: 600;
  text-decoration: none;
}
.dash-chip.category-chip {
  background: var(--accent-soft);
  color: var(--primary);
  border-color: transparent;
}
.dash-chip.adult-chip {
  background: rgba(255, 45, 155, .14);
  color: #FF2D9B;
  border-color: rgba(255, 45, 155, .25);
}
.dash-chip.copy-chip {
  cursor: pointer;
  transition: all .16s ease;
  font-family: inherit;
}
.dash-chip.copy-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.dash-chip.copy-chip.btn-copied {
  background: rgba(16, 185, 129, .15);
  color: #10B981;
  border-color: #10B981;
}

.dash-hero-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
}
.dash-action-btn {
  padding: .65rem 1.15rem;
  border-radius: 12px;
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

/* 5 Stats Cards Grid */
.dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.dash-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.2rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .18s ease, border-color .18s ease;
}
[data-theme="dark"] .dash-stat-card {
  background: #0E142B;
  border-color: #2A3456;
}
.dash-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
}
.dash-stat-card.glow-card {
  border-color: var(--primary);
}
[data-theme="dark"] .dash-stat-card.glow-card {
  box-shadow: 0 0 20px -6px rgba(139, 92, 246, .35);
}
.stat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .85rem;
}
.stat-icon-bubble {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  color: var(--text);
}
.stat-icon-bubble.brand-bubble {
  background: var(--grad);
  color: #ffffff;
  font-weight: 800;
}
.stat-change-pill.positive {
  background: rgba(16, 185, 129, .14);
  color: #10B981;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
}
.stat-card-body .stat-label {
  display: block;
  font-size: .74rem;
  color: var(--muted);
  font-weight: 600;
}
.stat-card-body .stat-value {
  margin: .25rem 0 .25rem;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.15;
}
.stat-card-body .stat-subtext {
  display: block;
  font-size: .68rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Two-Column Dashboard Layout */
.dash-columns-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 1.35rem;
  align-items: start;
}

/* Dash Card Base */
.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.4rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.35rem;
}
[data-theme="dark"] .dash-card {
  background: #0E142B;
  border-color: #2A3456;
}
.dash-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.dash-card-title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}
.dash-card-desc {
  margin: .2rem 0 0;
  font-size: .74rem;
  color: var(--muted);
}
.dash-header-tools {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.dash-time-pills {
  display: inline-flex;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.time-pill {
  border: 0;
  background: transparent;
  padding: .22rem .55rem;
  border-radius: 7px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: all .14s ease;
}
.time-pill.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.dash-link-sm {
  color: var(--primary);
  font-size: .74rem;
  font-weight: 700;
  text-decoration: none;
}
.dash-link-sm:hover { text-decoration: underline; }

/* SVG Chart Area */
.dash-chart-container {
  position: relative;
  margin-top: .4rem;
}
.svg-chart-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
}
.earnings-svg-chart {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chart-point-tooltip {
  position: absolute;
  left: 63%;
  top: 10px;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: 10px;
  padding: .35rem .75rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.chart-point-tooltip .tooltip-date {
  font-size: .62rem;
  color: var(--muted);
  font-weight: 600;
}
.chart-point-tooltip .tooltip-val {
  font-size: .84rem;
  font-weight: 800;
  color: var(--text);
}
.chart-dates-axis {
  display: flex;
  justify-content: space-between;
  margin-top: .75rem;
  font-size: .7rem;
  color: var(--muted);
  font-weight: 600;
}
.chart-dates-axis .active-date {
  color: var(--primary);
  font-weight: 800;
}

/* Chart Summary Strip */
.chart-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .85rem;
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
}
.strip-item .strip-label {
  display: block;
  font-size: .68rem;
  color: var(--muted);
  font-weight: 600;
}
.strip-item .strip-val {
  display: block;
  margin-top: .15rem;
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
}

/* Filter Tabs */
.dash-filter-tabs {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.15rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.dash-filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
  border: 1px solid var(--border);
  background: var(--bg-soft);
  padding: .4rem .9rem;
  border-radius: 10px;
  font-size: .74rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all .14s ease;
}
.filter-tab:hover {
  color: var(--text);
  border-color: var(--primary);
}
.filter-tab.active {
  background: var(--grad);
  color: #ffffff;
  border-color: transparent;
}

/* Content List Rows */
.dash-content-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.dash-content-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-soft);
  transition: border-color .15s ease;
}
.dash-content-row:hover {
  border-color: var(--primary);
}
.content-thumb-bubble {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.content-meta {
  flex: 1;
  min-width: 0;
}
.content-title {
  margin: 0;
  font-size: .86rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content-tags {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .3rem;
  flex-wrap: wrap;
}
.content-stat {
  font-size: .68rem;
  color: var(--muted);
}
.content-date {
  font-size: .68rem;
}
.content-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
}
.btn-xs {
  padding: .35rem .65rem;
  font-size: .72rem;
  border-radius: 8px;
}
.btn-sm {
  padding: .45rem .85rem;
  font-size: .76rem;
  border-radius: 10px;
}

/* Recent Activity List */
.dash-activity-list {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.activity-row {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--border);
}
.activity-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.activity-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.activity-icon-box.sub-box { background: rgba(139, 92, 246, .15); }
.activity-icon-box.tip-box { background: rgba(16, 185, 129, .15); }
.activity-icon-box.book-box { background: rgba(240, 90, 54, .15); }
.activity-icon-box.msg-box { background: rgba(59, 130, 246, .15); }
.activity-icon-box.shop-box { background: rgba(236, 72, 153, .15); }

.activity-info {
  flex: 1;
  min-width: 0;
}
.activity-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
}
.activity-desc {
  margin: .15rem 0 .2rem;
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.3;
}
.activity-time {
  font-size: .65rem;
  color: var(--muted);
}

/* Creator Shop Items */
.dash-shop-items {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.shop-item-row {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .75rem .85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-soft);
}
.shop-thumb-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.shop-item-info {
  flex: 1;
  min-width: 0;
}
.shop-item-title {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-item-meta {
  font-size: .68rem;
  color: var(--muted);
}

/* Payout Settlement */
.payout-summary-box {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.payout-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.payout-label {
  font-size: .76rem;
  color: var(--muted);
  font-weight: 600;
}
.payout-amount {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
}
.payout-note {
  font-size: .72rem;
  line-height: 1.4;
  margin: 0;
}
.token-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .2rem;
}
.pill-token {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: .68rem;
}
.payout-subhead {
  margin: .8rem 0 .3rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
}
.payout-mini-table {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.payout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .6rem;
  border-radius: 8px;
  background: var(--bg-soft);
  font-size: .72rem;
}

/* Responsive Breakpoints */
@media (max-width: 1100px) {
  .dash-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  .dash-columns-layout {
    grid-template-columns: 1fr;
  }
  .dash-hero-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.4rem;
  }
  .dash-hero-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .dash-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .dash-stats-grid {
    grid-template-columns: 1fr;
  }
  .chart-summary-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Widen container for dashboard view */
.container:has(.dash-wrapper),
body:has(.dash-wrapper) .container {
  width: min(1360px, 100% - 2rem);
}

/* ==========================================================================
   FAN CREATOR PROFILE STYLES (DUAL-THEME COMPATIBLE)
   ========================================================================== */
.fan-profile-container {
  margin-top: -1.5rem;
  padding-bottom: 3rem;
}
.profile-cover {
  position: relative;
  height: 220px;
  background: linear-gradient(135deg, var(--brand-from, #8B5CF6) 0%, var(--brand-to, #FF2D9B) 100%);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}
[data-theme="light"] .profile-cover {
  background: linear-gradient(135deg, #F05A36 0%, #D9440A 100%);
}
.cover-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%);
}
.profile-content {
  position: relative;
  padding-top: 0;
}
.profile-header-card {
  position: relative;
  margin-top: -3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
  .profile-header-card {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.profile-header-main {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.profile-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}
.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid var(--bg-card);
  background: linear-gradient(135deg, var(--brand-from, #8B5CF6), var(--brand-to, #FF2D9B));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 2.25rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
[data-theme="light"] .profile-avatar {
  background: linear-gradient(135deg, #F05A36, #D9440A);
}
.profile-identity {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.profile-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.profile-name {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.badge-verified {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand, #8B5CF6);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}
[data-theme="light"] .badge-verified {
  background: #F05A36;
}
.pill-category {
  background: var(--accent-soft, rgba(139,92,246,0.12));
  color: var(--accent-ink, #8B5CF6);
  font-weight: 600;
}
.pill-adult {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  font-weight: 700;
}
.profile-handle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.profile-stats-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.stat-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.profile-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-follow.following {
  background: var(--bg-soft);
  color: var(--text);
  border-color: var(--border);
}
.btn-icon {
  padding: 0.6rem 0.8rem;
  font-size: 1.1rem;
  display: grid;
  place-items: center;
}
.profile-bio-card {
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
}
.profile-bio-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Sections */
.profile-section {
  margin-top: 2.5rem;
}
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.title-with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.title-with-icon h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}
.section-icon {
  font-size: 1.25rem;
}
.link-small {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand, #8B5CF6);
  text-decoration: none;
}
[data-theme="light"] .link-small {
  color: #F05A36;
}

/* Tiers Grid */
.tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.tier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.tier-card.featured {
  border-color: var(--brand, #8B5CF6);
  box-shadow: 0 0 0 1px var(--brand, #8B5CF6);
}
[data-theme="light"] .tier-card.featured {
  border-color: #F05A36;
  box-shadow: 0 0 0 1px #F05A36;
}
.featured-badge {
  position: absolute;
  top: -11px;
  left: 1.25rem;
  padding: 0.15rem 0.65rem;
  background: var(--brand, #8B5CF6);
  color: #fff;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}
[data-theme="light"] .featured-badge {
  background: #F05A36;
}
.tier-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}
.tier-head h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
}
.tier-price .price-val {
  font-size: 1.75rem;
  font-weight: 800;
}
.tier-price .price-cycle {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.tier-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.88rem;
  flex-grow: 1;
}
.tier-perks li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.check-icon {
  color: #10b981;
  font-weight: bold;
}
.tier-checkout {
  margin-top: auto;
}
.btn-outline-brand {
  border: 1px solid var(--brand, #8B5CF6);
  color: var(--brand, #8B5CF6);
  background: transparent;
  font-weight: 600;
  border-radius: var(--radius-md, 12px);
  padding: 0.65rem 1rem;
  cursor: pointer;
}
[data-theme="light"] .btn-outline-brand {
  border-color: #F05A36;
  color: #F05A36;
}
.giftcard-wrapper {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-soft);
  border-radius: var(--radius-md, 12px);
}

/* 1:1 Services Grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.service-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
}
.service-icon {
  font-size: 1.5rem;
  display: inline-block;
  margin-bottom: 0.5rem;
}
.service-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.service-desc {
  margin: 0.25rem 0 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.service-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.service-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}
.service-price {
  font-weight: 800;
  font-size: 1.05rem;
}

/* Products Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}
.product-thumb-placeholder {
  height: 160px;
  background: var(--bg-soft);
  display: grid;
  place-items: center;
  font-size: 3.5rem;
}
.product-details {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.product-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}
.product-desc {
  margin: 0.25rem 0 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.product-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-price {
  font-weight: 800;
  font-size: 1.1rem;
}

/* Posts Grid */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
.post-teaser-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
}
.post-preview-cover {
  position: relative;
  height: 180px;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-preview-cover.is-locked {
  background: radial-gradient(circle at center, rgba(139,92,246,0.15) 0%, var(--bg-soft) 100%);
  filter: none;
}
.lock-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.lock-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand, #8B5CF6);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}
[data-theme="light"] .lock-circle {
  background: #F05A36;
}
.lock-tag {
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.post-info {
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.post-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.post-title a {
  color: inherit;
  text-decoration: none;
}
.post-time {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.like-counter {
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
}

/* Unlock all box */
.unlock-all-card {
  margin-top: 1.5rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-soft) 100%);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg, 16px);
}
.unlock-all-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--brand, #8B5CF6);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
}
[data-theme="light"] .unlock-all-icon {
  background: #F05A36;
}
.unlock-all-card h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
}
.unlock-all-card p {
  margin: 0;
  max-width: 500px;
  font-size: 0.9rem;
}

/* Notify strip */
.notify-strip {
  margin-top: 2rem;
  padding: 0.9rem 1.25rem;
  text-align: center;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Fan profile variables mapped to the Gaystud Models dual-theme design tokens. */
.fan-profile-container {
  --bg-card: var(--surface);
  --text-muted: var(--muted);
  --brand-from: var(--primary);
  --brand-to: var(--accent);
  --brand: var(--primary);
  --shadow-sm: var(--shadow);
  --radius-lg: var(--radius);
  --radius-md: 12px;
}
.fan-profile-container .btn-brand { background: var(--btn-grad); color: #fff; }
.fan-profile-container .btn-brand:hover { color: #fff; filter: brightness(.97); }
.fan-profile-container .pill-success { background: var(--ok-bg); color: var(--ok-ink); }
.fan-profile-container .pill-brand { background: var(--accent-soft); color: var(--accent-ink); }
.fan-profile-container .profile-cover { background: var(--grad); }
.fan-profile-container .profile-avatar { background: var(--grad); }
.fan-profile-container .badge-verified { background: var(--primary); }
.fan-profile-container .product-card .btn { margin-top: .6rem; }
.fan-profile-container .tier-checkout .pay { margin-top: .4rem; }
.fan-profile-container .tier-checkout .pay > label { display: block; margin-bottom: .35rem; }
.fan-profile-container .tier-checkout .pay details { margin-top: .5rem; }
.fan-profile-container .post-preview-cover { text-decoration: none; }
.fan-profile-container .unlocked-indicator { padding: .25rem .65rem; border-radius: 999px; background: var(--ok-bg); color: var(--ok-ink); font-size: .75rem; font-weight: 700; }
.fan-profile-container .profile-header-card,
.fan-profile-container .profile-bio-card,
.fan-profile-container .tier-card,
.fan-profile-container .service-card,
.fan-profile-container .product-card,
.fan-profile-container .post-teaser-card,
.fan-profile-container .unlock-all-card { color: var(--text); }