/* ==========================================================================
   Freya 2026 design system
   "Twilight storybook": a bright dusk hero that descends into an indigo
   night with gold starlight and pink petals.

   1. Tokens          5. Header and navigation   9. Feedback
   2. Base            6. Drawer and dock        10. FluxCP markup
   3. Layout          7. Page head and footer   11. Utilities
   4. Typography      8. Components             12. Motion preferences
   ========================================================================== */

/* 0. Fonts (self-hosted; same rules as fonts/fonts.css, which standalone pages link) */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/fredoka-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/fredoka-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/nunito-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/nunito-italic-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/cinzel-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched local fallbacks (size-adjust and overrides computed with fontTools from the woff2 files
   against Arial / Times New Roman) so the swap to the web font causes almost no layout shift. */
@font-face {
  font-family: "Fredoka Fallback";
  font-style: normal;
  font-weight: 300 500;
  src: local("Arial"), local("ArialMT");
  size-adjust: 102.27%;
  ascent-override: 95.24%;
  descent-override: 23.08%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Fredoka Fallback";
  font-style: normal;
  font-weight: 600 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 95.17%;
  ascent-override: 102.34%;
  descent-override: 24.80%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Nunito Fallback";
  font-style: normal;
  font-weight: 400 600;
  src: local("Arial"), local("ArialMT");
  size-adjust: 101.71%;
  ascent-override: 99.40%;
  descent-override: 34.71%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Nunito Fallback";
  font-style: normal;
  font-weight: 700 800;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 98.95%;
  ascent-override: 102.17%;
  descent-override: 35.67%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Cinzel Fallback";
  font-style: normal;
  font-weight: 500 800;
  src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT");
  size-adjust: 102.72%;
  ascent-override: 95.02%;
  descent-override: 36.22%;
  line-gap-override: 0.00%;
}

/* 1. Tokens ---------------------------------------------------------------- */
:root {
	color-scheme: dark;

	/* Night: page and surfaces */
	--night-950: #0a0719;
	--night-900: #100b26;
	--night-850: #150f31;
	--night-800: #1b143d;
	--night-750: #221a4b;
	--night-700: #2b215c;
	--night-600: #3b2f78;
	--night-500: #4d3f96;

	/* Text on night */
	--text: #f7f3ff;
	--text-2: #d8cff4;
	--text-3: #ada1da;
	--text-4: #9a8ecd;

	/* Brand hues: Freya violet, petal pink, crest gold, canal sky */
	--violet-200: #ddd0ff;
	--violet-300: #c4aaff;
	--violet-400: #a77eff;
	--violet-500: #8c57f8;
	--violet-600: #7238e7;
	--violet-700: #5b24c5;
	--violet-800: #461b98;
	--petal-200: #ffd3ea;
	--petal-300: #ffabd7;
	--petal-400: #ff82c2;
	--petal-500: #f35aa9;
	--gold-100: #fff5d1;
	--gold-200: #ffe8a3;
	--gold-300: #ffd76d;
	--gold-400: #ffc43f;
	--gold-500: #f5aa1f;
	--gold-600: #d68b0d;
	--gold-700: #9a5f05;
	--sky-300: #a6cfff;
	--sky-400: #6db0ff;
	--sky-500: #3f8cff;
	--sky-600: #2170e6;
	--mint-300: #93f1c3;
	--mint-400: #52dd9c;
	--mint-500: #22c07b;
	--rose-300: #ffb3c0;
	--rose-400: #ff8098;
	--rose-500: #f04a69;
	--amber-300: #ffd79e;
	--amber-400: #ffb656;

	/* Semantic */
	--bg: var(--night-900);
	--bg-deep: var(--night-950);
	--surface: #18113a;
	--surface-2: #1f1748;
	--surface-3: #291f5c;
	--surface-sunken: rgba(8, 5, 22, .55);
	--line: rgba(200, 182, 255, .13);
	--line-2: rgba(200, 182, 255, .22);
	--line-3: rgba(200, 182, 255, .34);
	--link: var(--violet-300);
	--link-hover: var(--gold-300);
	--focus: var(--gold-300);

	/* Type */
	--font-display: "Fredoka", "Fredoka Fallback", ui-rounded, "Segoe UI", system-ui, sans-serif;
	--font-body: "Nunito", "Nunito Fallback", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-lore: "Cinzel", "Cinzel Fallback", Georgia, "Times New Roman", serif;
	--font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;
	--fs-xs: .75rem;
	--fs-sm: .875rem;
	--fs-md: 1rem;
	--fs-lg: 1.125rem;
	--fs-xl: 1.25rem;
	--fs-h4: 1.125rem;
	--fs-h3: clamp(1.25rem, 1.1rem + .55vw, 1.55rem);
	--fs-h2: clamp(1.65rem, 1.2rem + 1.7vw, 2.55rem);
	--fs-h1: clamp(2rem, 1.35rem + 2.6vw, 3.35rem);
	--fs-hero: clamp(2.55rem, 1.45rem + 4.7vw, 5.35rem);
	--lh-tight: 1.08;
	--lh-snug: 1.28;
	--lh-body: 1.65;

	/* Space */
	--sp-1: .25rem;
	--sp-2: .5rem;
	--sp-3: .75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;
	--sp-16: 4rem;
	--sp-20: 5rem;
	--section-y: clamp(3.25rem, 2rem + 3.6vw, 5.5rem);
	--gutter: clamp(1rem, .55rem + 1.8vw, 2rem);
	--container: 1200px;
	--container-wide: 1380px;
	--container-narrow: 780px;
	--header-h: 68px;
	--dock-h: 0px;

	/* Shape */
	--r-xs: 6px;
	--r-sm: 10px;
	--r-md: 14px;
	--r-lg: 20px;
	--r-xl: 28px;
	--r-pill: 999px;

	/* Depth */
	--shadow-sm: 0 1px 2px rgba(4, 2, 16, .35);
	--shadow-md: 0 12px 32px -14px rgba(4, 2, 16, .75), 0 2px 6px -2px rgba(4, 2, 16, .35);
	--shadow-lg: 0 32px 72px -26px rgba(4, 2, 16, .9), 0 8px 20px -8px rgba(4, 2, 16, .45);
	--inner-hi: inset 0 1px 0 rgba(255, 255, 255, .06);
	--glow-gold: 0 14px 34px -14px rgba(245, 170, 31, .75);
	--glow-violet: 0 14px 34px -14px rgba(140, 87, 248, .8);

	/* Gradients */
	--grad-gold: linear-gradient(180deg, #ffe592 0%, #ffc743 46%, #f29f14 100%);
	--grad-violet: linear-gradient(180deg, #9566fa 0%, #7238e7 50%, #5b24c5 100%);
	--grad-sky: linear-gradient(180deg, #7dbcff 0%, #3f8cff 55%, #2468dd 100%);
	--grad-text-gold: linear-gradient(180deg, #fff4c9 8%, #ffd66a 52%, #f4a51d 96%);
	--grad-text-dusk: linear-gradient(100deg, #ffd3ea 0%, #ffffff 45%, #e1d2ff 100%);
	--grad-card: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .008));

	/* Motion */
	--ease: cubic-bezier(.22, 1, .36, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--t-fast: 140ms;
	--t-med: 240ms;
	--t-slow: 520ms;

	/* Layers */
	--z-dock: 40;
	--z-header: 50;
	--z-menu: 55;
	--z-drawer: 70;
	--z-dialog: 80;
	--z-toast: 90;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
	background: var(--bg-deep);
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	color: var(--text-2);
	font: 400 var(--fs-md)/var(--lh-body) var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	background-color: var(--bg);
	background-image:
		radial-gradient(1100px 620px at 88% -6%, rgba(140, 87, 248, .2), transparent 62%),
		radial-gradient(900px 560px at -12% 16%, rgba(243, 90, 169, .09), transparent 60%),
		radial-gradient(1200px 700px at 50% 104%, rgba(63, 140, 255, .09), transparent 62%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='22' cy='34' r='1' opacity='.55'/%3E%3Ccircle cx='146' cy='86' r='.8' opacity='.4'/%3E%3Ccircle cx='268' cy='42' r='1.2' opacity='.5'/%3E%3Ccircle cx='84' cy='170' r='.7' opacity='.35'/%3E%3Ccircle cx='206' cy='206' r='1' opacity='.45'/%3E%3Ccircle cx='312' cy='160' r='.6' opacity='.35'/%3E%3Ccircle cx='44' cy='276' r='1.1' opacity='.5'/%3E%3Ccircle cx='170' cy='306' r='.8' opacity='.4'/%3E%3Ccircle cx='262' cy='292' r='.6' opacity='.3'/%3E%3Ccircle cx='116' cy='240' r='.5' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat, no-repeat, no-repeat, repeat;
	background-size: auto, auto, auto, 340px 340px;
}

/* Site background art on wide screens: the night scene with Freya's two heroes on both sides, fixed behind the
   page. It is requested only after the page itself has loaded (freya.js adds html.fy-bg-ready), never on phones
   and tablets, and it fades in over the plain night background above. */
body {
	isolation: isolate;
	/* darkens the art behind the 1200px content column (full strength to its edges) so text stays readable; the heroes stay bright in the margins */
	--fy-site-shade: linear-gradient(90deg, rgba(16, 11, 38, 0) calc(50% - 700px), rgba(16, 11, 38, .82) calc(50% - 600px), rgba(16, 11, 38, .82) calc(50% + 600px), rgba(16, 11, 38, 0) calc(50% + 700px));
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: auto, cover;
	opacity: 0;
	transition: opacity .8s var(--ease);
}
@media (min-width: 1100px) {
	html.fy-bg-ready body::before {
		background-image: var(--fy-site-shade), url("../img/site-bg-1280.webp");
		background-image: var(--fy-site-shade), image-set(url("../img/site-bg-1280.avif") type("image/avif"), url("../img/site-bg-1280.webp") type("image/webp"));
		opacity: 1;
	}
}
@media (min-width: 1440px) {
	html.fy-bg-ready body::before {
		background-image: var(--fy-site-shade), url("../img/site-bg-1672.webp");
		background-image: var(--fy-site-shade), image-set(url("../img/site-bg-1672.avif") type("image/avif"), url("../img/site-bg-1672.webp") type("image/webp"));
	}
}
@media (prefers-reduced-motion: reduce) { body::before { transition: none; } }
/* Later pages of a visit: the background is cached, so it is shown from the first paint (header.php sets both
   classes from sessionStorage), without the fade. */
html.fy-bg-instant body::before { transition: none; }
/* First page of a visit: requested with fy-bg-ready but hidden until the picture has arrived (freya.js), so it fades
   in whole instead of popping in after the fade has run on a slow connection. */
html.fy-bg-ready.fy-bg-wait body::before { opacity: 0; }

img, svg, video, canvas, picture { max-width: 100%; }
img, video { height: auto; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }

a {
	color: var(--link);
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
	transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--link-hover); }

:focus { outline: none; }
:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection { background: rgba(255, 196, 63, .32); color: #fff; }

hr {
	height: 1px;
	margin: var(--sp-8) 0;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden]:not([hidden="until-found"]) { display: none !important; }

/* 3. Layout ---------------------------------------------------------------- */
.fy-container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.fy-container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.fy-container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.fy-main { flex: 1 0 auto; position: relative; }
.fy-page { padding-block: var(--sp-8) var(--section-y); }
.fy-section { padding-block: var(--section-y); position: relative; }

.fy-stack { display: flex; flex-direction: column; gap: var(--stack, var(--sp-4)); }
.fy-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--sp-3)); }
.fy-grid {
	display: grid;
	gap: var(--grid-gap, var(--sp-6));
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 260px)), 1fr));
}
.fy-split {
	display: grid;
	gap: var(--sp-8);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
	.fy-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
	.fy-split--aside { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

/* 4. Typography ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	color: var(--text);
	font-family: var(--font-display);
	font-weight: 600;
	line-height: var(--lh-snug);
	letter-spacing: -.005em;
	text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5, h6 { font-size: var(--fs-md); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
small { font-size: var(--fs-sm); }
strong, b { color: var(--text); font-weight: 800; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: .9em; }
code {
	padding: .12em .4em;
	border-radius: var(--r-xs);
	background: rgba(255, 255, 255, .06);
	color: var(--gold-200);
}
pre {
	overflow: auto;
	padding: var(--sp-4);
	border-radius: var(--r-md);
	border: 1px solid var(--line);
	background: var(--surface-sunken);
}
blockquote {
	margin: var(--sp-6) 0;
	padding: var(--sp-4) var(--sp-6);
	border-left: 3px solid var(--gold-400);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	background: rgba(255, 196, 63, .06);
}
ul, ol { padding-left: 1.3em; }
li + li { margin-top: .3em; }

.fy-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	margin: 0 0 var(--sp-3);
	color: var(--gold-300);
	font: 700 .74rem/1.2 var(--font-lore);
	letter-spacing: .22em;
	text-transform: uppercase;
}
.fy-eyebrow::before, .fy-eyebrow::after {
	content: "";
	width: .5em;
	height: .5em;
	background: currentColor;
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	opacity: .85;
}
.fy-eyebrow--plain::before, .fy-eyebrow--plain::after { display: none; }

.fy-lede { font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); color: var(--text-2); line-height: 1.6; }
.fy-muted { color: var(--text-3); }
.fy-subtle { color: var(--text-4); }
.fy-gold-text {
	background: var(--grad-text-gold);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.fy-section-head { max-width: 700px; margin: 0 auto var(--sp-10); text-align: center; }
.fy-section-head h2 { margin-bottom: var(--sp-3); }
.fy-section-head--left { margin-inline: 0; text-align: left; }

.fy-prose { max-width: 35rem; color: var(--text-2); } /* about 75 characters of Nunito */
.fy-prose h2 { font-size: var(--fs-h3); margin-top: 1.8em; }
.fy-prose h3 { font-size: var(--fs-lg); margin-top: 1.5em; }
.fy-prose img { border-radius: var(--r-md); }
.fy-prose a { text-decoration: underline; }

/* Icons from themes/freya/img/icons.svg */
.fy-i {
	width: 1.25em;
	height: 1.25em;
	flex: none;
	display: inline-block;
	vertical-align: -.22em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.fy-i--fill { fill: currentColor; stroke: none; }
.fy-i--sm { width: 1em; height: 1em; }
.fy-i--lg { width: 1.6em; height: 1.6em; }

/* 5. Header and navigation ------------------------------------------------- */
.fy-skip {
	position: absolute;
	left: var(--sp-4);
	top: -100px;
	z-index: 100;
	padding: .7rem 1.1rem;
	border-radius: var(--r-pill);
	background: var(--gold-400);
	color: #2b1900;
	font-weight: 800;
	text-decoration: none;
}
.fy-skip:focus { top: var(--sp-3); }

.fy-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	height: var(--header-h);
	background: rgba(15, 10, 36, .86);
	border-bottom: 1px solid var(--line);
	-webkit-backdrop-filter: saturate(150%) blur(12px);
	backdrop-filter: saturate(150%) blur(12px);
	transition: background-color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.fy-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9); }
/* On the home page the header floats over the hero until the visitor scrolls. */
.fy-home .fy-header { position: fixed; left: 0; right: 0; }
.fy-home .fy-header:not(.is-scrolled) {
	background: linear-gradient(180deg, rgba(12, 8, 30, .62), rgba(12, 8, 30, 0));
	border-bottom-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.fy-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	height: 100%;
}

.fy-brand {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	flex: none;
	margin-right: var(--sp-2);
	color: var(--text);
	text-decoration: none;
}
.fy-brand picture, .fy-brand img { display: block; height: 46px; width: auto; }
.fy-brand img { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); transition: transform var(--t-med) var(--ease-spring); }
.fy-brand:hover img { transform: rotate(-3deg) scale(1.04); }
.fy-brand__text { display: flex; flex-direction: column; line-height: 1; }
.fy-brand__name { font: 700 1.2rem/1 var(--font-lore); letter-spacing: .14em; }
.fy-brand__sub { margin-top: .3rem; color: var(--text-3); font: 700 .6rem/1 var(--font-body); letter-spacing: .26em; text-transform: uppercase; }

.fy-nav { display: none; margin-inline: auto; }
.fy-nav__list { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.fy-nav__item { position: relative; margin: 0; }
.fy-nav__link, .fy-nav__trigger {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	height: 40px;
	padding: 0 .85rem;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--text-2);
	font: 500 .98rem/1 var(--font-display);
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fy-nav__link:hover, .fy-nav__trigger:hover, .fy-nav__item.is-open > .fy-nav__trigger {
	color: var(--text);
	background: rgba(255, 255, 255, .07);
}
.fy-nav__link[aria-current="page"], .fy-nav__item.is-current > .fy-nav__trigger {
	color: var(--text);
	background: rgba(140, 87, 248, .2);
	box-shadow: inset 0 0 0 1px rgba(167, 126, 255, .3);
}
.fy-nav__trigger .fy-i { width: 1em; height: 1em; opacity: .7; transition: transform var(--t-med) var(--ease); }
.fy-nav__item.is-open > .fy-nav__trigger .fy-i { transform: rotate(180deg); }
.fy-nav__link--gift { color: var(--gold-200); }
.fy-nav__link--gift .fy-i { color: var(--gold-300); }
.fy-nav__link--gift:hover { color: var(--gold-100); background: rgba(255, 196, 63, .12); }

.fy-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	z-index: var(--z-menu);
	width: max-content;
	min-width: 300px;
	max-width: 360px;
	padding: .45rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-lg), var(--inner-hi);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px) scale(.98);
	transform-origin: top center;
	transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.fy-menu::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -7px;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	border-left: 1px solid var(--line-2);
	border-top: 1px solid var(--line-2);
	background: var(--surface);
	transform: rotate(45deg);
}
.fy-menu--right { left: auto; right: 0; transform: translate(0, 8px) scale(.98); transform-origin: top right; }
.fy-menu--right::before { left: auto; right: 28px; }
.fy-nav__item.is-open > .fy-menu, .fy-has-menu.is-open > .fy-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0) scale(1);
	transition-delay: 0s;
}
.fy-has-menu.is-open > .fy-menu--right { transform: translate(0, 0) scale(1); }
.fy-menu__list { margin: 0; padding: 0; list-style: none; }
.fy-menu__list li { margin: 0; }
.fy-menu__link {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	align-items: center;
	gap: .75rem;
	padding: .55rem .65rem;
	border-radius: var(--r-md);
	color: var(--text);
	text-decoration: none;
	transition: background-color var(--t-fast) var(--ease);
}
.fy-menu__link:hover, .fy-menu__link:focus-visible { background: var(--surface-3); color: var(--text); }
.fy-menu__link[aria-current="page"] { background: rgba(140, 87, 248, .18); }
.fy-menu__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(140, 87, 248, .16);
	color: var(--violet-300);
	transition: transform var(--t-med) var(--ease-spring);
}
.fy-menu__link:hover .fy-menu__icon { transform: scale(1.08) rotate(-4deg); }
.fy-menu__icon--gold { background: rgba(255, 196, 63, .14); color: var(--gold-300); }
.fy-menu__icon--pink { background: rgba(243, 90, 169, .15); color: var(--petal-300); }
.fy-menu__icon--sky { background: rgba(63, 140, 255, .15); color: var(--sky-300); }
.fy-menu__icon--mint { background: rgba(82, 221, 156, .14); color: var(--mint-300); }
.fy-menu__title { display: flex; align-items: center; gap: .35rem; font: 600 .95rem/1.2 var(--font-display); }
.fy-menu__title .fy-i { width: .8em; height: .8em; opacity: .55; }
.fy-menu__desc { display: block; margin-top: .15rem; color: var(--text-3); font-size: .8rem; line-height: 1.35; }
.fy-menu__sep { height: 1px; margin: .35rem .5rem; background: var(--line); }
.fy-menu__label { padding: .5rem .7rem .25rem; color: var(--text-4); font: 800 .68rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }

.fy-header__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

.fy-status {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	height: 34px;
	padding: 0 .75rem;
	border: 1px solid rgba(82, 221, 156, .28);
	border-radius: var(--r-pill);
	background: rgba(82, 221, 156, .09);
	color: var(--mint-300);
	font: 800 .78rem/1 var(--font-body);
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
}
.fy-status:hover { color: var(--mint-300); background: rgba(82, 221, 156, .16); }
.fy-status__dot {
	position: relative;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mint-400);
}
.fy-status__dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--mint-400);
	opacity: 0;
	animation: fy-ping 2.6s var(--ease) infinite;
}
.fy-status--down { border-color: rgba(255, 128, 152, .3); background: rgba(255, 128, 152, .1); color: var(--rose-300); }
.fy-status--down:hover { color: var(--rose-300); background: rgba(255, 128, 152, .16); }
.fy-status--down .fy-status__dot { background: var(--rose-400); }
.fy-status--down .fy-status__dot::after { display: none; }
.fy-status__label { display: none; }

.fy-burger {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line-2);
	border-radius: 14px;
	background: rgba(255, 255, 255, .05);
	color: var(--text);
}
.fy-burger:hover { background: rgba(255, 255, 255, .1); }

.fy-account-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	height: 42px;
	padding: 0 .55rem 0 .4rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .05);
	color: var(--text);
	font: 600 .92rem/1 var(--font-display);
}
.fy-account-btn:hover, .fy-has-menu.is-open > .fy-account-btn { background: rgba(255, 255, 255, .1); }
.fy-avatar {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--grad-violet);
	color: #fff;
	font: 700 .9rem/1 var(--font-display);
	text-transform: uppercase;
}
.fy-has-menu { position: relative; }

.fy-login-panel { width: 320px; padding: var(--sp-5); }
.fy-login-panel__title { margin: 0 0 var(--sp-4); color: var(--text); font: 600 1.25rem/1.2 var(--font-display); }
.fy-login-panel .fy-form { gap: var(--sp-4); }
.fy-login-panel .fy-btn { margin-top: var(--sp-1); }
.fy-login-panel__links { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); font-size: .85rem; }

@media (min-width: 560px) {
	.fy-status__label { display: inline; }
}
@media (max-width: 719.98px) {
	.fy-hide-sm { display: none !important; }
}
@media (min-width: 1100px) {
	.fy-nav { display: block; }
	.fy-burger { display: none; }
	.fy-brand { margin-right: var(--sp-4); }
}
@media (min-width: 1100px) and (max-width: 1299.98px) {
	.fy-header__inner { gap: var(--sp-2); }
	.fy-brand { margin-right: var(--sp-1); }
	.fy-nav__link, .fy-nav__trigger { padding: 0 .6rem; font-size: .93rem; }
	.fy-status__label { display: none; }
	.fy-header__actions { gap: .4rem; }
}
@media (max-width: 1099.98px) {
	.fy-hide-md { display: none !important; }
}

/* 6. Drawer (small screens) and quick dock --------------------------------- */
.fy-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	display: flex;
	justify-content: flex-end;
	visibility: hidden;
	pointer-events: none;
}
.fy-drawer.is-open { visibility: visible; pointer-events: auto; }
.fy-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(6, 3, 18, .66);
	opacity: 0;
	transition: opacity var(--t-med) var(--ease);
}
.fy-drawer.is-open .fy-drawer__scrim { opacity: 1; }
.fy-drawer__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(420px, 92vw);
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--sp-4) var(--sp-5) calc(var(--sp-8) + env(safe-area-inset-bottom));
	border-left: 1px solid var(--line-2);
	background:
		radial-gradient(500px 300px at 100% 0, rgba(140, 87, 248, .22), transparent 70%),
		var(--night-850);
	box-shadow: var(--shadow-lg);
	transform: translateX(104%);
	transition: transform var(--t-slow) var(--ease);
}
.fy-drawer.is-open .fy-drawer__panel { transform: none; }
.fy-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.fy-drawer__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.fy-drawer__group { border-top: 1px solid var(--line); }
.fy-drawer__group > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .95rem .25rem;
	color: var(--text);
	font: 600 1.08rem/1 var(--font-display);
	list-style: none;
	cursor: pointer;
}
.fy-drawer__group > summary::-webkit-details-marker { display: none; }
.fy-drawer__group > summary .fy-i { transition: transform var(--t-med) var(--ease); opacity: .7; }
.fy-drawer__group[open] > summary .fy-i { transform: rotate(180deg); }
.fy-drawer__links { margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.fy-drawer__links li { margin: 0; }
.fy-drawer__links a {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .7rem .6rem;
	border-radius: var(--r-md);
	color: var(--text-2);
	text-decoration: none;
	font-weight: 700;
}
.fy-drawer__links a:hover, .fy-drawer__links a[aria-current="page"] { background: rgba(255, 255, 255, .06); color: var(--text); }
.fy-drawer__links .fy-i { color: var(--violet-300); }
.fy-drawer__single {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .95rem .25rem;
	border-top: 1px solid var(--line);
	color: var(--text);
	font: 600 1.08rem/1 var(--font-display);
	text-decoration: none;
}
.fy-drawer__single .fy-i { color: var(--gold-300); }
.fy-drawer__foot { margin-top: auto; padding-top: var(--sp-6); color: var(--text-4); font-size: .82rem; }

/* Quick dock: the five illustrated shortcuts. Bottom bar on phones, slim rail on wide screens. */
.fy-dock {
	position: fixed;
	z-index: var(--z-dock);
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0 .5rem env(safe-area-inset-bottom);
	border-top: 1px solid var(--line-2);
	background: rgba(14, 9, 34, .94);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: transform var(--t-med) var(--ease);
}
.fy-dock.is-hidden { transform: translateY(110%); }
.fy-dock__list { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 560px; margin: 0 auto; padding: 0; list-style: none; }
.fy-dock__list li { margin: 0; }
.fy-dock__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .1rem;
	padding: .35rem 0 .4rem;
	color: var(--text-3);
	font: 700 .66rem/1.1 var(--font-body);
	letter-spacing: .03em;
	text-decoration: none;
	text-transform: uppercase;
}
.fy-dock__link img { width: 40px; height: 36px; object-fit: contain; transition: transform var(--t-med) var(--ease-spring); }
.fy-dock__link:hover, .fy-dock__link[aria-current="page"] { color: var(--gold-200); }
.fy-dock__link:hover img { transform: translateY(-3px) scale(1.06); }
body.fy-has-dock { --dock-h: 64px; padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
/* The dock hides while reading downwards (freya.js): the room the body keeps for it under the footer then shows
   the lighter sky. The footer's own end colour fills it (an outer shadow is drawn only outside the footer box), so
   the page ends on the footer. */
@media (max-width: 1099.98px) {
	body.fy-has-dock .fy-footer { box-shadow: 0 calc(var(--dock-h) + env(safe-area-inset-bottom)) 0 var(--night-950); }
}

@media (min-width: 1100px) {
	body.fy-has-dock { --dock-h: 0px; padding-bottom: 0; }
	.fy-dock {
		top: 50%;
		bottom: auto;
		left: 14px;
		right: auto;
		padding: .45rem .3rem;
		border: 1px solid var(--line-2);
		border-radius: 22px;
		background: rgba(14, 9, 34, .78);
		box-shadow: var(--shadow-md);
		transform: translateY(-50%);
	}
	.fy-dock.is-hidden { transform: translateY(-50%); }
	.fy-dock__list { grid-template-columns: 1fr; gap: .15rem; }
	.fy-dock__link { position: relative; padding: .4rem .3rem; border-radius: 16px; }
	.fy-dock__link span {
		position: absolute;
		left: calc(100% + 10px);
		top: 50%;
		padding: .4rem .7rem;
		border: 1px solid var(--line-2);
		border-radius: var(--r-pill);
		background: var(--surface-2);
		color: var(--text);
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transform: translate(-6px, -50%);
		transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
	}
	.fy-dock__link:hover span, .fy-dock__link:focus-visible span { opacity: 1; transform: translate(0, -50%); }
	.fy-dock__link:hover { background: rgba(255, 255, 255, .06); }
	.fy-dock__link img { width: 44px; height: 40px; }
}
@media (min-width: 1100px) and (max-width: 1439.98px) {
	.fy-dock { display: none; }
}
/* Wide and full-bleed layouts reach the screen edge until 1600 px: keep the rail out of their way. */
@media (min-width: 1100px) and (max-width: 1599.98px) {
	.fy-l-wide .fy-dock { display: none; }
}

/* 7. Page head, sub navigation and footer ---------------------------------- */
/* The page head fades out at the bottom (base colour, art and shade alike), so it flows into the page behind it
   (the site background art on wide screens) instead of ending on an edge. */
.fy-pagehead {
	--fy-fade: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem) 0 clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 55%, rgba(16, 11, 38, 0) 100%);
}
.fy-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--fy-art-sm, none);
	background-position: var(--fy-art-pos, center 40%);
	background-size: cover;
	background-repeat: no-repeat;
	opacity: .58;
	-webkit-mask-image: var(--fy-fade);
	mask-image: var(--fy-fade);
}
@media (min-width: 700px) {
	.fy-pagehead::before { background-image: var(--fy-art-lg, none); }
}
.fy-pagehead::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(16, 11, 38, .96) 0%, rgba(16, 11, 38, .78) 45%, rgba(16, 11, 38, .35) 100%);
	-webkit-mask-image: var(--fy-fade);
	mask-image: var(--fy-fade);
}
/* Wide screens: the page-head scene and its shade also fade out sideways past the content column, so the heroes of
   the site background at the sides are not seen through a second picture. Not tied to html.fy-bg-ready: the page
   head is final from the first paint, and only the heroes fade in when the background arrives. */
@media (min-width: 1100px) {
	.fy-pagehead { --fy-fade-x: linear-gradient(90deg, transparent max(0px, calc(50% - 760px)), #000 calc(50% - 600px), #000 calc(50% + 600px), transparent min(100%, calc(50% + 760px))); }
	.fy-pagehead::before, .fy-pagehead::after {
		-webkit-mask-image: var(--fy-fade), var(--fy-fade-x);
		-webkit-mask-composite: source-in;
		mask-image: var(--fy-fade), var(--fy-fade-x);
		mask-composite: intersect;
	}
	.fy-pagehead { background: none; }
}
/* From 1520 px the scene and its shade stay in a 1520 px box around the column: the 1280 px art is scaled about
   1.2x at every width instead of being stretched across the screen (2x at 2560, faces out of frame). */
@media (min-width: 1520px) {
	.fy-pagehead::before, .fy-pagehead::after { left: calc(50% - 760px); right: calc(50% - 760px); }
}
/* 1440 to 1599 px: the dock rail sits on the left edge, so the footer keeps to the page column and the rail does not
   cover its crest (the wide footer container would start under it). */
@media (min-width: 1440px) and (max-width: 1599.98px) {
	body.fy-has-dock:not(.fy-l-wide) .fy-footer > .fy-container--wide { max-width: calc(var(--container) + var(--gutter) * 2); }
}
.fy-pagehead__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); }
.fy-pagehead__text { max-width: 760px; }
.fy-pagehead h1 { margin: 0; overflow-wrap: anywhere; text-shadow: 0 2px 18px rgba(8, 4, 24, .55); }
.fy-pagehead__lede { margin: var(--sp-3) 0 0; color: var(--text-2); font-size: var(--fs-lg); }
.fy-pagehead__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.fy-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 var(--sp-3); padding: 0; list-style: none; color: var(--text-3); font-size: .82rem; font-weight: 700; }
.fy-crumbs li { margin: 0; display: inline-flex; align-items: center; gap: .4rem; }
.fy-crumbs li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid var(--text-4); border-right: 1.5px solid var(--text-4); transform: rotate(45deg); }
.fy-crumbs a { color: var(--text-3); text-decoration: none; }
.fy-crumbs a:hover { color: var(--gold-300); }
.fy-pagehead--compact { padding-block: var(--sp-8) var(--sp-6); }
.fy-pagehead--staff h1 { font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.3rem); }
.fy-pagehead--staff::before { display: none; }

.fy-subnav {
	display: flex;
	gap: .35rem;
	margin: 0 0 var(--sp-6);
	padding: .3rem;
	overflow-x: auto;
	scrollbar-width: none;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--surface-sunken);
	width: fit-content;
	max-width: 100%;
}
.fy-subnav::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) {
	/* Long sub-menus wrap onto a second row instead of hiding items behind a scroll. */
	.fy-subnav { flex-wrap: wrap; overflow: visible; border-radius: 24px; }
}
/* Narrower screens scroll the sub-menu sideways; faded edges hint that there is more. */
.fy-subnav.is-scrollable, .fy-tabs.is-scrollable {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
}
.fy-subnav a {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	height: 38px;
	padding: 0 1rem;
	border-radius: var(--r-pill);
	color: var(--text-3);
	font: 600 .9rem/1 var(--font-display);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fy-subnav a:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.fy-subnav a[aria-current="page"], .fy-subnav a.is-active { color: #fff; background: var(--grad-violet); box-shadow: var(--glow-violet); }
.fy-subnav--staff { border-style: dashed; }
.fy-subnav__label { flex: none; align-self: center; padding: 0 .6rem 0 .8rem; color: var(--text-4); font: 800 .66rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }

.fy-footer {
	position: relative;
	margin-top: auto;
	padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 var(--sp-8);
	/* fades in from transparent, so the page (and the site background art) flows into the footer without an edge */
	background:
		radial-gradient(800px 300px at 50% 220px, rgba(140, 87, 248, .14), transparent 70%),
		linear-gradient(180deg, rgba(16, 11, 38, 0) 0, var(--night-900) 180px, var(--night-950) 100%);
	color: var(--text-3);
	font-size: .92rem;
}
.fy-footer__top { display: grid; gap: var(--sp-10); grid-template-columns: minmax(0, 1fr); }
.fy-footer__brand { max-width: 340px; }
.fy-footer__brand img { width: 190px; height: auto; margin-bottom: var(--sp-4); filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5)); }
.fy-footer__cols { display: grid; gap: var(--sp-8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fy-footer h2 { margin: 0 0 var(--sp-4); color: var(--text); font: 600 1rem/1.2 var(--font-display); letter-spacing: .02em; }
.fy-footer ul { margin: 0; padding: 0; list-style: none; }
.fy-footer li + li { margin-top: .55rem; }
.fy-footer a { color: var(--text-3); text-decoration: none; }
.fy-footer a:hover { color: var(--gold-300); }
.fy-footer__social { display: flex; gap: .5rem; margin-top: var(--sp-5); }
.fy-footer__social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line-2);
	border-radius: 14px;
	color: var(--text-2);
	transition: transform var(--t-med) var(--ease-spring), color var(--t-fast), border-color var(--t-fast);
}
.fy-footer__social a:hover { color: var(--gold-300); border-color: rgba(255, 196, 63, .5); transform: translateY(-3px); }
.fy-footer__legal { display: grid; gap: var(--sp-3); margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--line); color: var(--text-4); font-size: .8rem; }
.fy-footer__legal p { margin: 0; }
.fy-footer__legal nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
@media (min-width: 720px) {
	.fy-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.fy-footer__top { grid-template-columns: 300px minmax(0, 1fr); }
	.fy-footer__legal { grid-template-columns: 1fr auto; align-items: center; }
}

/* 8. Components ------------------------------------------------------------ */
/* Buttons */
.fy-btn {
	--btn-h: 46px;
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: var(--btn-h);
	padding: 0 1.3rem;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .06);
	color: var(--text);
	font: 600 1rem/1.1 var(--font-display);
	letter-spacing: .01em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
	transition: transform var(--t-fast) var(--ease), box-shadow var(--t-med) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.fy-btn:hover { transform: translateY(-2px); color: var(--text); }
.fy-btn:active { transform: translateY(1px); }
.fy-btn .fy-i { width: 1.15em; height: 1.15em; }
.fy-btn--gold {
	background: var(--grad-gold);
	color: #3a2200;
	box-shadow: var(--glow-gold), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(154, 95, 5, .32);
	text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.fy-btn--gold:hover { color: #2b1800; filter: brightness(1.05) saturate(1.05); box-shadow: 0 18px 40px -14px rgba(245, 170, 31, .9), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(154, 95, 5, .32); }
.fy-btn--violet {
	background: var(--grad-violet);
	color: #fff;
	box-shadow: var(--glow-violet), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(40, 10, 110, .35);
}
.fy-btn--violet:hover { color: #fff; filter: brightness(1.08); }
.fy-btn--sky {
	background: var(--grad-sky);
	color: #fff;
	box-shadow: 0 14px 34px -14px rgba(63, 140, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(10, 40, 110, .35);
}
.fy-btn--sky:hover { color: #fff; filter: brightness(1.08); }
.fy-btn--gold::after, .fy-btn--violet::after, .fy-btn--sky::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 48%, transparent 62%);
	transform: translateX(-120%);
	transition: transform .7s var(--ease);
}
.fy-btn--gold:hover::after, .fy-btn--violet:hover::after, .fy-btn--sky:hover::after { transform: translateX(120%); }
.fy-btn--ghost { border-color: var(--line-3); background: rgba(255, 255, 255, .04); }
.fy-btn--ghost:hover { border-color: var(--violet-300); background: rgba(140, 87, 248, .14); }
.fy-btn--quiet { background: transparent; color: var(--text-2); }
.fy-btn--quiet:hover { background: rgba(255, 255, 255, .07); }
.fy-btn--danger { border-color: rgba(255, 128, 152, .4); background: rgba(240, 74, 105, .14); color: var(--rose-300); }
.fy-btn--danger:hover { border-color: var(--rose-400); background: rgba(240, 74, 105, .24); color: #fff; }
.fy-btn--sm { --btn-h: 36px; padding: 0 .95rem; font-size: .9rem; }
.fy-btn--lg { --btn-h: 56px; padding: 0 1.8rem; font-size: 1.12rem; }
.fy-btn--xl { --btn-h: 62px; padding: 0 2.1rem; font-size: 1.22rem; }
.fy-btn--block { display: flex; width: 100%; }
.fy-btn--icon { width: var(--btn-h); padding: 0; }
.fy-btn[disabled], .fy-btn.is-disabled { opacity: .5; pointer-events: none; }
.fy-btn.is-loading { color: transparent !important; pointer-events: none; }
.fy-btn.is-loading::before {
	content: "";
	position: absolute;
	width: 1.2em;
	height: 1.2em;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: fy-spin .8s linear infinite;
}
.fy-btn--gold.is-loading::before { border-color: rgba(58, 34, 0, .3); border-top-color: #3a2200; }

.fy-link-arrow { display: inline-flex; align-items: center; gap: .35rem; font-weight: 800; text-decoration: none; }
.fy-link-arrow .fy-i { transition: transform var(--t-med) var(--ease); }
.fy-link-arrow:hover .fy-i { transform: translateX(4px); }

/* Cards and panels */
.fy-card {
	position: relative;
	padding: var(--card-pad, var(--sp-6));
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--grad-card), var(--surface);
	box-shadow: var(--shadow-md), var(--inner-hi);
}
.fy-card--flush { --card-pad: 0; overflow: hidden; }
.fy-card--tight { --card-pad: var(--sp-4); }
.fy-card--roomy { --card-pad: clamp(1.5rem, 1rem + 2vw, 2.75rem); }
.fy-card--sunken { background: var(--surface-sunken); box-shadow: none; }
.fy-card--hover { transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }
.fy-card--hover:hover { transform: translateY(-4px); border-color: var(--line-3); box-shadow: var(--shadow-lg), var(--inner-hi); }
/* A gold storybook frame, for the one or two most important panels on a page. */
.fy-card--framed { border-color: rgba(255, 214, 109, .28); }
.fy-card--framed::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(255, 214, 109, .14);
	border-radius: calc(var(--r-lg) - 5px);
	pointer-events: none;
}
.fy-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.fy-card__title { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: var(--fs-h3); }
.fy-card__title .fy-i { color: var(--gold-300); }
.fy-card__foot { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: flex-end; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }

/* Key/value stat tiles */
.fy-stats { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin: 0; }
.fy-stat { display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); }
.fy-stat dt, .fy-stat__label { margin: 0 0 .35rem; color: var(--text-3); font: 800 .7rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.fy-stat dd, .fy-stat__value { margin: 0; color: var(--text); font: 600 1.35rem/1.15 var(--font-display); }

/* Badges and chips */
.fy-badge {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .22rem .6rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .05);
	color: var(--text-2);
	font: 800 .72rem/1.3 var(--font-body);
	letter-spacing: .04em;
	white-space: nowrap;
	vertical-align: middle;
}
.fy-badge .fy-i { width: 1em; height: 1em; }
.fy-badge--gold { border-color: rgba(255, 196, 63, .4); background: rgba(255, 196, 63, .12); color: var(--gold-200); }
.fy-badge--violet { border-color: rgba(167, 126, 255, .45); background: rgba(140, 87, 248, .16); color: var(--violet-200); }
.fy-badge--pink { border-color: rgba(255, 130, 194, .4); background: rgba(243, 90, 169, .13); color: var(--petal-200); }
.fy-badge--sky { border-color: rgba(109, 176, 255, .4); background: rgba(63, 140, 255, .13); color: var(--sky-300); }
.fy-badge--mint { border-color: rgba(82, 221, 156, .4); background: rgba(82, 221, 156, .12); color: var(--mint-300); }
.fy-badge--rose { border-color: rgba(255, 128, 152, .45); background: rgba(240, 74, 105, .13); color: var(--rose-300); }

/* Rank medals for leaderboards */
.fy-rank {
	display: inline-grid;
	place-items: center;
	min-width: 34px;
	height: 34px;
	padding: 0 .4rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, .06);
	color: var(--text-2);
	font: 700 .95rem/1 var(--font-display);
}
.fy-rank--1 { background: var(--grad-gold); color: #3a2200; box-shadow: var(--glow-gold); }
.fy-rank--2 { background: linear-gradient(180deg, #f4f1ff, #b9b2d6); color: #2a2440; }
.fy-rank--3 { background: linear-gradient(180deg, #ffc89a, #c47a3d); color: #3a1c06; }

/* Tables: .fy-table plus every FluxCP data table class */
.fy-table-wrap {
	position: relative;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-md);
}
.fy-table-wrap > table { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.fy-table, .horizontal-table, .vertical-table, .generic-form-table, .woe-table, .shop-table, .install_table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	color: var(--text-2);
	font-size: .94rem;
}
.fy-table, .horizontal-table, .vertical-table, .woe-table, .shop-table {
	margin: 0 0 var(--sp-6);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-md);
}
.fy-table th, .horizontal-table th, .woe-table th, .shop-table th {
	padding: .85rem 1rem;
	border-bottom: 1px solid var(--line-2);
	background: rgba(140, 87, 248, .1);
	color: var(--text-3);
	font: 800 .72rem/1.3 var(--font-body);
	letter-spacing: .1em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: bottom;
}
.fy-table td, .horizontal-table td, .woe-table td, .shop-table td {
	padding: .8rem 1rem;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}
.fy-table tbody tr:last-child td, .horizontal-table tr:last-child td, .woe-table tr:last-child td, .shop-table tr:last-child td { border-bottom: 0; }
.fy-table tbody tr, .horizontal-table tr { transition: background-color var(--t-fast) var(--ease); }
.fy-table tbody tr:hover td, .horizontal-table tr:hover td { background: rgba(255, 255, 255, .025); }
.fy-table a, .horizontal-table a, .vertical-table a { color: var(--violet-200); text-decoration: none; font-weight: 700; }
.fy-table a:hover, .horizontal-table a:hover, .vertical-table a:hover { color: var(--gold-300); }
.fy-table .is-num, .fy-table td.num, .fy-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fy-table--compact th, .fy-table--compact td { padding: .55rem .8rem; }
.vertical-table th {
	width: 1%;
	padding: .8rem 1.1rem;
	border-bottom: 1px solid var(--line);
	background: rgba(140, 87, 248, .07);
	color: var(--text-3);
	font: 800 .74rem/1.35 var(--font-body);
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: top;
}
.vertical-table td { padding: .8rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text); }
.vertical-table tr:last-child th, .vertical-table tr:last-child td { border-bottom: 0; }
.horizontal-table .empty-row td, .fy-table .empty-row td { color: var(--text-3); text-align: center; padding: var(--sp-8); }
.sortable { color: inherit; text-decoration: none; cursor: pointer; }
.sortable:hover { color: var(--gold-300); }
.top-ranked td { background: rgba(255, 196, 63, .05); }

/* Forms */
.fy-form { display: grid; gap: var(--sp-5); }
.fy-field { display: grid; gap: .45rem; align-content: start; min-width: 0; }
.fy-field--inline { grid-auto-flow: column; justify-content: start; align-items: center; gap: .6rem; }
.fy-label, .generic-form-table th label, .generic-form label {
	color: var(--text);
	font: 700 .88rem/1.3 var(--font-body);
	letter-spacing: .01em;
}
.fy-help { color: var(--text-3); font-size: .84rem; line-height: 1.45; }
.fy-error-text { color: var(--rose-300); font-size: .84rem; font-weight: 700; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"],
input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"],
select, textarea, .fy-input, .form-control {
	max-width: 100%;
	min-height: 46px;
	padding: .62rem .9rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-md);
	background: rgba(8, 5, 22, .55);
	color: var(--text);
	font: 600 1rem/1.4 var(--font-body);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
	transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
input:hover, select:hover, textarea:hover { border-color: var(--line-3); }
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus,
input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="date"]:focus,
input[type="datetime-local"]:focus, input[type="time"]:focus, select:focus, textarea:focus, .fy-input:focus, .form-control:focus {
	outline: none;
	border-color: var(--violet-400);
	background: rgba(8, 5, 22, .82);
	box-shadow: 0 0 0 3px rgba(167, 126, 255, .55);
}
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--rose-400); }
input::placeholder, textarea::placeholder { color: var(--text-4); opacity: 1; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--text);
	caret-color: var(--text);
	-webkit-box-shadow: 0 0 0 1000px #1c1442 inset;
	transition: background-color 9999s ease-out 0s;
}
select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.6rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23c4aaff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8rem center;
	background-size: 16px;
	cursor: pointer;
}
select[multiple] { padding-right: .9rem; background-image: none; min-height: 120px; }
select option { background: var(--night-800); color: var(--text); }
input[type="checkbox"], input[type="radio"] { width: 1.1rem; height: 1.1rem; margin: 0 .4rem 0 0; accent-color: var(--violet-500); vertical-align: -.15em; cursor: pointer; }
input[type="file"] { max-width: 100%; color: var(--text-2); font-size: .9rem; }
input[type="file"]::file-selector-button {
	margin-right: .8rem;
	padding: .55rem 1rem;
	border: 1px solid var(--line-3);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .06);
	color: var(--text);
	font: 600 .9rem/1 var(--font-display);
	cursor: pointer;
}
input[disabled], select[disabled], textarea[disabled] { opacity: .5; cursor: not-allowed; }
.fy-form input[type="text"], .fy-form input[type="password"], .fy-form input[type="email"], .fy-form input[type="number"],
.fy-form input[type="search"], .fy-form input[type="tel"], .fy-form input[type="url"], .fy-form select, .fy-form textarea,
.fy-field input[type="text"], .fy-field input[type="password"], .fy-field input[type="email"], .fy-field input[type="number"],
.fy-field input[type="search"], .fy-field input[type="tel"], .fy-field input[type="url"], .fy-field select, .fy-field textarea {
	width: 100%;
}
.fy-input-icon { position: relative; }
.fy-input-icon > .fy-i { position: absolute; left: .9rem; top: 50%; color: var(--text-4); transform: translateY(-50%); pointer-events: none; }
.fy-input-icon > input { width: 100%; padding-left: 2.6rem; }
.fy-password { position: relative; }
.fy-password > input { width: 100%; padding-right: 3rem; }
.fy-password__toggle {
	position: absolute;
	right: .35rem;
	top: 50%;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--text-3);
	transform: translateY(-50%);
}
.fy-password__toggle:hover { color: var(--text); background: rgba(255, 255, 255, .07); }

/* Filter / search bars */
.fy-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--sp-3) var(--sp-4);
	margin: 0 0 var(--sp-6);
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface-sunken);
}
.fy-filters .fy-field { flex: 1 1 180px; }
.fy-filters__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Tabs */
.fy-tabs { display: flex; gap: .3rem; margin-bottom: var(--sp-5); padding: .3rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface-sunken); width: fit-content; max-width: 100%; scrollbar-width: none; }
.fy-tabs::-webkit-scrollbar { display: none; }
.fy-tab {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	height: 40px;
	padding: 0 1.05rem;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--text-3);
	font: 600 .94rem/1 var(--font-display);
	white-space: nowrap;
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fy-tab:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.fy-tab[aria-selected="true"], .fy-tab.is-active { color: #fff; background: var(--grad-violet); box-shadow: var(--glow-violet); }
.fy-tabpanel[hidden] { display: none; }

/* Pagination: .fy-pagination and FluxCP's .pages */
.fy-pagination, .pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	margin: var(--sp-6) 0;
	color: var(--text-3);
	font-weight: 700;
	text-align: center !important;
}
.pages { font-size: 0; } /* hides the " | " text FluxCP's paginator puts between the links */
.fy-pagination a, .fy-pagination span, .pages a, .pages .current-page, .pages .page-num, .pages .page-prev, .pages .page-next {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 .8rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .04);
	color: var(--text-2);
	font: 600 .92rem/1 var(--font-display);
	text-decoration: none;
	transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fy-pagination a:hover, .pages a:hover { border-color: var(--violet-300); background: rgba(140, 87, 248, .16); color: var(--text); }
.fy-pagination [aria-current="page"], .pages .current-page { border-color: transparent; background: var(--grad-violet); color: #fff; box-shadow: var(--glow-violet); }
.jump-to-page { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin: var(--sp-3) 0; color: var(--text-3); font-size: .88rem; }
.jump-to-page input { width: 90px; min-height: 40px; }

/* Touch screens: small buttons and sub-menu pills keep a 40 px target. */
@media (pointer: coarse) {
	.fy-btn--sm { --btn-h: 40px; }
	.fy-subnav a { height: 40px; }
	.fy-status { height: 40px; }
	.fy-password__toggle { width: 40px; height: 40px; }
	.fy-toast__close { width: 40px; height: 40px; }
	/* Links in table cells and sort headers: a taller tap area that moves nothing. */
	td a:not(.fy-btn), th a.sortable { padding-block: .55rem; margin-block: -.55rem; }
}

/* 9. Feedback ---------------------------------------------------------------- */
.fy-alert {
	--alert: var(--sky-400);
	display: flex;
	gap: .8rem;
	align-items: flex-start;
	margin: 0 0 var(--sp-5);
	padding: .9rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--alert) 40%, transparent);
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--alert) 11%, transparent);
	color: var(--text);
	line-height: 1.5;
}
.fy-alert > .fy-i { margin-top: .12rem; color: var(--alert); }
.fy-alert__title { display: block; margin-bottom: .15rem; color: var(--text); font: 600 1rem/1.3 var(--font-display); }
.fy-alert--success { --alert: var(--mint-400); }
.fy-alert--warning { --alert: var(--amber-400); }
.fy-alert--danger { --alert: var(--rose-400); }
.fy-alert--violet { --alert: var(--violet-400); }

.fy-toasts {
	position: fixed;
	top: calc(var(--header-h) + 12px);
	right: 12px;
	left: 12px;
	z-index: var(--z-toast);
	display: grid;
	justify-items: end;
	gap: .6rem;
	pointer-events: none;
}
.fy-toast {
	--toast: var(--mint-400);
	position: relative;
	display: flex;
	gap: .8rem;
	align-items: flex-start;
	width: min(440px, 100%);
	padding: 1rem 2.9rem 1.05rem 1rem;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--toast) 45%, transparent);
	border-radius: var(--r-lg);
	background: linear-gradient(180deg, color-mix(in srgb, var(--toast) 14%, var(--surface-2)), var(--surface-2));
	box-shadow: var(--shadow-lg);
	color: var(--text);
	pointer-events: auto;
	animation: fy-toast-in var(--t-slow) var(--ease) both;
}
.fy-toast.is-leaving { animation: fy-toast-out var(--t-med) var(--ease) both; }
.fy-toast > .fy-i { width: 1.5em; height: 1.5em; color: var(--toast); }
.fy-toast__title { display: block; font: 600 1rem/1.3 var(--font-display); }
.fy-toast__body { display: block; margin-top: .15rem; color: var(--text-2); font-size: .92rem; line-height: 1.45; }
.fy-toast__close {
	position: absolute;
	top: .55rem;
	right: .55rem;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--text-3);
}
.fy-toast__close:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
.fy-toast__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--toast); opacity: .55; transform-origin: left; animation: fy-timer 9s linear both; }
.fy-toast:hover .fy-toast__timer { animation-play-state: paused; }
.fy-toast--info { --toast: var(--sky-400); }
.fy-toast--error { --toast: var(--rose-400); }

.fy-empty {
	display: grid;
	justify-items: center;
	gap: var(--sp-3);
	padding: clamp(2rem, 1.5rem + 3vw, 3.5rem) var(--sp-5);
	border: 1px dashed var(--line-2);
	border-radius: var(--r-lg);
	background: var(--surface-sunken);
	text-align: center;
}
.fy-empty img { width: 96px; height: auto; animation: fy-bob 3.2s var(--ease-in-out) infinite; }
.fy-empty h2, .fy-empty h3 { margin: var(--sp-2) 0 0; font-size: var(--fs-h3); }
.fy-empty p { max-width: 46ch; margin: 0; color: var(--text-3); }

.fy-spinner {
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 3px solid rgba(255, 255, 255, .14);
	border-top-color: var(--gold-300);
	border-radius: 50%;
	animation: fy-spin .8s linear infinite;
}
.fy-skeleton {
	border-radius: var(--r-sm);
	background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .04) 75%);
	background-size: 200% 100%;
	animation: fy-shimmer 1.4s linear infinite;
}

.fy-dialog {
	width: min(460px, calc(100vw - 2rem));
	padding: 0;
	border: 1px solid var(--line-2);
	border-radius: var(--r-xl);
	background: var(--surface-2);
	box-shadow: var(--shadow-lg);
	color: var(--text-2);
}
.fy-dialog::backdrop { background: rgba(6, 3, 18, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.fy-dialog[open] { animation: fy-pop var(--t-med) var(--ease) both; }
.fy-dialog__body { padding: var(--sp-6) var(--sp-6) var(--sp-4); text-align: center; }
.fy-dialog__body img { width: 84px; margin-bottom: var(--sp-2); }
.fy-dialog__body h2 { margin: 0 0 var(--sp-2); font-size: 1.35rem; }
.fy-dialog__actions { display: flex; gap: var(--sp-3); justify-content: center; padding: 0 var(--sp-6) var(--sp-6); }

/* Raw output a legacy controller printed before the header */
.fy-early { margin: 0 0 var(--sp-6); }

/* Copy-to-clipboard field */
.fy-copy { display: flex; gap: .5rem; align-items: stretch; }
.fy-copy input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: .9rem; }

/* Generic media object */
.fy-media { display: flex; gap: var(--sp-4); align-items: center; }
.fy-media__art { flex: none; }

/* 10. FluxCP markup ------------------------------------------------------------ */
/* Views that are not overridden still use FluxCP's stock classes; give them the same look. */
.fy-page > h2:first-child, .fy-legacy > h2:first-child { font-size: var(--fs-h2); }
.fy-page > h3 { margin-top: var(--sp-8); }
.message, .info-text, .note, p.notice, .fy-page > p.green {
	display: block;
	margin: 0 0 var(--sp-5);
	padding: .9rem 1.1rem;
	border: 1px solid rgba(109, 176, 255, .35);
	border-radius: var(--r-md);
	background: rgba(63, 140, 255, .1);
	color: var(--text);
}
p.red, div.red, .fy-page > .red:not(span) {
	margin: 0 0 var(--sp-5);
	padding: .9rem 1.1rem;
	border: 1px solid rgba(255, 128, 152, .4);
	border-radius: var(--r-md);
	background: rgba(240, 74, 105, .11);
	color: var(--rose-300);
}
p.green, div.green { border-color: rgba(82, 221, 156, .38); background: rgba(82, 221, 156, .1); color: var(--mint-300); }
p.notice { border-color: rgba(255, 182, 86, .4); background: rgba(255, 182, 86, .1); }
.red, .state-banned, .state-permanently-banned, .offline, .down { color: var(--rose-300); }
.green, .online, .up { color: var(--mint-300); }
.state-pending, .important { color: var(--amber-300); }
.not-applicable { color: var(--text-4); font-style: italic; }
.yes, .state-normal { color: var(--mint-300); }
.no { color: var(--rose-300); }
.state-unknown { color: var(--text-4); }
.account-state { font-weight: 800; }
.item_name, .link-to-item { font-weight: 700; }
.equipped td { background: rgba(255, 196, 63, .05); }
.broken { color: var(--rose-300); text-decoration: line-through; }
.normalslotted, .overslotted, .overslotted1, .overslotted2, .overslotted3, .overslotted4 { color: var(--gold-200); }
.date-field select, .date-time-field select { min-height: 40px; margin: 0 .25rem .25rem 0; padding-top: .4rem; padding-bottom: .4rem; }
.empty-state { padding: var(--sp-8) var(--sp-5); border: 1px dashed var(--line-2); border-radius: var(--r-lg); color: var(--text-3); text-align: center; }
.keyword { color: var(--gold-200); font-weight: 800; }
.generic-form, .generic-form-div, .search-form, .search-form2 {
	margin: 0 0 var(--sp-6);
	padding: clamp(1.1rem, .8rem + 1.2vw, 1.75rem);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-md);
}
.generic-form-table th { width: 30%; padding: .75rem 1rem .75rem 0; color: var(--text); text-align: left; vertical-align: top; }
.generic-form-table td { padding: .55rem 0; vertical-align: middle; }
.generic-form-table td p { margin: .35rem 0 0; color: var(--text-3); font-size: .86rem; }
.generic-form-table td input[type="text"], .generic-form-table td input[type="password"], .generic-form-table td input[type="email"],
.generic-form-table td input[type="number"], .generic-form-table td textarea { width: min(100%, 420px); }
.search-form p, .search-form2 p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 .75rem; }
.search-form label, .search-form2 label { color: var(--text-2); font-weight: 700; font-size: .88rem; }
.toggler { margin: 0 0 var(--sp-4); }
.toggler a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; text-decoration: none; }
.td-action, .action { white-space: nowrap; }
.action a, .button-action, .block-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .8rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	color: var(--text-2);
	font: 600 .85rem/1.2 var(--font-display);
	text-decoration: none;
}
.action a:hover, .button-action:hover, .block-link:hover { border-color: var(--violet-300); color: var(--text); background: rgba(140, 87, 248, .14); }
.action .anchor { color: var(--text-4); }

/* Buttons rendered by FluxCP views as plain inputs */
input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"]:not([class]), button[type="button"]:not([class]),
.submit_button, .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-height: 44px;
	padding: 0 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	background: var(--grad-violet);
	color: #fff;
	font: 600 .98rem/1 var(--font-display);
	letter-spacing: .01em;
	text-decoration: none;
	box-shadow: var(--glow-violet), inset 0 1px 0 rgba(255, 255, 255, .25);
	cursor: pointer;
	transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
input[type="submit"]:hover, input[type="button"]:hover, button[type="submit"]:not([class]):hover, .submit_button:hover, .btn:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.08); }
input[type="reset"], input[type="button"].secondary, .btn-default, .btn-secondary {
	border-color: var(--line-3);
	background: rgba(255, 255, 255, .05);
	color: var(--text);
	box-shadow: none;
}

/* Character and item helpers used across FluxCP views */
.character-stats td { padding: .4rem .6rem; }
.character-stats .stat-name { color: var(--text-3); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.character-stats .stat-value { color: var(--text); font-weight: 800; }
.monster-mode { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; }
.monster-mode li { margin: 0; padding: .2rem .55rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .06); font-size: .8rem; font-weight: 700; }
.mvp, .item-drop-mvp td { color: var(--gold-200); }
.script, .raw-txn-log { padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-sunken); font-family: var(--font-mono); font-size: .85rem; white-space: pre-wrap; word-break: break-word; }
.emblem-server label { cursor: pointer; }

/* Legacy bootstrap-ish helpers still present in inherited asuro views */
.container, .container-fluid { width: 100%; margin-inline: auto; }
.container { max-width: calc(var(--container) + var(--gutter) * 2); padding-inline: var(--gutter); }
.row { display: flex; flex-wrap: wrap; margin-inline: -12px; }
.row > [class*="col-"] { width: 100%; padding-inline: 12px; }
@media (min-width: 768px) {
	.row > .col-sm-6, .row > .col-md-6 { width: 50%; }
	.row > .col-md-4, .row > .col-sm-4 { width: 33.333%; }
	.row > .col-md-8 { width: 66.666%; }
	.row > .col-md-3, .row > .col-sm-3 { width: 25%; }
	.row > .col-md-9 { width: 75%; }
}
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.pull-right, .float-right { float: right; }
.pull-left, .float-left { float: left; }
.clearfix::after { content: ""; display: table; clear: both; }
.hidden { display: none !important; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.table-responsive { display: block; width: 100%; overflow-x: auto; }
table.table-responsive { display: table; }
.alert { margin: 0 0 var(--sp-5); padding: .9rem 1.1rem; border: 1px solid var(--line-2); border-radius: var(--r-md); background: rgba(255, 255, 255, .04); color: var(--text); }
.alert-success { border-color: rgba(82, 221, 156, .4); background: rgba(82, 221, 156, .1); }
.alert-danger, .alert-error { border-color: rgba(255, 128, 152, .4); background: rgba(240, 74, 105, .11); }
.alert-warning { border-color: rgba(255, 182, 86, .4); background: rgba(255, 182, 86, .1); }
.alert-info { border-color: rgba(109, 176, 255, .4); background: rgba(63, 140, 255, .1); }

/* 11. Utilities ---------------------------------------------------------------- */
.fy-sr, .sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.fy-center { text-align: center; }
.fy-mt-0 { margin-top: 0 !important; }
.fy-mb-0 { margin-bottom: 0 !important; }
.fy-mt-6 { margin-top: var(--sp-6); }
.fy-mb-6 { margin-bottom: var(--sp-6); }
.fy-nowrap { white-space: nowrap; }
.fy-num { font-variant-numeric: tabular-nums; }
.fy-divider { display: block; width: 240px; max-width: 70%; height: 24px; margin: var(--sp-6) auto; color: var(--gold-300); opacity: .7; }

/* Decorative backgrounds below the fold: JS adds .is-near shortly before they scroll into view. */
.js .fy-lazy-bg:not(.is-near) { background-image: none !important; }

/* Reveal on scroll (only hides content when JS is running) */
.js .fy-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .fy-reveal.is-visible { opacity: 1; transform: none; }
.js .fy-reveal[data-delay="1"] { transition-delay: .08s; }
.js .fy-reveal[data-delay="2"] { transition-delay: .16s; }
.js .fy-reveal[data-delay="3"] { transition-delay: .24s; }

/* Keyframes */
@keyframes fy-spin { to { transform: rotate(360deg); } }
@keyframes fy-ping { 0% { opacity: .7; transform: scale(.6); } 80%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes fy-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fy-shimmer { to { background-position: -200% 0; } }
@keyframes fy-toast-in { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fy-toast-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes fy-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes fy-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* 12. Motion preferences --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.js .fy-reveal { opacity: 1; transform: none; }
	.fy-toast__timer { display: none; }
}

/* 13. Accessibility fixes (a11y audit) ------------------------------------------- */
/* S2: never leave keyboard focus on the slid-away phone dock; keep focused items above it. */
@media (max-width: 1099.98px) {
	.fy-dock:focus-within { transform: none; }
	html:has(body.fy-has-dock) { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom) + 12px); }
}
/* S4: pause the toast timer bar while the toast is hovered or focused. */
.fy-toast:hover .fy-toast__timer, .fy-toast:focus-within .fy-toast__timer { animation-play-state: paused; }
/* S14: Windows High Contrast keeps the "current" cue that was only a background. */
@media (forced-colors: active) {
	.fy-subnav a[aria-current="page"], .fy-subnav a.is-active, .fy-tab[aria-selected="true"], .fy-tab.is-active,
	.fy-pagination [aria-current="page"], .pages .current-page { outline: 2px solid Highlight; outline-offset: -2px; }
}
/* S15: 40px hit areas without moving anything (touch sizes are in section 8, pointer: coarse). */
.fy-link-arrow { padding-block: .45rem; margin-block: -.45rem; }
.fy-crumbs a { display: inline-block; padding-block: .55rem; margin-block: -.55rem; }
/* S16: decorative loops settle after a few cycles. */
.fy-status__dot::after { animation-iteration-count: 4; }
.fy-empty img { animation-iteration-count: 3; }
/* S20: file and date inputs may shrink (no sideways scroll at 320px). */
input[type="file"], input[type="date"], input[type="datetime-local"], input[type="time"] { min-width: 0; width: 100%; max-width: 100%; }

@media print {
	.fy-header, .fy-dock, .fy-drawer, .fy-footer, .fy-toasts { display: none !important; }
	body { background: #fff; color: #000; }
}