/* ===== SYLESTIA CORE TEMPLATE STYLES ===== */
/* DOCS: AI Resources/Core Resources/Code Documentation/page_templates/css/core/main.md */

/* ===== WEB FONTS: FREDOKA + FIGTREE + SPLINE SANS MONO ===== */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 400 500; font-display: swap;
	src: url('/assets/fonts/Fredoka/Fredoka-Medium.woff2') format('woff2'), url('/assets/fonts/Fredoka/Fredoka-Medium.woff') format('woff'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600 700; font-display: swap;
	src: url('/assets/fonts/Fredoka/Fredoka-SemiBold.woff2') format('woff2'), url('/assets/fonts/Fredoka/Fredoka-SemiBold.woff') format('woff'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('/assets/fonts/Figtree/Figtree-Regular.woff2') format('woff2'), url('/assets/fonts/Figtree/Figtree-Regular.woff') format('woff'); }
@font-face { font-family: 'Figtree'; font-style: italic; font-weight: 400; font-display: swap;
	src: url('/assets/fonts/Figtree/Figtree-Italic.woff2') format('woff2'), url('/assets/fonts/Figtree/Figtree-Italic.woff') format('woff'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap;
	src: url('/assets/fonts/Figtree/Figtree-Medium.woff2') format('woff2'), url('/assets/fonts/Figtree/Figtree-Medium.woff') format('woff'); }
@font-face { font-family: 'Figtree'; font-style: italic; font-weight: 500; font-display: swap;
	src: url('/assets/fonts/Figtree/Figtree-MediumItalic.woff2') format('woff2'), url('/assets/fonts/Figtree/Figtree-MediumItalic.woff') format('woff'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600 700; font-display: swap;
	src: url('/assets/fonts/Figtree/Figtree-SemiBold.woff2') format('woff2'), url('/assets/fonts/Figtree/Figtree-SemiBold.woff') format('woff'); }
@font-face { font-family: 'Figtree'; font-style: italic; font-weight: 600 700; font-display: swap;
	src: url('/assets/fonts/Figtree/Figtree-SemiBoldItalic.woff2') format('woff2'), url('/assets/fonts/Figtree/Figtree-SemiBoldItalic.woff') format('woff'); }
@font-face { font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 400; font-display: swap;
	src: url('/assets/fonts/SplineSansMono/SplineSansMono-Regular.woff2') format('woff2'), url('/assets/fonts/SplineSansMono/SplineSansMono-Regular.woff') format('woff'); }
@font-face { font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 600 700; font-display: swap;
	src: url('/assets/fonts/SplineSansMono/SplineSansMono-SemiBold.woff2') format('woff2'), url('/assets/fonts/SplineSansMono/SplineSansMono-SemiBold.woff') format('woff'); }

:root
	{
		--Font_Body: 'Figtree', 'Segoe UI', Calibri, Arial, sans-serif;
		--Font_Header: 'Fredoka', 'Segoe UI', Calibri, Arial, sans-serif;
		--Font_Mono: 'Spline Sans Mono', Consolas, 'Courier New', monospace;

		/* ----- THEME COLOR TOKENS ----- */

		--Color_Main: #234284;
		--Color_Main_Soft: hsl(from var(--Color_Main) h calc(s + 5) calc(l + 49));

		--Color_Secondary: #F1E5D0;
		--Color_Secondary_Raised: hsl(from var(--Color_Secondary) h s calc(l - 4));
		--Color_Secondary_Line: hsl(from var(--Color_Secondary) h s calc(l - 11));
		--Color_Secondary_Deep: hsl(from var(--Color_Secondary) h s calc(l - 23));

		--Color_Div_1: #E8D2B2;
		--Color_Div_2: #F1E5D0;
		--Color_Div_3: #FBF6EE;
		--Color_Page_Bg: var(--Color_Div_2);

		--Color_Accent: #F6D476;
		--Color_Accent_Deep: hsl(from var(--Color_Accent) h s calc(l - 9));
		--Color_Accent_Soft: hsl(from var(--Color_Accent) h s calc(l + 4));
		--Color_Accent_Pale: hsl(from var(--Color_Accent) h s calc(l + 11));
		--Color_Accent_Strong: #BB7E00;

		--Color_Surface_Alt: #ECDBC5;
		--Color_Header_Bg: #DCC79E;

		--Color_Positive: #03642B;
		--Color_Negative: #A80018;
		--Color_Positive_Soft: #D6F0DA;
		--Color_Negative_Soft: #FFDFDC;
		--Color_Neutral: #795000;
		--Color_Neutral_Soft: #FDE4BB;

		--Color_Link: #005BB4;

		--Color_Quality_1: #00CC00;
		--Color_Quality_2: #0069FF;
		--Color_Quality_3: #9600FF;
		--Color_Quality_4: #FF9600;
		--Color_Quality_5: #CC0000;
		--Color_Stat_Health: #FF7878;
		--Color_Stat_Mana: #0099FF;
		--Color_Stat_Ability: #9900FF;

		--Color_Text: #312317;
		--Color_Text_Mid: #4B3D2F;
		--Color_Text_Soft: #65584C;
		--Color_Text_Cool: #4F463C;

		--Color_Muted: #615C55;
		--Color_Muted_Light: #E8E4DD;
		--Color_Surface: #FFFFFF;
		--Color_Surface_Tint: #FBF6EE;
		--Color_Border: #887F73;
		--Color_Border_Strong: #3D3022;

		--Color_Shadow: #1F1307;

		--Color_Chrome: var(--Color_Main);
		--Color_On_Chrome: var(--Color_Surface_Tint);
		--Color_On_Accent: #FFFFFF;
		--Color_Icon_Muted: #797065;

		--Font_Header_Offset: 0px;
		--Font_Body_Offset: 0px;

		--Font_Header_Spacing: 0.03em;

		--Font_Header_Full: calc(24px + var(--Font_Header_Offset));
		--Font_Header_Mid: calc(20px + var(--Font_Header_Offset));
		--Font_Header_Low: calc(18px + var(--Font_Header_Offset));
		--Font_Text_X_Large: calc(20px + var(--Font_Body_Offset));
		--Font_Text_Large: calc(18px + var(--Font_Body_Offset));
		--Font_Text_Mid: calc(16px + var(--Font_Body_Offset));
		--Font_Text_Small: calc(14px + var(--Font_Body_Offset));
		--Font_Text_Tiny: calc(12px + var(--Font_Body_Offset));
		--Font_Mono_Mid: calc(16px + var(--Font_Body_Offset));
		--Font_Mono_Small: calc(14px + var(--Font_Body_Offset));

		--Popup_Anchor_Top: 180px;
	}

.Nav_Button, .Nav_Link, .Nav_Link_Sub,
.Main_Button, .Yes_Button, .No_Button, .Gray_Button,
.Font_Heading, .Main_Font_1
	{
		font-family: var(--Font_Header);
	}

.Nav_Button, .Nav_Link, .Nav_Link_Sub,
.Main_Button, .Yes_Button, .No_Button, .Gray_Button,
.Font_Heading, .Main_Font_1,
.Text_Link, .Text_Link_Epic, .Settings_Row_Label, .Card_Title
	{
		letter-spacing: var(--Font_Header_Spacing);
	}

.Font_Header_Family { font-family: var(--Font_Header); letter-spacing: var(--Font_Header_Spacing); }

/* ===== BASE / ELEMENT DEFAULTS (PORTED FROM stylesnew.php) ===== */
*
	{
		margin: 0;
		padding: 0;
	}
html { text-size-adjust: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; }
body
	{
		font-family: var(--Font_Body);
		font-size: var(--Font_Text_Mid);
		color: var(--Color_Text);
		background-color: var(--Color_Page_Bg);
		background-repeat: no-repeat;
		background-position: top;
		background-attachment: fixed;
		text-rendering: optimizeLegibility;
		line-height: 1.2;
		font-variant-numeric: lining-nums;
	}

/* ===== TEXT RHYTHM: THE GAP BETWEEN BLOCKS OF READING TEXT ===== */
p + p,
ul + p,
ol + p { margin-top: 1lh; }

pre
	{
		font-family: var(--Font_Body);
		font-size: 14px;
	}
textarea
	{
		font-family: var(--Font_Body);
		font-size: calc(14px + var(--Font_Body_Offset));
		background: none repeat scroll 0 0 var(--Color_Surface);
		border: 1px solid var(--Color_Border);
		border-radius: 2px;
		box-shadow: 0 0 3px var(--Color_Border) inset;
		padding: 5px;
	}
select
	{
		font-size: calc(16px + var(--Font_Body_Offset));
		color: var(--Color_Text);
		background: none repeat scroll 0 0 var(--Color_Surface);
		border: 1px solid var(--Color_Border);
		border-radius: 2px;
		box-shadow: 0 0 3px var(--Color_Border) inset;
		padding-left: 10px;
	}
input
	{
		font-family: var(--Font_Body);
		font-size: calc(14px + var(--Font_Body_Offset));
	}
input[type=text],
input[type=number],
input[type=password]
	{
		background: none repeat scroll 0 0 var(--Color_Surface);
		border: 1px solid var(--Color_Border);
		border-radius: 2px;
		box-shadow: 0 0 3px var(--Color_Border) inset;
		padding: 0px 5px 0px 10px;
	}
img
	{
		display: block;
		border: 0;
	}
input::-moz-focus-inner
	{
		border: 0;
		padding: 0;
		font-size: 14px;
	}

/* ----- POPUP CONTAINERS: LEVEL 1 AND LEVEL 2 DIFFER ONLY IN z-index ----- */
.Div_Popup_Container_Level_1_Parent,
.Div_Popup_Container_Level_2_Parent
	{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
		display: none;
	}
.Div_Popup_Container_Level_1_Child,
.Div_Popup_Container_Level_2_Child
	{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		pointer-events: auto;
		max-height: calc(92vh / var(--Zoom, 1));
		max-height: calc(92dvh / var(--Zoom, 1));
		max-width: calc(95vw / var(--Zoom, 1));
		overflow: auto;
		overscroll-behavior: contain;
	}
.Div_Popup_Container_Level_1_Parent, .Div_Popup_Container_Level_1_Child { z-index: 2000; }
.Div_Popup_Container_Level_2_Parent, .Div_Popup_Container_Level_2_Child { z-index: 10001; }
#Gray_Background { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.45; z-index: 100000; cursor: pointer; display: none; }

.Div_Popup_Container_Level_1_Child.Popup_Anchor_Top,
.Div_Popup_Container_Level_2_Child.Popup_Anchor_Top
	{
		top: var(--Popup_Anchor_Top);
		transform: translateX(-50%);
		max-height: calc(100vh / var(--Zoom, 1) - var(--Popup_Anchor_Top) - 16px);
		max-height: calc(100dvh / var(--Zoom, 1) - var(--Popup_Anchor_Top) - 16px);
	}

#Div_Special_Popup_Image { position: absolute; z-index: 1200; }

/* ----- FORM CONTROLS ----- */
input[type="checkbox"]
	{
		width: 16px;
		height: 16px;
		vertical-align: -2px;
		cursor: pointer;
	}

/* ===== PORTED FROM LEGACY stylesnew.php ===== */
.No_Select
	{
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
.Allow_Select
	{
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		user-select: text;
		cursor: text;
	}
.Panel_Header
	{
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
a { color: var(--Color_Link); font-weight: bold; text-decoration: none; }
a:hover { color: hsl(from var(--Color_Link) h s calc(l + 14)); cursor: pointer; }

.Text_Link
	{
		color: var(--Color_Link);
		font-weight: bold;
		text-decoration: none;
	}
.Text_Link:hover
	{
		color: hsl(from var(--Color_Link) h s calc(l + 14));
		cursor: pointer;
	}
.Text_Link_Epic
	{
		color: var(--Color_Quality_3);
		font-weight: bold;
		text-decoration: none;
	}
.Text_Link_Epic:hover
	{
		color: hsl(from var(--Color_Quality_3) h s calc(l + 14));
		cursor: pointer;
	}
.Text_Link, .Text_Link_Epic { font-family: var(--Font_Header); }
.Font_Mono_Fixed
	{
		font-family: var(--Font_Mono);
		letter-spacing: 1px;
	}
.Item_1, .item_1 { color: var(--Color_Quality_1); font-weight: bold; }
.Item_2, .item_2 { color: var(--Color_Quality_2); font-weight: bold; }
.Item_3, .item_3 { color: var(--Color_Quality_3); font-weight: bold; }
.Item_4, .item_4 { color: var(--Color_Quality_4); font-weight: bold; }
.Item_5, .item_5 { color: var(--Color_Quality_5); font-weight: bold; }
.Font_Heading, .Main_Font_1
	{
		color: var(--Color_Main);
	}
.Main_Body_1
	{
		font-family: var(--Font_Body);
		color: var(--Color_Main);
	}
.Main_Font_2
	{
		color: var(--Color_Text);
	}
.Border_Bottom
	{
		border-bottom: 1px solid var(--Color_Border);
	}
.Border_Top
	{
		border-top: 1px solid var(--Color_Border);
	}
.Border_Right
	{
		border-right: 1px solid var(--Color_Border);
	}
.Account_Divider, .Border_Right_Thick
	{
		border-right: 2px solid var(--Color_Border);
	}
.Background_Page
	{
		background-color: var(--Color_Page_Bg);
	}
.Background_Highlight
	{
		background-color: var(--Color_Accent);
	}
.Background_Muted
	{
		background-color: var(--Color_Muted_Light);
	}
.Background_Positive
	{
		background-color: var(--Color_Positive_Soft);
	}
.Surface_Secondary, .Surface_Tertiary, .Surface_Highlight, .Surface_Positive, .Surface_Negative, .Surface_Tertiary_Trans
	{
		color: var(--Color_Text);
		border: 2px solid var(--Color_Border);
		border-radius: 5px;
	}
.Surface_Secondary { background-color: var(--Color_Secondary); }
.Surface_Tertiary { background-color: var(--Color_Surface_Tint); }
.Surface_Highlight { background-color: var(--Color_Accent); }
.Surface_Positive { background-color: var(--Color_Positive_Soft); }
.Surface_Negative { background-color: var(--Color_Negative_Soft); }
.Surface_Tertiary_Trans { background-color: rgba(245, 250, 255, 0.75); }
.Headshot_Frame { width: 143px; height: 143px; box-sizing: border-box; overflow: hidden; border-color: var(--Color_Border); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.Headshot_Frame:hover { border-color: var(--Color_Link); box-shadow: 0 0 14px 3px hsl(from var(--Color_Link) h s l / 0.45); }
.Headshot_Fill { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ===== ACCOUNT / PLAYER CARD (TOP-RIGHT) ===== */
.Account_Box { width: 475px; padding: 10px; }
.Account_Box.Surface_Tertiary_Trans { background-color: rgba(255, 255, 255, 0.95); border-color: var(--Color_Border); }
.Account_Col { width: 290px; }
.Currency_Grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.Currency_Tile { display: flex; align-items: center; gap: 7px; min-width: 0; height: 26px; box-sizing: border-box; padding: 0 11px 0 5.5px; border-radius: 0 2px 2px 0; border-left: 3px solid var(--Cur_Accent); background: var(--Cur_Tint); color: var(--Cur_Dark); font-family: var(--Font_Header); letter-spacing: var(--Font_Header_Spacing); font-weight: bold; }
.Currency_Tile:hover { color: var(--Cur_Dark); }
.Currency_Value { margin-left: auto; white-space: nowrap; }
.Currency_Gold { --Cur_Accent: #BA7517; --Cur_Tint: #FAEEDA; --Cur_Dark: #633806; }
.Currency_Diamond { --Cur_Accent: #185FA5; --Cur_Tint: #E6F1FB; --Cur_Dark: #0C447C; }
.Currency_Scale { --Cur_Accent: #A32D2D; --Cur_Tint: #FCEBEB; --Cur_Dark: #791F1F; }
.Currency_Merit { --Cur_Accent: #0F6E56; --Cur_Tint: #E1F5EE; --Cur_Dark: #085041; }
.Notification_Row { display: flex; justify-content: space-between; align-items: center; padding: 3px 4px 0; }
.Notification_Item { position: relative; display: inline-flex; }
.Notification_Item:has(.Main_Font_2) img { filter: grayscale(1); opacity: 0.45; }
.Account_Badge { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 5px; display: none; align-items: center; justify-content: center; font-size: 12px; line-height: 1; transition: transform 0.12s ease; }
.Account_Badge > span { color: var(--Color_Surface); transition: color 0.12s ease; }
.Account_Badge:has(.Font_Color_Positive) { display: flex; background: var(--Color_Positive); }
.Account_Badge:has(.Font_Color_Neutral) { display: flex; background: var(--Color_Neutral); }
.Account_Badge:has(.Font_Color_Negative) { display: flex; background: var(--Color_Negative); }
.Notification_Item:hover .Account_Badge { transform: scale(1.18); }
.Notification_Item:hover .Account_Badge > span { color: var(--Color_Accent_Deep); }
.Font_Subheading { font-family: var(--Font_Header); font-size: calc(16px + var(--Font_Header_Offset)); color: var(--Color_Text_Cool); }
.Logout_Button { position: absolute; top: 0; right: 0; margin: 3px; }
.Logout_Icon { display: inline-flex; line-height: 0; background: none; border: none; color: var(--Color_Icon_Muted); transition: color 0.1s ease, transform 0.05s ease; }
.Logout_Icon svg { display: block; }
.Logout_Icon:hover { color: var(--Color_Negative); }
.Logout_Icon:active { transform: scale(0.88); }
.Hidden { display: none !important; }

.Player_Display_Name { font-family: var(--Font_Header); font-size: var(--Font_Header_Low); letter-spacing: var(--Font_Header_Spacing); color: var(--Color_Main); }

/* ===== LOGIN CARD (LOGGED-OUT, TOP-RIGHT): 479x167 ===== */
.Login_Card
	{
		box-sizing: border-box;
		width: 479px;
		height: 167px;
		padding: 19px 16px;
		background-color: rgba(255, 255, 255, 0.95);
		border-color: var(--Color_Border);
		display: flex;
		align-items: stretch;
		gap: 16px;
	}
.Login_Primary { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
.Login_Heading { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.Login_Welcome { font-family: var(--Font_Header); font-size: calc(24px + var(--Font_Header_Offset)); font-weight: bold; letter-spacing: var(--Font_Header_Spacing); color: var(--Color_Main); text-align: center; line-height: 1.1; }
.Login_Tagline { font-family: var(--Font_Body); font-size: 12px; font-weight: bold; letter-spacing: 0.15em; text-transform: uppercase; color: var(--Color_Text); }
.Login_Buttons { flex: 0 0 auto; display: flex; justify-content: center; gap: 30px; }
.Login_Social { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: space-between; padding-left: 22px; border-left: 2px solid var(--Color_Border); }
.Login_Social_Head { display: flex; align-items: center; justify-content: center; padding-top: 8px; }
.Login_Social_Label { font-family: var(--Font_Body); font-size: 14px; font-weight: bold; color: var(--Color_Text); text-align: center; line-height: 1.4; }
.Login_Providers { flex: 0 0 auto; display: flex; justify-content: center; gap: 20px; }
/* ===== FLOATING CARD: INTERACTION + SIZING ONLY; THE SURFACE IS .Div_3 ===== */
.Floating_Card { cursor: pointer; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.Floating_Card:hover { border-color: var(--Color_Link); box-shadow: 0 0 0 2px hsl(from var(--Color_Link) h s l / 0.25); }
.Floating_Card_Button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.Floating_Card_Button img { display: block; height: 22px; width: auto; }
.Theme_Dark img[src*="/social/apple.svg"] { filter: invert(1); }
.Main_Button.Login_Button, .Yes_Button.Login_Button, .Gray_Button.Login_Button
	{
		width: 130px;
		height: 40px;
		font-size: calc(16px + var(--Font_Header_Offset));
	}
.Go_Back_Link { display: inline-flex; align-items: center; gap: 6px; font-size: calc(16px + var(--Font_Header_Offset)); }
.Go_Back_Row { margin-left: -26px; }
/* ----- BUTTONS (V5): BEVELED BY INSET SHADOWS ----- */
.Main_Button, .Yes_Button, .No_Button, .Gray_Button
	{
		font-weight: bold;
		border-radius: 4px;
		cursor: pointer;
		box-shadow: inset 2px 2px 1px rgba(255, 255, 255, 0.16), inset -2px -2px 2px rgba(0, 0, 0, 0.13);
		transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.1s ease, transform 0.06s ease;
	}
.Main_Button:active, .Yes_Button:active, .No_Button:active
	{
		transform: translateY(1px);
		box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.17), inset -1px -1px 1px rgba(255, 255, 255, 0.07);
	}
.Main_Button { --Btn_Base: hsl(from var(--Color_Main) h s calc(l + 6)); }
.Yes_Button { --Btn_Base: var(--Color_Positive); }
.No_Button { --Btn_Base: var(--Color_Negative); }

.Main_Button, .Yes_Button, .No_Button
	{
		color: var(--Color_Surface);
		background: linear-gradient(180deg,
			hsl(from var(--Btn_Base) h calc(s - 3) calc(l + 9)) 0%,
			var(--Btn_Base) 100%);
		border: 2px solid hsl(from var(--Btn_Base) h calc(s + 5) calc(l - 9));
	}
.Main_Button:hover, .Yes_Button:hover, .No_Button:hover
	{
		color: var(--Color_Surface);
		background: linear-gradient(180deg,
			hsl(from var(--Btn_Base) h calc(s + 1) calc(l + 14)) 0%,
			hsl(from var(--Btn_Base) h calc(s - 4) calc(l + 5)) 100%);
	}
.Gray_Button
	{
		cursor: default;
		color: var(--Color_Surface);
		background: linear-gradient(180deg, hsl(0 0% 52%) 0%, hsl(0 0% 43%) 100%);
		border: 2px solid hsl(0 0% 34%);
	}

/* ===== SMALL POPUP WINDOW: BACKDROP IS THE GLOBAL #Gray_Background ===== */
.Popup_Box
	{
		position: fixed;
		left: 50%;
		top: var(--Popup_Anchor_Top);
		transform: translateX(-50%);
		width: 380px;
		max-width: calc(100vw / var(--Zoom, 1) - 32px);
		background: var(--Color_Div_1);
		border: 2px solid var(--Color_Border_Strong);
		border-radius: 6px;
		box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
		z-index: 100001;
		overflow: hidden;
	}
/* ----- ERROR POPUP CONTENT (RED HEADER) ----- */
.Error_Box_Head
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 9px 14px;
		background: linear-gradient(180deg, hsl(from var(--Color_Negative) h s calc(l + 10)) 0%, var(--Color_Negative) 100%);
		border-bottom: 2px solid hsl(from var(--Color_Negative) h calc(s + 5) calc(l - 9));
		color: var(--Color_Surface);
		font-family: var(--Font_Header);
		letter-spacing: var(--Font_Header_Spacing);
		font-size: var(--Font_Header_Mid);
		font-weight: bold;
	}
.Confirm_Box_Head,
.Error_Box_Notice .Error_Box_Head
	{
		background: linear-gradient(180deg, hsl(from var(--Color_Main) h s calc(l + 10)) 0%, var(--Color_Main) 100%);
		border-bottom-color: hsl(from var(--Color_Main) h s calc(l - 16));
	}
.Error_Box_Head .Close_X_White { --X_Color: var(--Color_Surface); }
.Error_Box_Body
	{
		display: block;
		padding: 18px 20px 0;
		text-align: center;
		font-family: var(--Font_Body);
		font-size: var(--Font_Text_Mid);
		font-weight: bold;
		color: var(--Color_Text_Cool);
		line-height: 1.45;
	}
.Error_Box_Foot { padding: 18px 20px 20px; }

/* ----- POPUP BUTTON ROW: ONE EQUAL COLUMN PER BUTTON, EACH BUTTON CENTRED IN ITS OWN ----- */
.Error_Box_Foot, .Popup_Card .Form_Actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: center; justify-items: center; }

/* ===== GLOBAL X CLOSE: COLOR VIA .Close_X_Slate / _Tan / _White / _Red ===== */
.Close_X
	{
		--X_Box: 24px; --X_Bar: 28px; --X_Thick: 4.5px;
		--X_Color: var(--Color_Icon_Muted); --X_Hover: var(--Color_Negative);
		position: relative;
		flex: none;
		width: var(--X_Box);
		height: var(--X_Box);
		cursor: pointer;
		transition: transform 0.05s ease;
	}
.Close_X::before, .Close_X::after
	{
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: var(--X_Bar);
		height: var(--X_Thick);
		margin: calc(var(--X_Thick) / -2) 0 0 calc(var(--X_Bar) / -2);
		background: var(--X_Color);
		border-radius: 1px;
		transition: background-color 0.1s ease;
	}
.Close_X::before { transform: rotate(45deg); }
.Close_X::after { transform: rotate(-45deg); }
.Close_X:hover::before, .Close_X:hover::after { background: var(--X_Hover); }
.Close_X:active { transform: scale(0.88); }
.Close_X_Slate { --X_Color: var(--Color_Icon_Muted); --X_Hover: var(--Color_Negative); }
.Close_X_Tan { --X_Color: var(--Color_Text_Soft); --X_Hover: var(--Color_Negative); }
.Close_X_White { --X_Color: var(--Color_On_Accent); --X_Hover: var(--Color_Negative_Soft); }
.Close_X_Red { --X_Color: var(--Color_Negative); --X_Hover: hsl(from var(--Color_Negative) h s calc(l + 12)); }
.Close_X_X_Small { --X_Box: 18px; --X_Bar: 16px; --X_Thick: 3px; }
.Close_X_Small { --X_Box: 24px; --X_Bar: 24px; --X_Thick: 4px; }
.Close_X_Medium { --X_Box: 24px; --X_Bar: 30px; --X_Thick: 4.5px; }
.Close_X_Large { --X_Box: 30px; --X_Bar: 32px; --X_Thick: 5px; }

/* ===== PAGE CHROME: HEADER / NAV / TOP PANEL / FOOTER / LAYOUT FRAME ===== */

/* ----- LAYOUT FRAME ----- */
.Border_Layout
	{
		border-bottom: 1px solid var(--Color_Border_Strong);
		border-right: 1px solid var(--Color_Border_Strong);
		border-left: 1px solid var(--Color_Border_Strong);
	}
.Border_Content
	{
		border-bottom: 1px solid var(--Color_Border_Strong);
	}
.Content_Cell { height: 1000px; }
.Background_Primary
	{
		background-color: var(--Color_Chrome);
	}
.Main_Font_3
	{
		color: var(--Color_On_Chrome);
	}

/* ----- NAV BAR (BUTTONS) ----- */
.Nav_Button, .Nav_Button_High, .Nav_Panel, .Footer_Box
	{
		background: linear-gradient(180deg,
			hsl(from var(--Color_Chrome) h calc(s - 8) calc(l + 8)) 0%,
			var(--Color_Chrome) 100%);
		border-top: 1px solid hsl(from var(--Color_Chrome) h calc(s - 9) calc(l + 16));
		border-left: 1px solid hsl(from var(--Color_Chrome) h calc(s - 9) calc(l + 16));
	}
.Nav_Button
	{
		color: var(--Color_On_Chrome);
		font-size: calc(20px + var(--Font_Header_Offset));
		font-weight: bold;
	}
.Nav_Button:hover
	{
		color: var(--Color_Accent);
		cursor: pointer;
	}
.Nav_Button_High
	{
		color: var(--Color_Accent);
		font-weight: bold;
	}
.Nav_Button_Border_1
	{
		border-top: 1px solid var(--Color_Border_Strong);
		border-bottom: 1px solid var(--Color_Border_Strong);
		border-right: 1px solid var(--Color_Border_Strong);
	}
.Nav_Button_Border_2
	{
		border-top: 1px solid var(--Color_Border_Strong);
		border-bottom: 1px solid var(--Color_Border_Strong);
		border-left: 1px solid var(--Color_Border_Strong);
	}
.Nav_Button_Border_3
	{
		border: 1px solid var(--Color_Border_Strong);
	}
.Nav_Button_Border_1, .Nav_Button_Border_2, .Nav_Button_Border_3
	{
		position: relative;
		z-index: 1100;
	}
#Table_Page_Nav_Bar { width: 100%; height: 40px; table-layout: fixed; }
#Table_Page_Nav_Bar .Nav_Button_Border_1, #Table_Page_Nav_Bar .Nav_Button_Border_2, #Table_Page_Nav_Bar .Nav_Button_Border_3,
#Table_Page_Nav_Bar .Nav_Button, #Table_Page_Nav_Bar .Nav_Button_High
	{
		box-sizing: border-box;
	}
#Div_Time_Date_Box
	{
		box-sizing: border-box;
	}
#Div_Time_Date_Box .Nav_Button_High
	{
		box-sizing: border-box;
		border-top: 0;
		border-left: 0;
		box-shadow: inset 1px 1px 0 0 hsl(from var(--Color_Chrome) h calc(s - 9) calc(l + 16));
		font-size: 14px;
		padding-left: 5px;
	}
.Time_Date_Cell { width: 162px; }
.Nav_Time_Cell { width: var(--Nav_Time_Width); height: 40px; }
#Table_Page_Nav_Bar .Nav_Button
	{
		border-top: 0;
		border-left: 0;
		box-shadow: inset 1px 1px 0 0 hsl(from var(--Color_Chrome) h calc(s - 9) calc(l + 16));
	}

/* ----- NAV PANELS (DROPDOWN MENUS) ----- */
.Nav_Panel
	{
		width: 100%;
		padding: 0 5px;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
	}
.Nav_Panel_Anim
	{
		position: absolute;
		z-index: 1000;
		margin-top: -2px;
		width: calc(var(--Nav_Cat_Width) * 1.5);
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.28s ease;
	}
.Nav_Panel_Anim.Open { grid-template-rows: 1fr; }
.Nav_Panel_Clip { overflow: hidden; min-height: 0; }
.Nav_Panel_Border
	{
		border: 1px solid var(--Color_Border_Strong);
		border-bottom-right-radius: 6px;
		border-bottom-left-radius: 6px;
	}
.Nav_Cell { position: relative; height: 40px; }
.Nav_Arrow
	{
		position: absolute;
		right: 7px;
		top: 50%;
		transform: translateY(-33.33%);
		width: 0;
		height: 0;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-top: 9px solid var(--Color_Main_Soft);
		opacity: 0.25;
		transition: transform 0.2s ease;
	}
.Nav_Cell.Nav_Open .Nav_Arrow { transform: translateY(-66.66%) rotate(180deg); }
.Nav_Panel_Category, .Nav_Panel_Category_Last
	{
		font-size: calc(16px + var(--Font_Header_Offset));
		font-weight: bold;
		padding: 0;
		text-align: left;
		vertical-align: middle;
	}
.Nav_Panel_Category { border-bottom: 1px solid var(--Color_Border_Strong); }
.Nav_Link
	{
		height: 38px;
		line-height: 36px;
		display: block;
		color: var(--Color_On_Chrome);
		text-decoration: none;
	}
.Nav_Link:hover
	{
		color: var(--Color_Accent);
		cursor: pointer;
	}
.Nav_Link_Sub
	{
		box-sizing: border-box;
		height: 100%;
		display: block;
		color: var(--Color_On_Chrome);
		font-size: calc(16px + var(--Font_Header_Offset));
		text-decoration: none;
		padding: 8px 8px 9px;
	}
.Nav_Link_Sub:hover
	{
		color: var(--Color_Accent);
		cursor: pointer;
	}
.Nav_Link_Sub_Disabled, .Nav_Link_Sub_Disabled:hover
	{
		color: color-mix(in oklab, var(--Color_On_Chrome) 60%, var(--Color_Chrome));
		font-weight: 400;
		cursor: default;
	}

/* ----- TOP PANEL / FOOTER ----- */
.Top_Panel_Box
	{
		width: 100%;
		height: 40px;
		padding: 4px 10px;
		color: var(--Color_Text);
		background: var(--Color_Div_3);
		border-bottom: 1px solid var(--Color_Border);
	}
.Top_Panel_Cog_Cell { padding-left: 40px; }
/* ----- MOTD ----- */
.Motd { width: 100%; font-size: 18px; vertical-align: middle; }
.Motd_Label { font-family: var(--Font_Header); letter-spacing: var(--Font_Header_Spacing); font-weight: bold; color: var(--Color_Main); }
.Footer_Cell
	{
		width: 100%;
	}
.Footer_Box
	{
		display: block;
		color: var(--Color_Main_Soft);
		font-family: var(--Font_Body);
	}
.Footer_Top
	{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: start;
		gap: 40px;
		padding: 22px 34px 20px;
	}
.Footer_Social_Group { justify-self: center; text-align: center; }
.Footer_Brand
	{
		max-width: 280px;
	}
.Footer_Wordmark
	{
		font-family: var(--Font_Header);
		letter-spacing: var(--Font_Header_Spacing);
		font-weight: bold;
		font-size: 30px;
		color: var(--Color_On_Chrome);
		line-height: 1;
	}
.Footer_Tagline
	{
		font-family: var(--Font_Header);
		letter-spacing: 0.12em;
		font-size: 12px;
		color: var(--Color_Accent_Deep);
		text-transform: uppercase;
		margin-top: 6px;
	}
.Footer_Blurb
	{
		font-size: 13px;
		color: var(--Color_Main_Soft);
		line-height: 1.5;
		margin-top: 10px;
	}
.Footer_Cols
	{
		display: flex;
		gap: 56px;
		justify-self: end;
	}
.Footer_Cols > .Footer_Col { text-align: left; }
.Footer_Col_Head
	{
		font-family: var(--Font_Header);
		letter-spacing: var(--Font_Header_Spacing);
		font-weight: bold;
		font-size: 14px;
		color: var(--Color_On_Chrome);
		text-transform: uppercase;
		margin-bottom: 10px;
	}
.Footer_Link
	{
		display: block;
		font-family: var(--Font_Header);
		letter-spacing: var(--Font_Header_Spacing);
		font-weight: bold;
		font-size: 15px;
		color: var(--Color_Accent_Deep);
		text-decoration: none;
		padding: 3px 0;
		transition: color 0.12s ease;
	}
.Footer_Link:hover
	{
		color: var(--Color_Accent_Soft);
	}
.Footer_Social_Head
	{
		text-align: center;
	}
.Footer_Social
	{
		display: flex;
		gap: 12px;
		margin-top: 4px;
	}
.Footer_Social_Link
	{
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.10);
		border: 1px solid rgba(255, 255, 255, 0.18);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition: transform 0.12s ease, background 0.12s ease;
	}
.Footer_Social_Link img
	{
		width: 22px;
		height: 22px;
		display: block;
	}
.Footer_Social_Link:hover
	{
		transform: translateY(-2px);
		background: rgba(255, 255, 255, 0.20);
	}
.Footer_Legal_Bar
	{
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		padding: 12px 34px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 16px;
		font-size: 11.5px;
		color: var(--Color_Main_Soft);
	}
.Footer_Load_Time
	{
		font-style: italic;
		color: var(--Color_Main_Soft);
		white-space: nowrap;
	}

/* ===== NETWORK LATENCY METER (NAV-BAR DATE/TIME BOX) ===== */
.Latency_Meter { display: inline-flex; align-items: baseline; gap: 10px; vertical-align: middle; }
.Latency_Bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.Latency_Bars i { width: 3px; border-radius: 1px; background: #DCE3EE; opacity: 0.35; }
.Latency_Bars i:nth-child(1) { height: 6px; }
.Latency_Bars i:nth-child(2) { height: 9px; }
.Latency_Bars i:nth-child(3) { height: 12px; }
.Latency_Ms { font-family: var(--Font_Body); font-size: 14px; color: var(--Color_On_Chrome); }
.Latency_Good .Latency_Bars i { background: #28C93C; opacity: 1; }
.Latency_Ok .Latency_Bars i:nth-child(-n+2) { background: #E6A800; opacity: 1; }
.Latency_Poor .Latency_Bars i:nth-child(1) { background: #E13030; opacity: 1; }
.Latency_Ok .Latency_Ms { color: #E6A800; }
.Latency_Poor .Latency_Ms { color: #E13030; }
.Weather_Cell { width: 40px; text-align: center; vertical-align: middle; padding: 0; }
.Weather_Cell img { display: block; margin: 0 auto; width: 36px; height: 36px; }

/* ===== GLOBAL SETTINGS: COGWHEEL (TOP PANEL) + ON-DEMAND MODAL ===== */
.Settings_Cog { display: inline-flex; align-items: center; vertical-align: middle; color: var(--Color_Main); cursor: pointer; line-height: 0; transition: transform 0.05s ease; }
.Settings_Cog svg { display: block; width: 36px; height: 36px; fill: currentColor; stroke: hsl(from var(--Color_Main) h s calc(l - 12)); stroke-width: 2; stroke-linejoin: round; transition: transform 0.5s ease; }
.Settings_Cog:hover { color: var(--Color_Accent_Strong); }
.Settings_Cog:active { transform: scale(0.88); }
.Settings_Cog:hover svg, .Settings_Cog_Open svg { transform: rotate(90deg); }

.Settings_Backdrop { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 100050; display: none; }
.Settings_Modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 880px; max-width: calc(100vw - 60px); max-height: 88vh; max-height: 88dvh; z-index: 100051; display: none; font-family: var(--Font_Body); --Font_Header_Offset: 0px; --Font_Body_Offset: 0px; }
.Popup_Card { position: relative; box-sizing: border-box; display: flex; flex-direction: column; width: 100%; min-width: 0; max-height: calc(88vh / var(--Zoom, 1)); max-height: calc(88dvh / var(--Zoom, 1)); padding: 8px 24px 24px; text-align: left; background: var(--Color_Div_1); border: 2px solid var(--Color_Secondary_Deep); border-radius: 4px; box-shadow: 0 6px 18px rgba(20, 30, 60, 0.28); }
.Card_Head { text-align: center; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 2px solid var(--Color_Secondary_Deep); }
.Card_Title { color: var(--Color_Main); }
.Popup_Card_Close { position: absolute; top: 10px; right: 10px; z-index: 1; }
.Popup_Card_Body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -20px; padding-right: 24px; padding-bottom: 1px; }
.Settings_Saved_Message { flex: 0 0 auto; margin-top: 24px; min-height: max(22px, 1lh); text-align: center; font-size: calc(18px + var(--Font_Body_Offset)); font-weight: bold; color: var(--Color_Positive); opacity: 0; transition: opacity 0.5s ease; }
.Settings_Saved_Message.Show { opacity: 1; }
.Settings_Saved_Message.Settings_Saved_Message_Neutral { color: var(--Color_Text_Mid); font-weight: normal; }
.Panel_Body_Inner .Settings_Saved_Message { margin-top: 14px; }

/* ===== DIV-TIER SURFACES: THE FILL / BORDER / RADIUS OF A NESTING TIER ===== */
.Div_1 { background: var(--Color_Div_1); border: 2px solid var(--Color_Secondary_Deep); border-radius: 4px; }
.Div_2 { background: var(--Color_Div_2); border: 2px solid var(--Color_Secondary_Deep); border-radius: 4px; }
.Div_3 { background: var(--Color_Div_3); border: 2px solid var(--Color_Border); border-radius: 4px; }
.Div_Selected { border-color: var(--Color_Main); }

.Settings_Group { background: var(--Color_Div_3); border: 1px solid var(--Color_Border); border-radius: 4px; display: flex; flex-direction: column; overflow: hidden; }
.Content_Padding { padding: 20px 40px; }
.Settings_Row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 18px; }
.Settings_Row + .Settings_Row { border-top: 1px solid var(--Color_Secondary_Raised); }
.Settings_Row_Text { flex: 1 1 auto; min-width: 0; }
.Settings_Row_Label { font-family: var(--Font_Header); font-size: calc(19px + var(--Font_Header_Offset)); color: var(--Color_Main); }
.Settings_Row_Hint { font-size: calc(13px + var(--Font_Body_Offset)); color: var(--Color_Text_Mid); margin-top: 3px; max-width: 440px; }
.Settings_Row_Control { flex: 0 0 auto; max-width: 100%; }
.Lock_Glyph { color: var(--Color_Text_Soft); line-height: 0; }
.Inline_Icon { display: inline-block; position: relative; width: 19px; height: 0; margin-left: 6px; vertical-align: middle; cursor: pointer; }
.Inline_Icon svg { --Icon_Shift: calc(-50% - 2px); position: absolute; top: 0; left: 0; width: 19px; height: 19px; transform: translateY(var(--Icon_Shift)); transform-origin: center; fill: currentColor; opacity: 0.5; transition: opacity 0.15s ease; }
.Inline_Icon:hover svg, .Inline_Icon:focus-visible svg { opacity: 1; }
.Inline_Icon.Is_Spinning { cursor: default; }
.Inline_Icon.Is_Spinning svg { opacity: 1; animation: Inline_Icon_Spin 0.7s linear infinite; }
.Inline_Icon.Is_Spinning.Spin_Alert svg { fill: var(--Color_Negative); }
@keyframes Inline_Icon_Spin { from { transform: translateY(var(--Icon_Shift)) rotate(0deg); } to { transform: translateY(var(--Icon_Shift)) rotate(360deg); } }
.Settings_Select { height: 34px; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.Settings_Font_Row { display: flex; align-items: center; gap: 8px; width: 280px; max-width: 100%; }

/* ----- SETTINGS CATEGORIES ----- */
.Settings_Category { display: flex; flex-direction: column; gap: 12px; }
.Settings_Category + .Settings_Category { margin-top: 24px; }
.Settings_Category_Title { font-family: var(--Font_Header); font-size: calc(16px + var(--Font_Header_Offset)); letter-spacing: 0.04em; text-transform: uppercase; color: var(--Color_Text_Soft); }
.Settings_Category_Title::after { content: ""; display: block; width: 33%; height: 2px; margin-top: 6px; background: var(--Color_Secondary_Line); border-radius: 1px; }

.Popup_Card .Settings_Group { background: var(--Color_Div_2); border-color: var(--Color_Secondary_Deep); }
.Popup_Card .Settings_Row + .Settings_Row { border-top-color: var(--Color_Secondary_Deep); }
.Popup_Card .Settings_Category_Title::after { background: var(--Color_Secondary_Deep); }

/* ----- ON/OFF TOGGLE: 100px WIDE, ON = THEMATIC BLUE ----- */
.Toggle_Switch { display: inline-flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--Font_Body); -webkit-user-select: none; user-select: none; }
.Toggle_Switch_Track { position: relative; box-sizing: border-box; flex: 0 0 auto; width: 100px; height: 28px; border-radius: 999px; background: var(--Color_Border); border: 1px solid var(--Color_Border); transition: background-color 0.18s ease, border-color 0.18s ease; }
.Toggle_Switch_Thumb { position: absolute; top: 50%; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--Color_Surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transform: translateY(-50%); transition: transform 0.18s ease; }
.Toggle_Switch.On .Toggle_Switch_Track { background: hsl(from var(--Color_Main) h s calc(l + 6)); border-color: var(--Color_Main); }
.Toggle_Switch.On .Toggle_Switch_Thumb { transform: translate(70px, -50%); }
.Toggle_Switch_State { min-width: 26px; text-align: left; font-size: calc(15px + var(--Font_Body_Offset)); font-weight: bold; color: var(--Color_Muted); }
.Toggle_Switch.On .Toggle_Switch_State { color: var(--Color_Main); }
.Toggle_Switch:active .Toggle_Switch_Track { transform: scale(0.97); }

/* ----- SUB-SETTING (CHILD) ROWS: INDENTED WITH A LEFT GUIDE ----- */
.Settings_Row_Child { position: relative; padding-left: 46px; }
.Settings_Row_Child::before { content: ""; position: absolute; left: 24px; top: -1px; bottom: 0; width: 2px; background: var(--Color_Secondary_Line); }
.Settings_Row_Child + .Settings_Row_Child { border-top-color: transparent; }
.Settings_Row_Child + .Settings_Row_Child::after { content: ""; position: absolute; top: -1px; left: 26px; right: 0; height: 1px; background: var(--Color_Secondary_Raised); }
.Popup_Card .Settings_Row_Child + .Settings_Row_Child { border-top-color: transparent; }
.Popup_Card .Settings_Row_Child + .Settings_Row_Child::after { background: var(--Color_Secondary_Deep); }
.Settings_Row_Child .Settings_Row_Label { font-size: calc(17px + var(--Font_Header_Offset)); }
.Toggle_Switch.Disabled { pointer-events: none; }
.Settings_Row:has(.Toggle_Switch.Disabled) { opacity: 0.5; }
.Toggle_Switch.Settings_Lock { pointer-events: none; }
#Select_Site_Theme:disabled { opacity: 0.6; cursor: not-allowed; }

/* ----- DARK THEMES: CARD HEAD AND PANEL HEADER RULE LINES ----- */
.Theme_Dark .Card_Head { border-bottom-color: var(--Color_Secondary_Line); }
.Theme_Dark .Panel_Header::after { background: var(--Color_Secondary_Line); }

/* ===== REUSABLE CONTENT LAYOUT (V5): ARRANGEMENT ONLY ===== */
.Card_Grid { display: grid; grid-template-columns: repeat(var(--Card_Columns, 4), minmax(0, 1fr)); gap: 20px; padding: 0 20px; }
.Card_Columns_2 { --Card_Columns: 2; }
.Card_Columns_5 { --Card_Columns: 5; }
.Card_Grid_Spread { grid-template-columns: repeat(var(--Card_Columns, 4), minmax(0, max-content)); justify-content: space-between; }
.Credit_Card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px; text-align: center; }
.Sub_Header { margin-bottom: 12px; }
.Sub_Header::after { content: ""; display: block; width: 25%; height: 2px; margin-top: 12px; background: var(--Color_Secondary_Deep); border-radius: 1px; }

/* ===== V5: 1200px CANVAS (TOKENIZED) + WHOLE-PAGE ZOOM ===== */
:root
	{
		--Site_Width: 1200px;
		--Nav_Time_Width: 240px;
		--Nav_Cat_Width: calc((var(--Site_Width) - var(--Nav_Time_Width)) / 7);
	}
.Site_Canvas { width: var(--Site_Width); }

#Zoom_Viewport { width: 100%; }
#Zoom_Canvas { width: var(--Site_Width); margin: 0 auto; zoom: var(--Canvas_Zoom, 1); --Zoom: var(--Canvas_Zoom, 1); }

/* ----- PAGE SCROLLBARS: OverlayScrollbars ----- */
html { scrollbar-gutter: stable both-edges; }
html.os-active { scrollbar-gutter: auto; }
.Os_Scroll { overscroll-behavior: contain; }
.os-theme-sylestia
	{
		--os-size: 12px;
		--os-padding-perpendicular: 2px;
		--os-padding-axis: 2px;
		--os-handle-border-radius: 3px;
		--os-handle-bg: hsl(from var(--Color_Main) h s l / 0.6);
		--os-handle-bg-hover: hsl(from var(--Color_Main) h s l / 0.8);
		--os-handle-bg-active: hsl(from var(--Color_Main) h s l / 0.95);
		--os-handle-min-size: 36px;
	}
body > .os-scrollbar { z-index: 1950; }

#Table_Page_Header { width: 100%; height: 180px; --Header_Img: url('/assets/images/interface/logo/BG_Sylestia_Header_Day.jpg'); --Waterfall_Opacity: 0.63; --Header_Fallback_Gradient: linear-gradient(120deg, hsl(from var(--Color_Header_Bg) h calc(s + 25) calc(l + 20)) 0%, hsl(from var(--Color_Header_Bg) h calc(s + 7) calc(l + 8)) 55%, var(--Color_Header_Bg) 100%); background-image: var(--Header_Img), var(--Header_Fallback_Gradient); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden; isolation: isolate; }
.Theme_Dark #Table_Page_Header { --Header_Img: url('/assets/images/interface/logo/BG_Sylestia_Header_Night.jpg'); --Waterfall_Opacity: 0.42; }
.Header_Side_Cell { width: 530px; }
.Header_Account_Cell { padding-right: 7px; }
.Header_Account_Cell > div { position: relative; }
#Div_Header_Image_Fade { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: none; --Header_Img: none; background-image: var(--Header_Img), var(--Header_Fallback_Gradient); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }
#Table_Page_Header > tbody, #Table_Page_Header > tr { position: relative; z-index: 3; }
#Div_Header_Waterfall { position: absolute; left: 46.3%; top: 41%; width: 5.5%; height: 25%; z-index: 2; pointer-events: none; opacity: var(--Waterfall_Opacity, 0.42); mix-blend-mode: screen; overflow: hidden; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cfilter%20id='b'%20x='-40%25'%20y='-40%25'%20width='180%25'%20height='180%25'%3E%3CfeGaussianBlur%20stdDeviation='5'/%3E%3C/filter%3E%3Cpolygon%20points='20.8,0%2087.2,4%20100,100%202,100'%20fill='%23fff'%20filter='url(%23b)'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cfilter%20id='b'%20x='-40%25'%20y='-40%25'%20width='180%25'%20height='180%25'%3E%3CfeGaussianBlur%20stdDeviation='5'/%3E%3C/filter%3E%3Cpolygon%20points='20.8,0%2087.2,4%20100,100%202,100'%20fill='%23fff'%20filter='url(%23b)'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.Header_Waterfall_Sheet { position: absolute; left: 0; right: 0; top: -80px; bottom: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.50) 22%, rgba(150,230,255,0.24) 50%, rgba(255,255,255,0) 82%), repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 7px, rgba(255,255,255,0.30) 8px 10px, rgba(255,255,255,0) 12px 18px); background-size: 100% 80px, 46px 100%; background-repeat: repeat; filter: blur(1.3px); will-change: transform; animation: Header_Waterfall_Flow_Y 0.9s linear infinite; }
@keyframes Header_Waterfall_Flow_Y { from { transform: translateY(0); } to { transform: translateY(80px); } }
#Table_Page_Header::before { content: ""; position: absolute; left: 36.3%; top: 58%; width: 25%; height: 22%; z-index: 2; pointer-events: none; opacity: 0.3; mix-blend-mode: screen; background: radial-gradient(ellipse 55% 60% at 50% 42%, rgba(255,255,255,0.55), rgba(255,255,255,0) 72%), radial-gradient(ellipse 42% 52% at 28% 60%, rgba(226,242,255,0.42), rgba(226,242,255,0) 74%), radial-gradient(ellipse 42% 52% at 73% 62%, rgba(226,242,255,0.42), rgba(226,242,255,0) 74%); filter: blur(4px); animation: Header_Waterfall_Mist 7.5s ease-in-out infinite; }
@keyframes Header_Waterfall_Mist { 0%, 100% { transform: translate(-2%, 1%) scale(0.95); opacity: 0.24; } 50% { transform: translate(2%, -3%) scale(1.07); opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { #Table_Page_Header::before, .Header_Waterfall_Sheet { animation: none; } }
#Div_Header_Water_FX { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#Div_Header_Stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.Header_Glint { position: absolute; opacity: 0; will-change: opacity, transform; background-color: rgba(255,255,255,0.95); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2034'%3E%3Cpath%20d='M6,12%20C38,5%2066,9%2095,29%20C70,17%2040,16%209,17%20Z'%20fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2034'%3E%3Cpath%20d='M6,12%20C38,5%2066,9%2095,29%20C70,17%2040,16%209,17%20Z'%20fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: Header_Glint_Twinkle ease-in-out infinite; }
.Header_Glint.Cool { background-color: rgba(214,234,246,0.92); }
@keyframes Header_Glint_Twinkle {
	0%, 72% { opacity: 0; transform: translate(0px, 0px) scaleX(0.6) rotate(var(--Glint_Rot, 0deg)); }
	80% { opacity: var(--Glint_Op, 0.85); transform: translate(calc(var(--Drift_X, 0px) * 0.35), calc(var(--Drift_Y, 0px) * 0.35)) scaleX(1) rotate(var(--Glint_Rot, 0deg)); }
	86% { opacity: var(--Glint_Op, 0.85); transform: translate(calc(var(--Drift_X, 0px) * 0.7), calc(var(--Drift_Y, 0px) * 0.7)) scaleX(1) rotate(var(--Glint_Rot, 0deg)); }
	92% { opacity: 0; transform: translate(var(--Drift_X, 0px), var(--Drift_Y, 0px)) scaleX(0.6) rotate(var(--Glint_Rot, 0deg)); }
	100% { opacity: 0; transform: translate(0px, 0px) scaleX(0.6) rotate(var(--Glint_Rot, 0deg)); }
}
@media (prefers-reduced-motion: reduce) { .Header_Glint { animation: none; opacity: calc(var(--Glint_Op, 0.85) * 0.45); } }
.Header_Logo { display: block; background-image: url('/assets/images/interface/logo/Sylestia_Header.webp'); background-repeat: no-repeat; background-position: 20px center; background-size: auto 100%; transition: filter 0.12s ease; position: relative; }
.Header_Logo::before, .Header_Logo::after { content: ""; position: absolute; pointer-events: none; mix-blend-mode: screen; transform: translate(-50%, -50%); }
.Header_Logo::before { left: 444px; top: 86px; width: 50px; height: 66px; background: radial-gradient(ellipse closest-side, rgba(255,242,190,0.82) 0%, rgba(255,206,104,0.50) 32%, rgba(255,168,62,0.26) 58%, rgba(255,150,40,0) 80%); filter: blur(1.2px); animation: Header_Flame_Core 1.75s ease-in-out infinite; }
.Header_Logo::after { left: 444px; top: 80px; width: 122px; height: 134px; background: radial-gradient(ellipse closest-side, rgba(255,198,108,0.28) 0%, rgba(255,162,58,0.14) 46%, rgba(255,140,40,0) 72%); filter: blur(5px); animation: Header_Flame_Halo 2.9s ease-in-out infinite; }
@keyframes Header_Flame_Core {
	0% { opacity: 0.7; transform: translate(-50%, -50%) scale(1, 1.03); }
	15% { opacity: 0.93; transform: translate(-52%, -51%) scale(0.93, 1.11); }
	31% { opacity: 0.6; transform: translate(-48%, -50%) scale(1.06, 0.97); }
	47% { opacity: 1; transform: translate(-51%, -54%) scale(0.95, 1.15); }
	62% { opacity: 0.66; transform: translate(-49%, -49%) scale(1.03, 0.99); }
	80% { opacity: 0.9; transform: translate(-50%, -52%) scale(0.97, 1.09); }
	100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1, 1.03); }
}
@keyframes Header_Flame_Halo {
	0%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(1, 1); }
	33% { opacity: 0.9; transform: translate(-50.5%, -51%) scale(1.04, 1.06); }
	60% { opacity: 0.64; transform: translate(-49%, -50%) scale(0.97, 1.02); }
	72% { opacity: 0.85; transform: translate(-50%, -52%) scale(1.02, 1.08); }
}
@media (prefers-reduced-motion: reduce) { .Header_Logo::before, .Header_Logo::after { animation: none; opacity: 0.7; } }
.Header_Logo:hover { filter: brightness(1.05); }

/* ----- ZOOM CONTROL (TOP PANEL) ----- */
.Slider_Control { display: flex; flex-direction: column; gap: 12px; width: 280px; max-width: 100%; }
.Slider_Control_Row { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.Slider_Control_Adjust { display: flex; align-items: center; gap: 10px; }
.Slider_Control_Row .Slider_Control_Action { position: absolute; right: 0; top: 50%; margin-top: -14px; }
.Reset_Button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--Color_Text_Soft); cursor: pointer; transition: color 0.1s ease, transform 0.05s ease; }
.Reset_Button svg { display: block; }
.Reset_Button:hover { color: var(--Color_Negative); }
.Reset_Button:active { transform: scale(0.88); }
.Step_Button
	{
		position: relative;
		box-sizing: border-box;
		width: 24px;
		height: 24px;
		background: transparent;
		cursor: pointer;
		transition: color 0.1s ease, transform 0.05s ease;
	}
.Step_Minus, .Step_Plus { color: var(--Color_Main); }
.Step_Button::before
	{
		content: "";
		position: absolute;
		top: 50%;
		left: 3px;
		right: 3px;
		height: 4px;
		margin-top: -2px;
		background: currentColor;
		border-radius: 1px;
	}
.Step_Plus::after
	{
		content: "";
		position: absolute;
		left: 50%;
		top: 3px;
		bottom: 3px;
		width: 4px;
		margin-left: -2px;
		background: currentColor;
		border-radius: 1px;
	}
.Step_Button:hover { color: hsl(from var(--Color_Main) h s calc(l + 13)); }
.Step_Button:active { transform: scale(0.88); }
input.Input_Numeric_Small
	{
		box-sizing: border-box;
		min-width: 75px;
		width: 75px;
		height: 28px;
		margin: 0;
		padding: 0 4px;
		font-size: 18px;
		font-weight: bold;
		line-height: 26px;
		color: var(--Color_Main);
		background: var(--Color_Surface);
		border: 1px solid var(--Color_Border);
		border-radius: 2px;
		box-shadow: none;
		cursor: pointer;
		text-align: center;
	}
.Input_Numeric_Small:hover { background: var(--Color_Accent_Pale); }

/* ----- ZOOM SLIDER (SETTINGS-PANEL RANGE CONTROL) ----- */
.Slider_Range { width: 100%; margin: 0; accent-color: var(--Color_Main); cursor: pointer; }
.Zoom_Fit_Button
	{
		position: relative;
		box-sizing: border-box;
		width: 28px;
		height: 28px;
		color: var(--Color_Text_Soft);
		border-left: 3px solid currentColor;
		border-right: 3px solid currentColor;
		background: transparent;
		cursor: pointer;
		transition: color 0.1s ease, transform 0.05s ease;
	}
.Zoom_Fit_Button::before
	{
		content: "";
		position: absolute;
		top: 50%;
		left: 1px;
		margin-top: -4px;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-right: 6px solid currentColor;
	}
.Zoom_Fit_Button::after
	{
		content: "";
		position: absolute;
		top: 50%;
		right: 1px;
		margin-top: -4px;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-left: 6px solid currentColor;
	}
.Zoom_Fit_Button:hover { color: var(--Color_Negative); }
.Zoom_Fit_Button:active { transform: scale(0.88); }

/* ----- ZOOM SLIDER: FIREFOX TRACK, FILL, THUMB AND TICK ROW ----- */
@supports selector(::-moz-range-thumb)
	{
		.Slider_Range { position: relative; height: 20px; background: transparent; }
		.Slider_Range::-moz-range-track { box-sizing: border-box; height: 6px; background: var(--Color_Muted_Light); border: 1px solid var(--Color_Border); border-radius: 3px; }
		.Slider_Range::-moz-range-progress { height: 6px; background: var(--Color_Main); border-radius: 3px; }
		.Slider_Range::-moz-range-thumb { box-sizing: border-box; width: 20px; height: 20px; background: hsl(240 6% 43%); border: 2px solid #FFFFFF; border-radius: 50%; box-shadow: 0 1px 3px hsl(from var(--Color_Shadow) h s l / 0.35); }
		.Slider_Range:hover::-moz-range-thumb { background: hsl(240 6% 30%); }
		.Slider_Range:active::-moz-range-thumb { background: var(--Color_Main); }
		.Slider_Control > datalist { display: flex; justify-content: space-between; height: 4px; margin: -14px 9px -2px; }
		.Slider_Control > datalist > option { width: 2px; min-height: 0; padding: 0; background: hsl(from var(--Color_Muted) h s l / 0.5); }
	}

/* ===== CONTENT COMPONENTS (V5): PAGE-CONTENT BUILDING BLOCKS ===== */

/* ----- PANEL: COLLAPSIBLE GROUPING CARD ----- */
.Panel
	{
		padding: 0;
	}
.Panel_Header
	{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		cursor: pointer;
		padding: 12px 22px 12px;
	}
.Panel_Header::after
	{
		content: "";
		position: absolute;
		left: 22px;
		right: 22px;
		bottom: 0;
		height: 2px;
		background: var(--Color_Secondary_Deep);
		transition: background-color 0.28s ease;
	}
.Panel_Title
	{
		flex: 1 1 auto;
		text-align: center;
		font-family: var(--Font_Header);
		font-weight: bold;
		font-size: var(--Font_Header_Full);
		letter-spacing: var(--Font_Header_Spacing);
		color: var(--Color_Main);
	}
.Panel_Toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--Color_Text_Soft); transition: color 0.12s ease, transform 0.28s ease; }
.Panel_Toggle::before
	{
		content: "";
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 13px solid currentColor;
	}
.Panel:not(.Collapsed) .Panel_Toggle { transform: rotate(180deg); }
.Panel_Header:hover .Panel_Toggle { color: var(--Color_Accent_Strong); }
.Panel_Body_Wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.28s ease; }
.Panel_Body { overflow: hidden; min-height: 0; }
.Panel_Body_Inner
	{
		padding: 11px 22px 14px;
		font-family: var(--Font_Body);
		font-size: var(--Font_Text_Mid);
		color: var(--Color_Text);
		text-align: center;
	}
.Panel.Collapsed .Panel_Body_Wrap { grid-template-rows: 0fr; }
.Panel.Collapsed .Panel_Header::after { background-color: transparent; }
.Panel_Loading .Panel_Header { cursor: progress; }
.Panel_Loading .Panel_Toggle::before
	{
		width: 13px;
		height: 13px;
		border: 2px solid currentColor;
		border-top-color: transparent;
		border-radius: 50%;
		animation: Panel_Spinner 0.7s linear infinite;
	}
@keyframes Panel_Spinner { to { transform: rotate(360deg); } }

/* ----- INFO LIST: NUMBERED RESTRICTIONS / NOTES ----- */
.Info_List
	{
		display: inline-block;
		margin: 1lh 0 0;
		padding-left: 24px;
		max-width: 920px;
		text-align: left;
		font-size: var(--Font_Text_Mid);
	}
.Info_List > li { padding: 1px 0; }
.Info_List > li::marker { color: var(--Color_Accent_Strong); font-weight: bold; }

/* ===== FORM PAGE PRIMITIVES ===== */
.Form_Card { max-width: 900px; margin: 0 auto; background: var(--Color_Div_1); border: 2px solid var(--Color_Secondary_Deep); border-radius: 4px; padding: 10px 34px 30px; text-align: left; }
.Form_Card_Narrow { max-width: 680px; }
.Form_Card_Small { max-width: 520px; }
.Form_Card_Full { max-width: none; }
.Form_Hint { font-family: var(--Font_Body); font-weight: bold; font-size: var(--Font_Text_Small); color: var(--Color_Text_Mid); line-height: 1.4; padding-top: 2px; }
.Form_Intro { font-size: var(--Font_Text_Mid); text-align: center; margin-bottom: 6px; }
.Form_Actions { display: flex; justify-content: center; margin-top: 20px; }
.Button_Loading { color: transparent; cursor: default; pointer-events: none; }
.Theme_Dark input.Button_Loading { color: transparent; }
.Button_Spinner_Host { position: relative; }
.Button_Spinner
	{
		position: absolute;
		box-sizing: border-box;
		width: 24px;
		height: 24px;
		margin: -12px 0 0 -12px;
		border: 3px solid hsl(0 0% 100% / 0.35);
		border-top-color: var(--Color_On_Accent);
		border-radius: 50%;
		animation: Panel_Spinner 0.7s linear infinite;
		pointer-events: none;
	}
.Form_Foot { text-align: center; margin-top: 16px; font-family: var(--Font_Body); font-size: var(--Font_Text_Small); color: var(--Color_Text_Mid); }
.Form_Foot div + div { margin-top: 4px; }

/* ===== TUTORIAL ANCHOR: A GLOBAL .Panel AS A FULL-WIDTH BAND ===== */
.Tutorial_Anchor.Panel { border-top: 0; border-left: 0; border-right: 0; border-radius: 0; }
.Tutorial_Anchor_Icon { flex: 0 0 auto; display: block; }
.Tutorial_Anchor .Panel_Title { text-align: left; }
.Tutorial_Anchor .Settings_Category_Title::after { display: none; }
.Tutorial_Anchor .Panel_Body_Inner { text-align: left; }
.Tutorial_Anchor .Main_Button { float: right; margin: 2px 0 10px 18px; }

.Tutorial_HL { font-weight: bold; }
.Tutorial_NPC { color: #009900; font-weight: bold; }
.Tutorial_Enemy { color: #FF0000; font-weight: bold; }
.Tutorial_Region { color: #0066FF; font-weight: bold; }
.Tutorial_Zone { color: #0099FF; font-weight: bold; }
.Tutorial_Town { color: #9900FF; font-weight: bold; }
.Tutorial_Stat { color: var(--Color_Stat_Ability); font-weight: bold; }
.Tutorial_Health { color: var(--Color_Stat_Health); font-weight: bold; }
.Tutorial_Accent { color: #FF9900; font-weight: bold; }

.Theme_Dark .Tutorial_NPC { color: #4ec94e; }
.Theme_Dark .Tutorial_Enemy { color: #ff6058; }
.Theme_Dark .Tutorial_Region { color: #4d97ff; }
.Theme_Dark .Tutorial_Zone { color: #4db8ff; }
.Theme_Dark .Tutorial_Town { color: hsl(275 95% 76%); }
.Theme_Dark .Tutorial_Accent { color: #ffb84d; }

.Login_Notice .Content_Padding { border-radius: 0; border-top-width: 0; border-left-width: 0; border-right-width: 0; }

.Gender_Toggle { display: flex; align-items: flex-end; padding-bottom: 4px; }
.Gender_Toggle img { display: block; cursor: pointer; }

.Pager_Arrow { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 0 3px; border-radius: 6px; color: var(--Color_Link); cursor: pointer; transition: color 0.12s ease, background 0.12s ease; }
.Pager_Arrow:hover { color: var(--Color_Main); background: hsl(from var(--Color_Main) h s l / 0.09); }
.Pager_Arrow svg { width: 22px; height: 22px; display: block; }
.Pager_Arrow.Off { color: var(--Color_Text_Soft); opacity: 0.5; cursor: default; pointer-events: none; }

/* ===== TOP-PANEL WEATHER ICON: DRIVEN BY js/sky_box/main.js ===== */
.Weather_Icon_Wrap { position: relative; display: inline-block; vertical-align: middle; line-height: 0; border-radius: 6px; }
.Weather_Icon_Wrap img { display: block; }
.Weather_Icon_Layer { position: absolute; top: 0; left: 0; }
.Weather_Icon_Fade { transition: opacity 5s ease; }
.Weather_Icon_Flash { animation: Weather_Icon_Flash 3s ease-out; }
@keyframes Weather_Icon_Flash { 0% { box-shadow: 0 0 0 0 rgba(0,125,255,0); } 25% { box-shadow: 0 0 12px 3px rgba(0,125,255,0.55); } 100% { box-shadow: 0 0 0 0 rgba(0,125,255,0); } }

/* ===== UTILITIES: DECLARED AFTER THE COMPONENTS TO WIN THE TIE ===== */

/* ----- LAYOUT: REPLACES THE DEPRECATED TABLE ATTRIBUTES ----- */
.Chrome_Table { border-spacing: 0; }
.Valign_Top { vertical-align: top; }
.Width_Full { width: 100%; }
.Height_Full { height: 100%; }
.Size_Full { width: 100%; height: 100%; }
.Icon_Inline { display: inline; vertical-align: -2px; cursor: pointer; }

.Align_Center { text-align: center; text-align: -webkit-center; text-align: -moz-center; }
.Align_Right { text-align: right; text-align: -webkit-right; text-align: -moz-right; }
.Align_Left { text-align: left; text-align: -webkit-left; text-align: -moz-left; }

/* ----- MISC ----- */
.Cursor_Pointer { cursor: pointer; }

/* ----- BUTTON SIZES (PAIR WITH A COLOR CLASS) ----- */
.Main_Button, .Yes_Button, .No_Button, .Gray_Button { width: 200px; height: 40px; font-size: calc(18px + var(--Font_Header_Offset)); }

.Button_X_Large { width: 260px; height: 48px; font-size: calc(20px + var(--Font_Header_Offset)); }
.Button_Large { width: 200px; height: 40px; font-size: calc(18px + var(--Font_Header_Offset)); }
.Button_Medium { width: 160px; height: 40px; font-size: calc(18px + var(--Font_Header_Offset)); }
.Button_Small { width: 120px; height: 34px; font-size: calc(16px + var(--Font_Header_Offset)); }

/* ----- POPUP WIDTHS (ON THE Level_1/Level_2 CHILD, PAIRED WITH .Popup_Card) ----- */
.Popup_Small { width: 520px; }
.Popup_Medium { width: 760px; }
.Popup_Large { width: 820px; }
.Popup_X_Large { width: 1174px; }

/* ----- TEXT ----- */
.Font_Bold { font-weight: bold; }
.Font_Color_Positive { color: var(--Color_Positive); font-weight: bold; }
.Font_Color_Negative { color: var(--Color_Negative); font-weight: bold; }
.Font_Color_Neutral { color: var(--Color_Neutral); font-weight: bold; }
.Font_Color_Disabled { color: var(--Color_Muted); font-weight: bold; }
.Font_Color_Muted
	{
		color: var(--Color_Muted);
	}
.Font_Color_Health
	{
		color: var(--Color_Stat_Health);
		font-weight: bold;
	}
.Font_Color_Mana
	{
		color: var(--Color_Stat_Mana);
		font-weight: bold;
	}
.Font_Color_Stat
	{
		color: var(--Color_Stat_Ability);
		font-weight: bold;
	}
.Font_Size_X_Large { font-size: var(--Font_Text_X_Large); }
.Font_Size_Large { font-size: var(--Font_Text_Large); }
.Font_Size_Mid { font-size: var(--Font_Text_Mid); }
.Font_Size_Small { font-size: var(--Font_Text_Small); }
.Font_Size_Tiny { font-size: var(--Font_Text_Tiny); }
.Font_Size_Title { font-size: calc(26px + var(--Font_Header_Offset)); }
.Font_Uppercase { text-transform: uppercase; }
.Font_No_Wrap { white-space: nowrap; }
.Thought_Unit { display: inline-block; max-width: 100%; text-wrap: balance; }
.Font_Numeric_Tabular { font-variant-numeric: tabular-nums; }

.Prose_Text { line-height: 1.6; }

/* ----- SPACING ----- */
.Pad_All_10 { padding: 10px; }
.Pad_All_20 { padding: 20px; }
.Pad_All_40 { padding: 40px; }
.Pad_Top_2 { padding-top: 2px; }
.Pad_Top_5 { padding-top: 5px; }
.Pad_Top_10 { padding-top: 10px; }
.Pad_Top_20 { padding-top: 20px; }
.Pad_Top_40 { padding-top: 40px; }
.Pad_Bottom_5 { padding-bottom: 5px; }
.Pad_Bottom_10 { padding-bottom: 10px; }
.Pad_Bottom_20 { padding-bottom: 20px; }
.Pad_Left_4 { padding-left: 4px; }
.Pad_Left_10 { padding-left: 10px; }
.Pad_Left_20 { padding-left: 20px; }
.Pad_Right_10 { padding-right: 10px; }
.Pad_Sides_20 { padding-left: 20px; padding-right: 20px; }
.Pad_Sides_40 { padding-left: 40px; padding-right: 40px; }
.Flex_Column { display: flex; flex-direction: column; }
.Inline_Flex_Row { display: inline-flex; align-items: center; }
.Gap_5 { gap: 5px; }
.Gap_10 { gap: 10px; }
.Gap_20 { gap: 20px; }

/* ===== THEMES: CLASSIC IS THE :root DEFAULT; A NAMED BLOCK OVERRIDES TOKENS ===== */

/* ----- LIGHT AMBER (ESPRESSO CHROME, COPPER HEADINGS) ----- */
.Theme_Light_Amber
	{
		--Color_Main: #6A2107;
		--Color_Main_Soft: hsl(from var(--Color_Main) h calc(s + 5) calc(l + 49));
		--Color_Chrome: #422616;
		--Color_On_Chrome: #FDF6ED;
		--Color_Secondary: #F4E3D1;
		--Color_Secondary_Raised: hsl(from var(--Color_Secondary) h s calc(l - 4));
		--Color_Secondary_Line: hsl(from var(--Color_Secondary) h s calc(l - 11));
		--Color_Secondary_Deep: hsl(from var(--Color_Secondary) h s calc(l - 23));
		--Color_Div_1: #ECD0B4;
		--Color_Div_2: #F4E3D1;
		--Color_Div_3: #FCF6EE;
		--Color_Page_Bg: var(--Color_Div_2);
		--Color_Surface_Tint: #FCF6EE;
		--Color_Surface_Alt: #EFDAC6;
		--Color_Accent: #F8CA65;
		--Color_Accent_Deep: hsl(from var(--Color_Accent) h s calc(l - 9));
		--Color_Accent_Soft: hsl(from var(--Color_Accent) h s calc(l + 4));
		--Color_Accent_Pale: hsl(from var(--Color_Accent) h s calc(l + 11));
		--Color_Accent_Strong: #C46D00;
		--Color_Link: #A21B18;
		--Color_Positive: #33600E;
		--Color_Negative: #9A0B33;
		--Color_Positive_Soft: #DDEED4;
		--Color_Negative_Soft: #FFDFE0;
		--Color_Neutral: #7B4E00;
		--Color_Neutral_Soft: #FDE4BB;
		--Color_Text: #2F2016;
		--Color_Text_Mid: #4A392E;
		--Color_Text_Soft: #64554B;
		--Color_Text_Cool: #50453D;
		--Color_Icon_Muted: #7A6F66;
		--Color_Muted: #625B56;
		--Color_Muted_Light: #E9E4DE;
		--Color_Border: #897E74;
		--Color_Border_Strong: #3F2F24;
		--Color_Shadow: #211208;
	}

/* ----- LIGHT SAPPHIRE (ICE-WHITE NEUTRALS, SAPPHIRE CHROME) ----- */
.Theme_Light_Sapphire
	{
		--Color_Main: #00447F;
		--Color_Main_Soft: hsl(from var(--Color_Main) h calc(s + 5) calc(l + 49));
		--Color_Chrome: #003673;
		--Color_On_Chrome: #F2F7FC;
		--Color_Secondary: #DEE9F3;
		--Color_Secondary_Raised: hsl(from var(--Color_Secondary) h s calc(l - 4));
		--Color_Secondary_Line: hsl(from var(--Color_Secondary) h s calc(l - 11));
		--Color_Secondary_Deep: hsl(from var(--Color_Secondary) h s calc(l - 23));
		--Color_Div_1: #C1D5E8;
		--Color_Div_2: #DEE9F3;
		--Color_Div_3: #F2F7FC;
		--Color_Page_Bg: var(--Color_Div_2);
		--Color_Surface_Tint: #F2F7FC;
		--Color_Surface_Alt: #D3E2F0;
		--Color_Accent: #F6D476;
		--Color_Accent_Deep: hsl(from var(--Color_Accent) h s calc(l - 9));
		--Color_Accent_Soft: hsl(from var(--Color_Accent) h s calc(l + 4));
		--Color_Accent_Pale: hsl(from var(--Color_Accent) h s calc(l + 11));
		--Color_Accent_Strong: #B88000;
		--Color_Link: #065CA4;
		--Color_Positive: #03642B;
		--Color_Negative: #A80018;
		--Color_Positive_Soft: #D6F0DA;
		--Color_Negative_Soft: #FFDFDC;
		--Color_Neutral: #774F00;
		--Color_Neutral_Soft: #FDE4BB;
		--Color_Text: #1B2737;
		--Color_Text_Mid: #354150;
		--Color_Text_Soft: #525C69;
		--Color_Text_Cool: #404952;
		--Color_Icon_Muted: #68737D;
		--Color_Muted: #555C62;
		--Color_Muted_Light: #DFE5EB;
		--Color_Border: #77828C;
		--Color_Border_Strong: #233447;
		--Color_Shadow: #091628;
	}

.Theme_Dark, :root:has(.Theme_Dark) { color-scheme: dark; }

/* ----- DARK AMBER (BLACK & GOLD) ----- */
.Theme_Dark_Amber
	{
		--Color_Secondary: #1a1712;
		--Color_Secondary_Raised: hsl(from var(--Color_Secondary) h s calc(l + 5));
		--Color_Secondary_Line: hsl(from var(--Color_Secondary) h s calc(l + 14));
		--Color_Secondary_Deep: hsl(from var(--Color_Secondary) h s calc(l + 24));
		--Color_Surface: #110e09;
		--Color_Surface_Alt: #2d2a23;
		--Color_Surface_Tint: var(--Color_Surface);
		--Color_Div_1: #181510;
		--Color_Div_2: #29241c;
		--Color_Div_3: #110e09;
		--Color_Page_Bg: var(--Color_Div_2);
		--Color_Icon_Muted: hsl(40 9% 60%);
		--Color_Text: #ece5d6;
		--Color_Text_Mid: #BBAF9C;
		--Color_Text_Soft: #948B7B;
		--Color_Text_Cool: hsl(40 16% 70%);
		--Color_Muted: hsl(40 8% 54%);
		--Color_Muted_Light: hsl(40 12% 18%);
		--Color_Main: #EEBB58;
		--Color_Main_Soft: hsl(from var(--Color_Main) h s calc(l - 18));
		--Color_Chrome: #15120c;
		--Color_Accent: #D2590D;
		--Color_Accent_Deep: #EC7B38;
		--Color_Accent_Soft: hsl(from var(--Color_Accent) h s calc(l + 4));
		--Color_Accent_Pale: #43260A;
		--Color_Accent_Strong: #C78B00;
		--Color_Positive: #5FCC74;
		--Color_Negative: #FF645D;
		--Color_Positive_Soft: #16301A;
		--Color_Negative_Soft: #421C19;
		--Color_Neutral: #FFE79C;
		--Color_Neutral_Soft: #3C2601;
		--Color_Link: #EF7926;
		--Color_Border: #766D5F;
		--Color_Border_Strong: hsl(38 16% 50%);
		--Color_Shadow: hsl(35 60% 2%);
		--Color_On_Accent: #ffffff;
		--Color_On_Chrome: hsl(42 28% 90%);
		--Color_Btn_Main: #c99315;
		--Color_Btn_Yes: hsl(108 40% 38%);
		--Color_Btn_No: hsl(12 58% 49%);
	}

/* ----- DARK SAPPHIRE (ICY BLUE) ----- */
.Theme_Dark_Sapphire
	{
		--Color_Secondary: #0f1626;
		--Color_Secondary_Raised: hsl(from var(--Color_Secondary) h s calc(l + 5));
		--Color_Secondary_Line: hsl(from var(--Color_Secondary) h s calc(l + 14));
		--Color_Secondary_Deep: hsl(from var(--Color_Secondary) h s calc(l + 24));
		--Color_Surface: #080d18;
		--Color_Surface_Alt: #2c323d;
		--Color_Icon_Muted: hsl(214 14% 64%);
		--Color_Surface_Tint: var(--Color_Surface);
		--Color_Div_1: #0D1424;
		--Color_Div_2: #162138;
		--Color_Div_3: #080d18;
		--Color_Page_Bg: var(--Color_Div_2);
		--Color_Text: #dde6f2;
		--Color_Text_Mid: #A3B3C4;
		--Color_Text_Soft: #818E9B;
		--Color_Text_Cool: hsl(210 30% 75%);
		--Color_Muted: hsl(214 12% 55%);
		--Color_Muted_Light: hsl(220 26% 18%);
		--Color_Main: #4ea8ff;
		--Color_Main_Soft: hsl(from var(--Color_Main) h s calc(l - 18));
		--Color_Chrome: #0b1120;
		--Color_Accent: #ecd06a;
		--Color_Accent_Deep: hsl(from var(--Color_Accent) h s calc(l - 9));
		--Color_Accent_Soft: hsl(from var(--Color_Accent) h s calc(l + 4));
		--Color_Accent_Pale: #413710;
		--Color_Accent_Strong: #ECD06A;
		--Color_Positive: #68D36F;
		--Color_Negative: #FF7269;
		--Color_Positive_Soft: #182F19;
		--Color_Negative_Soft: #421C19;
		--Color_Neutral: #D6A20A;
		--Color_Neutral_Soft: #402800;
		--Color_Link: #51D8F1;
		--Color_Border: #64707D;
		--Color_Border_Strong: hsl(216 28% 50%);
		--Color_Shadow: hsl(220 60% 2%);
		--Color_On_Accent: #ffffff;
		--Color_On_Chrome: hsl(212 30% 90%);
		--Color_Btn_Main: hsl(212 70% 42%);
		--Color_Btn_Yes: #218B30;
		--Color_Btn_No: #D02D27;
	}

/* ----- SHARED DARK STRUCTURE ----- */
.Theme_Dark .Main_Button, .Theme_Dark .Yes_Button, .Theme_Dark .No_Button, .Theme_Dark .Gray_Button { color: var(--Color_On_Accent); }
.Theme_Dark .Main_Button { --Btn_Base: var(--Color_Btn_Main); }
.Theme_Dark .Yes_Button { --Btn_Base: var(--Color_Btn_Yes); }
.Theme_Dark .No_Button { --Btn_Base: var(--Color_Btn_No); }
.Theme_Dark_Amber .Main_Button { color: #1d1810; }
.Theme_Dark .Notification_Item:hover .Account_Badge > span { color: var(--Color_Surface); }
.Theme_Dark { --Color_Quality_2: #4d97ff; --Color_Quality_3: hsl(275 95% 76%); --Color_Quality_5: #ff6058; --Color_Stat_Ability: hsl(275 95% 76%); }
.Theme_Dark .Surface_Tertiary_Trans { background-color: hsl(from var(--Color_Surface) h s l / 0.75); }
.Theme_Dark .Account_Box.Surface_Tertiary_Trans { background-color: hsl(from var(--Color_Surface) h s l / 0.95); }
.Theme_Dark .Login_Card { background-color: hsl(from var(--Color_Surface) h s l / 0.95); }
.Theme_Dark .Settings_Group { border-color: var(--Color_Secondary_Line); }
.Theme_Dark .Currency_Tile { background: color-mix(in srgb, var(--Cur_Accent) 18%, var(--Color_Surface)); color: var(--Color_Text); }
.Theme_Dark .Settings_Cog { color: var(--Color_Border_Strong); }
.Theme_Dark .Settings_Cog:hover { color: var(--Color_Accent_Strong); }
.Theme_Dark .Settings_Cog svg { stroke: hsl(from var(--Color_Border_Strong) h s calc(l - 12)); }
textarea:focus,
select:focus,
input[type=text]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus
	{
		background-color: var(--Color_Accent);
	}
select:focus option
	{
		background-color: var(--Color_Surface);
		color: var(--Color_Text);
	}
option:disabled,
select:focus option:disabled { color: var(--Color_Text_Soft); }
.Theme_Dark textarea:focus,
.Theme_Dark select:focus,
.Theme_Dark input[type=text]:focus,
.Theme_Dark input[type=email]:focus,
.Theme_Dark input[type=number]:focus,
.Theme_Dark input[type=password]:focus
	{
		background-color: var(--Color_Surface);
	}

/* ===== DOCK BAR: VIEWPORT-FIXED AT z-index 1900 ===== */
.Dock_Bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1900; background: var(--Color_Div_1); border-top: 2px solid var(--Color_Secondary_Deep); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18); }
.Dock_Bar_Inner { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 14px 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.Dock_Bar_Actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

#Div_Cookie_Banner .Dock_Bar_Inner { display: block; padding-top: 20px; padding-bottom: 20px; }
#Div_Cookie_Banner .Content_Padding.Div_3 { display: flex; align-items: stretch; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
#Div_Cookie_Banner .Settings_Row_Text { display: flex; flex-direction: column; }
#Div_Cookie_Banner .Settings_Row_Label { font-size: var(--Font_Text_X_Large); }
#Div_Cookie_Banner .Settings_Row_Hint { font-size: var(--Font_Text_Mid); max-width: 600px; }
#Div_Cookie_Banner .Settings_Row_Text > .Text_Link { margin-top: auto; align-self: flex-start; }
#Div_Cookie_Banner .Dock_Bar_Actions { flex-direction: column; align-items: flex-end; justify-content: center; gap: 30px; }

/* ===== TOUCH DEVICES: (hover: none) and (pointer: coarse) ===== */
a, button, input, select, textarea, [role="button"], .Nav_Cell, .Close_X, .Step_Button, .Toggle_Switch { touch-action: manipulation; }
.Touch_Only { display: none; }
.Install_App_Control { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 280px; }
@media (hover: none) and (pointer: coarse)
	{
		.Touch_Only { display: block; }
		.Settings_Category.Touch_Only, .Settings_Row.Touch_Only { display: flex; }
		.Touch_Hidden { display: none; }
		.Popup_Card_Body, .Os_Scroll, .Div_Popup_Container_Level_1_Child, .Div_Popup_Container_Level_2_Child { overscroll-behavior: auto; }
		.Settings_Modal, #Div_Cookie_Banner, #Div_Cookie_Consent_Modal { zoom: var(--Device_Scale, 1); }
		.Popup_Box { zoom: calc(var(--Device_Scale, 1) / var(--Canvas_Zoom, 1)); --Zoom: 1; }
		.Settings_Modal { max-width: calc(var(--Device_Width, 100vw) - 60px); max-height: calc(var(--Device_Height, 100vh) * 0.88); }
		.Popup_Card { max-height: calc(var(--Device_Height, 100vh) * 0.88); }
		.Popup_Box { max-width: calc(var(--Device_Width, 100vw) - 32px); }
		#Div_Cookie_Consent_Modal .Div_Popup_Container_Level_1_Child { max-width: calc(var(--Device_Width, 100vw) * 0.95); max-height: calc(var(--Device_Height, 100vh) - var(--Popup_Anchor_Top) - 16px); }
		#Div_Cookie_Banner .Dock_Bar_Actions { gap: 12px; }
		.Card_Head { padding-left: 36px; padding-right: 36px; }
		.Settings_Row_Control { margin-left: auto; margin-right: auto; }
		.Install_App_Control { align-items: center; text-align: center; }
	}