/* Flick X Creator design system v2: one look for every creator page (matches the homepage).
   Loaded after creator.css on every page; restyles the shared components. */
:root {
  --bg: #f6f7f9; --soft: #f2f3f6; --card: #ffffff; --line: #ebecf0; --line2: #dfe1e6;
  --text: #0b0d12; --text2: #3a3f4b; --muted: #6b7180; --faint: #9aa0ab;
  --red: #e5121f; --red2: #c40f1a; --red-soft: #fff1f2; --red-line: #ffd6d9;
  --r: 16px; --r-lg: 20px;
  --sh: 0 1px 2px rgba(11, 13, 18, .04);
  --sh-lg: 0 1px 2px rgba(11, 13, 18, .04), 0 24px 48px -24px rgba(11, 13, 18, .22);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
body { font-size: 15px; letter-spacing: -.005em; }
h1, h2, h3, h4 { letter-spacing: -.03em; }
.ui-serif { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.ui-x { display: block; overflow: visible; }
.ui-x path { fill: var(--red); transform-box: fill-box; }

/* brand: logo + quiet "Creator" */
.cr-brand { gap: 12px; }
.cr-brand img { height: 19px; }
.cr-brand__tag { padding: 0 0 0 12px; border: 0; border-left: 1px solid var(--line2); border-radius: 0; background: none; color: var(--muted); font-weight: 700; font-size: 14px; letter-spacing: 0; }

/* buttons */
.cr-btn { height: 44px; border-radius: 12px; font-weight: 700; box-shadow: none; transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease); }
.cr-btn:not([disabled]):hover { transform: none; box-shadow: none; }
.cr-btn:not([disabled]):active { transform: scale(.97); }
.cr-btn--main { background: var(--red); border-color: var(--red); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(196, 15, 26, .3); }
.cr-btn--main:not([disabled]):hover { background: var(--red2); border-color: var(--red2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(196, 15, 26, .3); }
.cr-btn--main::before { display: none; }
.cr-btn--dark { background: var(--text); border-color: var(--text); }
.cr-btn--sm { height: 36px; border-radius: 10px; padding: 0 14px; }
.cr-btn--lg, .cr-btn--block { height: 50px; border-radius: 13px; font-size: 15.5px; }
.cr-btn svg { transition: transform .25s var(--ease); }
.cr-btn:hover svg { transform: translateX(2px); }

/* inputs */
input, select, textarea { border-color: var(--line2); border-radius: 12px; background: #fff; }
input:hover, select:hover, textarea:hover { border-color: #c9ccd4; }
input:focus, select:focus, textarea:focus { border-color: var(--text); box-shadow: 0 0 0 4px rgba(11, 13, 18, .06); }
.cr-field > span, .cr-lbl > span { color: var(--text); font-weight: 700; }
.cr-switch input:checked + .cr-switch__ui { background: var(--text); }
.cr-chip { border-radius: 12px; font-weight: 700; }
.cr-chip.is-on { border-color: var(--red); background: var(--red-soft); color: var(--red); box-shadow: none; }
.cr-seg { border-radius: 12px; }
.cr-seg button.is-on { box-shadow: 0 1px 2px rgba(11, 13, 18, .08), 0 0 0 1px var(--line); }

/* cards, lists, pills */
.cr-card { border-radius: var(--r-lg); box-shadow: var(--sh); border-color: var(--line); }
.cr-card__head h2 { font-size: 17px; letter-spacing: -.02em; }
.cr-stat { border-radius: 16px; box-shadow: none; }
.cr-stat:hover { transform: none; box-shadow: none; border-color: var(--line2); }
.cr-stat b { letter-spacing: -.03em; }
.cr-pill { font-weight: 700; }
.cr-mini { border-radius: 12px; background: var(--text); color: #fff; }
.cr-rank { border-radius: 9px; background: var(--soft); color: var(--text2); }
.cr-rank--1 { background: var(--red); color: #fff; } .cr-rank--2, .cr-rank--3 { background: var(--soft); color: var(--text); }
.cr-progress { height: 8px; background: #e8eaee; }
.cr-progress i { background: var(--red); }
.cr-eyebrow { color: var(--red); letter-spacing: .06em; }
.cr-table tr:hover td { background: #fafbfc; }
.cr-toast { border-radius: 12px; }
.cr-modal { background: rgba(11, 13, 18, .5); backdrop-filter: blur(4px); }
.cr-modal > .cr-card { border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(11, 13, 18, .45); }

/* ---------------------------------------------------------------- dashboard */
.cr-side { background: #fff; padding: 22px 14px 16px; }
.cr-side .cr-brand { padding: 2px 10px 22px; }
.cr-side__label { font-size: 11px; letter-spacing: .08em; color: var(--faint); }
.cr-nav { border-radius: 10px; font-weight: 600; color: var(--text2); padding: 9px 12px; }
.cr-nav:hover { padding-left: 12px; background: var(--soft); color: var(--text); }
.cr-nav:hover svg { transform: none; }
.cr-nav.is-on { background: var(--text); color: #fff; padding-left: 12px; }
.cr-nav.is-on svg { color: #fff; }
.cr-me { background: var(--soft); border-radius: 12px; }
.cr-main { background: var(--bg); }
.cr-head h1 { font-size: 30px; letter-spacing: -.04em; }
.cr-hello .cr-mini { border-radius: 16px; }
.cr-earn { border-radius: var(--r-lg); }

/* ---------------------------------------------------------------- public support page */
.cr-public { background: #fff; }
.cr-pubtop { height: 64px; }
.cr-cover { position: relative; overflow: hidden; height: 260px; border-radius: 0 0 28px 28px; background: linear-gradient(120deg, #ff3b47, #c40f1a 60%, #8e0912); }
.cr-cover.has-img { background-size: cover; background-position: center; }
.ui-x--cover { position: absolute; width: 380px; right: -40px; top: -60px; opacity: .16; }
.ui-x--cover path { fill: #fff; }
.ui-x--cover .ui-xa { animation: uiSplitA 7s var(--ease) infinite; } .ui-x--cover .ui-xb { animation: uiSplitB 7s var(--ease) infinite; }
.cr-avatar { border-radius: 32px; border: 6px solid #fff; background: var(--text); box-shadow: 0 16px 30px -16px rgba(11, 13, 18, .4); }
.cr-profile h1 { font-size: 34px; letter-spacing: -.04em; }
.cr-socials a { border-radius: 10px; }
.cr-public .cr-card { box-shadow: none; }
.cr-support { border-radius: 24px; box-shadow: 0 1px 2px rgba(11, 13, 18, .04), 0 30px 60px -30px rgba(11, 13, 18, .28) !important; position: sticky; top: 20px; }
.cr-support h2 { font-size: 22px; letter-spacing: -.03em; }
.cr-presets .cr-chip { height: 50px; }
.cr-secure { color: var(--muted); }
.cr-pubfoot a { color: var(--muted); }

/* ---------------------------------------------------------------- centred pages (receipt, 404, closed) */
.cr-center { background: radial-gradient(800px 420px at 50% -10%, #fff0f1, transparent 70%), #fff; }
.cr-receipt { border-radius: 24px; box-shadow: 0 1px 2px rgba(11, 13, 18, .04), 0 30px 60px -30px rgba(11, 13, 18, .28); }
.cr-receipt h1 { letter-spacing: -.035em; }
.cr-mark { border-radius: 22px; }
.cr-receipt dl { border-radius: 14px; }

/* ---------------------------------------------------------------- sign in / sign up */
.cr-authmain { background: #fff; }
.cr-step2 h1 { font-size: 34px; letter-spacing: -.045em; }
.cr-welcome { border-radius: 24px; }

/* ---------------------------------------------------------------- footer */
.cr-foot2 { background: #0b0d12; padding: 64px 0 28px; }
.cr-foot2__brand img { filter: brightness(0) invert(1); height: 20px; }
.cr-foot2 h4 { font-size: 13px; color: #fff; letter-spacing: 0; }
.cr-foot2__grid a:not(.cr-btn) { color: #8d93a0; font-weight: 500; }
.cr-foot2__grid a:not(.cr-btn):hover { color: #fff; }
.cr-foot2__pay { border-top-color: #1b1e25; }
.cr-foot2__bottom { color: #5d6370; }

@keyframes uiSplitA { 0%, 35%, 100% { transform: translate(0, 0); } 50%, 65% { transform: translate(-8%, -9%); } }
@keyframes uiSplitB { 0%, 35%, 100% { transform: translate(0, 0); } 50%, 65% { transform: translate(8%, 9%); } }
@media (prefers-reduced-motion: reduce) { .ui-x path { animation: none !important; } }
.cr-step2 input:focus { border-color: var(--text); box-shadow: 0 0 0 4px rgba(11, 13, 18, .06); }