/* Listbright admin screen. Everything is scoped to .ffx so wp-admin is untouched. */

@font-face {
	font-family: "FFX Sans";
	src: url("fonts/instrument-sans-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-display: swap;
}
@font-face {
	font-family: "FFX Serif";
	src: url("fonts/instrument-serif-latin.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

.listbright-wrap { margin: 0 20px 0 0; }
@media (max-width: 782px) { .listbright-wrap { margin-right: 10px; } }

.ffx {
	--ink: #11211e;
	--ink-2: #3c4d49;
	--muted: #6b7a76;
	--line: #e3e9e7;
	--line-2: #eef3f1;
	--paper: #f6f8f7;
	--card: #ffffff;
	--teal: #0f7b6c;
	--teal-deep: #0a3b34;
	--teal-ink: #062823;
	--mint: #d6f2ec;
	--lime: #c8f169;
	--bad: #b42318;
	--bad-bg: #fdeceb;
	--warn: #8a5a00;
	--warn-bg: #fdf3dc;
	--good: #08734f;
	--good-bg: #e2f6ee;
	--radius: 14px;
	--shadow: 0 1px 2px rgba(6, 40, 35, 0.04), 0 8px 24px -12px rgba(6, 40, 35, 0.18);

	font-family: "FFX Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
	margin-top: 16px;
	padding-bottom: 96px;
	-webkit-font-smoothing: antialiased;
}
.ffx *, .ffx *::before, .ffx *::after { box-sizing: border-box; }
.ffx button { font-family: inherit; }
.ffx a { color: var(--teal); }
.ffx .serif { font-family: "FFX Serif", Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }

/* Buttons */
.ffx .btn {
	display: inline-flex; align-items: center; gap: 8px;
	height: 38px; padding: 0 16px; border-radius: 10px;
	border: 1px solid var(--line); background: var(--card); color: var(--ink);
	font-size: 14px; font-weight: 600; cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.ffx .btn:hover:not(:disabled) { border-color: #c9d5d2; box-shadow: var(--shadow); }
.ffx .btn:active:not(:disabled) { transform: translateY(1px); }
.ffx .btn:disabled { opacity: .45; cursor: not-allowed; }
.ffx .btn:focus-visible, .ffx .toggle input:focus-visible + span, .ffx .tab:focus-visible, .ffx .pick:focus-visible {
	outline: 2px solid var(--teal); outline-offset: 2px;
}
.ffx .btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.ffx .btn-primary:hover:not(:disabled) { background: #0c6a5d; border-color: #0c6a5d; }
.ffx .btn-lime { background: var(--lime); border-color: var(--lime); color: var(--teal-ink); }
.ffx .btn-lime:hover:not(:disabled) { background: #bde455; border-color: #bde455; }
.ffx .btn-ghost-dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
.ffx .btn-ghost-dark:hover:not(:disabled) { background: rgba(255,255,255,.14); box-shadow: none; }
.ffx .btn svg { width: 16px; height: 16px; flex: none; }

/* Hero */
.ffx .hero {
	position: relative; overflow: hidden; border-radius: 20px;
	background:
		radial-gradient(900px 300px at 85% -20%, rgba(200, 241, 105, .22), transparent 60%),
		radial-gradient(600px 320px at -10% 120%, rgba(15, 123, 108, .9), transparent 60%),
		linear-gradient(135deg, var(--teal-deep), var(--teal-ink));
	color: #e9f5f2; padding: 26px 28px 28px;
	box-shadow: 0 20px 40px -24px rgba(6, 40, 35, .6);
}
.ffx .hero::before { /* fine grid, like graph paper under the numbers */
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image:
		linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.ffx .hero > * { position: relative; }
.ffx .hero-top { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.ffx .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: .01em; color: #fff; }
.ffx .brand img { width: 30px; height: 30px; border-radius: 8px; }
.ffx .brand small { font-weight: 500; color: rgba(233,245,242,.6); font-size: 12px; margin-left: 2px; }
.ffx .spacer { flex: 1; }
.ffx .credits {
	display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 6px 0 14px;
	border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
	font-size: 13px; color: rgba(233,245,242,.85);
}
.ffx .credits b { color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.ffx .credits .btn { height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; }

.ffx .hero-main { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.ffx .ring { position: relative; width: 132px; height: 132px; }
.ffx .ring svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.ffx .ring circle { fill: none; stroke-width: 10; }
.ffx .ring .track { stroke: rgba(255,255,255,.1); }
.ffx .ring .value { stroke: var(--lime); stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
.ffx .ring .label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ffx .ring .label b { font-family: "FFX Serif", Georgia, serif; font-weight: 400; font-size: 40px; line-height: 1; color: #fff; }
.ffx .ring .label span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(233,245,242,.6); margin-top: 4px; }
.ffx .headline { font-size: 34px; line-height: 1.12; margin: 0 0 8px; color: #fff; max-width: 620px; }
.ffx .headline em { font-style: italic; color: var(--lime); padding-right: .08em; }
.ffx .sub { margin: 0; color: rgba(233,245,242,.72); max-width: 560px; font-size: 14px; }
.ffx .hero-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 190px; }

.ffx .progress { margin-top: 20px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.ffx .progress i {
	display: block; height: 100%; width: 0; border-radius: inherit; transition: width .35s ease;
	background: repeating-linear-gradient(45deg, var(--lime) 0 10px, #b3e04f 10px 20px);
	background-size: 28px 28px; animation: ffx-stripes .8s linear infinite;
}
@keyframes ffx-stripes { to { background-position: 28px 0; } }
.ffx .progress-text { margin-top: 8px; font-size: 12.5px; color: rgba(233,245,242,.75); font-variant-numeric: tabular-nums; }

/* Steps */
.ffx .steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ffx .step { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-right: 1px solid var(--line-2); color: var(--muted); }
.ffx .step:last-child { border-right: 0; }
.ffx .step .n {
	width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-content: center;
	font-weight: 700; font-size: 13px; background: var(--paper); color: var(--muted); border: 1px solid var(--line);
}
.ffx .step .n svg { width: 15px; height: 15px; }
.ffx .step b { display: block; color: var(--ink); font-size: 14px; }
.ffx .step small { font-size: 12.5px; }
.ffx .step.done .n { background: var(--good-bg); color: var(--good); border-color: transparent; }
.ffx .step.now .n { background: var(--teal); color: #fff; border-color: transparent; box-shadow: 0 0 0 4px var(--mint); }
.ffx .step.now { background: linear-gradient(180deg, #fbfefd, #f3faf8); }

/* Notice */
.ffx .notice-x {
	display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin: 0 0 14px;
	border: 1px solid var(--line); background: var(--card); animation: ffx-in .3s ease both;
}
.ffx .notice-x.success { background: var(--good-bg); border-color: #bfe8d6; color: #064e36; }
.ffx .notice-x.error { background: var(--bad-bg); border-color: #f6c8c4; color: #7a1a12; }
.ffx .notice-x.warning { background: var(--warn-bg); border-color: #f1dca5; color: #5c3d00; }
.ffx .notice-x p { margin: 0; flex: 1; }
.ffx .notice-x .x { background: none; border: 0; cursor: pointer; color: inherit; opacity: .6; font-size: 18px; line-height: 1; padding: 0 2px; }

/* Stats */
.ffx .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.ffx .stat {
	position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 14px 16px 16px; text-align: left; cursor: pointer; overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ffx .stat:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.ffx .stat::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone, var(--line)); }
.ffx .stat b { display: block; font-family: "FFX Serif", Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ffx .stat span { color: var(--muted); font-size: 13px; }
.ffx .stat.bad { --tone: var(--bad); } .ffx .stat.bad b { color: var(--bad); }
.ffx .stat.warn { --tone: #e0a100; }
.ffx .stat.ready { --tone: var(--teal); } .ffx .stat.ready b { color: var(--teal); }
.ffx .stat.good { --tone: var(--good); } .ffx .stat.good b { color: var(--good); }
.ffx .stat.active { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }

/* Toolbar + tabs */
.ffx .toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ffx .tabs { display: inline-flex; padding: 3px; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; }
.ffx .tab {
	border: 0; background: none; height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer;
	font-weight: 600; font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center;
}
.ffx .tab .c { font-size: 11.5px; padding: 1px 7px; border-radius: 99px; background: var(--line); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ffx .tab.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(6,40,35,.12); }
.ffx .select-all { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-weight: 600; font-size: 13px; cursor: pointer; }

/* Product cards */
.ffx .list { display: grid; gap: 10px; }
.ffx .item {
	display: grid; grid-template-columns: 28px 56px minmax(0, 1.2fr) minmax(0, 1.4fr); gap: 14px; align-items: start;
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
	animation: ffx-in .35s ease both; transition: border-color .15s ease, box-shadow .15s ease;
}
.ffx .item:hover { box-shadow: var(--shadow); }
.ffx .item.picked { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
@keyframes ffx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ffx .pick { width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--teal); cursor: pointer; }
.ffx .thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--paper); border: 1px solid var(--line-2); display: grid; place-content: center; color: #b4c2be; }
.ffx .thumb svg { width: 22px; height: 22px; }
.ffx .name { font-weight: 600; font-size: 14.5px; color: var(--ink); text-decoration: none; display: inline-block; margin-bottom: 6px; }
.ffx .name:hover { color: var(--teal); }
.ffx .status { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-left: 8px; vertical-align: 2px; }
.ffx .status.bad { color: var(--bad); }
.ffx .status.warn { color: var(--warn); }
.ffx .chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ffx .chip { font-size: 12px; padding: 2px 9px; border-radius: 99px; white-space: nowrap; border: 1px solid transparent; }
.ffx .chip.disapproval { background: var(--bad-bg); color: var(--bad); border-color: #f8d6d3; }
.ffx .chip.limited { background: var(--warn-bg); color: var(--warn); border-color: #f3e2b5; }
.ffx .manual { margin-top: 8px; font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; }
.ffx .manual svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }

.ffx .fixes { border-left: 1px dashed var(--line); padding-left: 16px; min-height: 56px; }
.ffx .fixes-empty { color: var(--muted); font-size: 13px; padding-top: 6px; }
.ffx .fixes-empty.can { color: var(--teal); display: flex; gap: 6px; align-items: center; }
.ffx .fixes-empty svg { width: 15px; height: 15px; flex: none; }
.ffx .fix { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.ffx .fix:last-child { border-bottom: 0; }
.ffx .fix .f { width: 104px; flex: none; color: var(--muted); font-size: 12.5px; }
.ffx .fix .vals { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ffx .old { background: var(--bad-bg); color: var(--bad); text-decoration: line-through; padding: 1px 7px; border-radius: 6px; font-size: 12.5px; }
.ffx .arrow { color: #a9b7b3; }
.ffx .new { background: var(--good-bg); color: var(--good); padding: 1px 8px; border-radius: 6px; font-weight: 600; font-size: 13px; }
.ffx .src { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.ffx .src svg { width: 13px; height: 13px; }
.ffx .fix.off .new { background: var(--paper); color: var(--muted); text-decoration: line-through; font-weight: 500; }

/* Toggle switch */
.ffx .toggle { position: relative; display: inline-block; width: 34px; height: 20px; flex: none; cursor: pointer; }
.ffx .toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ffx .toggle span { position: absolute; inset: 0; background: #cfd9d6; border-radius: 99px; transition: background .2s ease; }
.ffx .toggle span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s ease; }
.ffx .toggle input:checked + span { background: var(--teal); }
.ffx .toggle input:checked + span::after { transform: translateX(14px); }

/* Pager */
.ffx .pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; color: var(--muted); }

/* Empty, clean and loading states */
.ffx .empty {
	text-align: center; padding: 48px 20px; background: var(--card); border: 1px dashed #cfdbd8; border-radius: var(--radius); color: var(--muted);
}
.ffx .empty .big { font-size: 30px; color: var(--ink); margin: 10px 0 6px; }
.ffx .empty .badge { width: 64px; height: 64px; margin: 0 auto; border-radius: 18px; display: grid; place-content: center; background: var(--good-bg); color: var(--good); }
.ffx .empty .badge.idle { background: var(--mint); color: var(--teal); }
.ffx .empty .badge svg { width: 30px; height: 30px; }
.ffx .skel { height: 86px; border-radius: var(--radius); background: linear-gradient(90deg, #eef3f1 0%, #f7faf9 40%, #eef3f1 80%); background-size: 200% 100%; animation: ffx-shimmer 1.2s linear infinite; }
@keyframes ffx-shimmer { to { background-position: -200% 0; } }

/* Sticky action bar */
.ffx .dock {
	position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%);
	display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; z-index: 9990;
	background: var(--teal-ink); color: #e9f5f2; border-radius: 16px; box-shadow: 0 18px 40px -12px rgba(6,40,35,.55);
	transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s linear .35s; max-width: calc(100vw - 40px);
	visibility: hidden;
}
.ffx .dock.show { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
.ffx .dock .msg { font-size: 13.5px; }
.ffx .dock .msg b { color: #fff; }
.ffx .dock .msg small { display: block; color: rgba(233,245,242,.6); font-size: 12px; }
@media (min-width: 961px) { .ffx .dock { margin-left: 80px; } }

/* Buy sheet */
.ffx .scrim { position: fixed; inset: 0; background: rgba(6, 40, 35, .45); backdrop-filter: blur(2px); z-index: 99990; display: grid; place-items: center; padding: 20px; animation: ffx-fade .2s ease both; }
@keyframes ffx-fade { from { opacity: 0; } }
.ffx .sheet { width: min(760px, 100%); background: var(--card); border-radius: 20px; padding: 26px; box-shadow: 0 30px 80px -20px rgba(6,40,35,.6); animation: ffx-in .25s ease both; max-height: calc(100vh - 40px); overflow: auto; }
.ffx .sheet h2 { font-family: "FFX Serif", Georgia, serif; font-weight: 400; font-size: 30px; margin: 0 0 4px; color: var(--ink); }
.ffx .sheet .lead { margin: 0 0 18px; color: var(--muted); }
.ffx .packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ffx .pack {
	position: relative; text-align: left; border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--card);
	cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ffx .pack:hover { border-color: var(--teal); box-shadow: var(--shadow); transform: translateY(-2px); }
.ffx .pack.best { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); background: linear-gradient(180deg, #f3fbf9, #fff 60%); }
.ffx .pack .tag { position: absolute; top: -10px; right: 14px; background: var(--lime); color: var(--teal-ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 99px; text-transform: uppercase; }
.ffx .pack .pname { font-weight: 700; color: var(--ink); }
.ffx .pack .price { font-family: "FFX Serif", Georgia, serif; font-size: 40px; line-height: 1.1; margin: 8px 0 2px; color: var(--ink); }
.ffx .pack .cr { color: var(--ink-2); font-weight: 600; }
.ffx .pack .per { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ffx .pack .go { margin-top: 14px; width: 100%; justify-content: center; }
.ffx .fine { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.ffx .fine svg { width: 14px; height: 14px; color: var(--teal); }
.ffx .sheet-head { display: flex; align-items: flex-start; gap: 12px; }
.ffx .sheet-head .x { margin-left: auto; background: var(--paper); border: 0; width: 34px; height: 34px; border-radius: 10px; font-size: 18px; cursor: pointer; color: var(--ink-2); }

/* Small screens */
@media (max-width: 960px) {
	.ffx .hero-main { grid-template-columns: auto 1fr; }
	.ffx .hero-actions { grid-column: 1 / -1; flex-direction: row; }
	.ffx .stats { grid-template-columns: repeat(2, 1fr); }
	.ffx .item { grid-template-columns: 28px 56px minmax(0, 1fr); }
	.ffx .fixes { grid-column: 2 / -1; border-left: 0; border-top: 1px dashed var(--line); padding: 10px 0 0; }
	.ffx .packs { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.ffx .hero { padding: 20px; }
	.ffx .hero-main { grid-template-columns: 1fr; }
	.ffx .ring { width: 104px; height: 104px; }
	.ffx .ring svg { width: 104px; height: 104px; }
	.ffx .headline { font-size: 27px; }
	.ffx .steps { grid-template-columns: 1fr; }
	.ffx .step { border-right: 0; border-bottom: 1px solid var(--line-2); }
	.ffx .hero-top { flex-wrap: wrap; }
	.ffx .fix .f { width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
	.ffx *, .ffx *::before, .ffx *::after { animation: none !important; transition: none !important; }
}