/* ==========================================================================
   Cero Portal theme
   ========================================================================== */

:root {
	--bg: #f6f5f1;
	--surface: #ffffff;
	--surface-2: #efede7;
	--text: #1d1d1f;
	--muted: #6a6a70;
	--border: #e2dfd7;
	--primary: #3b4fd8;
	--primary-ink: #ffffff;
	--primary-soft: #e7eafd;
	--good: #1b7849;
	--good-soft: #dcf3e6;
	--on-good: #ffffff;
	--bad: #b63d2a;
	--bad-soft: #fbe3de;
	--en: #3b4fd8;
	--zh: #d23c32;
	--ja: #b8326f;
	--kids: #a1550a;
	--fr: #0b6e8c;
	--ko: #3a6b2e;
	--shadow: 0 1px 2px rgba(20, 20, 30, .06), 0 8px 24px rgba(20, 20, 30, .08);
	--shadow-lg: 0 2px 4px rgba(20, 20, 30, .06), 0 20px 50px rgba(20, 20, 30, .14);
	--radius: 14px;
	--radius-lg: 22px;
	--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-zh: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
	--font-zh-tw: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
	--font-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	--container: 1440px;
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #131417;
		--surface: #1c1d22;
		--surface-2: #25262c;
		--text: #ececef;
		--muted: #9d9ea6;
		--border: #2f3037;
		--primary: #8b98ff;
		--primary-ink: #11131f;
		--primary-soft: #262a48;
		--good: #4fcf8a;
		--good-soft: #17332a;
		--on-good: #0d1f16;
		--bad: #ff8a73;
		--bad-soft: #3a2420;
		--en: #8b98ff;
		--zh: #ff7a6e;
		--ja: #f07ab0;
		--kids: #ffb35c;
		--fr: #5cc8e8;
		--ko: #8fd67a;
		--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
		--shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 20px 50px rgba(0, 0, 0, .45);
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--bg: #131417;
	--surface: #1c1d22;
	--surface-2: #25262c;
	--text: #ececef;
	--muted: #9d9ea6;
	--border: #2f3037;
	--primary: #8b98ff;
	--primary-ink: #11131f;
	--primary-soft: #262a48;
	--good: #4fcf8a;
	--good-soft: #17332a;
	--on-good: #0d1f16;
	--bad: #ff8a73;
	--bad-soft: #3a2420;
	--en: #8b98ff;
	--zh: #ff7a6e;
	--ja: #f07ab0;
	--kids: #ffb35c;
	--fr: #5cc8e8;
	--ko: #8fd67a;
	--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
	--shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 20px 50px rgba(0, 0, 0, .45);
	color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 16px/1.6 var(--font);
	-webkit-font-smoothing: antialiased;
}
:lang(zh), :lang(zh-CN) { font-family: var(--font-zh); }
:lang(zh-TW) { font-family: var(--font-zh-tw); }
:lang(ja) { font-family: var(--font-ja); }
:lang(en) { font-family: var(--font); }

a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .container { padding: 0 24px; } }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	clip: auto; width: auto; height: auto; z-index: 100; top: 8px; left: 8px;
	background: var(--surface); padding: 8px 12px; border-radius: 8px;
}

/* ---------- animated background ---------- */
/* Accent colors of the current page; language pages get their own palette. */
body { --bg-a: #6c7cff; --bg-b: #ff7aa8; --bg-c: #ffc24d; --bg-glyph: 0.18; --bg-blob: 0.34; }
body.fc-lang-en { --bg-a: #5b6cff; --bg-b: #35c2ff; --bg-c: #9b7bff; }
body.fc-lang-zh { --bg-a: #ff5a4f; --bg-b: #ffb03b; --bg-c: #ff8a6b; }
body.fc-lang-ja { --bg-a: #f06aa8; --bg-b: #9b7bff; --bg-c: #ffb3c9; }
body.fc-lang-fr { --bg-a: #3d6bff; --bg-b: #ff5a6e; --bg-c: #5cc8e8; }
body.fc-lang-ko { --bg-a: #4a8cff; --bg-b: #ff5a6e; --bg-c: #7bdc6b; }
body.fc-lang-kids { --bg-a: #ffa53b; --bg-b: #4cc3ff; --bg-c: #7bdc6b; --bg-glyph: 0.22; --bg-blob: 0.38; }
:root[data-theme="dark"] body { --bg-glyph: 0.13; --bg-blob: 0.22; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { --bg-glyph: 0.13; --bg-blob: 0.22; } }

.fc-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fc-bg__blob {
	position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; opacity: var(--bg-blob);
	will-change: transform;
}
.fc-bg__blob--1 { background: radial-gradient(circle, var(--bg-a) 0%, transparent 62%); top: -22vmax; left: -18vmax; animation: fc-drift-1 38s ease-in-out infinite alternate; }
.fc-bg__blob--2 { background: radial-gradient(circle, var(--bg-b) 0%, transparent 62%); top: 18vh; right: -24vmax; animation: fc-drift-2 46s ease-in-out infinite alternate; }
.fc-bg__blob--3 { background: radial-gradient(circle, var(--bg-c) 0%, transparent 62%); bottom: -30vmax; left: 20vw; animation: fc-drift-3 52s ease-in-out infinite alternate; }
@keyframes fc-drift-1 { to { transform: translate(14vw, 10vh) scale(1.12); } }
@keyframes fc-drift-2 { to { transform: translate(-12vw, 14vh) scale(.92); } }
@keyframes fc-drift-3 { to { transform: translate(10vw, -12vh) scale(1.08); } }

.fc-bg__glyph {
	position: absolute; left: var(--x); top: var(--y); font-size: var(--s); font-weight: 800; line-height: 1;
	font-family: var(--font), var(--font-zh), var(--font-ja), sans-serif; opacity: var(--bg-glyph);
	transform: rotate(var(--r)); animation: fc-float-glyph var(--d) ease-in-out var(--dl) infinite;
	will-change: transform;
}
.fc-bg__glyph--c0 { color: var(--bg-a); }
.fc-bg__glyph--c1 { color: var(--bg-b); }
.fc-bg__glyph--c2 { color: var(--bg-c); }
.fc-bg__glyph--c3 { color: var(--bg-a); filter: saturate(1.3); }
@keyframes fc-float-glyph {
	0%, 100% { transform: translate(0, 0) rotate(var(--r)); }
	25% { transform: translate(1.2vw, -2.4vh) rotate(calc(var(--r) + 8deg)); }
	50% { transform: translate(-0.8vw, -4vh) rotate(calc(var(--r) - 4deg)); }
	75% { transform: translate(-1.6vw, -1.6vh) rotate(calc(var(--r) + 4deg)); }
}
/* Fewer, smaller glyphs on phones so text stays calm. */
@media (max-width: 720px) {
	.fc-bg__glyph:nth-child(n + 12) { display: none; }
	.fc-bg__glyph { font-size: calc(var(--s) * .75); }
}
@media (prefers-reduced-motion: reduce) {
	.fc-bg__blob, .fc-bg__glyph { animation: none; }
}
:root[data-motion="off"] .fc-bg__blob, :root[data-motion="off"] .fc-bg__glyph, :root[data-motion="off"] .fc-hero__card { animation: none !important; }
/* The page background shows through; header and footer stay slightly translucent over it. */
.site-footer { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(6px); }

/* ---------- header ---------- */
.site-header {
	position: sticky; top: 0; z-index: 20;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--border);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; position: relative; } }
.site-header__inner { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.site-brand { flex: 1; min-width: 0; }
.site-brand__link { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 750; font-size: 1.15rem; }
.site-brand__mark { position: relative; width: 28px; height: 24px; }
.site-brand__mark span {
	position: absolute; inset: 0; border-radius: 6px; border: 2px solid var(--text); background: var(--surface);
}
.site-brand__mark span:first-child { transform: rotate(-10deg) translate(-2px, 1px); background: var(--primary); border-color: var(--primary); }
.site-brand .custom-logo { max-height: 40px; width: auto; }
.site-brand__logo { display: block; height: 44px; width: auto; }
.site-brand__logo--dark { display: none; }
:root[data-theme="dark"] .site-brand__logo--light { display: none; }
:root[data-theme="dark"] .site-brand__logo--dark { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .site-brand__logo--light { display: none; }
	:root:not([data-theme="light"]) .site-brand__logo--dark { display: block; }
}

.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.site-nav__list a {
	display: block; padding: 8px 14px; border-radius: 999px; color: var(--text);
	text-decoration: none; font-weight: 550;
}
.site-nav__list a:hover { background: var(--surface-2); }
.site-nav__list .current-menu-item > a { background: var(--text); color: var(--bg); }
.site-nav__list .sub-menu { display: none; }
.theme-toggle, .motion-toggle {
	display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var(--border); background: var(--surface); cursor: pointer;
}
.nav-toggle { display: none; }

@media (max-width: 720px) {
	.nav-toggle {
		display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--border);
		border-radius: 10px; background: var(--surface); cursor: pointer;
	}
	.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
		display: block; width: 18px; height: 2px; background: var(--text); position: relative; content: "";
	}
	.nav-toggle__bars::before { position: absolute; top: -6px; }
	.nav-toggle__bars::after { position: absolute; top: 6px; }
	.site-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 16px;
		flex-direction: column; align-items: stretch;
	}
	.site-nav.is-open { display: flex; }
	.site-nav__list { flex-direction: column; }
	.theme-toggle, .motion-toggle { align-self: flex-start; }
}

/* ---------- ads ---------- */
.fc-ad { margin: 20px auto; text-align: center; overflow: hidden; }
.fc-ad--wide { min-height: 90px; }
.fc-ad--side { min-height: 250px; margin-top: 0; }
.fc-ad__label {
	display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--muted); margin-bottom: 4px;
}
.fc-ad--placeholder {
	border: 2px dashed var(--border); border-radius: var(--radius); display: grid; place-items: center;
	min-height: 90px; padding: 16px;
}
.fc-ad--placeholder.fc-ad--side { min-height: 250px; }
.fc-ad--placeholder a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; }
.fc-ad--placeholder small { font-weight: 400; }

/* ---------- sections ---------- */
.fc-section { padding: 24px 16px; }
@media (min-width: 720px) { .fc-section { padding: 32px 24px; } }
.fc-section__title { font-size: 1.5rem; font-weight: 750; }

/* ---------- inner pages ---------- */
.fc-page { padding-top: 20px; padding-bottom: 32px; }
.fc-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 16px; font-size: .9rem; color: var(--muted); }
.fc-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.fc-crumbs a { color: var(--muted); }
.fc-page__head { margin-bottom: 24px; }
.fc-page__native { display: inline-block; font-size: 1.1rem; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.fc-lang-zh .fc-page__native { color: var(--zh); }
.fc-lang-ja .fc-page__native { color: var(--ja); }
.fc-lang-fr .fc-page__native { color: var(--fr); }
.fc-lang-ko .fc-page__native { color: var(--ko); }
.fc-page__title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; }
.fc-page__subtitle { color: var(--muted); font-weight: 600; font-size: .6em; margin-left: 6px; }
.fc-page__lead { color: var(--muted); font-size: 1.05rem; max-width: 46em; margin: 0; }
.fc-page__stats { margin: 8px 0 0; color: var(--muted); }
.fc-page__head--compact { margin-bottom: 16px; }
.fc-source { color: var(--muted); font-size: .85rem; margin-top: 24px; }
.fc-source a { color: inherit; }

/* ---------- layout with sidebar ---------- */
.fc-layout { display: grid; gap: 28px; }
.fc-layout__main { min-width: 0; }
@media (min-width: 1000px) {
	.fc-layout { grid-template-columns: minmax(0, 1fr) 300px; }
	.fc-sticky { position: sticky; top: 88px; }
}
.widget { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.widget-title { font-size: 1rem; font-weight: 750; }
.widget ul { list-style: none; margin: 0; padding: 0; }
.fc-other-decks li a { display: flex; justify-content: space-between; padding: 7px 10px; margin: 0 -10px; border-radius: 8px; color: var(--text); text-decoration: none; }
.fc-other-decks li a:hover { background: var(--surface-2); }
.fc-other-decks li.is-current a { background: var(--primary-soft); color: var(--primary); font-weight: 650; }
.fc-other-decks small { color: var(--muted); }

/* ---------- buttons & notices ---------- */
.fc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 18px; min-height: 44px;
	border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
	font-weight: 650; text-decoration: none; cursor: pointer; transition: background .15s ease, transform .1s ease;
}
.fc-btn:hover { background: var(--surface-2); }
.fc-btn:active { transform: scale(.97); }
.fc-btn--known { background: var(--good); border-color: var(--good); color: var(--on-good); }
.fc-btn--known:hover { background: color-mix(in srgb, var(--good) 85%, #000); }
.fc-btn--learning { background: var(--bad-soft); border-color: transparent; color: var(--bad); }
.fc-btn--learning:hover { background: color-mix(in srgb, var(--bad-soft) 80%, var(--bad)); }
.fc-btn--ghost { background: transparent; }
.fc-notice { background: var(--primary-soft); padding: 12px 16px; border-radius: 10px; }
/* ---------- posts ---------- */
.post-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.post-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.post-card__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card__body { padding: 16px 18px; }
.post-card__title { font-size: 1.15rem; }
.post-card__title a { color: var(--text); text-decoration: none; }
.post-card__title a:hover { color: var(--primary); }
.post-card__meta { color: var(--muted); font-size: .85rem; margin: 0 0 6px; }
.post-card__excerpt p { margin: 0; color: var(--muted); }

.entry { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
@media (min-width: 720px) { .entry { padding: 36px 44px; } }
.entry-title { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 800; }
.entry-meta { color: var(--muted); }
.entry-thumb { margin: 0 0 20px; }
.entry-thumb img { border-radius: var(--radius); }
.entry-content { font-size: 1.06rem; }
.entry-content > * { max-width: 100%; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content blockquote { border-left: 4px solid var(--primary); margin: 1.5em 0; padding: .2em 1.2em; color: var(--muted); }
.entry-content pre { background: var(--surface-2); padding: 14px; border-radius: 10px; overflow-x: auto; }
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content td, .entry-content th { border: 1px solid var(--border); padding: 8px; }
.alignwide, .alignfull { max-width: 100%; }
.aligncenter { margin-left: auto; margin-right: auto; display: block; }
.wp-caption-text, figcaption { color: var(--muted); font-size: .88rem; }
.nav-links { display: flex; gap: 6px; justify-content: center; margin-top: 24px; }
.nav-links .page-numbers { padding: 8px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); }
.nav-links .current { background: var(--text); color: var(--bg); }
.search-form { display: flex; gap: 8px; }
.search-field { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.search-submit { padding: 10px 16px; border-radius: 10px; border: 0; background: var(--primary); color: var(--primary-ink); font-weight: 650; cursor: pointer; }

/* comments */
.comments-area { margin-top: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.comment-list { list-style: none; padding: 0; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg);
}

/* ---------- 404 ---------- */
.fc-404 { text-align: center; }
.fc-404 .fc-page__lead { margin: 0 auto 24px; }
.fc-404 .fc-lang-grid { text-align: left; }
.fc-404__card {
	display: inline-grid; place-items: center; width: 160px; height: 110px; margin: 24px 0; border-radius: var(--radius-lg);
	background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: 2.6rem; font-weight: 800;
	transform: rotate(-5deg); color: var(--primary);
}

/* ---------- footer ---------- */
.site-footer { margin-top: 40px; border-top: 1px solid var(--border); background: var(--surface); padding: 32px 0 16px; }
.site-footer__inner { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-footer__brand { font-weight: 750; font-size: 1.1rem; margin: 0; }
.site-footer__tag { color: var(--muted); margin: 4px 0 0; }
.site-footer__heading { font-size: 1rem; font-weight: 700; line-height: 1.6; letter-spacing: 0; margin: 0 0 8px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 4px 0; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }
.site-footer__credits { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: .8rem; }
.site-footer__credits p { margin: 4px 0; }

/* Pause-animations button: visible pressed state (RGAA 13.8). */
.motion-toggle[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }

/* ---------- Cero Portal ---------- */
/* Brand: four tiles (one per service) + name; on Flashcard pages a section pill follows. */
.site-brand { display: flex; align-items: center; gap: 10px; }
.cero-mark { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 26px; height: 26px; }
.cero-mark span { position: static; border: 0; border-radius: 4px; transform: none; }
.cero-mark span:nth-child(1) { background: #4f46e5; }
.cero-mark span:nth-child(2) { background: #e11d48; }
.cero-mark span:nth-child(3) { background: #0891b2; }
.cero-mark span:nth-child(4) { background: #c026d3; }
.site-brand__name { letter-spacing: -.02em; white-space: nowrap; }
.site-brand__section {
	padding: 4px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary);
	font-weight: 650; font-size: .85rem; text-decoration: none; white-space: nowrap;
}
.site-brand__section:hover { background: color-mix(in srgb, var(--primary-soft) 70%, var(--primary)); color: var(--primary); }

.cero-hero { padding: 56px 0 8px; text-align: center; }
.cero-hero__title { font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 800; letter-spacing: -.04em; margin: 0; }
.cero-hero__lead { font-size: 1.15rem; color: var(--muted); max-width: 34em; margin: 12px auto 0; }

.cero-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.cero-card {
	--accent: var(--primary);
	position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden;
	background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none;
	box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
a.cero-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
a.cero-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cero-card__media {
	position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), color-mix(in srgb, var(--accent) 6%, var(--surface)));
}
.cero-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cero-card__icon { font-size: 3.6rem; line-height: 1; font-family: var(--font-emoji, inherit); transition: transform .2s ease; }
a.cero-card:hover .cero-card__icon { transform: scale(1.08) rotate(-4deg); }
.cero-card__badge {
	position: absolute; top: 12px; right: 12px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700;
	background: var(--surface); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
}
.cero-card__body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 6px; }
.cero-card__title { font-size: 1.35rem; font-weight: 750; }
.cero-card__text { color: var(--muted); }
.cero-card__meta { color: var(--accent); font-weight: 600; font-size: .9rem; }
.cero-card__cta { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 12px 20px 18px; font-weight: 650; color: var(--accent); }
.cero-card__host { font-weight: 500; font-size: .85rem; color: var(--muted); }
.cero-card.is-soon .cero-card__media { filter: saturate(.75); }

.cero-soon__card {
	display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin: 8px 0 40px; padding: 40px 20px;
	border-radius: var(--radius-lg); border: 1px solid var(--border);
	background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface));
}
.cero-soon__icon { font-size: 4.5rem; line-height: 1; font-family: var(--font-emoji, inherit); }
.cero-soon__card .cero-card__badge { position: static; }
.cero-soon__card .fc-page__title { margin: 0; }
.cero-soon__card .fc-page__lead { max-width: 32em; color: var(--muted); }
@media (max-width: 420px) { .site-brand__section { display: none; } }


/* ---------- page views badge (administrators, when the admin bar is hidden) ---------- */
.cero-views-badge {
	position: fixed; left: 12px; bottom: 12px; z-index: 9500; display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: .82rem; font-weight: 650;
	text-decoration: none; box-shadow: var(--shadow-lg); font-variant-numeric: tabular-nums; opacity: .9;
}
.cero-views-badge:hover { opacity: 1; color: var(--bg); }

/* ---------- service feedback (inc/service-comments.php) ---------- */
.cero-comments { max-width: 860px; margin: 40px auto 24px; padding-top: 28px; padding-bottom: 8px; border-top: 1px solid var(--border); }
.cero-comments__title { font-size: 1.4rem; font-weight: 750; display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.cero-comments__count { font-size: .85rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); }
.cero-comments__lead { color: var(--muted); margin: 0 0 16px; }
.cero-comments__form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cero-comments__form > p { margin: 0 0 12px; }
.cero-comments__form .cero-comments__note, .cero-comments__form .comment-form-comment,
.cero-comments__form .comment-form-cookies-consent, .cero-comments__form .form-submit { grid-column: 1 / -1; }
.cero-comments__note { color: var(--muted); font-size: .85rem; }
.cero-comments__form label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.cero-comments__form .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.cero-comments__form .comment-form-cookies-consent label { display: inline; font-weight: 400; margin: 0; }
.cero-comments__form input[type="text"], .cero-comments__form input[type="email"], .cero-comments__form textarea {
	width: 100%; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
}
.cero-comments__form textarea { resize: vertical; min-height: 96px; }
.cero-comments__form .form-submit { margin: 0; }
.cero-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cero-comments__list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cero-comments__list .comment-body { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.cero-comments__list .comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .88rem; margin-bottom: 6px; }
.cero-comments__list .comment-author { display: flex; align-items: center; gap: 8px; }
.cero-comments__list .comment-author .avatar { border-radius: 50%; }
.cero-comments__list .says { display: none; }
.cero-comments__list .comment-metadata a { color: var(--muted); text-decoration: none; }
.cero-comments__list .comment-awaiting-moderation { display: block; color: var(--muted); font-style: italic; font-size: .85rem; }
.cero-comments__list .comment-content p { margin: 0 0 6px; }
.cero-comments__list .bypostauthor > .comment-body, .cero-comments__list .comment-author-admin > .comment-body { border-color: var(--primary); }
.cero-comments__empty, .cero-comments__closed { color: var(--muted); margin-top: 16px; }
@media (max-width: 600px) {
	.cero-comments__form { grid-template-columns: 1fr; padding: 14px; }
}
.cero-captcha { grid-column: 1 / -1; margin: 0 0 12px; }
.cero-captcha--math label { display: inline-flex !important; align-items: center; gap: 8px; flex-wrap: wrap; }
.cero-captcha__q { font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; padding: 2px 10px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); }
.cero-captcha--math input { width: 5em !important; text-align: center; }

/* ---------- 5-star ratings (inc/service-ratings.php) ---------- */
:root { --star: #f5a623; --star-off: #d9d6cf; }
:root[data-theme="dark"] { --star-off: #4a4a52; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --star-off: #4a4a52; } }
.cero-stars { position: relative; display: inline-block; font-size: 1rem; line-height: 1; letter-spacing: 2px; white-space: nowrap; vertical-align: middle; }
.cero-stars__bg { color: var(--star-off); }
.cero-stars__fg { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); overflow: hidden; color: var(--star); }
.cero-stars--lg { font-size: 1.5rem; }

/* picker: inputs are in 5 → 1 order and shown reversed, so "this star and the ones before it" light up */
.cero-rate { grid-column: 1 / -1; border: 0; margin: 0 0 10px; padding: 0; }
.cero-rate legend { font-weight: 600; font-size: .9rem; margin-bottom: 4px; padding: 0; }
.cero-rate legend small { font-weight: 400; color: var(--muted); }
.cero-rate__stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; vertical-align: middle; }
.cero-rate__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cero-rate__stars label { display: block !important; margin: 0 !important; font-size: 2rem; line-height: 1; color: var(--star-off); cursor: pointer; transition: color .1s ease, transform .1s ease; }
.cero-rate__stars label:hover, .cero-rate__stars label:hover ~ label,
.cero-rate__stars input:checked ~ label { color: var(--star); }
.cero-rate__stars label:hover { transform: scale(1.15); }
.cero-rate__stars input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.cero-rate__hint { margin-left: 10px; font-size: .9rem; color: var(--muted); vertical-align: middle; }

/* summary */
.cero-rating { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 0 0 18px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cero-rating__score { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 120px; }
.cero-rating__avg { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.cero-rating__count { color: var(--muted); font-size: .88rem; }
.cero-rating__bars { flex: 1; min-width: 200px; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cero-rating__bars li { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; gap: 8px; font-size: .85rem; }
.cero-rating__label { color: var(--muted); white-space: nowrap; }
.cero-rating__bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cero-rating__bar span { display: block; height: 100%; border-radius: inherit; background: var(--star); }
.cero-rating__n { color: var(--muted); text-align: right; }
.cero-comment-rating { margin: 0 0 4px !important; }
.cero-card__rating { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; }
.cero-card__rating small { color: var(--muted); }

/* ---------- main action buttons: pink (Send, Print, PDF, Sign in, Next part…) ---------- */
:root { --btn: #db2777; --btn-hover: #be185d; --on-btn: #ffffff; }
:root[data-theme="dark"] { --btn: #f472b6; --btn-hover: #f9a8d4; --on-btn: #2b0a1a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --btn: #f472b6; --btn-hover: #f9a8d4; --on-btn: #2b0a1a; } }
.fc-btn--primary { background: var(--btn); border-color: var(--btn); color: var(--on-btn); }
.fc-btn--primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--on-btn); }
.fc-btn--primary:focus-visible { outline: 3px solid color-mix(in srgb, var(--btn) 45%, transparent); outline-offset: 2px; }

/* ---------- replies (inc/service-replies.php) ---------- */
.cero-comments__list .children { list-style: none; margin: 10px 0 0 28px; padding: 0 0 0 16px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.cero-comments__list .children .comment-body { background: var(--surface-2); }
.cero-comments__list .reply { margin-top: 6px; }
.cero-comments__list .comment-reply-link { font-size: .85rem; font-weight: 650; color: var(--btn); text-decoration: none; }
.cero-comments__list .comment-reply-link::before { content: "↩ "; }
.cero-comments__list .comment-reply-link:hover { text-decoration: underline; }
.cero-reply-title { grid-column: 1 / -1; margin: 0 0 8px; font-weight: 700; }
.cero-reply-title:not(:has(a:not([style*="none"]))) { display: none; }
.cero-reply-cancel a { margin-left: 8px; font-size: .85rem; font-weight: 600; color: var(--muted); }
/* the form moved under a comment: no star rating for replies, a bit tighter */
.cero-comments__list #respond { margin-top: 10px; }
.cero-comments__list #respond .cero-rate, .cero-comments__list #respond .cero-comments__note { display: none; }
.cero-team > .comment-body { border-color: var(--btn); }
.cero-team > .comment-body .fn::after { content: "Team"; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--btn); color: var(--on-btn); vertical-align: middle; }
@media (max-width: 600px) { .cero-comments__list .children { margin-left: 8px; padding-left: 10px; } }
.cero-comments__admin-note { margin: 24px 0 0; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--btn); color: var(--muted); font-size: .9rem; }