@import "/css/shared/theme/themeToggle.css";
@import "/css/shared/nav.css";
@import "/css/shared/nav-dropdowns.css";

/* REDUCED MOTION SUPPORT */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:root {
  /* COLOUR PALETTE */
  --colour-bg:    #FFFFFF;   /* page background */
  --colour-paper: #F5F5F5;   /* cards, panels */
  --colour-text:  #121212;   /* primary body text */
  --colour-muted: #D6D6D6;   /* secondary text */

  --colour-primary:   #104C91;
  --primary-hover:    #1461B8;
  --colour-secondary: #1F8AC0;
  --colour-accent:    #FFCB77;

  --colour-popup-paper: #FAFAFA;
  --colour-popup-bg: #D6D6D680;

  --colour-filter: #3D3D3D80;


  /* STATUS */
  --colour-success: #10B981;
  --colour-warning: #F59E0B;
  --colour-error:   #EF4444;

  /* CHART PALETTE */
  --colour-chart-1: #1F8AC0;
  --colour-chart-2: #17B890;
  --colour-chart-3: #D4A84B;
  --colour-chart-4: #8B6CC1;
  --colour-chart-5: #E07A5F;
  --colour-chart-6: #3DBFA0;

  /* TILE TINTS */
  --tile-tint-blue:   rgba(31, 138, 192, 0.06);
  --tile-tint-teal:   rgba(23, 184, 144, 0.06);
  --tile-tint-gold:   rgba(212, 168, 75, 0.06);
  --tile-tint-violet: rgba(139, 108, 193, 0.06);
  --tile-tint-coral:  rgba(224, 122, 95, 0.06);

  /* BAR TRACK */
  --bar-track: #E8E8E8;

  /* WELCOME HERO GRADIENT */
  --welcome-gradient: linear-gradient(135deg, #104C91 0%, #1F8AC0 60%, #17B890 100%);

  /* NAV SIDEBAR */
  --nav-sidebar-width: calc(var(--card-width-xs) + var(--space-32));
  --nav-sidebar-collapsed-width: 64px;

  /* HOLO PLACEHOLDER SHIMMER */
  --holo-gradient: linear-gradient(
    135deg,
    rgba(31, 138, 192, 0.15) 0%,
    rgba(139, 108, 193, 0.15) 25%,
    rgba(23, 184, 144, 0.15) 50%,
    rgba(212, 168, 75, 0.15) 75%,
    rgba(31, 138, 192, 0.15) 100%
  );

  /* TYPOGRAPHY */
  --font-header:     "Montserrat", sans-serif; /* header font */
  --font-paragraph:  "Hind", sans-serif;       /* paragraph font*/
  --font-weight-sm: 400;
  --font-weight-md: 600;
  --font-weight-lg: 700;

  --text-xs:    12.8px; /* major third scale (1.250) */
  --text-sm:    16px; 
  --text-md:    25px;
  --text-lg:    39.06px;
  --text-xl:    61.04px;

  /* SPACING SCALE */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* RADIUS & SHADOWS */
  --radius-xs:  8px;
  --radius-sm:  16px;
  --radius-md:  24px;

  --shadow-key-umbra: rgba(0,0,0,0.2);
  --shadow-key-penumbra: rgba(0,0,0,0.14);
  --shadow-key-ambient: rgba(0,0,0,0.12);
	
 /* text-shadow:
	0.1em 0 var(--colour-bg), 
	0 0.1em var(--colour-bg), 
	-0.1em 0 var(--colour-bg), 
	0 -0.1em var(--colour-bg), 
	-0.1em -0.1em var(--colour-bg), 
	-0.1em 0.1em var(--colour-bg), 
	0.1em -0.1em var(--colour-bg), 
	0.1em 0.1em var(--colour-bg); */

 /* .example {
  box-shadow:
    0 2px 1px -1px var(--shadow-key-umbra),
    0 1px 1px 0    var(--shadow-key-penumbra),
    0 1px 3px 0    var(--shadow-key-ambient);
 }
	h1 {
  text-shadow:
    2px 2px 4px rgba(0,0,0,0.3);
 } 
 */


  /* TRANSITIONS */
  /* --ease-fast:  150ms ease-out;
  --ease-normal: 300ms ease-out; */

  /* DROPDOWN MENU */
  --nav-dropdown-bg: var(--colour-paper);
  --nav-dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  --nav-dropdown-radius: var(--radius-sm);
  --dropdown-open-duration: 150ms;
  --dropdown-close-duration: 100ms;

  /* PREMIUM */
  --colour-premium: #D4A84B;
  --colour-premium-hover: #C49A3D;
  --colour-premium-bg: rgba(212, 168, 75, 0.1);

  /* AVATAR */
  --avatar-text: #FAFAFA;
  --avatar-size: 36px;
  --avatar-size-lg: 48px;

  /* CARD DIMENSIONS*/
  --card-width-xs: 120px;
  --card-hight-xs: 168px;
  --card-width-sm: 286px;
  --card-hight-sm: 400px;
  --card-width-md: 437px;
  --card-hight-md: 608px;
  --card-width-lg: 572px;
  --card-hight-lg: 800px;

  /* ICON / CARD-FAN CONTROLS */
  --icon-size: 32px;   /* height of each icon box used by the button */
  --overlap: -14px;    /* negative left margin to overlap cards */

  /* VARIANT COLOURS */
  --ss-fill: #fafafa;    /* default card body */
  --ss-stroke:  #1F1B24;   /* dark stroke so outlines read on light bg */
  --accent-ss:  #C63B46;   /* rich, warm red (SS) */
  --accent-ps:  #1F6FC8;   /* solid, readable blue (PS) */
  --accent-pps: #C66A53;   /* warm terracotta (PPS) */
  --accent-pms: #7C4FB0;   /* muted violet (PMS) */
  --accent-default: #fafafa;

  /* Z-INDEX SCALE */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 101;
  --z-navbar: 200;
  --z-overlay: 900;
  --z-modal: 1000;

  /* FAN BUTTON STATES */
  --fan-gray: #B0B0B0;
  --fan-gray-stroke: #888888;
  --fan-owned-fill: var(--colour-secondary);
  --fan-owned-stroke: #165F85;
  --fan-complete-glow: var(--colour-accent);

}

[data-theme="dark"] {
  --colour-bg:    #323232;
  --colour-paper: #3D3D3D;
  --colour-text:  #FAFAFA;
  --colour-muted: #6B6B6B;
  --colour-popup-paper: #292929;
  --colour-popup-bg: #3D3D3D80;

  /* DROPDOWN MENU - dark mode */
  --nav-dropdown-bg: #2A2A2A;
  --nav-dropdown-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);

  /* ICON / CARD-FAN tuned for dark mode */
  /* Card body sits a bit above the background so the white stroke sits on top */
  --ss-fill:    #1F1F1F;   /* very dark card body (distinct from page bg) */
  --ss-stroke:  #F5F5F5;   /* high-contrast stroke so card outlines read clearly */

  /* Accents tuned for visibility on dark backgrounds.
    These work well as stroke accents (colored outline) or as fills if you prefer full-color cards. */
  --accent-ss:  #FF6B6B;   /* warm but not neon red (Shiny/SS) */
  --accent-ps:  #4DA6FF;   /* bright, readable blue (PS) */
  --accent-pps: #FF8A5B;   /* warm salmon/orange (PPS) */
  --accent-pms: #C48CFF;   /* soft violet (PMS) */

  --accent-default: #2A2A2A; /* fallback card body for unknown variants */

  /* FAN BUTTON STATES - dark mode */
  --fan-gray: #555555;
  --fan-gray-stroke: #777777;
  --fan-owned-fill: #2BA0DB;
  --fan-owned-stroke: #1F8AC0;

  /* CHART PALETTE - dark */
  --colour-chart-1: #2BA0DB;
  --colour-chart-2: #20D4A2;
  --colour-chart-3: #E8B84A;
  --colour-chart-4: #A78BDB;
  --colour-chart-5: #FF8A6A;
  --colour-chart-6: #4EEBD4;

  /* STATUS - dark */
  --colour-success: #34D399;
  --colour-warning: #FBBF24;
  --colour-error:   #F87171;

  /* TILE TINTS - dark */
  --tile-tint-blue:   rgba(43, 160, 219, 0.10);
  --tile-tint-teal:   rgba(32, 212, 162, 0.10);
  --tile-tint-gold:   rgba(232, 184, 74, 0.10);
  --tile-tint-violet: rgba(167, 139, 219, 0.10);
  --tile-tint-coral:  rgba(255, 138, 106, 0.10);

  /* BAR TRACK - dark */
  --bar-track: #4A4A4A;

  /* WELCOME HERO GRADIENT - dark */
  --welcome-gradient: linear-gradient(135deg, #0A2E56 0%, #104C91 50%, #0E5C5C 100%);

  /* HOLO GRADIENT - dark */
  --holo-gradient: linear-gradient(
    135deg,
    rgba(43, 160, 219, 0.12) 0%,
    rgba(167, 139, 219, 0.12) 25%,
    rgba(32, 212, 162, 0.12) 50%,
    rgba(232, 184, 74, 0.12) 75%,
    rgba(43, 160, 219, 0.12) 100%
  );
}

/* GLOBAL FOCUS STYLES */
:focus-visible {
  outline: 3px solid var(--colour-primary);
  outline-offset: 2px;
}

/* Remove default focus ring only when custom is provided */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

body {
	background-color: var(--colour-bg, #FAFAFA);
	color: var(--colour-text, #121212);
  	font-family: var(--font-header, "Montserrat", sans-serif);
  	font-weight: var(--font-weight-lg);
  	font-optical-sizing: auto;
  	font-style: normal;
	margin: 0;
	padding: 16px clamp(16px, 5vw, 140px) 0 clamp(16px, 5vw, 140px);
}

/* Old navbar styles moved to nav.css */

.hero-contents {
	min-height: 100vh;
}

.hero-signup {
	text-align: center;
	margin: 40px auto 16px ;
	background: var(--colour-paper);
	border-radius: var(--radius-md);
	max-height: 560px;
	max-width: 1640px;
	min-width: 560px;
	box-shadow:
    0 20px 30px rgba(0,0,0,0.15),
    0 8px 10px rgba(0,0,0,0.10);
}

.hero-signup-text {
	font-size: var(--text-xl);
	padding: 64px 0px;
	margin: 0px;
}

.signup-button {
	font-family: var(--font-header);
	font-weight: var(--font-weight-lg);
	font-style: normal;
	font-size: var(--text-lg);
	text-decoration: none;
	background-color: var(--colour-primary);
	border: none;
	color: #FAFAFA; /* text colour  */
	padding: 32px 32px;
	margin: 0px 0px 64px 0px;
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: 0.3s
}

.signup-button:hover {
	background-color: var(--primary-hover);
	box-shadow: 0 0 2px 5px #104C915f; /* rework the shadow*/
	color: #FAFAFA;
}

.signup-button:focus-visible {
	outline: 3px solid var(--colour-accent);
	outline-offset: 2px;
}

/* The Modal (background) */
.popup {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: var(--z-modal); /* Sit on top of everything */
	padding-top: 120px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: var(--colour-popup-bg) /* Black w/ opacity */
}
  
/* Modal Content */
.popup-modal {
	display: none; /* Hidden by default */
	background-color: var(--colour-popup-paper);
	margin: auto;
	padding: var(--space-32) var(--space-48);
	border: 1px solid var(--colour-secondary);
	max-width: 450px;
	border-radius: var(--radius-sm);
	position: relative;
	color: var(--colour-text);
	box-shadow:
		0 20px 30px rgba(0, 0, 0, 0.15),
		0 8px 10px rgba(0, 0, 0, 0.10);
}

.popup-modal h1 {
	font-size: var(--text-xl);
	margin: 0 0 var(--space-16) 0;
	text-align: center;
}

/* Subtitle paragraph (e.g., "Already have an account?") */
.popup-modal h1 + p {
	font-size: var(--text-sm);
	margin: 0 0 var(--space-32) 0;
	text-align: center;
}

/* General paragraphs */
.popup-modal p {
	font-size: var(--text-sm);
	margin: var(--space-16) 0;
	text-align: center;
}

.popup-modal p a,
.popup-modal a {
	color: var(--colour-primary);
	text-decoration: none;
	font-weight: var(--font-weight-md);
	transition: color 0.2s ease;
}

.popup-modal p a:hover,
.popup-modal a:hover {
	color: var(--primary-hover);
}

.popup-modal p a:focus-visible,
.popup-modal a:focus-visible {
	outline: 2px solid var(--colour-secondary);
	outline-offset: 2px;
	border-radius: 2px;
}

.popup-modal label {
	font-size: var(--text-sm);
	font-weight: var(--font-weight-md);
	margin-bottom: var(--space-8);
	display: block;
}

.popup-modal input {
	margin-bottom: var(--space-16);
}

.popup-modal small {
	display: block;
	font-size: var(--text-xs);
	color: var(--colour-muted);
	margin-top: calc(-1 * var(--space-8));
	margin-bottom: var(--space-16);
}

/* Add space around submit button */
.popup-modal .submit {
	margin-top: var(--space-24);
	margin-bottom: var(--space-24);
	font-size: 18px;
	padding: 18px var(--space-32);
}

.popup-modal .signup-checkbox,
.popup-modal .signup-age-note {
	font-size: var(--text-xs);
}

/* Close (×) button styling */
.popup-close {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
	border: none;
	width: 32px;
	height: 32px;
	font-size: 24px;
	line-height: 1;
	color: var(--colour-text);
	cursor: pointer;
	border-radius: var(--radius-xs);
	transition: background-color 0.2s ease, color 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-close:hover {
	background-color: rgba(0, 0, 0, 0.05);
	color: var(--colour-primary);
}

.popup-close:focus-visible {
	outline: 3px solid var(--colour-primary);
	outline-offset: 2px;
}

/* Full-width input fields */
input[type=text], input[type=password], input[type=email] {
	width: 100%;
	padding: 15px;
	display: inline-block;
	border: 1px solid var(--colour-muted);
	border-radius: var(--radius-xs);
	background: var(--colour-paper);
	color: var(--colour-text);
	font-family: var(--font-paragraph);
	font-size: var(--text-sm);
	box-sizing: border-box;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

input[type=text]:hover,
input[type=password]:hover,
input[type=email]:hover {
	border-color: var(--colour-secondary);
}

input[type=text]:focus-visible,
input[type=password]:focus-visible,
input[type=email]:focus-visible {
	background-color: var(--colour-popup-paper);
	border-color: var(--colour-secondary);
	outline: 3px solid var(--colour-secondary);
	outline-offset: 0;
}

.submit {
	background-color: var(--colour-primary);
	padding: 15px var(--space-32);
	border: none;
	border-radius: var(--radius-xs);
	cursor: pointer;
	color: #FAFAFA;
	font-family: var(--font-header);
	font-weight: var(--font-weight-lg);
	font-size: var(--text-sm);
	width: 50%;
	display: block;
	margin: 0 auto;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.submit:hover {
	background-color: var(--primary-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.submit:active {
	transform: translateY(0);
	box-shadow: none;
}

.submit:focus-visible {
	outline: 3px solid var(--colour-accent);
	outline-offset: 2px;
}

.submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.space {
	padding: 64px;
}

.hero-cards-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--card-width-md), 1fr));
	gap: 32px;
	align-items: center;
	justify-items: center;
	position: relative;

}

.hero-card {
	position: relative;
	width: var(--card-width-md);
	height: var(--card-hight-md);
	overflow: hidden;
	margin: 16px;
	border-radius: var(--radius-sm);
	box-shadow:
	    0 20px 30px rgba(0,0,0,0.15),
	    0 8px 10px rgba(0,0,0,0.10);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	text-decoration: none;
	color: inherit;
}

.hero-card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 24px 38px rgba(0, 0, 0, 0.20),
		0 12px 16px rgba(0, 0, 0, 0.14);
}

.hero-card-media {
	width: 100%;
	height: 100%;
}

.hero-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hero-card-media picture {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	transition: opacity 4s ease;
}

.hero-card-media picture.active {
	opacity: 1;
}

.hero-card-info {
	position: absolute;
	width: var(--card-width-md);
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background-color: var(--colour-popup-bg);
	bottom: 0;
	box-sizing: border-box;
	padding: 12px 24px;
}

.hero-filter {
	position: absolute;
	width: var(--card-width-md);
	height: var(--card-hight-md);
	display: flex;
	border-radius: var(--radius-sm);
	background-color: var(--colour-popup-bg);
	bottom: 0;
}

.hero-card-coming-soon {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	padding: 16px 0;
	text-align: center;
	font-family: var(--font-header);
	font-size: var(--text-md);
	font-weight: var(--font-weight-lg);
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #FAFAFA;
	background: rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.hero-card-info img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}

/* ========================================
   SUGGEST-A-TCG HERO CARD
   ======================================== */

.hero-card-suggest {
	background: linear-gradient(135deg, var(--colour-primary), var(--colour-secondary));
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-card-suggest:focus-visible {
	outline: 3px solid var(--colour-accent);
	outline-offset: 4px;
}

.hero-card-suggest-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-48);
	gap: var(--space-16);
}

.hero-card-suggest-icon {
	width: 80px;
	height: 80px;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: var(--space-8);
	flex-shrink: 0;
}

.hero-card-suggest-heading {
	font-family: var(--font-header);
	font-size: var(--text-lg);
	font-weight: var(--font-weight-lg);
	color: #FAFAFA;
	margin: 0;
	line-height: 1.2;
}

.hero-card-suggest-description {
	font-family: var(--font-paragraph);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-sm);
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	line-height: 1.5;
	max-width: 320px;
}

.hero-card-suggest-cta {
	display: inline-block;
	margin-top: var(--space-16);
	padding: 12px 32px;
	background-color: rgba(255, 255, 255, 0.15);
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--radius-sm);
	color: #FAFAFA;
	font-family: var(--font-header);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-md);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.hero-card-suggest:hover .hero-card-suggest-cta {
	background-color: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.8);
}

/* ========================================
   OAUTH BUTTONS
   ======================================== */

/* Divider between form and OAuth buttons */
.oauth-divider {
	display: flex;
	align-items: center;
	text-align: center;
	margin: var(--space-8) 0 var(--space-16) 0;
}

.oauth-divider::before,
.oauth-divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid var(--colour-muted);
}

.oauth-divider span {
	padding: 0 16px;
	color: var(--colour-text);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-sm);
	opacity: 0.7;
}

/* OAuth buttons container */
.oauth-buttons {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: var(--space-16);
	margin-bottom: var(--space-8);
}

/* Base OAuth button style */
.oauth-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	border: 1px solid var(--colour-muted);
	border-radius: 50%;
	background: var(--colour-paper);
	color: var(--colour-text);
	cursor: pointer;
	transition: all 0.2s ease;
}

.oauth-btn:hover {
	background: var(--colour-bg);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.oauth-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* Provider-specific hover colors */
.oauth-google:hover {
	border-color: #4285f4;
}

.oauth-discord:hover {
	border-color: #5865F2;
}

.oauth-apple:hover {
	border-color: #000000;
}

/* Dark theme adjustments */
[data-theme="dark"] .oauth-btn {
	background: var(--colour-paper);
	border-color: #4a4a4a;
}

[data-theme="dark"] .oauth-btn:hover {
	background: #3a3a3a;
}

/* Dark mode modal adjustments */
[data-theme="dark"] .popup-modal {
	box-shadow:
		0 20px 30px rgba(0, 0, 0, 0.4),
		0 8px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .hero-card-suggest {
	background: linear-gradient(135deg, #0D3A6E, #165F85);
	box-shadow:
		0 20px 30px rgba(0, 0, 0, 0.35),
		0 8px 10px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .hero-card-suggest:hover {
	box-shadow:
		0 24px 38px rgba(0, 0, 0, 0.45),
		0 12px 16px rgba(0, 0, 0, 0.30);
}

[data-theme="dark"] .hero-card-coming-soon {
	background: rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] input[type=text],
[data-theme="dark"] input[type=password],
[data-theme="dark"] input[type=email] {
	background: var(--colour-paper);
	border-color: #4a4a4a;
}

[data-theme="dark"] input[type=text]:hover,
[data-theme="dark"] input[type=password]:hover,
[data-theme="dark"] input[type=email]:hover {
	border-color: var(--colour-secondary);
}

[data-theme="dark"] input[type=text]:focus-visible,
[data-theme="dark"] input[type=password]:focus-visible,
[data-theme="dark"] input[type=email]:focus-visible {
	background-color: var(--colour-popup-paper);
}

[data-theme="dark"] input::placeholder {
	color: var(--colour-muted);
	opacity: 1;
}

[data-theme="dark"] .popup-close:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

/* OAuth status messages */
.oauth-message {
	padding: 12px 16px;
	border-radius: var(--radius-xs);
	margin-bottom: 16px;
	font-size: var(--text-sm);
	text-align: center;
}

.oauth-message.info {
	background: #e3f2fd;
	color: #1565c0;
	border: 1px solid #90caf9;
}

.oauth-message.error {
	background: #ffebee;
	color: #c62828;
	border: 1px solid #ef9a9a;
}

.oauth-message.success {
	background: #e8f5e9;
	color: #2e7d32;
	border: 1px solid #a5d6a7;
}

[data-theme="dark"] .oauth-message.info {
	background: #1e3a5f;
	color: #90caf9;
	border-color: #1565c0;
}

[data-theme="dark"] .oauth-message.error {
	background: #4a1c1c;
	color: #ef9a9a;
	border-color: #c62828;
}

[data-theme="dark"] .oauth-message.success {
	background: #1b4332;
	color: #a5d6a7;
	border-color: #2e7d32;
}

/* ========================================
   PASSWORD TOGGLE
   ======================================== */

.password-input-wrapper {
	position: relative;
	width: 100%;
	margin-bottom: var(--space-16);
}

.password-input-wrapper input {
	width: 100%;
	padding: 15px 50px 15px 15px;
	margin-bottom: 0;
	box-sizing: border-box;
	border-radius: var(--radius-xs);
}

.password-toggle {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--colour-text);
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.password-toggle:hover {
	opacity: 1;
}

.password-toggle:focus-visible {
	opacity: 1;
	outline: 2px solid var(--colour-primary);
	outline-offset: 2px;
	border-radius: 4px;
}

.password-toggle svg {
	width: 20px;
	height: 20px;
}

.eye-icon,
.eye-off-icon {
	pointer-events: none;
}

/* ── Loading Bar ── */
#page-loading-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: linear-gradient(90deg, var(--colour-primary) 0%, var(--colour-primary) 50%, color-mix(in srgb, var(--colour-primary) 70%, white) 100%);
	box-shadow: 0 0 10px color-mix(in srgb, var(--colour-primary) 60%, transparent);
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	will-change: width, opacity;
}