/* ============================================
   DESIGN TOKENS - Import from Figma
   ============================================ */
/* ============================================
   DESIGN TOKENS - Extracted from Figma
   File: studiosize-studio--EXTERNAL-
   Node: 672-687
   URL: https://www.figma.com/design/8Fo29yETDCPPdQw6SG5xaN/studiosize-studio--EXTERNAL-?node-id=672-687&m=dev
   ============================================ */
:root {
	/* Colors */
	--color-background: #121212; /* Main dark background */
	--color-background-dark: #1a191c; /* Dark gray for cards/sections */
	--color-background-darker: #262628; /* Darker gray for inputs/headers */
	--color-background-lighter: #EDEEF1; /* Lighter gray for inputs/headers */
	--color-accent: white; /* Lime green accent */
	--color-text-light: #f8f4f2; /* Off-white/cream text */
	--color-text-dark: #121212; /* Black text (for light backgrounds) */
	--color-border: #262628; /* Border color */

	/* Font Families */
	--font-family-primary: "neue-haas-grotesk-display", sans-serif;
	--font-family-secondary: "neue-haas-grotesk-text", sans-serif; /* Used for EU text */

	/* Font Weights */
	--font-weight-regular: 500;
	--font-weight-medium: 600;
	--font-weight-bold: 700;

	/* Font Sizes (converted to rem: 100px = 1rem) */
	--font-size-36: 0.36rem; /* 36px - Large headings */
	--font-size-28: 0.28rem; /* 28px - Section headings */
	--font-size-22: 0.22rem; /* 22px - Section headings */
	--font-size-18: 0.18rem; /* 18px - Subheadings */
	--font-size-16: 0.17rem; /* 16px - Body large */
	--font-size-14: 0.16rem; /* 14px - Body text */
	--font-size-12: 0.14rem; /* 12px - Small text */
	--font-size-11: 0.11rem; /* 11px - Extra small text */

	/* Line Heights */
	--line-height-tight: 1.1; /* For headings */
	--line-height-normal: 1.4; /* For body text */

	/* Letter Spacing */
	--letter-spacing-normal: 0;
	--letter-spacing-uppercase: 0.05em; /* For uppercase text */

	/* Spacing (converted to rem: 100px = 1rem) */
	--spacing-8: 0.08rem; /* 8px */
	--spacing-12: 0.12rem; /* 12px */
	--spacing-16: 0.16rem; /* 16px */
	--spacing-20: 0.2rem; /* 20px */
	--spacing-24: 0.24rem; /* 24px */
	--spacing-28: 0.28rem; /* 28px */
	--spacing-30: 0.3rem; /* 30px */
	--spacing-32: 0.32rem; /* 32px */
	--spacing-40: 0.4rem; /* 40px */
	--spacing-48: 0.48rem; /* 48px */

	--spacing-left-child: 0.43rem; /* 43px */

	/* Border Radius */
	--border-radius-small: 0; /* 8px */
	--border-radius-medium: 0.12rem; /* 12px */

	/* Component Colors */
	--color-card-bg: var(--color-background-dark);
	--color-card-bg-active: var(--color-accent);
	--color-input-bg: var(--color-background-darker);
	--color-button-primary: var(--color-accent);
	--color-button-text: var(--color-text-dark);
	
	/* Status Colors */
	--color-status-active: #FF5500; /* Orange */
	--color-status-pending: #9966cc; /* Purple */
	--color-status-completed: white; /* Lime green */

	--w-100: 100%;
	--w-50: 50%;
	--w-25: 25%;
	--w-75: 75%;

}
.w-100 {
	width: var(--w-100);
}
.w-50 {
	width: var(--w-50);
}
.w-25 {
	width: var(--w-25);
}
.w-75 {
	width: var(--w-75);
}
.pt-16 {
	padding-top: var(--spacing-16);
}
.page__container {
	max-width: 13.76rem; /* 1376px */
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-28);
}
@media (min-width: 1440px) {
.page__container {
		padding: 0 var(--spacing-32);
		max-width: 100%;
}
	}
/* ============================================
   COMPONENTS
   ============================================ */
/* ============================================
   SITE HEADER
   Based on Figma design: node-id=763-1184
   ============================================ */
.site-header {
	background-color: var(--color-background);
	padding: var(--spacing-32) 0;
	position: relative;
	width: 100%;
}
.site-header__container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-24);
	max-width: 13.76rem;
    margin: 0 auto;
}
@media (min-width: 1440px) {
.site-header__container {
		max-width: 100%;
		padding: 0 var(--spacing-32);
}
	}
/* Left side: Logo + EU Badge */
.site-header__left {
	display: flex;
	align-items: center;
	gap: var(--spacing-24);
	flex-shrink: 0;
}
.site-header__logo {
	height: 0.16rem; /* 34px */
	flex-shrink: 0;
}
.site-header__logo svg {
		width: 100%;
		height: 100%;
		display: block;
	}
.site-header__eu-badge {
	flex-shrink: 0;
}
.eu-badge {
	display: flex;
	align-items: center;
	gap: 0.12rem; /* 12px */
}
.eu-badge__icon {
	width: 2rem;
	height: auto; /* 43px */
	flex-shrink: 0;
}
.eu-badge__icon svg {
		width: 100%;
		height: 100%;
		display: block;
	}
[fill]:is(:is(.eu-badge__icon svg) path) {
				fill: var(--color-accent);
			}
[stroke]:is(:is(.eu-badge__icon svg) path) {
				stroke: var(--color-accent);
			}
.eu-badge__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.02rem; /* 2px */
	color: var(--color-text-dark);
	font-family: var(--font-family-secondary);
	line-height: 1.2;
}
.eu-badge__line1 {
	font-size: var(--font-size-11);
	font-weight: var(--font-weight-bold);
	font-style: italic;
	margin: 0;
}
.eu-badge__line2 {
	font-size: var(--font-size-11);
	font-weight: var(--font-weight-bold);
	font-style: italic;
	margin: 0;
}
.eu-badge__line3 {
	font-size: var(--font-size-11);
	font-weight: var(--font-weight-regular);
	margin: 0;
}
/* Right side: Icons + User */
.site-header__right {
	flex-shrink: 0;
}
.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-24);
}
.site-header__actions-icons {
	display: flex;
	align-items: center;
	gap: var(--spacing-24);
}
.site-header__icon-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}
.site-header__icon-btn:hover {
		opacity: 0.7;
	}
.site-header__icon-btn svg {
		width: 100%;
		height: 100%;
		display: block;
	}
.site-header__divider {
	width: 1px;
	height: 0.38rem; /* 38px */
	background-color: var(--color-text-dark);
	flex-shrink: 0;
}
.site-header__user {
	display: flex;
	align-items: center;
	gap: var(--spacing-16);
}
.site-header__welcome {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-accent);
	margin: 0;
	white-space: nowrap;
}
.site-header__username {
	font-weight: var(--font-weight-bold);
}
.site-header__avatar {
	width: 0.4rem; /* 40px */
	height: 0.4rem; /* 40px */
	border-radius: 50%;
	border: 2px solid var(--color-text-dark);
	overflow: hidden;
	flex-shrink: 0;
	display: none !important;
}
.site-header__avatar img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
.site-header__avatar .site-header__avatar-placeholder {
		width: 100%;
		height: 100%;
		background-color: var(--color-background-darker);
		display: block;
	}
.site-header__top {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}
.site-header__logo--compact {
	display: none;
	height: 0.28rem;
}
.site-header__hamburger {
	display: none;
	width: 0.4rem;
	height: 0.4rem;
	border: 1px solid var(--color-text-dark);
	border-radius: var(--border-radius-small);
	background: none;
	cursor: pointer;
	padding: var(--spacing-8);
	gap: 0.04rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.site-header__hamburger[aria-expanded="true"] {
		gap: 0.02rem;
	}
.site-header__hamburger span {
		width: 100%;
		height: 2px;
		background-color: var(--color-text-dark);
		display: block;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}
.site-header__hamburger.is-active span:nth-child(1) {
		transform: translateY(4px) rotate(45deg);
	}
.site-header__hamburger.is-active span:nth-child(2) {
		opacity: 0;
	}
.site-header__hamburger.is-active span:nth-child(3) {
		transform: translateY(-4px) rotate(-45deg);
	}
.site-header__panel {
	width: 100%;
}
/* ============================================
   MOBILE RESPONSIVE (768px breakpoint)
   ============================================ */
@media (max-width: 768px) { /* 768px */
	.site-header {
		padding: var(--spacing-20) var(--spacing-16);
	}
	
	.site-header__top {
		display: flex;
	}

	.site-header__logo--compact {
		display: block;
	}

	.site-header__hamburger {
		display: flex;
	}

	.site-header__panel {
		width: 100%;
		background-color: var(--color-accent);
		border-radius: var(--border-radius-small);
		overflow: hidden;
		max-height: 0;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-0.05rem);
		transition:
			max-height 0.35s ease,
			opacity 0.25s ease,
			transform 0.35s ease,
			visibility 0.35s ease,
			padding 0.25s ease;
		pointer-events: none;
	}
	
	.site-header__panel.site-header__panel--open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		padding-top: var(--spacing-16);
		padding-bottom: var(--spacing-32);
		pointer-events: auto;
	}

	.site-header__right {
		width: 100%;
	}

	.site-header__container {
		flex-direction: column;
		gap: var(--spacing-20);
		width: 100%;
		padding: 0 var(--spacing-16);
	}

	.site-header__left {
		display: none !important;
	}

	.site-header__logo {
		height: 0.16rem;
	}

	.site-header__eu-badge {
		width: 100%;
		margin-top: var(--spacing-8);
		justify-content: center;
	}

	.eu-badge {
		justify-content: center;
		gap: 0.08rem;
	}

	.site-header__actions {
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-16);
		width: 100%;
	}

	.site-header__actions-icons {
		width: 100%;
		justify-content: flex-start;
		gap: var(--spacing-16);
	}

	.site-header__divider {
		display: none;
	}

	.site-header__user {
		width: 100%;
		gap: var(--spacing-8);
	}

	.site-header__welcome {
		font-size: var(--font-size-12);
		width: 100%;
		text-align: end;
	}

	.site-header__avatar {
		display: block;
		width: 0.32rem;
		height: 0.32rem;
	}
}
/* ============================================
   ADMIN PANEL PAGE
   Based on Figma design: node-id=672-687
   ============================================ */
.admin-panel-page {
	background-color: var(--color-background);
	min-height: 100vh;
	padding: var(--spacing-32) 0;
}
/* Page Title Section */
.admin-panel-page__title-section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.admin-panel-page__title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-36);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
	letter-spacing: var(--letter-spacing-normal);
}
.admin-panel-page__title-line {
	height: 1px;
	width: 100%;
	background-color: var(--color-accent);
}
/* Management Cards */
.admin-panel-page__cards {
	display: flex;
	gap: var(--spacing-28);
	flex-wrap: wrap;
	flex-direction: row;
}
.management-card {
	background-color: var(--color-background-dark);
	border-radius: var(--border-radius-small);
	flex: 1;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.management-card__content {
	cursor: pointer;
}
.management-card--active {
	background-color: var(--color-accent);
}
.management-card__content {
	padding: var(--spacing-28);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}
.management-card__header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
}
.management-card__title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	margin: 0;
}
.management-card--active .management-card__title {
	color: var(--color-text-dark);
}
.management-card:not(.management-card--active) .management-card__title {
	color: var(--color-text-light);
}
.management-card__line {
	height: 1px;
	width: 100%;
	background-color: var(--color-text-dark);
}
.management-card:not(.management-card--active) .management-card__line {
	background-color: var(--color-text-light);
	opacity: 0.2;
}
.management-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}
.management-card__description {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-18);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	margin: 0;
}
.management-card--active .management-card__description {
	color: var(--color-text-dark);
}
.management-card:not(.management-card--active) .management-card__description {
	color: var(--color-text-light);
}
/* Project Management Section */
.admin-panel-page__project-section {
	background-color: var(--color-background-dark);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-24);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}
.project-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-24);
	flex-wrap: wrap;
}
.project-section__title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
}
.project-section__actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-28);
	flex-wrap: wrap;
}
/* Search Field */
.project-section__search {
	background-color: var(--color-background-darker);
	border-radius: var(--border-radius-small);
	height: 0.5rem; /* 50px */
	width: 4.4rem; /* 440px */
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}
.project-section__search-input {
	background: none;
	border: none;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	height: inherit;
	color: var(--color-text-light);
	border-radius: var(--border-radius-small);
	flex: 1;
	padding: 0 var(--spacing-24);
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: outline 0.3s ease;
}
.project-section__search-input::placeholder {
		color: var(--color-text-light);
		opacity: 0.7;
	}
.project-section__search-icon {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-light);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	display: none;
}
.project-section__search-icon svg {
		width: 100%;
		height: 100%;
	}
/* Sort Button (now a select dropdown) */
.project-section__sort-btn {
	border: 1px solid var(--color-accent);
	border-radius: var(--border-radius-small);
	height: 0.5rem; /* 50px */
	padding: 0 calc(0.1rem + 0.24rem) 0 var(--spacing-16); /* .1rem from end + arrow width */
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	transition: opacity 0.2s ease;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23ffffff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.1rem center;
	background-size: 0.24rem 0.24rem;
	text-align: left;
	width: 1.1rem;
}
@media (max-width: 768px) and (orientation: portrait) {
.project-section__sort-btn {
		width: 100%;
}
	}
.project-section__sort-btn:hover {
		opacity: 0.8;
	}
.project-section__sort-btn:focus,.project-section__sort-btn:focus-visible {
		outline: none;
	}
/* New Project Button */
.project-section__new-btn {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	padding: 0 var(--spacing-16);
	height: 0.5rem; /* 50px */
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-dark);
	transition: opacity 0.2s ease;
}
.project-section__new-btn:hover {
		opacity: 0.9;
	}
/* Project Table */
.project-section__table {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.project-table__header {
	background-color: var(--color-background-darker);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-8);
}
.project-table__col {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-uppercase);
}
.project-table__col--project {
	width: 2.48rem; /* 248px */
	flex-shrink: 0;
}
.project-table__col--client {
	width: 2.48rem; /* 248px */
	flex-shrink: 0;
}
.project-table__col--status {
	width: 2rem; /* 200px */
	flex-shrink: 0;
}
.project-table__col--actions {
	width: 2rem; /* 200px */
	flex-shrink: 0;
	text-align: right;
}
.project-table__row {
	border-bottom: 1px solid var(--color-background-darker);
	padding: var(--spacing-20) var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-8);
}
.project-table__row:last-child {
		border-bottom: none;
	}
.project-table__row .project-table__col {
	text-transform: none;
	letter-spacing: normal;
	font-weight: var(--font-weight-regular);
}
/* Status Select */
.status-select {
	position: relative;
	border: 1px solid var(--color-background-darker);
	border-radius: var(--border-radius-small);
	height: 0.36rem; /* 36px */
	width: 1.78rem; /* 178px */
	max-width: 100%;
	cursor: pointer;
	transition: border-color 0.2s ease;
}
.status-select:hover {
		border-color: var(--color-accent);
	}
.status-select__native {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}
.status-select__display {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--spacing-16);
	gap: var(--spacing-8);
	pointer-events: none;
	z-index: 1;
}
.status-select__content {
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	flex: 1;
}
.status-select__dot {
	width: 0.12rem; /* 12px */
	height: 0.12rem; /* 12px */
	border-radius: 50%;
	flex-shrink: 0;
}
.status-select__dot--active {
	background-color: #E53935; /* Red */
}
.status-select__dot--pending {
	background-color: #7407FF; /* Purple */
}
.status-select__dot--completed {
	background-color: var(--color-accent); /* Primary Green */
}
.status-select__text {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
}
.status-select__arrow {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-light);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.status-select__arrow svg {
		width: 100%;
		height: 100%;
	}
/* Action Buttons */
.project-table__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--spacing-8);
}
.project-table__action-btn {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	width: 0.36rem; /* 36px */
	height: 0.36rem; /* 36px */
	padding: 0;
	cursor: pointer;
	color: var(--color-text-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}
.project-table__action-btn:hover {
		opacity: 0.8;
	}
.project-table__action-btn svg {
		width: 0.24rem; /* 24px */
		height: 0.24rem; /* 24px */
	}
/* ============================================
   MOBILE RESPONSIVE (768px breakpoint)
   ============================================ */
@media (max-width: 768px) and (orientation: portrait) { /* 768px */
	.admin-panel-page {
		padding: var(--spacing-16) 0;
	}
	
	.admin-panel-page__container {
		padding: 0 var(--spacing-16);
		gap: var(--spacing-24);
	}
	
	.admin-panel-page__title {
		font-size: var(--font-size-22); /* Smaller on mobile */
	}
	
	.admin-panel-page__cards {
		flex-direction: column;
		gap: var(--spacing-16);
	}
	
	.management-card {
		min-width: 100%;
	}
	
	.management-card__content {
		padding: var(--spacing-20);
	}
	
	.admin-panel-page__project-section {
		padding: var(--spacing-16);
	}
	
	.project-section__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-16);
	}
	
	.project-section__actions {
		width: 100%;
		flex-direction: column;
		gap: var(--spacing-16);
	}
	
	.project-section__search {
		width: 100%;
	}
	
	.project-section__sort-btn,
	.project-section__new-btn {
		width: 100%;
		justify-content: center;
	}
	
	.project-table__header {
		display: none; /* Hide header on mobile, use data attributes instead */
	}
	
	.project-table__row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-12);
		padding: var(--spacing-28) var(--spacing-16);
	}
	
	.project-table__col {
		width: 100% !important;
		display: flex;
		align-items: center;
		gap: .1rem;
	}
	
	.project-table__col--project::before {
		content: "PROJECT: ";
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-uppercase);
		margin-right: var(--spacing-8);
	}
	
	.project-table__col--client::before {
		content: "CLIENT: ";
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-uppercase);
		margin-right: var(--spacing-8);
	}
	
	.project-table__col--status::before {
		content: "STATUS: ";
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-uppercase);
		margin-right: var(--spacing-8);
	}
	
	.project-table__col--actions {
		width: 100%;
	}
	
	.project-table__actions {
		justify-content: space-between;
	}
	
	.status-select {
		width: 100%;
		max-width: 12rem; /* 200px */
	}
}
/* ============================================
   CLIENT MANAGEMENT PAGE
   Based on Figma design: node-id=672-1683
   Reuses admin-panel styles for cards
   ============================================ */
/* Client Management Table Specific Styles */
.project-table__col--name {
	width: 2.48rem; /* 248px */
	flex-shrink: 0;
}
.project-table__col--email {
	width: 2.48rem; /* 248px */
	flex-shrink: 0;
}
.project-table__col--company {
	width: 2.48rem; /* 248px */
	flex-shrink: 0;
}
.project-table__col--projects {
	width: 1.68rem; /* 168px */
	flex-shrink: 0;
}
.project-table__col--actions {
	width: 2rem; /* 200px */
	flex-shrink: 0;
	text-align: right;
}
/* Mobile adjustments for client table */
@media (max-width: 768px) { /* 768px */
	.project-table__col--name::before {
		content: "USER NAME: ";
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-uppercase);
		margin-right: var(--spacing-8);
	}
	
	.project-table__col--email::before {
		content: "EMAIL: ";
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-uppercase);
		margin-right: var(--spacing-8);
	}
	
	.project-table__col--company::before {
		content: "COMPANY: ";
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-uppercase);
		margin-right: var(--spacing-8);
	}
	
	.project-table__col--projects::before {
		content: "ACTIVE PROJECTS: ";
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
		letter-spacing: var(--letter-spacing-uppercase);
		margin-right: var(--spacing-8);
	}
}
/* ============================================
   NEW CLIENT MODAL
   Based on Figma design: node-id=930-1390
   ============================================ */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	overflow: hidden;
	padding: var(--spacing-32) 0;
	box-sizing: border-box;
}
/* Prevent body and html scroll when modal is open */
body.modal-open,
html.modal-open {
	overflow: hidden !important;
	position: fixed !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.modal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
	overflow: hidden;
}
.modal__backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(11, 10, 9, 0.6);
	backdrop-filter: blur(10px);
	cursor: pointer;
	overflow: hidden;
	pointer-events: auto;
}
.modal__container {
	position: relative;
	width: 100%;
	max-width: 13.01rem; /* 1301px */
	margin: 0 var(--spacing-32);
	z-index: 2;
	max-height: 90vh;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-shrink: 0;
	align-self: center;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	pointer-events: auto;
	touch-action: pan-y;
}
.modal__container.small {
		max-width: 6.47rem;
	}
/* Custom scrollbar styling */
.modal__container::-webkit-scrollbar {
		width: 0.08rem; /* 8px */
	}
.modal__container::-webkit-scrollbar-track {
		background: transparent;
	}
.modal__container::-webkit-scrollbar-thumb {
		background: var(--color-text-light);
		opacity: 0.3;
		border-radius: 0.04rem; /* 4px */
	}
.modal__container::-webkit-scrollbar-thumb:hover {
		opacity: 0.5;
	}
.modal__content {
	background-color: var(--color-background-dark);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-24);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
	width: 100%;
	box-sizing: border-box;
	flex: 0 0 auto;
}
.modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}
.modal__title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
}
.modal__close {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	width: 0.3rem; /* 30px */
	height: 0.3rem; /* 30px */
	padding: 0;
	cursor: pointer;
	color: var(--color-text-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}
.modal__close:hover {
		opacity: 0.8;
	}
.modal__close svg {
		width: 100%;
		height: 100%;
		display: block;
	}
.modal__section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
}
.modal__section-title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
}
.modal__form-row {
	display: flex;
	gap: var(--spacing-24);
	flex-wrap: wrap;
}
.modal__form-field {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.modal__form-field--full {
	flex: 1 1 100%;
}
.modal__label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
}
.modal__input {
	background-color: var(--color-background-darker);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 100%;
	height: 0.52rem; /* 52px */
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: border-color 0.2s ease, outline 0.2s ease;
}
.modal__input::placeholder {
		color: var(--color-text-light);
		opacity: 0.5;
	}
.modal__input:focus {
		border-bottom: 1px solid var(--color-accent);
		outline: 0 solid transparent;
		outline-offset: 0;
	}
.modal__input--active {
	border-bottom: 1px solid var(--color-accent);
}
/* Team Members */
.modal__team-member {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.modal__delete-btn {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	width: 0.52rem; /* 52px */
	height: 0.52rem; /* 52px */
	padding: 0;
	cursor: pointer;
	color: var(--color-text-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	align-self: flex-end;
	transition: opacity 0.2s ease;
}
.modal__delete-btn:hover {
		opacity: 0.8;
	}
.modal__delete-btn svg {
		width: 0.24rem; /* 24px */
		height: 0.24rem; /* 24px */
		display: block;
	}
.modal__add-member-btn {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	padding: 0 var(--spacing-16);
	height: 0.52rem; /* 52px */
	width: 1.48rem; /* 148px */
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-dark);
	align-self: flex-start;
	transition: opacity 0.2s ease;
}
.modal__add-member-btn:hover {
		opacity: 0.9;
	}
.modal--incomplete-fields .modal__container {
		background-color: #0B0A09;
		max-width: 6.74rem;
	}
:is(.modal--incomplete-fields .modal__container) .modal__warning-text {
			font-size: .18rem;
			font-weight: 700;
		}
:is(.modal--incomplete-fields .modal__container) .modal__content {
			margin: auto;
			max-width: 3.92rem;
			padding: 1rem var(--spacing-24);
			gap: .48rem;
			background: none !important;
		}
.modal--incomplete-fields .modal__header {
		justify-content: center;
	}
:is(.modal--incomplete-fields .modal__header) .modal__close {
			border-radius: 50%;
			width: .56rem;
			height: .56rem;
		}
:is(:is(.modal--incomplete-fields .modal__header) .modal__close) svg {
				padding: .06rem;
			}
.modal--incomplete-fields #modal-incomplete-continue {
		border: 1px solid var(--color-accent);
	}
.modal__btn--primary{
	background-color: var(--color-accent);
	border: 1px solid var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16) var(--spacing-16);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
}
.modal__btn--secondary{
	background-color: transparent;
	color: white;
	border: 1px solid var(--color-text-light);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16) var(--spacing-16);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.modal__btn--secondary:hover {
		opacity: 0.8;
	}
.modal__footer {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	align-items: stretch;
}
.modal__footer--incomplete-fields {
	gap: var(--spacing-16);
}
.modal__warning-text {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	margin: 0;
	text-align: center;
}
.modal__separator {
	display: flex;
	align-items: center;
	gap: var(--spacing-16);
	margin: var(--spacing-8) 0;
}
.modal__separator-line {
	flex: 1;
	height: 1px;
	background-color: var(--color-text-light);
	opacity: 0.2;
}
.modal__separator-text {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-light);
	white-space: nowrap;
}
/* ============================================
   MOBILE RESPONSIVE (768px breakpoint)
   ============================================ */
@media (max-width: 768px) { /* 768px */
	.modal {
		padding: var(--spacing-16) 0;
	}
	
	.modal__container {
		margin: 0 var(--spacing-16);
		max-width: 100%;
	}
	
	.modal__content {
		padding: var(--spacing-16);
		max-height: 95vh;
	}
	
	.modal__form-row {
		flex-direction: column;
		gap: var(--spacing-16);
	}
	
	.modal__form-field {
		flex: 1 1 100%;
	}
	
	.modal__delete-btn {
		align-self: flex-start;
		margin-top: var(--spacing-8);
	}
	
	.modal__add-member-btn {
		width: 100%;
	}
}
/* Team member saving states */
.modal__team-member--saving {
	opacity: 0.6;
	pointer-events: none;
	position: relative;
}
.modal__team-member--saving::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	border: 2px solid var(--color-accent);
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}
@keyframes spin {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
.modal__team-member--saved {
	background-color: rgba(34, 197, 94, 0.1);
	transition: background-color 0.3s ease;
}
.modal__team-member--error {
	background-color: rgba(239, 68, 68, 0.1);
	transition: background-color 0.3s ease;
}
/* Disabled team members section */
.modal__section--disabled {
	opacity: 0.5;
	pointer-events: none;
	position: relative;
}
.modal__section--disabled::before {
	content: 'Please fill in company details first';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: var(--color-background);
	padding: .14rem;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	z-index: 10;
	font-size: 14px;
	color: var(--color-text);
	white-space: nowrap;
}
/* Company section saving states */
.modal__section--saving {
	opacity: 0.7;
	position: relative;
}
.modal__section--saving::after {
	content: '';
	position: absolute;
	top: 20px;
	right: 20px;
	width: 20px;
	height: 20px;
	border: 2px solid var(--color-accent);
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.6s linear infinite;
}
.modal__section--saved {
	background-color: rgba(34, 197, 94, 0.05);
	transition: background-color 0.3s ease;
}
.modal__section--error {
	background-color: rgba(239, 68, 68, 0.05);
	transition: background-color 0.3s ease;
}
/* Company Autocomplete */
.modal__form-field--company {
	position: relative;
}
.modal__company-autocomplete {
	position: relative;
}
.modal__company-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: var(--color-background);
	border: 1px solid var(--color-background-darker);
	border-radius: var(--border-radius-small);
	margin-top: var(--spacing-4);
	max-height: 12rem; /* 200px */
	overflow-y: auto;
	z-index: 1000;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.modal__company-suggestion {
	padding: var(--spacing-12) var(--spacing-16);
	cursor: pointer;
	border-bottom: 1px solid var(--color-background-darker);
	transition: background-color 0.2s ease;
}
.modal__company-suggestion:last-child {
	border-bottom: none;
}
.modal__company-suggestion:hover,
.modal__company-suggestion--active {
	background-color: var(--color-background-darker);
}
.modal__company-suggestion-name {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	margin-bottom: var(--spacing-4);
}
.modal__company-suggestion-details {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-12);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	opacity: 0.7;
}
/* ============================================
   NEW PROJECT PAGE
   Multi-step form for creating new projects
   ============================================ */
.new-project-page {
	min-height: 100vh;
	background-color: var(--color-background);
	padding: var(--spacing-32);
}
.new-project-page__container {
	max-width: 13.76rem; /* 1376px */
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-28);
}
@media (min-width: 1440px) {
.new-project-page__container {
		max-width: 100%;
		padding: 0 var(--spacing-32);
}
	}
/* Page Title Section */
.new-project-page__title-section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-30);
}
.new-project-page__title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-36);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
}
.new-project-page__title-line {
	height: 1px;
	width: 100%;
	background-color: var(--color-accent);
}
.new-project-page__back {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.new-project-page__back-btn {
	background: none;
	border: 1px solid var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: 0 var(--spacing-16);
	height: 0.5rem; /* 50px */
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	transition: opacity 0.2s ease;
}
.new-project-page__back-btn:hover {
		opacity: 0.8;
	}
/* Step Navigation */
.new-project-page__steps {
	width: 100%;
	max-width: 6.47rem;
}
.step-nav {
	display: flex;
	gap: var(--spacing-8);
	border: 1px solid var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: 0;
	background-color: transparent;
}
.step-nav__item {
	flex: 1;
	background: none;
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	transition: all 0.2s ease;
	min-width: 1.77rem; /* 177px */
}
.step-nav__item:hover {
		opacity: 0.8;
	}
.step-nav__item--active {
	background-color: var(--color-accent);
	color: var(--color-text-dark);
}
/* Step Content */
.new-project-step {
	display: none;
}
.new-project-step--active {
	display: block;
}
.new-project-step__content {
	background-color: var(--color-background-dark);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-24);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}
.new-project-step__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}
.new-project-step__title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
}
.new-project-step__subtitle {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.new-project-step__subtitle {
		text-align: center;
}
	}
.new-project-step__add-btn {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	padding: 0 var(--spacing-16);
	height: 0.36rem; /* 36px */
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-dark);
	transition: opacity 0.2s ease;
}
.new-project-step__add-btn:hover {
		opacity: 0.9;
	}
.new-project-step__form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}
.new-project-step__form-row {
	display: flex;
	gap: var(--spacing-24);
}
.new-project-step__form-field {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.new-project-step__label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
}
.new-project-step__input {
	background-color: var(--color-background-darker);
	border: none;
	border-bottom: 1px solid transparent;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 100%;
	height: 0.52rem; /* 52px */
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: border-color 0.2s ease, outline 0.2s ease;
}
.new-project-step__input::placeholder {
		color: var(--color-text-light);
		opacity: 0.5;
	}
.new-project-step__input:focus {
		border-bottom-color: var(--color-accent);
		outline: 0 solid transparent;
		outline-offset: 0;
	}
.new-project-step__input--active {
	border-bottom-color: var(--color-accent);
}
/* Date Input Styling */
.new-project-step__input[type="date"] {
	cursor: pointer;
}
.new-project-step__input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 1;
	filter: brightness(0) saturate(100%) invert(77%) sepia(95%) saturate(1352%) hue-rotate(28deg) brightness(101%) contrast(89%);
}
.new-project-step__input[type="date"]::-webkit-calendar-picker-indicator:hover {
	opacity: 0.8;
}
.new-project-step__select-wrapper {
	position: relative;
	height: 0.52rem; /* 52px */
}
.new-project-step__select-native {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}
.new-project-step__select {
	background-color: var(--color-background-darker);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	height: 0.52rem; /* 52px */
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	pointer-events: none;
	position: relative;
	z-index: 1;
}
.new-project-step__select .new-project-step__select-text {
		font-family: var(--font-family-primary);
		font-size: var(--font-size-14);
		font-weight: var(--font-weight-regular);
		line-height: var(--line-height-normal);
		color: var(--color-text-light);
	}
.new-project-step__select svg {
		width: 0.24rem; /* 24px */
		height: 0.24rem; /* 24px */
		flex-shrink: 0;
		color: var(--color-text-light);
	}
.new-project-step__textarea {
	background-color: var(--color-background-darker);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 100%;
	height: 1.04rem; /* 104px */
	resize: vertical;
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: outline 0.2s ease;
}
.new-project-step__textarea::placeholder {
		color: var(--color-text-light);
		opacity: 0.5;
	}
.new-project-step__textarea:focus {
		outline: 0 solid transparent;
		outline-offset: 0;
	}
/* Permissions Section */
.new-project-step__permissions {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}
.permission-row {
	border-bottom: 1px solid var(--color-background-darker);
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
	min-height: 0.76rem; /* 76px */
}
@media screen and (max-width: 768px) and (orientation: portrait) {
.permission-row {
		align-items: center;
}
	}
.permission-row:last-child {
	border-bottom: none;
}
.permission-row__info {
	display: grid;
	grid-template-columns: 1.5rem 2.2rem 1.3rem; /* 200px 350px 250px - Name, Email, Phone */
	gap: 0.72rem; /* 72px */
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	align-items: center;
}
.permission-row__name {
	text-transform: capitalize;
}
.permission-row__email,
.permission-row__phone {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.permission-row__checkboxes {
	display: flex;
	gap: var(--spacing-16);
	position: relative;
}
.permission-checkbox {
	display: flex;
	align-items: center;
	gap: var(--spacing-16);
	cursor: pointer;
	position: relative;
}
.permission-checkbox input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.permission-checkbox__custom {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	border: 0.5px solid var(--color-text-light);
	border-radius: var(--border-radius-small);
	position: relative;
	flex-shrink: 0;
}
.permission-checkbox input[type="checkbox"]:checked + .permission-checkbox__custom {
	background-color: transparent;
	border-color: var(--color-accent);
}
.permission-checkbox input[type="checkbox"]:checked + .permission-checkbox__custom::after {
	content: '';
	position: absolute;
	width: 0.12rem; /* 12px */
	height: 0.12rem; /* 12px */
	background-color: var(--color-accent);
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.permission-checkbox__label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
}
/* Summary Section */
.new-project-step__summary {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}
.new-project-step__summary-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}
.new-project-step__summary-meta {
	display: flex;
	gap: var(--spacing-24);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-18);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
}
.summary-list {
	display: flex;
	flex-direction: column;
}
.summary-list__item {
	border-bottom: 1px solid var(--color-background-darker);
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
	min-height: 0.76rem; /* 76px */
}
.summary-list__item:last-child {
	border-bottom: none;
}
.summary-list__key {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 2rem; /* 200px */
	flex-shrink: 0;
}
.summary-list__value {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	text-align: right;
}
/* Confirmation Section */
.new-project-step__confirmation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}
.confirmation-checkbox {
	display: flex;
	align-items: center;
	gap: var(--spacing-16);
	cursor: pointer;
	position: relative;
}
.confirmation-checkbox input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.confirmation-checkbox__custom {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	border: 0.5px solid var(--color-text-light);
	border-radius: var(--border-radius-small);
	position: relative;
	flex-shrink: 0;
}
.confirmation-checkbox input[type="checkbox"]:checked + .confirmation-checkbox__custom {
	background-color: transparent;
	border-color: var(--color-accent);
}
.confirmation-checkbox input[type="checkbox"]:checked + .confirmation-checkbox__custom::after {
	content: '';
	position: absolute;
	width: 0.12rem; /* 12px */
	height: 0.12rem; /* 12px */
	background-color: var(--color-accent);
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.confirmation-checkbox__label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
}
.new-project-step__create-btn {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	padding: 0 var(--spacing-16);
	height: 0.5rem; /* 50px */
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-dark);
	transition: opacity 0.2s ease;
	min-width: 1.48rem; /* 148px */
}
.new-project-step__create-btn:hover:not(:disabled) {
		opacity: 0.9;
	}
.new-project-step__create-btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
/* Actions */
.new-project-page__actions {
	display: flex;
	justify-content: flex-end;
}
.new-project-page__next-btn {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	padding: 0 var(--spacing-16);
	height: 0.5rem; /* 50px */
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-dark);
	transition: opacity 0.2s ease;
	min-width: 1.48rem; /* 148px */
}
.new-project-page__next-btn:hover {
		opacity: 0.9;
	}
/* ============================================
   MOBILE RESPONSIVE (768px breakpoint)
   ============================================ */
@media (max-width: 768px) { /* 768px */
	.new-project-page {
		padding: var(--spacing-16);
	}

	.summary-list__item {
		flex-direction: column;
		padding: var(--spacing-16) 0;
		align-items: flex-start;
	}

	.new-project-step__summary-header {
		align-items: flex-start;
	}

	.new-project-step__summary-meta {
		flex-direction: column;
		gap: var(--spacing-8);
		text-align: left;
	}

	.summary-list__key {
		font-weight: var(--font-weight-bold);
		font-size: var(--font-size-16);
	}

	.summary-list__value {
		text-align: left;
	}
	
	.new-project-page__title-section {
		gap: var(--spacing-16);
	}
	
	.new-project-page__title {
		font-size: var(--font-size-28);
	}
	
	.step-nav {
		flex-direction: column;
	}
	
	.step-nav__item {
		min-width: auto;
	}
	
	.new-project-step__form-row {
		flex-direction: column;
	}
	
	.new-project-step__header {
		flex-direction: column;
		align-items: center;
	}

	.summary-list__key {
		max-width: 2rem;
	}

	.new-project-step__summary-meta {
		text-align: center;
	}

	.new-project-step__summary-header {
		flex-direction: column;
		align-items: center;
	}

	.permission-row__info {
		display: flex;
		flex-direction: column;
		gap: 0.2rem; 
		font-weight: var(--font-weight-bold);
	} 
	
	.permission-row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-16);
	}
	
	.permission-row__checkboxes {
		flex-direction: column;
		width: 100%;
	}
	
	.new-project-step__confirmation {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.new-project-step__create-btn,
	.new-project-page__next-btn {
		width: 100%;
	}
}
/* ============================================
   ACCORDION COMPONENT (Global/Reusable)
   ============================================ */
.accordion {
	background-color: var(--color-background-dark);
	border-radius: var(--border-radius-small);
	overflow: hidden;
}
.accordion__header-wrapper {
	background-color: var(--color-background-darker);
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-8);
}
.accordion__header {
	background: none;
	border: none;
	padding: 0;
	display: flex;
	align-items: center;
	flex: 1;
	cursor: pointer;
	text-align: left;
}
.accordion__inner {
	padding: var(--spacing-12);
}
.accordion__title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	letter-spacing: var(--letter-spacing-uppercase);
	transition: color 0.3s ease;
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	flex: 1;
}
.accordion__title-input {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	letter-spacing: var(--letter-spacing-uppercase);
	background-color: var(--color-background);
	border: 1px solid var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-4) var(--spacing-8);
	width: 100%;
}
.accordion__edit-name {
	background: none;
	border: none;
	padding: var(--spacing-4);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-light);
	opacity: 0.6;
	transition: opacity 0.2s ease, color 0.2s ease;
	flex-shrink: 0;
	margin-left: var(--spacing-8);
}
.accordion__edit-name:hover {
	opacity: 1;
	color: var(--color-accent);
}
.accordion__edit-name svg {
	width: 0.16rem; /* 16px */
	height: 0.16rem; /* 16px */
}
.accordion--open .accordion__title {
	color: var(--color-accent);
}
/* Ensure nested accordions also get accent color when open */
.accordion--nested.accordion--open .accordion__title {
	color: var(--color-accent);
}
.accordion__status {
	display: flex;
	gap: var(--spacing-8);
	align-items: center;
}
/* Accordion Status Select Wrapper (for module status) */
.accordion__status-select-wrapper {
	position: relative;
	border: 1px solid var(--color-background-darker);
	border-radius: var(--border-radius-small);
	height: 0.36rem; /* 36px */
	width: 1.78rem; /* 178px */
	max-width: 100%;
	cursor: pointer;
	transition: border-color 0.2s ease;
}
.accordion__status-select-wrapper:hover {
	border-color: var(--color-accent);
}
.accordion__status-select-native {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
}
.accordion__status-select-display {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--spacing-16);
	gap: var(--spacing-8);
	pointer-events: none;
	z-index: 1;
}
.accordion__status-select-content {
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	flex: 1;
}
.accordion__status-dot {
	width: 0.12rem; /* 12px */
	height: 0.12rem; /* 12px */
	border-radius: 50%;
	flex-shrink: 0;
}
.accordion__status-dot--pending {
	background-color: #7407FF; /* Purple */
}
.accordion__status-dot--active {
	background-color: #E53935; /* Red */
}
.accordion__status-dot--approved {
	background-color: var(--color-accent); /* Primary Green */
}
.accordion__status-dot--inactive {
	background-color: rgba(248, 244, 242, 0.2);
}
.accordion__status-text {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	text-transform: capitalize;
}
.accordion__status-arrow {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-light);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.accordion__status-arrow svg {
	width: 100%;
	height: 100%;
}
/* Display-only status (non-module accordions like corrections) */
.accordion__status-select--display {
	border: 1px solid var(--color-background-darker);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-15) var(--spacing-16);
	height: 0.36rem; /* 36px */
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	width: 1.78rem; /* 178px */
	pointer-events: none;
}
.accordion__status-select--display svg {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	flex-shrink: 0;
	margin-left: auto;
	color: var(--color-text-light);
}
.status-dot {
	width: 0.12rem; /* 12px */
	height: 0.12rem; /* 12px */
	border-radius: 50%;
	flex-shrink: 0;
}
.status-dot--active {
	background-color: var(--color-accent);
}
.status-dot--hidden {
	background-color: rgba(248, 244, 242, 0.2);
}
.accordion__status-select {
	border-color: var(--color-background-darker);
}
.accordion[data-accordion-id*="supplier-comm"] .accordion__status-select {
	border-color: rgba(38, 38, 40, 0.2);
}
.accordion[data-accordion-id*="supplier-comm"] .accordion__status-select span:last-of-type {
	color: rgba(248, 244, 242, 0.2);
}
.accordion[data-accordion-id*="supplier-comm"] .accordion__title {
	opacity: 0.5;
}
.status-dot--completed {
	background-color: var(--color-accent);
}
.accordion__toggle {
	width: 0.3rem; /* 30px */
	height: 0.3rem; /* 30px */
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
	transition: opacity 0.2s ease;
	position: relative;
}
.accordion__toggle:hover {
	opacity: 0.9;
}
.accordion__delete {
	width: 0.3rem; /* 30px */
	height: 0.3rem; /* 30px */
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;
	padding: 0;
	margin-left: var(--spacing-8);
}
.accordion__delete:hover {
	opacity: 0.8;
}
.accordion__delete svg {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
}
.accordion__icon {
	width: 0.14rem; /* 14px */
	height: 0.14rem; /* 14px */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.accordion__toggle .accordion__icon--closed {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
.accordion__toggle .accordion__icon--open {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.8);
}
.accordion--open .accordion__toggle .accordion__icon--closed {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.8);
}
.accordion--open .accordion__toggle .accordion__icon--open {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
/* Ensure nested accordions also follow the same icon rules */
.accordion--nested .accordion__toggle .accordion__icon--closed {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
.accordion--nested .accordion__toggle .accordion__icon--open {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.8);
}
.accordion--nested.accordion--open .accordion__toggle .accordion__icon--closed {
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.8);
}
.accordion--nested.accordion--open .accordion__toggle .accordion__icon--open {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
.accordion__content {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.3s ease;
}
.accordion--open .accordion__content {
	max-height: 5000px; /* Large enough for content */
	opacity: 1;
}
/* Ensure content is hidden when closed */
.accordion:not(.accordion--open) .accordion__content {
	max-height: 0 !important;
	opacity: 0;
}
/* Correction Wrapper - Wraps each correction accordion for unified indentation */
.correction-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-12);
	margin-left: var(--spacing-left-child);
	margin-bottom: var(--spacing-12);
	margin-top: var(--spacing-12);
	position: relative;
}
.correction-wrapper:before {
		content: '';
		position: absolute;
		top: 0;
		border-radius: .2rem;
		left: -.3rem;
		display: block;
		width: .2rem;
		height: 100%;
		background-color: var(--color-background-darker);
	}
/* Remove margin from nested accordion itself since wrapper handles it */
.accordion--nested {
	margin-left: 0;
	margin-bottom: 0;
}
.accordion--nested .accordion__title {
		font-size: var(--font-size-18);
		font-weight: var(--font-weight-bold);
		line-height: var(--line-height-normal);
		color: var(--color-text-light);
		transition: color 0.3s ease;
	}
.accordion--nested.accordion--open .accordion__title {
		color: var(--color-accent);
		letter-spacing: var(--letter-spacing-uppercase);
	}
/* Nested Content Wrapper - Unified spacing for correction content */
.accordion__nested-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-12);
}
/* ============================================
   MOBILE RESPONSIVE (768px breakpoint)
   ============================================ */
@media (max-width: 768px) { /* 768px */
	.accordion__header {
		padding: var(--spacing-12);
	}

	.accordion__status-select {
		width: auto;
	}
	
	.accordion__title {
		font-size: var(--font-size-12);
	}
	
	.accordion__inner {
		padding: var(--spacing-12);
	}
}
/* ============================================
   PROJECT ADMIN PAGE
   ============================================ */
.project-admin-page {
	background-color: var(--color-background);
	min-height: 100vh;
	padding: var(--spacing-32) 0;
}
/* Page Title Section */
.project-admin-page__title-section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-30);
}
.project-admin-page__title-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.project-admin-page__title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-36);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
}
.project-admin-page__subtitle {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
}
.project-admin-page__title-section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-30);
}
.project-admin-page__title-section > div:first-child {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.project-admin-page__actions {
	display: flex;
	gap: var(--spacing-24);
	align-items: center;
}
.project-admin-page__status-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
}
.project-admin-page__status-wrapper .status-dot {
	position: absolute;
	left: var(--spacing-16);
	pointer-events: none;
	z-index: 1;
}
.project-admin-page__status-select {
	border: 1px solid var(--color-background-darker);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	padding-left: calc(var(--spacing-16) + 0.12rem + var(--spacing-8)); /* Space for status dot */
	height: 0.5rem; 
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	background-color: transparent;
	width: 1.56rem; /* 156px */
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23E8E8E8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--spacing-8) center;
	background-size: 0.24rem;
	padding-right: calc(var(--spacing-8) + 0.24rem + var(--spacing-8));
	transition: border-color 0.2s ease, opacity 0.2s ease;
}
.project-admin-page__status-select.not-admin, .accordion__status-select-native.not-admin {
	border: 0;
	background-image: none !important;
}
.project-admin-page__status-select:hover {
	border-color: var(--color-accent);
}
.project-admin-page__status-select:focus {
	outline: none;
	border-color: var(--color-accent);
}
.project-admin-page__status-select option {
	background-color: var(--color-background-dark);
	color: var(--color-text-light);
	padding: var(--spacing-8);
}
/* Legacy class - keep for backwards compatibility */
.project-admin-page__status {
	border: 1px solid var(--color-background-darker);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	height: 0.5rem; 
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 1.56rem; /* 156px */
}
.status-dot {
	width: 0.12rem; /* 12px */
	height: 0.12rem; /* 12px */
	border-radius: 50%;
	flex-shrink: 0;
}
.status-dot--pending {
	background-color: #7407FF; /* Purple */
}
.status-dot--active {
	background-color: #E53935; /* Red */
}
.status-dot--completed {
	background-color: var(--color-accent); /* Green */
}
.project-admin-page__status svg {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	flex-shrink: 0;
	margin-left: auto;
}
.project-admin-page__back-btn {
	background: none;
	border: 1px solid var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: 0 var(--spacing-16);
	height: 0.5rem; /* 50px */
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	transition: opacity 0.2s ease;
}
.project-admin-page__back-btn:hover {
	opacity: 0.8;
}
.project-admin-page__title-line {
	height: 1px;
	width: 100%;
	background-color: var(--color-accent);
}
/* Tab Navigation */
.project-admin-page__tabs {
	width: 100%;
}
.project-tabs {
	display: flex;
	gap: var(--spacing-8);
	border: 1px solid var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: 0;
	background-color: transparent;
}
.project-tabs__item {
	flex: 1;
	background: none;
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	transition: all 0.2s ease;
	min-width: 1.48rem; /* 148px */
}
.project-tabs__item:hover {
	opacity: 0.8;
}
.project-tabs__item--active {
	background-color: var(--color-accent);
	color: var(--color-text-dark);
}
/* Tab Content */
.project-admin-tab {
	display: none;
	flex-direction: column;
	gap: var(--spacing-24);
}
.project-admin-tab--active {
	display: flex;
}
.project-admin-tab__section {
	background-color: var(--color-background-dark);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-24);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
	margin-bottom: var(--spacing-28);
}
.project-admin-tab__section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}
.project-admin-tab__section-title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
}
.project-admin-tab__section-meta {
	display: flex;
	gap: var(--spacing-24);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-18);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
}
/* Brief Awaiting State */
.project-admin-tab__brief-awaiting {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
	align-items: flex-start;
	padding: var(--spacing-28);
	background-color: var(--color-background-dark);
	border-radius: var(--border-radius-large);
}
.project-admin-tab__brief-awaiting-text {
	font-family: var(--font-family-body);
	font-size: var(--font-size-22);
	font-weight: 700;
	line-height: 1.1;
	color: #FF5500;
	margin: 0;
}
.project-admin-tab__brief-start-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-12) var(--spacing-24);
	background-color: var(--color-accent);
	color: var(--color-text-dark);
	font-family: var(--font-family-body);
	font-size: var(--font-size-14);
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--border-radius-small);
	transition: opacity 0.2s ease;
}
.project-admin-tab__brief-start-btn:hover {
	opacity: 0.9;
}
.project-admin-tab__subtitle {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0 0 var(--spacing-24) 0;
}
/* Table Styles */
.project-admin-tab__table {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.project-admin-tab__table-header {
	background-color: var(--color-background-darker);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
}
.project-admin-tab__table-row {
	border-bottom: 1px solid var(--color-background-darker);
	padding: var(--spacing-16) 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-8);
	min-height: 0.76rem; /* 76px */
}
.project-admin-tab__table-row:last-child {
	border-bottom: none;
}
.project-admin-tab__table-col {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 6rem; /* 200px */
	flex-shrink: 0;
}
@media (max-width: 768px) and (orientation: portrait) {
.project-admin-tab__table-col {
		width: 2rem;
}
	}
.project-admin-tab__table-header .project-admin-tab__table-col {
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-uppercase);
}
/* Form Fields */
.project-admin-tab__form-field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.project-admin-tab__form-field label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
}
span.project-admin-tab__input {
	background-color: unset !important;
}
.project-admin-tab__input {
	background-color: var(--color-background-darker);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 100%;
	height: 0.52rem; /* 52px */
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: outline 0.3s ease, color 0.3s ease;
}
.project-admin-tab__input:focus,.project-admin-tab__input:focus-within,.project-admin-tab__input:hover {
		outline: 1px solid var(--color-accent);
		outline-offset: 0;
		color: white !important;
	}
.project-admin-tab__input::placeholder {
	color: var(--color-text-light);
	opacity: 0.5;
}
.project-admin-tab__textarea {
	background-color: var(--color-background-darker);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 100%;
	height: 1.04rem; /* 104px */
	resize: vertical;
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: outline 0.3s ease, color 0.3s ease;
}
.project-admin-tab__textarea:focus,.project-admin-tab__textarea:focus-within,.project-admin-tab__textarea:hover {
		outline: 1px solid var(--color-accent);
		outline-offset: 0;
		color: white !important;
	}
.project-admin-tab__textarea::placeholder {
	color: var(--color-text-light);
	opacity: 0.5;
}
/* Documents Section */
.project-admin-tab__documents {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}
.project-admin-tab__document-row {
	display: flex;
	gap: var(--spacing-24);
	align-items: flex-end;
}
.project-admin-tab__document-row .project-admin-tab__form-field {
	flex: 1;
}
.project-admin-tab__delete-btn {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-24);
	width: auto;
	height: 0.52rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}
.project-admin-tab__delete-btn:hover {
	opacity: 0.9;
}
.project-admin-tab__delete-btn svg {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-dark);
}
/* Buttons */
.project-admin-tab__add-btn {
	border: 1px solid var(--color-accent);
	background: none;
	border-radius: var(--border-radius-small);
	padding: 0 var(--spacing-16);
	height: 0.5rem; /* 50px */
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-accent);
	transition: opacity 0.2s ease;
	width: 1.48rem; /* 148px */
}
.project-admin-tab__add-btn:hover {
	opacity: 0.8;
}
.project-admin-tab__update-btn {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	padding: 0 var(--spacing-16);
	height: 0.5rem; /* 50px */
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-dark);
	transition: opacity 0.2s ease;
}
.project-admin-tab__update-btn:hover {
	opacity: 0.9;
}
.project-admin-tab__actions {
	display: flex;
	gap: var(--spacing-28);
	justify-content: flex-end;
}
.project-admin-tab__download-btn {
	border: 1px solid var(--color-accent);
	background: none;
	border-radius: var(--border-radius-small);
	padding: 0 var(--spacing-16);
	height: 0.5rem; /* 50px */
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	transition: opacity 0.2s ease;
	min-width: 2.11rem; /* 211px */
}
.project-admin-tab__download-btn:hover {
	opacity: 0.8;
}
.project-admin-tab__download-btn--primary {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text-dark);
}
.project-admin-tab__download-btn--primary:hover {
	opacity: 0.9;
}
/* Brief Step Content */
.brief-step-content {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.brief-step-content__row {
	border-bottom: 1px solid var(--color-background-darker);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
	min-height: 0.76rem; /* 76px */
}
.brief-step-content__row:last-child {
	border-bottom: none;
}
.brief-step-content__key {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 2rem; /* 200px */
	flex-shrink: 0;
	text-transform: capitalize;
}
.brief-step-content__value {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	text-align: right;
}
.brief-step-content__subsection {
	padding: var(--spacing-16) 0;
	border-bottom: 1px solid var(--color-background-darker);
}
.brief-step-content__subsection:last-child {
	border-bottom: none;
}
.brief-step-content__subsection-title {
	display: block;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-normal);
	color: var(--color-accent);
	margin-bottom: var(--spacing-12);
	text-transform: uppercase;
}
.brief-step-content__subsection .brief-step-content__row {
	padding: var(--spacing-8) 0;
}
.brief-step-content__empty {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	opacity: 0.6;
	font-style: italic;
	margin: 0;
}
.brief-step-content__value--link {
	color: var(--color-accent);
	text-decoration: none;
	transition: opacity 0.2s ease;
}
.brief-step-content__value--link:hover {
	opacity: 0.8;
}
.brief-step-content__sample-style-entry {
	padding: var(--spacing-12) 0;
	border-bottom: 1px solid var(--color-background-darker);
}
.brief-step-content__sample-style-entry:last-child {
	border-bottom: none;
}
.brief-step-content__value {
	min-width: 5rem;
}
@media (max-width: 768px) and (orientation: portrait) {
.brief-step-content__value {
		min-width: 1rem;
		margin-left: 0 !important;
}
	}
/* Range Slider for Brief Values */
.brief-step-content__range-slider {
	margin: var(--spacing-8) 0;
	flex: 1;
	max-width: 20rem; /* 200px */
}
.brief-step-content__range-track {
	position: relative;
	width: 100%;
	height: 0.08rem; /* 8px */
	background-color: var(--color-background-lighter);
	border-radius: 0.04rem; /* 4px */
	overflow: visible;
}
.brief-step-content__range-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background-color: var(--color-accent);
	border-radius: 0.04rem; /* 4px */
	z-index: 1;
}
.brief-step-content__range-thumb {
	position: absolute;
	width: 0.16rem; /* 16px */
	height: 0.16rem; /* 16px */
	border-radius: 50%;
	background-color: var(--color-accent);
	border: 2px solid var(--color-text-light);
	top: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	z-index: 10;
}
.brief-step-content__range-value {
	text-align: center;
	font-size: var(--font-size-12);
	color: var(--color-text-light);
	margin-top: var(--spacing-8);
	font-weight: var(--font-weight-medium);
}
.concept-design-content__files--inline {
	margin-top: var(--spacing-12);
}
/* Concept Design Content */
.concept-design-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}
.concept-design-content__upload-section {
	display: flex;
	gap: var(--spacing-24);
}
.concept-design-content__upload-box {
	border: 0.5px solid var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	height: 1.04rem; /* 104px */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	flex: 1;
}
.concept-design-content__upload-box--link {
	border-style: solid;
}
.concept-design-content__upload-box--file {
	border-style: dashed;
}
.concept-design-content__upload-box p {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	text-align: center;
	margin: 0;
}
.concept-design-content__upload-box p strong {
	font-weight: var(--font-weight-bold);
	color: var(--color-accent);
}
.concept-design-content__upload-box svg {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-light);
}
.concept-design-content__files {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: .2rem;
}
.concept-design-content__files-header {
	background-color: var(--color-background-darker);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-8);
}
.concept-design-content__files-row {
	border-bottom: 1px solid var(--color-background-darker);
	padding: var(--spacing-20) var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-8);
}
.concept-design-content__files-row:last-child {
	border-bottom: none;
}
.concept-design-content__files-col {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 2rem; /* 200px */
	flex-shrink: 0;
}
.concept-design-content__files-header .concept-design-content__files-col {
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-uppercase);
}
.concept-design-content__files-col:last-child {
	display: flex;
	gap: var(--spacing-8);
	justify-content: flex-end;
}
.concept-design-content__action-btn {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	width: auto; 
	height: 0.36rem; 
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}
.concept-design-content__action-btn:hover {
	opacity: 0.9;
}
.concept-design-content__action-btn svg {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-dark);
}
/* File name column with edit button */
.concept-design-content__files-col--name {
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
}
.concept-design-content__file-name {
	word-break: break-word;
}
.concept-design-content__edit-name {
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-light);
	flex-shrink: 0;
}
.concept-design-content__edit-name:hover {
	opacity: 1;
}
/* Case study button in files table */
.concept-design-content__files-row--case-study {
	border-bottom: none;
}
.concept-design-content__case-study-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-8);
	padding: var(--spacing-12) var(--spacing-16);
	background-color: var(--color-accent);
	color: var(--color-text-dark);
	border-radius: var(--border-radius-small);
	text-decoration: none;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-medium);
	transition: opacity 0.2s ease;
}
.concept-design-content__case-study-btn:hover {
	opacity: 0.9;
}
/* Execution Content */
.execution-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}
.execution-content__upload-section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.execution-content__upload-section label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
}
.execution-content__upload-box {
	border: 0.5px dashed var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	height: 1.04rem; /* 104px */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
}
.execution-content__upload-box p {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	text-align: center;
	margin: 0;
}
.execution-content__upload-box p strong {
	font-weight: var(--font-weight-bold);
	color: var(--color-accent);
}
.execution-content__upload-box svg {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-light);
}
.execution-content__files {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.execution-content__files-header {
	background-color: var(--color-background-darker);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-8);
}
.execution-content__files-row {
	border-bottom: 1px solid var(--color-background-darker);
	padding: var(--spacing-20) var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-8);
}
.execution-content__files-row:last-child {
	border-bottom: none;
}
.execution-content__files-col {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 2rem; /* 200px */
	flex-shrink: 0;
}
.execution-content__files-header .execution-content__files-col {
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-uppercase);
}
.execution-content__files-col:last-child {
	display: flex;
	gap: var(--spacing-8);
	justify-content: flex-end;
}
.execution-content__action-btn {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	width: 0.36rem; /* 36px */
	height: 0.36rem; /* 36px */
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}
.execution-content__action-btn:hover {
	opacity: 0.9;
}
.execution-content__action-btn svg {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-dark);
}
/* Production Content */
.production-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}
.production-content__form-field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.production-content__form-field label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
}
.production-content__upload-box {
	border: 0.5px dashed var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	height: 1.04rem; /* 104px */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
}
.production-content__upload-box p {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	text-align: center;
	margin: 0;
}
.production-content__upload-box p strong {
	font-weight: var(--font-weight-bold);
	color: var(--color-accent);
}
.production-content__upload-box svg {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-light);
}
.production-content__files {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.production-content__files-header {
	background-color: var(--color-background-darker);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-8);
}
.production-content__files-row {
	border-bottom: 1px solid var(--color-background-darker);
	padding: var(--spacing-20) var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-8);
}
.production-content__files-row:last-child {
	border-bottom: none;
}
.production-content__files-col {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 2rem; /* 200px */
	flex-shrink: 0;
}
.production-content__files-header .production-content__files-col {
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-uppercase);
}
.production-content__files-col:last-child {
	display: flex;
	gap: var(--spacing-8);
	justify-content: flex-end;
}
.production-content__action-btn {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	width: 0.36rem; /* 36px */
	height: 0.36rem; /* 36px */
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}
.production-content__action-btn:hover {
	opacity: 0.9;
}
.production-content__action-btn svg {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-dark);
}
/* ============================================
   MOBILE RESPONSIVE (768px breakpoint)
   ============================================ */
@media (max-width: 768px) { /* 768px */
	.project-admin-page {
		padding: var(--spacing-16) 0;
	}
	
	.project-admin-page__container {
		padding: 0 var(--spacing-16);
	}
	
	.project-admin-page__title-section > div:first-child {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-16);
	}
	
	.project-admin-page__actions {
		flex-direction: column;
		width: 100%;
	}
	
	.project-admin-tab__table-col {
		width: 1rem;
		white-space: normal;
	}
	
	.project-admin-page__status,
	.project-admin-page__status-select {
		width: 100%;
	}
	
	.project-admin-page__back-btn {
		width: 100%;
	}
	
	.project-tabs {
		flex-direction: column;
	}
	
	.project-tabs__item {
		min-width: auto;
	}
	
	.project-admin-tab__section-header {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.project-admin-tab__section-meta {
		flex-direction: column;
		gap: var(--spacing-8);
	}
	
	.project-admin-tab__document-row {
		flex-direction: column;
		align-items: stretch;
	}
	
	.project-admin-tab__actions {
		flex-direction: column;
	}
	
	.project-admin-tab__download-btn {
		width: 100%;
	}
	
	.concept-design-content__upload-section {
		flex-direction: column;
	}
	
	.brief-step-content__row {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-4);
		margin-bottom: .2rem;
	}
	
	.brief-step-content__key,
	.brief-step-content__value {
		width: 100%;
		text-align: left;
	}

	.brief-step-content__value {
		margin-left: .1rem;
	}
	.brief-step-content__key {
		font-weight: var(--font-weight-bold);
	}
}
/* ============================================
   COMMENTS SECTION
   ============================================ */
.comments-section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	width: 100%;
}
.comments-section__header {
	background-color: var(--color-background-darker);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
}
.comments-section__title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
}
.comments-section__comment {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	padding: var(--spacing-16);
	min-height: 0.76rem; /* 76px */
}
.comments-section__comment--bordered {
	border-bottom: 1px solid var(--color-border);
}
.comments-section__comment-content {
	display: flex;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-18);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: var(--spacing-16);
}
.comments-section__comment-text {
	margin: 0;
	flex: 1;
}
.comments-section__comment-meta {
	margin: 0;
	white-space: nowrap;
	flex-shrink: 0;
}
.comments-section__comment-footer {
	display: flex;
	align-items: center;
	gap: var(--spacing-16);
}
.comments-section__comment-delete {
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s ease;
	color: var(--color-text-light);
}
.comments-section__comment-delete:hover {
	opacity: 1;
	color: #dc3545;
}
.comments-section__list {
	display: flex;
	flex-direction: column;
}
.comments-section__empty {
	padding: var(--spacing-24);
	text-align: center;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	color: var(--color-text-muted);
	margin: 0;
}
.comments-section__form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.comments-section__form-label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
}
.comments-section__form-textarea {
	background-color: var(--color-background-darker);
	border: none;
	width: 100%;
	min-height: 1.04rem; /* 104px */
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	resize: vertical;
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: outline 0.3s ease, color 0.3s ease;
}
.comments-section__form-textarea:focus,.comments-section__form-textarea:focus-within,.comments-section__form-textarea:hover {
		outline: 1px solid var(--color-accent);
		outline-offset: 0;
		color: white !important;
	}
.comments-section__form-textarea::placeholder {
	color: var(--color-text-light);
	opacity: 0.5;
}
.comments-section__form-actions {
	gap: var(--spacing-16);
	margin-top: var(--spacing-8);
}
.comments-section__btn {
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;
	white-space: nowrap;
}
.comments-section__btn--secondary {
	background-color: transparent;
	border: 1px solid var(--color-accent);
	color: var(--color-accent);
}
.comments-section__btn--secondary:hover {
	opacity: 0.9;
}
.comments-section__btn--primary {
	background-color: var(--color-accent);
	color: var(--color-text-dark);
	border: none;
}
.comments-section__btn--primary:hover {
	opacity: 0.9;
	background-color: rgba(196, 219, 2, 0.9);
}
/* ============================================
   ADD NEW PROJECT STEP BUTTON
   ============================================ */
/* Hide "Add New Project Step" button by default */
.project-admin-page .add-new-project-step {
	width: 100%;
	margin-top: var(--spacing-24);
	display: none;
}
/* Hide buttons that are direct children of .project-admin-page (outside container/tabs) */
.project-admin-page > .add-new-project-step {
	display: none !important;
}
/* Show "Add New Project Step" button only when concept-design or execution tab is active AND inside a tab */
.project-admin-page--tab-concept-design .project-admin-tab[data-tab="concept-design"] .add-new-project-step,
.project-admin-page--tab-execution .project-admin-tab[data-tab="execution"] .add-new-project-step {
	display: block !important;
}
.add-new-project-step__button {
	background-color: var(--color-background-darker);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}
.add-new-project-step__button:hover {
	opacity: 0.9;
	background-color: rgba(38, 38, 40, 0.8);
}
.add-new-project-step__icon-wrapper {
	background-color: var(--color-accent);
	border-radius: var(--border-radius-small);
	width: 0.3rem; /* 30px */
	height: 0.3rem; /* 30px */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
}
.add-new-project-step__icon-wrapper svg {
	width: 0.14rem; /* 14px */
	height: 0.14rem; /* 14px */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.add-new-project-step__text {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-18);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	text-align: center;
	white-space: nowrap;
}
/* ============================================
   ADD CORRECTION BUTTON
   ============================================ */
.add-correction {
	width: 100%;
	margin-bottom: var(--spacing-24);
}
.add-correction__button {
	background-color: var(--color-background-darker);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}
/* When inside nested-content wrapper, add left margin */
.accordion__nested-content .add-correction__button {
	margin-left: var(--spacing-left-child);
}
.add-correction__button:hover {
	opacity: 0.9;
	background-color: rgba(38, 38, 40, 0.8);
}
.add-correction__icon-wrapper {
	background-color: var(--color-accent);
	border-radius: var(--border-radius-small);
	width: 0.3rem; /* 30px */
	height: 0.3rem; /* 30px */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
}
.add-correction__icon-wrapper svg {
	width: 0.14rem; /* 14px */
	height: 0.14rem; /* 14px */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.add-correction__text {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-18);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	text-align: center;
	white-space: nowrap;
}
/* Danger variant for Remove Module */
.add-correction__button--danger {
	background-color: rgba(220, 53, 69, 0.1);
}
.add-correction__button--danger:hover {
	background-color: rgba(220, 53, 69, 0.2);
}
.add-correction__icon-wrapper--danger {
	background-color: #dc3545;
}
.add-correction__button--danger:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
/* Module actions grid layout */
.project-module__actions {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--spacing-12);
	margin-top: var(--spacing-16);
	margin-bottom: var(--spacing-16);
}
.project-module__actions .add-correction {
	margin-bottom: 0;
}
@media (max-width: 992px) {
	.project-module__actions {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 576px) {
	.project-module__actions {
		grid-template-columns: 1fr;
	}
}
/* Add new project step Form */
.add-module-form {
	margin-top: var(--spacing-48);
	padding: var(--spacing-24);
	background-color: var(--color-background-darker);
	border-radius: var(--border-radius-medium);
}
.add-module-form__title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-18);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-light);
	margin: 0 0 var(--spacing-24) 0;
}
.add-module-form__fields {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--spacing-16);
	margin-bottom: var(--spacing-24);
}
.add-module-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.add-module-form__label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-muted);
}
.add-module-form__optional {
	font-weight: var(--font-weight-regular);
	opacity: 0.6;
}
.add-module-form__input {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	padding: var(--spacing-12) var(--spacing-16);
	background-color: var(--color-background-main);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--border-radius-small);
	color: var(--color-text-light);
	transition: border-color 0.2s ease, outline 0.2s ease;
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
}
.add-module-form__input:focus {
	outline: 0 solid transparent;
	outline-offset: 0;
	border-color: var(--color-accent);
}
.add-module-form__input::placeholder {
	color: var(--color-text-muted);
	opacity: 0.6;
}
.add-module-form__description {
	resize: vertical;
	min-height: 60px;
}
.add-module-form__type {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23FEFBF7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--spacing-16) center;
	padding-right: var(--spacing-40);
}
.add-module-form .add-correction {
	margin-bottom: 0;
}
@media (max-width: 992px) {
	.add-module-form__fields {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 576px) {
	.add-module-form__fields {
		grid-template-columns: 1fr;
	}
}
/* Module Files Table */
.module-files-table {
	background-color: var(--color-background-light);
	border-radius: var(--border-radius-medium);
	overflow: hidden;
	margin-top: var(--spacing-16);
	border: 1px solid var(--color-border);
}
.module-files-table__header {
	display: grid;
	grid-template-columns: 1fr 100px 120px 80px;
	gap: var(--spacing-16);
	padding: var(--spacing-12) var(--spacing-16);
	background-color: var(--color-background-light);
	border-bottom: 1px solid var(--color-border);
}
.module-files-table__header .module-files-table__col {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-12);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.module-files-table__body {
	display: flex;
	flex-direction: column;
}
.module-files-table__row {
	display: grid;
	grid-template-columns: 1fr 100px 120px 80px;
	gap: var(--spacing-16);
	padding: var(--spacing-12) var(--spacing-16);
	border-bottom: 1px solid var(--color-border);
	align-items: center;
	background-color: var(--color-background-light);
}
.module-files-table__row:last-child {
	border-bottom: none;
}
.module-files-table__file-info {
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
}
.module-files-table__file-name {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	color: var(--color-text-dark);
	word-break: break-word;
}
.module-files-table__edit-name {
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-dark);
}
.module-files-table__edit-name:hover {
	opacity: 1;
}
.module-files-table__col--type,
.module-files-table__col--date {
	font-size: var(--font-size-14);
	color: var(--color-text-muted);
}
.module-files-table__col--actions {
	display: flex;
	gap: var(--spacing-4);
	justify-content: flex-end;
}
/* Action buttons - same style as accordion__delete */
.module-files-table__action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	border-radius: var(--border-radius-small);
	cursor: pointer;
	transition: background-color 0.2s ease;
	text-decoration: none;
	padding: 0;
}
.module-files-table__action-btn svg {
	width: 24px;
	height: 24px;
}
.module-files-table__action-btn svg path {
	fill: var(--color-text-dark);
	transition: fill 0.2s ease;
}
.module-files-table__action-btn:hover {
	background-color: rgba(0, 0, 0, 0.05);
}
.module-files-table__action-btn--delete:hover {
	background-color: rgba(220, 53, 69, 0.1);
}
.module-files-table__action-btn--delete:hover svg path {
	fill: #dc3545;
}
.module-files-table__case-study {
	padding: var(--spacing-16);
	border-top: 1px solid var(--color-border);
}
.module-files-table__case-study-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-8);
	padding: var(--spacing-12) var(--spacing-16);
	background-color: var(--color-accent);
	color: var(--color-text-dark);
	border-radius: var(--border-radius-small);
	text-decoration: none;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-medium);
	transition: opacity 0.2s ease;
}
.module-files-table__case-study-btn:hover {
	opacity: 0.9;
}
@media (max-width: 768px) {
	.module-files-table__header,
	.module-files-table__row {
		grid-template-columns: 1fr 80px auto;
	}
	
	.module-files-table__col--type {
		display: none;
	}
}
/* Existing File Display */
.field-upload__existing {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-12) var(--spacing-16);
	background-color: var(--color-background-darker);
	border-radius: var(--border-radius-small);
	margin-bottom: var(--spacing-8);
}
.field-upload__existing-info {
	display: flex;
	align-items: center;
	gap: var(--spacing-12);
	color: var(--color-accent);
}
.field-upload__existing-name {
	color: var(--color-text-light);
	text-decoration: none;
	font-size: var(--font-size-14);
}
.field-upload__existing-name:hover {
	color: var(--color-accent);
}
.field-upload__existing-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	border-radius: var(--border-radius-small);
	color: var(--color-text-muted);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.field-upload__existing-remove:hover {
	background-color: rgba(220, 53, 69, 0.2);
	color: #dc3545;
}
/* Case Study Link Display */
.field-case-study__link-display {
	display: flex;
	align-items: center;
	gap: var(--spacing-12);
	margin-bottom: var(--spacing-12);
}
.field-case-study__view-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-8);
	padding: var(--spacing-10) var(--spacing-16);
	background-color: var(--color-accent);
	color: var(--color-text-dark);
	border-radius: var(--border-radius-small);
	text-decoration: none;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-medium);
	transition: opacity 0.2s ease;
}
.field-case-study__view-btn:hover {
	opacity: 0.9;
}
.field-case-study__edit-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--border-radius-small);
	color: var(--color-text-muted);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.field-case-study__edit-btn:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}
/* Field Saving States */
.field-input.saving,
.field-textarea.saving,
.field-link__input.saving {
	border-color: var(--color-accent);
	opacity: 0.7;
}
.field-input.saved,
.field-textarea.saved,
.field-link__input.saved {
	border-color: #28a745;
}
.field-input.error,
.field-textarea.error,
.field-link__input.error {
	border-color: #dc3545;
}
/* Upload Loading State */
.field-upload.uploading,
.field-upload-dual__upload.uploading {
	opacity: 0.6;
	pointer-events: none;
}
.field-upload.uploading::after,
.field-upload-dual__upload.uploading::after {
	content: 'Uploading...';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.8);
	color: var(--color-text-light);
	padding: var(--spacing-8) var(--spacing-16);
	border-radius: var(--border-radius-small);
	font-size: var(--font-size-14);
}
.field-upload-dual__link-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	padding: var(--spacing-16);
	background-color: var(--color-background-darker);
	border: 1px dashed rgba(255, 255, 255, 0.2);
	border-radius: var(--border-radius-small);
	color: var(--color-text-muted);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
	width: 100%;
	margin-bottom: var(--spacing-12);
}
.field-upload-dual__link-btn:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}
/* Case Study Form */
.case-study-form__tabs {
	display: flex;
	gap: var(--spacing-8);
	margin-bottom: var(--spacing-24);
}
.case-study-form__tab {
	flex: 1;
	padding: var(--spacing-12) var(--spacing-16);
	background-color: var(--color-background-darker);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--border-radius-small);
	color: var(--color-text-muted);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-medium);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.case-study-form__tab:hover {
	border-color: rgba(255, 255, 255, 0.2);
	color: var(--color-text-light);
}
.case-study-form__tab--active {
	border-color: var(--color-accent);
	color: var(--color-accent);
}
.case-study-form__content {
	display: none;
}
.case-study-form__content--active {
	display: block;
}
.case-study-form__field {
	margin-bottom: var(--spacing-16);
}
.case-study-form__label {
	display: block;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-light);
	margin-bottom: var(--spacing-8);
}
.case-study-form__input,
.case-study-form__textarea {
	width: 100%;
	padding: var(--spacing-12) var(--spacing-16);
	background-color: var(--color-background-darker);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--border-radius-small);
	color: var(--color-text-light);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	transition: border-color 0.2s ease, outline 0.2s ease;
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
}
.case-study-form__input:focus,
.case-study-form__textarea:focus {
	outline: 0 solid transparent;
	outline-offset: 0;
	border-color: var(--color-accent);
}
.case-study-form__input::placeholder,
.case-study-form__textarea::placeholder {
	color: var(--color-text-muted);
	opacity: 0.6;
}
.case-study-form__textarea {
	resize: vertical;
	min-height: 100px;
}
.case-study-form__hint {
	font-size: var(--font-size-12);
	color: var(--color-text-muted);
	margin-top: var(--spacing-8);
}
@media (max-width: 768px) {
	.module-files-table__header,
	.module-files-table__row {
		grid-template-columns: 1fr auto;
	}
	
	.module-files-table__col--date,
	.module-files-table__col--size {
		display: none;
	}
}
/* Link Repeater Field */
.link-repeater__list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-12);
}
.link-repeater__item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.link-repeater__inputs {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.link-repeater__title-input {
	background-color: var(--color-background-darker);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-12) var(--spacing-16);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	color: var(--color-text-light);
}
.link-repeater__title-input {
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: border-color 0.2s ease, outline 0.2s ease;
}
.link-repeater__title-input:focus {
	outline: 0 solid transparent;
	outline-offset: 0;
	border-color: var(--color-accent);
}
.link-repeater__title-input::placeholder {
	color: var(--color-text-muted);
	opacity: 0.6;
}
.link-repeater__add {
	margin-top: var(--spacing-16);
}
.link-repeater__add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	width: 100%;
	padding: var(--spacing-16);
	background-color: var(--color-background-darker);
	border: 1px dashed rgba(255, 255, 255, 0.2);
	border-radius: var(--border-radius-small);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.link-repeater__add-btn:hover {
	border-color: var(--color-accent);
}
.link-repeater__add-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background-color: var(--color-accent);
	border-radius: var(--border-radius-small);
	color: var(--color-text-dark);
}
.link-repeater__add-text {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-light);
}
/* Case Study Form */
.case-study-form__field {
	margin-bottom: var(--spacing-16);
}
.case-study-form__label {
	display: block;
	margin-bottom: var(--spacing-8);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-light);
}
.case-study-form__input,
.case-study-form__textarea {
	width: 100%;
	background-color: var(--color-background-darker);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-12) var(--spacing-16);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	color: var(--color-text-light);
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: border-color 0.2s ease, outline 0.2s ease;
}
.case-study-form__input:focus,
.case-study-form__textarea:focus {
	outline: 0 solid transparent;
	outline-offset: 0;
	border-color: var(--color-accent);
}
.case-study-form__hint {
	margin-top: var(--spacing-8);
	font-size: var(--font-size-12);
	color: var(--color-text-muted);
}
/* Modal footer buttons */
#modal-case-study .modal__footer {
	display: flex;
	gap: var(--spacing-12);
	justify-content: flex-end;
}
#case-study-save-btn {
	cursor: pointer;
}
#modal-case-study .modal__container {
		background: black;
		padding: 1rem;
		border-radius: .2rem;
	}
#modal-case-study .modal__btn {
		text-align: center;
		font-weight: 700;
		color: black;
	}
/* Mobile Responsive */
@media (max-width: 768px) { /* 768px */
	.comments-section__comment-content {
		flex-direction: column;
		font-size: var(--font-size-12);
		align-items: flex-start;
		gap: var(--spacing-8);
	}
	
	.comments-section__comment-meta {
		white-space: normal;
	}
}
/* ============================================
   REUSABLE FIELD COMPONENTS
   ============================================ */
.field-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}
.field-group__item {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.field-label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
}
/* Upload Field */
.field-upload {
	position: relative;
}
.field-upload__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	overflow: hidden;
}
.field-upload__dropzone {
	border: 0.5px dashed var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	height: 1.04rem; /* 104px */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.field-upload__dropzone:hover {
	border-color: var(--color-accent);
}
.field-upload__dropzone--drag-active {
	border-color: var(--color-accent);
	border-width: 2px;
	border-style: dashed;
}
.field-upload__icon {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-light);
	flex-shrink: 0;
}
.field-upload__text {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	text-align: center;
	margin: 0;
}
.field-upload__text strong {
	font-weight: var(--font-weight-bold);
	color: var(--color-accent);
}
.field-upload__hint {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	text-align: center;
	margin: 0;
}
/* Upload Dual (Case Study Link + Upload) */
.field-upload-dual {
	display: flex;
	gap: var(--spacing-24);
}
.field-upload-dual__link-btn {
	border: 0.5px solid var(--color-accent);
	background: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	height: 1.04rem; /* 104px */
	flex: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.field-upload-dual__link-btn:hover {
	opacity: 0.9;
}
.field-upload-dual__link-btn span {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-18);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	text-align: center;
}
.field-upload-dual__upload {
	flex: 1;
	position: relative;
}
.field-upload-dual__input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	overflow: hidden;
}
.field-upload-dual__dropzone {
	border: 0.5px dashed var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	height: 1.04rem; /* 104px */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.field-upload-dual__dropzone:hover {
	border-color: var(--color-accent);
}
.field-upload-dual__icon {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-light);
	flex-shrink: 0;
}
.field-upload-dual__text {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	text-align: center;
	margin: 0;
}
.field-upload-dual__text strong {
	font-weight: var(--font-weight-bold);
	color: var(--color-accent);
}
.field-upload-dual__hint {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	text-align: center;
	margin: 0;
}
/* Input Field */
.field-input {
	background-color: var(--color-background-darker);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 100%;
	height: 0.52rem; /* 52px */
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: background-color 0.2s ease, border 0.2s ease, outline 0.2s ease;
}
.field-input::placeholder {
	color: var(--color-text-light);
	opacity: 0.5;
}
.field-input:hover {
	background-color: rgba(38, 38, 40, 0.8);
}
.field-input:focus {
	background-color: rgba(38, 38, 40, 0.9);
	border: 1px solid var(--color-accent);
	outline: 0 solid transparent;
	outline-offset: 0;
}
/* Textarea Field */
.field-textarea {
	background-color: var(--color-background-darker);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 100%;
	height: 1.04rem; /* 104px */
	resize: vertical;
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: background-color 0.2s ease, border 0.2s ease, outline 0.2s ease;
}
.field-textarea::placeholder {
	color: var(--color-text-light);
	opacity: 0.5;
}
.field-textarea:hover {
	background-color: rgba(38, 38, 40, 0.8);
}
.field-textarea:focus {
	background-color: rgba(38, 38, 40, 0.9);
	border: 1px solid var(--color-accent);
	outline: 0 solid transparent;
	outline-offset: 0;
}
/* Link Field */
.field-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
}
.field-link__input {
	background-color: var(--color-background-darker);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	width: 100%;
	height: 0.52rem; /* 52px */
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: background-color 0.2s ease, border 0.2s ease, outline 0.2s ease;
}
.field-link__input::placeholder {
	color: var(--color-text-light);
	opacity: 0.5;
}
.field-link__input:hover {
	background-color: rgba(38, 38, 40, 0.8);
}
.field-link__input:focus {
	background-color: rgba(38, 38, 40, 0.9);
	border: 1px solid var(--color-accent);
	outline: 0 solid transparent;
	outline-offset: 0;
}
.field-link__delete {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	padding: .1rem;
	width: auto; /* 30px */
	height: auto; /* 30px */
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}
.field-link__delete:hover {
	opacity: 0.9;
}
.field-link__delete svg {
	width: 0.2rem; /* 20px */
	height: 0.2rem; /* 20px */
	color: var(--color-text-dark);
}
/* Date Input Field */
input[type="date"] {
	cursor: pointer;
	position: relative;
}
/* Make the entire date input clickable and style calendar icon */
input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 1;
	filter: brightness(0) saturate(100%) invert(77%) sepia(95%) saturate(1352%) hue-rotate(28deg) brightness(101%) contrast(89%);
}
/* Style calendar icon for webkit browsers (Chrome, Safari, Edge) */
input[type="date"]::-webkit-calendar-picker-indicator:hover {
	opacity: 0.8;
}
/* Ensure the entire input area is clickable */
input[type="date"]:not(:disabled):not([readonly]) {
	cursor: pointer;
}
/* ============================================
   MOBILE RESPONSIVE (768px breakpoint)
   ============================================ */
@media (max-width: 768px) { /* 768px */
	.field-upload-dual {
		flex-direction: column;
	}
	
	.field-upload-dual__link-btn,
	.field-upload-dual__dropzone {
		height: auto;
		min-height: 1.04rem; /* 104px */
	}
	
	.field-link {
		flex-direction: column;
		align-items: stretch;
	}
	
	.field-link__delete {
		width: 100%;
		height: 0.5rem; /* 50px */
	}
}
.btn-wrap {
    display: flex;
}
_end.btn-wrap {
        justify-content: flex-end;
    }
_start.btn-wrap {
        justify-content: flex-start;
    }
_center.btn-wrap {
        justify-content: center;
    }
.btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}
a.btn {
    display: flex;
    align-items: center;
}
a.btn-2 {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}
.btn-wrap_end {
    display: flex;
    justify-content: flex-end;
}
@media (max-width: 768px) and (orientation: portrait) {
.btn-wrap_end {
        justify-content: center;
}
    }
.btn-wrap_start {
    display: flex;
    justify-content: flex-start;
}
.btn-wrap_center {
    display: flex;
    justify-content: center;
}
/* ============================================
   LOGIN PAGE
   Based on Figma: node-id=672-2015
   Exact match to design specifications
   ============================================ */
.page-template-tpl-login header {
		display: none !important;
	}
.page-template-tpl-login body {
		margin: 0;
		padding: 0;
		overflow: hidden;
		height: 100vh;
	}
.page-template-tpl-login #page {
		margin: 0;
		padding: 0;
		height: 100vh;
		overflow: hidden;
	}
.login-page {
	background-color: #f8f4f2;
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.login-page__container {
	width: 100%;
	height: 100vh;
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
}
@media (max-width: 768px) and (orientation: portrait) {
.login-page__container {
		overflow-y: scroll;
}
	}
/* ============================================
   LEFT SIDE: Login Form
   ============================================ */
.login-page__left {
	position: absolute;
	background-color: #0b0a09;
	border-right: 1px solid #7a8895;
	height: 100vh;
	left: 0;
	top: 0;
	width: 50%; /* 50% of container (720px at 1440px) */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.login-page__left-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 0.32rem 0; /* 32px vertical padding */
	height: 100%;
	max-height: 100vh;
	box-sizing: border-box;
}
/* Logo */
.login-page__logo {
	height: 1.54rem; /* 154px */
	width: 3rem; /* 161.226px */
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: auto;
	padding-top: 0.32rem; /* 32px top padding */
}
.login-page__logo svg {
		width: 100%;
  		height: auto;
	}
:is(:is(:is(body main) .login-page,:is(body main) .forgot-pass-page) .login-page__form-section,:is(:is(body main) .login-page,:is(body main) .forgot-pass-page) .forgot-pass-page__logo) input {
					border-radius: 0 !important;
				}
.login-page__logo img {
	height: 100%;
	width: auto;
	max-width: 100%;
}
/* Form Section */
.login-page__form-section {
	display: flex;
	flex-direction: column;
	gap: 0.16rem; /* 16px gap between elements */
	align-items: center;
	justify-content: center;
	width: 5.42rem;
	flex: 1;
	margin: 0.22rem 0; /* 72px vertical margin */
	min-height: 0;
}
.login-page__welcome {
	font-family: var(--font-family-primary);
	font-size: 0.18rem; /* 18px */
	font-weight: var(--font-weight-medium); /* Graphik Medium */
	line-height: 1.1;
	color: #f8f4f2;
	margin: 0;
	text-align: center;
	white-space: nowrap;
}
/* Error Message */
.login-page__error {
	font-family: var(--font-family-primary) !important;
	font-size: 0.14rem !important; /* 14px */
	font-weight: var(--font-weight-regular) !important;
	line-height: 1.4 !important;
	color: #ff6b6b !important;
	margin: 0 !important;
	margin-bottom: 0.16rem !important; /* 16px bottom margin */
	text-align: center !important;
	padding: 0.08rem 0 !important; /* 8px vertical padding */
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
}
/* Success Message */
.login-page__success {
	font-family: var(--font-family-primary);
	font-size: 0.14rem; /* 14px */
	font-weight: var(--font-weight-regular);
	line-height: 1.4;
	color: white;
	margin: 0;
	text-align: center;
	padding: 0.08rem 0; /* 8px vertical padding */
}
/* Form */
.login-page__form {
	display: flex;
	flex-direction: column;
	gap: 0.24rem; /* 24px gap between form fields and button */
	width: 100%;
}
.login-page__form-fields {
	display: flex;
	flex-direction: column;
	gap: 0.24rem; /* 24px gap between fields */
	width: 100%;
}
/* Form Field */
.login-page__form-field {
	display: flex;
	flex-direction: column;
	gap: 0.08rem; /* 8px gap between label and input */
	width: 100%;
}
/* Label */
.login-page__label {
	font-family: var(--font-family-primary);
	font-size: 0.14rem; /* 14px */
	font-weight: var(--font-weight-regular);
	line-height: 1.4;
	color: #f8f4f2;
}
/* Input */
.login-page__input {
	background-color: var(--color-background-darker);
	border: none;
	border-radius: 0.08rem; /* 8px */
	padding: 0.16rem; /* 16px */
	font-family: var(--font-family-primary);
	font-size: 0.14rem; /* 14px */
	font-weight: var(--font-weight-regular);
	line-height: 1.4;
	color: #f8f4f2;
	width: 100%;
	height: 0.52rem; /* 52px */
	outline: none;
	transition: background-color 0.2s ease, border 0.2s ease;
	box-sizing: border-box;
}
.login-page__input::placeholder {
	color: #f8f4f2;
	opacity: 0.5;
}
.login-page__input:hover {
	background-color: rgba(38, 38, 40, 0.8);
}
.login-page__input:focus {
	background-color: rgba(38, 38, 40, 0.9);
	border: 1px solid white;
}
/* Forgot Password Link */
.login-page__forgot-link {
	font-family: var(--font-family-primary);
	font-size: 0.14rem; /* 14px */
	font-weight: var(--font-weight-regular);
	line-height: 1.4;
	color: #f8f4f2;
	text-decoration: none;
	transition: opacity 0.2s ease;
	width: 2.33rem; /* 233px */
	height: 0.2rem; /* 20px */
	z-index: 99999;
}
.login-page__forgot-link:hover {
	opacity: 0.8;
}
.login-page__forgot-link--accent {
	color: white;
}
/* Button Wrapper */
.login-page__button-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.24rem; /* 24px */
	width: 100%;
}
/* Submit Button */
.login-page__submit-btn {
	background-color: white;
	border: none;
	border-radius: 0.08rem; /* 8px */
	padding: 0.16rem; /* 16px */
	width: 100%;
	height: 0.5rem; /* 50px */
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: 0.16rem; /* 16px */
	font-weight: var(--font-weight-medium);
	line-height: 1.1;
	color: #0b0a09;
	transition: opacity 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.08rem; /* 8px */
	box-sizing: border-box;
}
.login-page__submit-btn:hover {
	opacity: 0.9;
}
/* EU Badge */
.login-page__eu-badge {
	position: relative;
	margin-top: auto;
	flex-shrink: 0;
	padding-top: 0.32rem; /* 32px bottom padding */
	padding-bottom: 0.32rem; /* 32px bottom padding */
}
.login-page__eu-badge .eu-badge {
	color: #f8f4f2; /* White for dark background */
}
.login-page__eu-badge .eu-badge__text {
	color: #f8f4f2; /* White for dark background */
}
/* ============================================
   RIGHT SIDE: Placeholder/Error State
   ============================================ */
.login-page__right {
	position: absolute;
	background-color: white;
	height: 100vh;
	left: 50%; /* Start after left side */
	top: 0;
	width: 50%; /* 50% of container (720px at 1440px) */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.4rem;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
	overflow: hidden;
}
.login-page__right-content {
	display: flex;
	flex-direction: column;
	gap: 0.24rem; /* 24px gap between title and text */
	align-items: center;
	justify-content: center;
	position: relative;
	flex-shrink: 0;
}
.login-page__not-found {
	display: flex;
	flex-direction: column;
	gap: 0.24rem; /* 24px */
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #0b0a09;
}
.login-page__not-found-title {
	font-family: var(--font-family-primary);
	font-size: 0.5rem; /* 50px */
	font-weight: var(--font-weight-bold);
	line-height: 1.1;
	color: #0b0a09;
	margin: 0;
	width: 4.78rem; /* 478px */
}
.login-page__not-found-text {
	font-family: var(--font-family-primary);
	font-size: 0.24rem; /* 24px */
	font-weight: 600; /* Semibold */
	line-height: 1.5;
	color: #0b0a09;
	margin: 0;
	width: 4.62rem; /* 462px */
}
.login-page__home-btn {
	width: 0.56rem; /* 56px */
	height: 0.56rem; /* 56px */
	border-radius: 50%;
	background-color: #0b0a09;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.2s ease;
	color: white;
	position: relative;
	flex-shrink: 0;
}
.login-page__home-btn:hover {
	opacity: 0.8;
}
/* ============================================
   MOBILE RESPONSIVE (768px breakpoint)
   ============================================ */
@media (max-width: 768px) {

	.login-page__logo {
		width: 1rem;
		height: 1rem;
	}

		.login-page__logo svg {
			width: 100%;
			height: 100%;
		}

	.login-page__left {
		position: relative;
		width: 100%;
		height: auto;
		min-height: 50vh;
		border-right: none;
		border-bottom: 1px solid #7a8895;
	}

	.login-page__left-content {
		padding: var(--spacing-24);
	}

	.login-page__form-section {
		width: 100%;
		max-width: 5.42rem;
	}

	.login-page__right {
		position: relative;
		left: 0;
		width: 100%;
		height: auto;
		min-height: 50vh;
		padding-top: var(--spacing-24);
	}

	.login-page__not-found-title {
		font-size: var(--font-size-22);
		width: 100%;
	}

	.login-page__not-found-text {
		font-size: var(--font-size-16);
		width: 100%;
	}
}
/* ============================================
   FORGOT PASSWORD PAGE
   Reuses login page styles with full-width layout
   ============================================ */
.page-template-tpl-forgot-pass header {
		display: none !important;
	}
.page-template-tpl-forgot-pass body {
		margin: 0;
		padding: 0;
		overflow: hidden;
		height: 100vh;
	}
.page-template-tpl-forgot-pass #page {
		margin: 0;
		padding: 0;
		height: 100vh;
		overflow: hidden;
	}
.forgot-pass-page {
	background-color: #f8f4f2;
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.forgot-pass-page__container {
	width: 100%;
	max-width: 100%;
	height: 100vh;
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
}
.forgot-pass-page__left {
	position: absolute;
	background-color: #0b0a09;
	border-right: none;
	height: 100vh;
	left: 0;
	top: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.forgot-pass-page__left-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 0.32rem 0; /* 32px vertical padding */
	width: 7.2rem; /* 720px */
	height: 100%;
	max-height: 100vh;
	box-sizing: border-box;
}
.forgot-pass-page__logo {
	height: auto;
	width: 2rem;
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: auto;
	padding-top: 0.32rem;
}
.forgot-pass-page__logo svg {
	width: 100%;
	height: 100%;
}
.forgot-pass-page__form-section {
	display: flex;
	flex-direction: column;
	gap: 0.48rem; /* 48px gap between message and form */
	align-items: center;
	justify-content: center;
	width: 3.42rem; /* 342px */
	flex: 1;
	margin: 0.72rem 0; /* 72px vertical margin */
	min-height: 0;
}
.forgot-pass-page__message {
	font-family: var(--font-family-primary);
	font-size: 0.18rem; /* 18px */
	font-weight: var(--font-weight-medium); /* Graphik Medium */
	line-height: 1.1;
	color: #f8f4f2;
	margin: 0;
	text-align: center;
	white-space: normal;
}
.forgot-pass-page__form {
	display: flex;
	flex-direction: column;
	gap: 0.24rem; /* 24px gap between form fields and button */
	width: 100%;
}
.forgot-pass-page__form-fields {
	display: flex;
	flex-direction: column;
	gap: 0.24rem; /* 24px gap between fields */
	width: 100%;
}
.forgot-pass-page__form-field {
	display: flex;
	flex-direction: column;
	gap: 0.08rem; /* 8px gap between label and input */
	width: 100%;
}
.forgot-pass-page__label {
	font-family: var(--font-family-primary);
	font-size: 0.14rem; /* 14px */
	font-weight: var(--font-weight-regular);
	line-height: 1.4;
	color: #f8f4f2;
}
.forgot-pass-page__input {
	background-color: var(--color-background-darker);
	border: none;
	border-radius: 0.08rem; /* 8px */
	padding: 0.16rem; /* 16px */
	font-family: var(--font-family-primary);
	font-size: 0.14rem; /* 14px */
	font-weight: var(--font-weight-regular);
	line-height: 1.4;
	color: #f8f4f2;
	width: 100%;
	height: 0.52rem; /* 52px */
	outline: none;
	transition: background-color 0.2s ease, border 0.2s ease;
	box-sizing: border-box;
}
.forgot-pass-page__input::placeholder {
	color: #f8f4f2;
	opacity: 0.5;
}
.forgot-pass-page__input:hover {
	background-color: rgba(38, 38, 40, 0.8);
}
.forgot-pass-page__input:focus {
	background-color: rgba(38, 38, 40, 0.9);
	border: 1px solid white;
}
.forgot-pass-page__button-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.24rem; /* 24px */
	width: 100%;
}
.forgot-pass-page__submit-btn {
	background-color: white;
	border: none;
	border-radius: 0.08rem; /* 8px */
	padding: 0.16rem; /* 16px */
	width: 100%;
	height: 0.5rem; /* 50px */
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: 0.16rem; /* 16px */
	font-weight: var(--font-weight-medium);
	line-height: 1.1;
	color: #0b0a09;
	transition: opacity 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.08rem; /* 8px */
	box-sizing: border-box;
}
.forgot-pass-page__submit-btn:hover {
	opacity: 0.9;
}
.forgot-pass-page__eu-badge {
	position: relative;
	margin-top: auto;
	flex-shrink: 0;
	padding-top: 0.32rem; /* 32px top padding */
	padding-bottom: 0.32rem; /* 32px bottom padding */
}
.forgot-pass-page__eu-badge .eu-badge {
	color: #f8f4f2; /* White for dark background */
}
.forgot-pass-page__eu-badge .eu-badge__text {
	color: #f8f4f2; /* White for dark background */
}
/* ============================================
   ACTIVATE ACCOUNT PAGE
   Reuses login page styles with full-width layout
   ============================================ */
.page-template-tpl-activate-account header {
		display: none !important;
	}
.page-template-tpl-activate-account body {
		margin: 0;
		padding: 0;
		overflow: hidden;
		height: 100vh;
	}
.page-template-tpl-activate-account #page {
		margin: 0;
		padding: 0;
		height: 100vh;
		overflow: hidden;
	}
.activate-account-page {
	background-color: #f8f4f2;
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.activate-account-page__container {
	width: 100%;
	max-width: 100%;
	height: 100vh;
	position: relative;
	margin: 0 auto;
	box-sizing: border-box;
}
.activate-account-page__left {
	position: absolute;
	background-color: #0b0a09;
	border-right: none;
	height: 100vh;
	left: 0;
	top: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.activate-account-page__left-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 0.32rem 0; /* 32px vertical padding */
	width: 7.2rem; /* 720px */
	height: 100%;
	max-height: 100vh;
	box-sizing: border-box;
}
.activate-account-page__logo {
	height: 1.54rem; /* 154px */
	width: 1.612rem; /* 161.226px */
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: auto;
	padding-top: 0.32rem; /* 32px top padding */
}
.activate-account-page__logo svg {
	width: 100%;
	height: 100%;
}
.activate-account-page__form-section {
	display: flex;
	flex-direction: column;
	gap: 0.48rem; /* 48px gap between message and form */
	align-items: center;
	justify-content: center;
	width: 3.42rem; /* 342px */
	flex: 1;
	margin: 0.72rem 0; /* 72px vertical margin */
	min-height: 0;
}
.activate-account-page__message {
	font-family: var(--font-family-primary);
	font-size: 0.18rem; /* 18px */
	font-weight: var(--font-weight-medium); /* Graphik Medium */
	line-height: 1.1;
	color: #f8f4f2;
	margin: 0;
	text-align: center;
	white-space: normal;
}
.activate-account-page__form {
	display: flex;
	flex-direction: column;
	gap: 0.24rem; /* 24px gap between form fields and button */
	width: 100%;
}
.activate-account-page__form-fields {
	display: flex;
	flex-direction: column;
	gap: 0.24rem; /* 24px gap between fields */
	width: 100%;
}
.activate-account-page__form-field {
	display: flex;
	flex-direction: column;
	gap: 0.08rem; /* 8px gap between label and input */
	width: 100%;
}
.activate-account-page__label {
	font-family: var(--font-family-primary);
	font-size: 0.14rem; /* 14px */
	font-weight: var(--font-weight-regular);
	line-height: 1.4;
	color: #f8f4f2;
}
.activate-account-page__input {
	background-color: var(--color-background-darker);
	border: none;
	border-radius: 0.08rem; /* 8px */
	padding: 0.16rem; /* 16px */
	font-family: var(--font-family-primary);
	font-size: 0.14rem; /* 14px */
	font-weight: var(--font-weight-regular);
	line-height: 1.4;
	color: #f8f4f2;
	width: 100%;
	height: 0.52rem; /* 52px */
	outline: none;
	transition: background-color 0.2s ease, border 0.2s ease;
	box-sizing: border-box;
}
.activate-account-page__input::placeholder {
	color: #f8f4f2;
	opacity: 0.5;
}
.activate-account-page__input:hover {
	background-color: rgba(38, 38, 40, 0.8);
}
.activate-account-page__input:focus {
	background-color: rgba(38, 38, 40, 0.9);
	border: 1px solid white;
}
.activate-account-page__button-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.24rem; /* 24px */
	width: 100%;
}
.activate-account-page__submit-btn {
	background-color: white;
	border: none;
	border-radius: 0.08rem; /* 8px */
	padding: 0.16rem; /* 16px */
	width: 100%;
	height: 0.5rem; /* 50px */
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: 0.16rem; /* 16px */
	font-weight: var(--font-weight-medium);
	line-height: 1.1;
	color: #0b0a09;
	transition: opacity 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.08rem; /* 8px */
	box-sizing: border-box;
}
.activate-account-page__submit-btn:hover {
	opacity: 0.9;
}
.activate-account-page__eu-badge {
	position: relative;
	margin-top: auto;
	flex-shrink: 0;
	padding-top: 0.32rem; /* 32px top padding */
	padding-bottom: 0.32rem; /* 32px bottom padding */
}
.activate-account-page__eu-badge .eu-badge {
	color: #f8f4f2; /* White for dark background */
}
.activate-account-page__eu-badge .eu-badge__text {
	color: #f8f4f2; /* White for dark background */
}
/* Mobile Responsive for Forgot Pass and Activate Account */
@media (max-width: 768px) {
	.forgot-pass-page__container,
	.activate-account-page__container {
		width: 100%;
		height: auto;
		min-height: 100vh;
	}

	.forgot-pass-page__left,
	.activate-account-page__left {
		position: relative;
		width: 100%;
		height: auto;
		min-height: 100vh;
	}

	.forgot-pass-page__left-content,
	.activate-account-page__left-content {
		padding: var(--spacing-24);
		width: 100%;
		max-width: 100%;
	}

	.forgot-pass-page__form-section,
	.activate-account-page__form-section {
		width: 100%;
		max-width: 100%;
	}
}
/* ============================================
   GRAVITY FORMS STYLING OVERRIDES
   Match existing form design
   ============================================ */
/* Form Wrapper */
.login-page__form-section .gform_wrapper,
.forgot-pass-page__form-section .gform_wrapper,
.activate-account-page__form-section .gform_wrapper {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* Override Gravity Forms CSS variables on form wrapper */
.login-page__form-section .gform_wrapper[data-form-index],
.forgot-pass-page__form-section .gform_wrapper[data-form-index],
.activate-account-page__form-section .gform_wrapper[data-form-index] {
	--gf-local-outline-color: transparent !important;
	--gf-label-req-gap: 0.04rem !important;
}
/* Gravity Forms Password Toggle Icon - Make it white */
.gform-theme--framework.gform-theme.gform_wrapper .gfield--type-password button.gform_show_password.gform-theme-button .dashicons,
.gform-theme--framework.gform-theme.gform_wrapper .gfield--type-password button.gform_show_password.gform-theme-button .dashicons::before,
.gform-theme--framework.gform-theme.gform_wrapper .gfield--type-password button.gform_show_password.gform-theme-button::after,
.gform-theme--framework.gform-theme.gform_wrapper .gfield--type-password button.gform_show_password.gform-theme-button::before {
	color: #f8f4f2 !important;
	--gf-local-color: #f8f4f2 !important;
}
.login-page__form-section .gform-theme--framework.gform-theme.gform_wrapper .gfield--type-password button.gform_show_password .dashicons,
.login-page__form-section .gform-theme--framework.gform-theme.gform_wrapper .gfield--type-password button.gform_show_password .dashicons::before,
.forgot-pass-page__form-section .gform-theme--framework.gform-theme.gform_wrapper .gfield--type-password button.gform_show_password .dashicons,
.forgot-pass-page__form-section .gform-theme--framework.gform-theme.gform_wrapper .gfield--type-password button.gform_show_password .dashicons::before,
.activate-account-page__form-section .gform-theme--framework.gform-theme.gform_wrapper .gfield--type-password button.gform_show_password .dashicons,
.activate-account-page__form-section .gform-theme--framework.gform-theme.gform_wrapper .gfield--type-password button.gform_show_password .dashicons::before {
	color: #f8f4f2 !important;
}
/* Password toggle button icon color */
.gform-theme.gform-theme--framework.gform_wrapper :where(:not(.mce-splitbtn))>button:not([id*=mceu_]):not(.mce-open):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)).gform-theme-button--simple .dashicons::before {
	color: #f8f4f2 !important;
}
.login-page__form-section .gform-theme.gform-theme--framework.gform_wrapper button.gform_show_password .dashicons::before,
.forgot-pass-page__form-section .gform-theme.gform-theme--framework.gform_wrapper button.gform_show_password .dashicons::before,
.activate-account-page__form-section .gform-theme.gform-theme--framework.gform_wrapper button.gform_show_password .dashicons::before {
	color: #f8f4f2 !important;
}
.login-page__form-section .gform_wrapper form,
.forgot-pass-page__form-section .gform_wrapper form,
.activate-account-page__form-section .gform_wrapper form {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.24rem !important; /* 24px gap between form fields and button */
	width: 100% !important;
}
/* Hide Gravity Forms theme styles */
.login-page__form-section .gform_wrapper .gform-theme,
.forgot-pass-page__form-section .gform_wrapper .gform-theme,
.activate-account-page__form-section .gform_wrapper .gform-theme {
	--gf-color-primary: transparent !important;
	--gf-color-in-ctrl: transparent !important;
}
/* Hide required field legend */
.login-page__form-section .gform_required_legend,
.forgot-pass-page__form-section .gform_required_legend,
.activate-account-page__form-section .gform_required_legend {
	display: none !important;
}
/* Hide honeypot fields */
.login-page__form-section .gfield--type-honeypot,
.forgot-pass-page__form-section .gfield--type-honeypot,
.activate-account-page__form-section .gfield--type-honeypot {
	display: none !important;
}
/* Form Body */
.login-page__form-section .gform-body,
.forgot-pass-page__form-section .gform-body,
.activate-account-page__form-section .gform-body {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.24rem !important; /* 24px gap between fields */
	width: 100% !important;
}
/* Form Fields Container */
.login-page__form-section .gform_fields,
.forgot-pass-page__form-section .gform_fields,
.activate-account-page__form-section .gform_fields {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.24rem !important; /* 24px gap between fields */
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
/* Individual Field */
.login-page__form-section .gfield,
.forgot-pass-page__form-section .gfield,
.activate-account-page__form-section .gfield {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.08rem !important; /* 8px gap between label and input */
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* Labels */
.login-page__form-section .gfield_label,
.forgot-pass-page__form-section .gfield_label,
.activate-account-page__form-section .gfield_label {
	font-family: var(--font-family-primary) !important;
	font-size: 0.14rem !important; /* 14px */
	font-weight: var(--font-weight-regular) !important;
	line-height: 1.4 !important;
	color: #f8f4f2 !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* Required asterisk */
.login-page__form-section .gfield_required,
.forgot-pass-page__form-section .gfield_required,
.activate-account-page__form-section .gfield_required {
	color: #f8f4f2 !important;
	margin-left: 0.02rem !important; /* 4px */
}
.gfield_required.gfield_required_asterisk {
	color: red !important;
}
/* Input Container */
.login-page__form-section .ginput_container,
.forgot-pass-page__form-section .ginput_container,
.activate-account-page__form-section .ginput_container {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important; 
}
:is(.login-page__form-section .ginput_container,.forgot-pass-page__form-section .ginput_container,.activate-account-page__form-section .ginput_container) input,:is(.login-page__form-section .ginput_container,.forgot-pass-page__form-section .ginput_container,.activate-account-page__form-section .ginput_container) button {
		border-radius: 0 !important;
	}
.login-page__form-section input[type="text"] {
	border-radius: 0 !important;
}
/* Text Inputs */
.login-page__form-section input[type="text"],
.login-page__form-section input[type="email"],
.login-page__form-section input[type="password"],
.forgot-pass-page__form-section input[type="text"],
.forgot-pass-page__form-section input[type="email"],
.forgot-pass-page__form-section input[type="password"],
.activate-account-page__form-section input[type="text"],
.activate-account-page__form-section input[type="email"],
.activate-account-page__form-section input[type="password"] {
	background-color: var(--color-background-darker) !important;
	border: none !important;
	border-radius: 0.08rem !important; /* 8px */
	padding: 0.16rem !important; /* 16px */
	font-family: var(--font-family-primary) !important;
	font-size: 0.14rem !important; /* 14px */
	font-weight: var(--font-weight-regular) !important;
	line-height: 1.4 !important;
	color: #f8f4f2 !important;
	width: 100% !important;
	height: 0.52rem !important; /* 52px */
	outline: none !important;
	transition: background-color 0.2s ease, border 0.2s ease !important;
	box-sizing: border-box !important;
}
.login-page__form-section input[type="text"]::placeholder,
.login-page__form-section input[type="email"]::placeholder,
.login-page__form-section input[type="password"]::placeholder,
.forgot-pass-page__form-section input[type="text"]::placeholder,
.forgot-pass-page__form-section input[type="email"]::placeholder,
.forgot-pass-page__form-section input[type="password"]::placeholder,
.activate-account-page__form-section input[type="text"]::placeholder,
.activate-account-page__form-section input[type="email"]::placeholder,
.activate-account-page__form-section input[type="password"]::placeholder {
	color: #f8f4f2 !important;
	opacity: 0.5 !important;
}
.login-page__form-section input[type="text"]:hover,
.login-page__form-section input[type="email"]:hover,
.login-page__form-section input[type="password"]:hover,
.forgot-pass-page__form-section input[type="text"]:hover,
.forgot-pass-page__form-section input[type="email"]:hover,
.forgot-pass-page__form-section input[type="password"]:hover,
.activate-account-page__form-section input[type="text"]:hover,
.activate-account-page__form-section input[type="email"]:hover,
.activate-account-page__form-section input[type="password"]:hover {
	background-color: rgba(38, 38, 40, 0.8) !important;
}
/* Remove focus styles for all inputs */
.login-page__form-section input[type="text"]:focus,
.login-page__form-section input[type="email"]:focus,
.login-page__form-section input[type="password"]:focus,
.forgot-pass-page__form-section input[type="text"]:focus,
.forgot-pass-page__form-section input[type="email"]:focus,
.forgot-pass-page__form-section input[type="password"]:focus,
.activate-account-page__form-section input[type="text"]:focus,
.activate-account-page__form-section input[type="email"]:focus,
.activate-account-page__form-section input[type="password"]:focus {
	background-color: var(--color-background-darker) !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}
/* Keep focus styles for error fields only */
.login-page__form-section .gfield_error input[type="text"]:focus,
.login-page__form-section .gfield_error input[type="email"]:focus,
.login-page__form-section .gfield_error input[type="password"]:focus,
.forgot-pass-page__form-section .gfield_error input[type="text"]:focus,
.forgot-pass-page__form-section .gfield_error input[type="email"]:focus,
.forgot-pass-page__form-section .gfield_error input[type="password"]:focus,
.activate-account-page__form-section .gfield_error input[type="text"]:focus,
.activate-account-page__form-section .gfield_error input[type="email"]:focus,
.activate-account-page__form-section .gfield_error input[type="password"]:focus {
	border: 1px solid #ff6b6b !important;
	outline: none !important;
	box-shadow: none !important;
}
/* Password Field Container */
.login-page__form-section .ginput_password,
.forgot-pass-page__form-section .ginput_password,
.activate-account-page__form-section .ginput_password {
	position: relative !important;
	width: 100% !important;
}
.login-page__form-section .password_input_container,
.forgot-pass-page__form-section .password_input_container,
.activate-account-page__form-section .password_input_container {
	position: relative !important;
	width: 100% !important;
}
/* Ensure password input has right padding for toggle button */
.login-page__form-section .ginput_password input[type="password"],
.login-page__form-section .ginput_password input[type="text"],
.forgot-pass-page__form-section .ginput_password input[type="password"],
.forgot-pass-page__form-section .ginput_password input[type="text"],
.activate-account-page__form-section .ginput_password input[type="password"],
.activate-account-page__form-section .ginput_password input[type="text"] {
	padding-right: 0.48rem !important; /* 48px to make room for toggle button */
}
/* Password Toggle Button - Gravity Forms built-in toggle */
.login-page__form-section .gform_show_password,
.forgot-pass-page__form-section .gform_show_password,
.activate-account-page__form-section .gform_show_password {
	position: absolute !important;
	right: 0.16rem !important; /* 16px */
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: none !important;
	border: none !important;
	padding: 0 !important;
	cursor: pointer !important;
	color: #f8f4f2 !important;
	opacity: 0.7 !important;
	transition: opacity 0.2s ease !important;
	width: 0.24rem !important; /* 24px */
	height: 0.24rem !important; /* 24px */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 10 !important;
	visibility: visible !important;
}
/* Ensure the toggle button container is positioned correctly */
.login-page__form-section .ginput_password,
.forgot-pass-page__form-section .ginput_password,
.activate-account-page__form-section .ginput_password {
	position: relative !important;
}
.login-page__form-section .gform_show_password:hover,
.forgot-pass-page__form-section .gform_show_password:hover,
.activate-account-page__form-section .gform_show_password:hover {
	opacity: 1 !important;
}
.login-page__form-section .gform_show_password .dashicons,
.forgot-pass-page__form-section .gform_show_password .dashicons,
.activate-account-page__form-section .gform_show_password .dashicons {
	width: 100% !important;
	height: 100% !important;
	font-size: 0.24rem !important; /* 24px */
	color: #f8f4f2 !important;
}
.login-page__form-section .gform_show_password .dashicons-hidden,
.forgot-pass-page__form-section .gform_show_password .dashicons-hidden,
.activate-account-page__form-section .gform_show_password .dashicons-hidden {
	color: #f8f4f2 !important;
}
/* All dashicons in password toggle button should be white */
.login-page__form-section .gform_show_password .dashicons,
.login-page__form-section .gform_show_password .dashicons::before,
.login-page__form-section .gform_show_password .dashicons::after,
.forgot-pass-page__form-section .gform_show_password .dashicons,
.forgot-pass-page__form-section .gform_show_password .dashicons::before,
.forgot-pass-page__form-section .gform_show_password .dashicons::after,
.activate-account-page__form-section .gform_show_password .dashicons,
.activate-account-page__form-section .gform_show_password .dashicons::before,
.activate-account-page__form-section .gform_show_password .dashicons::after {
	color: #f8f4f2 !important;
}
/* Form Footer */
.login-page__form-section .gform-footer,
.forgot-pass-page__form-section .gform-footer,
.activate-account-page__form-section .gform-footer {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.24rem !important; /* 24px */
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* Submit Button */
.login-page__form-section .gform_button,
.login-page__form-section input[type="submit"],
.forgot-pass-page__form-section .gform_button,
.forgot-pass-page__form-section input[type="submit"],
.activate-account-page__form-section .gform_button,
.activate-account-page__form-section input[type="submit"] {
	background-color: white !important;
	border: none !important;
	border-radius: 0.08rem !important; /* 8px */
	padding: 0.16rem !important; /* 16px */
	width: 100% !important;
	height: 0.5rem !important; /* 50px */
	cursor: pointer !important;
	font-family: var(--font-family-primary) !important;
	font-size: 0.16rem !important; /* 16px */
	font-weight: var(--font-weight-medium) !important;
	line-height: 1.1 !important;
	color: #0b0a09 !important;
	transition: opacity 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.08rem !important; /* 8px */
	box-sizing: border-box !important;
	margin: 0 !important;
}
.login-page__form-section .gform_button:hover,
.login-page__form-section input[type="submit"]:hover,
.forgot-pass-page__form-section .gform_button:hover,
.forgot-pass-page__form-section input[type="submit"]:hover,
.activate-account-page__form-section .gform_button:hover,
.activate-account-page__form-section input[type="submit"]:hover {
	opacity: 0.9 !important;
}
/* Hide hidden fields */
.login-page__form-section .gform_hidden,
.forgot-pass-page__form-section .gform_hidden,
.activate-account-page__form-section .gform_hidden {
	display: none !important;
}
/* Error Messages */
.login-page__form-section .gfield_description.validation_message,
.login-page__form-section .validation_message,
.forgot-pass-page__form-section .gfield_description.validation_message,
.forgot-pass-page__form-section .validation_message,
.activate-account-page__form-section .gfield_description.validation_message,
.activate-account-page__form-section .validation_message {
	color: #ff6b6b !important;
	font-family: var(--font-family-primary) !important;
	font-size: 0.14rem !important; /* 14px */
	font-weight: var(--font-weight-regular) !important;
	line-height: 1.4 !important;
	margin-top: 0.04rem !important; /* 4px */
	display: block !important;
	visibility: visible !important;
}
/* General Form Error Message */
.login-page__form-section .gform_validation_error,
.login-page__form-section .gform_validation_errors,
.login-page__form-section .gform_validation_error_message,
.forgot-pass-page__form-section .gform_validation_error,
.forgot-pass-page__form-section .gform_validation_errors,
.forgot-pass-page__form-section .gform_validation_error_message,
.activate-account-page__form-section .gform_validation_error,
.activate-account-page__form-section .gform_validation_errors,
.activate-account-page__form-section .gform_validation_error_message {
	color: #ff6b6b !important;
	font-family: var(--font-family-primary) !important;
	font-size: 0.14rem !important; /* 14px */
	font-weight: var(--font-weight-regular) !important;
	line-height: 1.4 !important;
	text-align: center !important;
	margin-bottom: 0.16rem !important; /* 16px */
	padding: 0.08rem 0 !important; /* 8px vertical padding */
	display: block !important;
	visibility: visible !important;
	width: 100% !important;
}
/* Validation Error State */
.login-page__form-section .gfield_error input,
.forgot-pass-page__form-section .gfield_error input,
.activate-account-page__form-section .gfield_error input {
	border: 1px solid #ff6b6b !important;
}
/* Clear floats */
.login-page__form-section .gf_clear,
.forgot-pass-page__form-section .gf_clear,
.activate-account-page__form-section .gf_clear {
	display: none !important;
}
.gform_submission_error {
	padding: .1rem !important;
}
.gform-theme.gform-theme--framework.gform_wrapper .button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme.gform-theme--framework.gform_wrapper .gform-theme-button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme.gform-theme--framework.gform_wrapper :where(:not(.mce-splitbtn))>button:not([id*=mceu_]):not(.mce-open):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme.gform-theme--framework.gform_wrapper button.button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]).button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme.gform-theme--framework.gform_wrapper input:is([type=submit],[type=button],[type=reset]):where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus, .gform-theme.gform-theme--framework.gform_wrapper input[type=submit].button.gform_button:where(:not(.gform-theme-no-framework):not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)):focus {
	--gf-local-border-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	outline: none !important;
}
/* ============================================
   PORTAL PAGE
   Based on Figma design: node-id=910-13884
   ============================================ */
.portal-page {
	background-color: var(--color-background);
	min-height: 100vh;
	padding-top: .7rem;
	padding-bottom: 1.84rem;
}
/* Title Section */
.portal-page__title-section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-30); /* 30px */
}
.portal-page__title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-36);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
	white-space: nowrap;
}
.portal-page__divider {
	height: 1px;
	width: 100%;
	background-color: var(--color-text-light);
	opacity: 0.2;
}
/* Controls Section (Search + Filter) */
.portal-page__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
	height: 0.5rem; /* 50px */
}
/* Search Field */
.portal-page__search {
	background-color: var(--color-input-bg);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-24);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
	width: 4.4rem; /* 440px */
	height: 100%;
}
.portal-page__search-input {
	background: none;
	border: none;
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: outline 0.3s ease;
	flex: 1;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
}
.portal-page__search-input::placeholder {
		color: var(--color-text-light);
		opacity: 0.7;
	}
.portal-page__search-icon {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-light);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}
.portal-page__search-icon:hover {
		opacity: 0.7;
	}
.portal-page__search-icon svg {
		width: 100%;
		height: 100%;
		display: block;
	}
/* Filter Dropdown */
.portal-page__filter {
	flex-shrink: 0;
}
.portal-page__filter-select {
	background: transparent;
	border: 1px solid var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	height: 100%;
	cursor: pointer;
	transition: background-color 0.2s ease;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	white-space: nowrap;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23FFFCF5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--spacing-16) center;
	background-size: 0.24rem;
	padding-right: calc(var(--spacing-16) * 3);
}
.portal-page__filter-select:hover {
	}
.portal-page__filter-select option {
		background-color: var(--color-background);
		color: var(--color-text-light);
	}
.portal-page__filter-btn {
	background: none;
	border: 1px solid var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	height: 100%;
	cursor: pointer;
	transition: background-color 0.2s ease;
}
.portal-page__filter-btn:hover {
	}
.portal-page__filter-text {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	white-space: nowrap;
}
.portal-page__filter-btn svg {
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-light);
	flex-shrink: 0;
	display: block;
}
/* Projects Grid */
.portal-page__projects {
	width: 100%;
}
.portal-page__projects-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-28); /* 28px */
}
/* No Projects Message */
.portal-page__no-projects,
.portal-page__no-results {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	color: var(--color-text-light);
	text-align: center;
	padding: var(--spacing-48);
	opacity: 0.7;
}
/* Project Card */
.portal-page__card {
	background-color: var(--color-card-bg);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-28);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	text-decoration: none;
	color: inherit;
}
.portal-page__card:hover {
		transform: translateY(-0.02rem); /* -2px */
		box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.3); /* 0 4px 12px */
	}
/* Highlighted Card (Active with NEW PROJECT) */
.portal-page__card--highlighted {
	background-color: var(--color-card-bg-active);
}
.portal-page__card--highlighted .portal-page__card-title,.portal-page__card--highlighted .portal-page__card-description,.portal-page__card--highlighted .portal-page__status-label,.portal-page__card--highlighted .portal-page__meta-label,.portal-page__card--highlighted .portal-page__meta-value {
		color: var(--color-text-dark);
	}
/* Card Header */
.portal-page__card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}
.portal-page__card-status {
	display: flex;
	align-items: center;
	gap: var(--spacing-16);
}
/* Status Dot */
.portal-page__status-dot {
	width: 0.12rem; /* 12px */
	height: 0.12rem; /* 12px */
	border-radius: 50%;
	flex-shrink: 0;
}
.portal-page__status-dot--active {
	background-color: var(--color-status-active);
}
.portal-page__status-dot--pending {
	background-color: var(--color-status-pending);
}
.portal-page__status-dot--completed {
	background-color: var(--color-status-completed);
}
/* Status Label */
.portal-page__status-label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
}
.portal-page__card--highlighted .portal-page__status-label {
	color: var(--color-text-dark);
}
/* Card Action (NEW PROJECT) */
.portal-page__card-action {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-dark);
	white-space: nowrap;
}
/* Card Divider */
.portal-page__card-divider {
	height: 1px;
	width: 100%;
	background-color: var(--color-text-light);
	opacity: 0.2;
}
/* Status-specific divider colors - use higher specificity to override highlighted */
.portal-page__card.portal-page__card--active .portal-page__card-divider {
	background-color: var(--color-status-active);
	opacity: 1;
}
.portal-page__card.portal-page__card--pending .portal-page__card-divider {
	background-color: var(--color-status-pending);
	opacity: 1;
}
.portal-page__card.portal-page__card--completed .portal-page__card-divider {
	background-color: var(--color-status-completed);
	opacity: 1;
}
/* Card Content */
.portal-page__card-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}
.portal-page__card-info {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.portal-page__card-title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-18);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	margin: 0;
}
.portal-page__card-description {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	margin: 0;
}
/* Card Meta */
.portal-page__card-meta {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
}
.portal-page__card-meta-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--spacing-8);
}
.portal-page__meta-label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	white-space: nowrap;
}
.portal-page__meta-value {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	white-space: nowrap;
}
/* ============================================
   MOBILE RESPONSIVE (768px breakpoint)
   ============================================ */
@media (max-width: 768px) {
	.portal-page {
		padding-bottom: var(--spacing-24);
	}
	
	.portal-page__container {
		padding: 0 var(--spacing-20);
		gap: var(--spacing-28);
	}
	
	.portal-page__title-section {
		gap: var(--spacing-20);
	}
	
	.portal-page__title {
		font-size: var(--font-size-28);
	}
	
	.portal-page__controls {
		flex-direction: column;
		height: auto;
		gap: var(--spacing-16);
	}
	
	.portal-page__search {
		width: 100%;
		height: 0.5rem;
	}

	.portal-page__filter {
		width: 100%;
	}
	
	.portal-page__filter-btn {
		width: 100%;
		justify-content: space-between;
		width: 100%;
	}
	
	.portal-page__projects-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-24);
	}
	
	.portal-page__card {
		padding: var(--spacing-24);
	}
}
/* Extra small mobile adjustments */
@media (max-width: 4.8rem) { /* 480px */
	.portal-page__title {
		font-size: var(--font-size-24);
	}
	
	.portal-page__card-title {
		font-size: var(--font-size-16);
	}
	
	.portal-page__status-label {
		font-size: var(--font-size-18);
	}
}
/* ============================================
   USER PROFILE PAGE
   Based on Figma design: node-id=910-14069
   ============================================ */
.user-profile-page {
	background-color: var(--color-background);
	min-height: 100vh;
	padding-top: 0.7rem; /* 70px - space for header */
	padding-bottom: 1.84rem; /* 184px */
}
.user-profile-page__container {
	max-width: 13.76rem; /* 1376px */
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-30); /* 30px */
}
@media (min-width: 1440px) {
.user-profile-page__container {
		max-width: 100%;
		padding: 0 var(--spacing-32);
}
	}
/* Title Section */
.user-profile-page__title-section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-30); /* 30px */
}
.user-profile-page__title-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}
.user-profile-page__title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-36);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
	white-space: nowrap;
}
.user-profile-page__back-btn {
	border: 1px solid var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	height: 0.5rem; /* 50px */
	min-width: 1.56rem; /* 156px */
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.user-profile-page__back-btn:hover {
		opacity: 0.9;
	}
.user-profile-page__divider {
	height: 1px;
	width: 100%;
	background-color: var(--color-text-light);
	opacity: 0.2;
}
/* Form Sections Container */
.user-profile-page__sections {
	display: flex;
	gap: var(--spacing-28); /* 28px */
	align-items: flex-start;
}
/* Section Card */
.user-profile-page__section {
	background-color: var(--color-card-bg);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-24);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
	flex: 1;
	max-width: 6.74rem; /* 674px */
}
.user-profile-page__section-title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
}
/* Form */
.user-profile-page__form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
	align-items: flex-end;
}
.user-profile-page__form-row {
	display: flex;
	gap: var(--spacing-24);
	width: 100%;
}
.security-section .user-profile-page__field {
		width: 100%;
	}
/* Field */
.user-profile-page__field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	flex: 1;
	min-width: 0;
}
.user-profile-page__label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	white-space: nowrap;
}
/* Input Wrapper */
.user-profile-page__input-wrapper {
	background-color: var(--color-input-bg);
	border-radius: var(--border-radius-small);
	padding: 0;
	border: 1px solid transparent;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}
.user-profile-page__input-wrapper:hover {
	border-bottom-color: var(--color-accent);
}
.user-profile-page__input-wrapper--active {
	border-bottom-color: var(--color-accent);
}
.user-profile-page__input-wrapper--no-bg {
	padding: 0;
	border: none;
}
.user-profile-page__input-wrapper--no-bg input {
		pointer-events: none;
		opacity: 0.8;
		cursor: not-allowed;
	}
.user-profile-page__input-wrapper:focus-within {
	border-bottom-color: var(--color-accent);
}
/* Password Wrapper - for toggle button */
.user-profile-page__password-wrapper {
	position: relative;
	padding-right: 0.48rem !important; /* 48px to make room for toggle button */
}
.user-profile-page__password-toggle {
	position: absolute;
	right: 0.16rem; /* 16px */
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--color-text-light);
	opacity: 0.7;
	transition: opacity 0.2s ease;
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}
.user-profile-page__password-toggle:hover {
	opacity: 1;
}
.user-profile-page__password-toggle .dashicons {
	width: 100%;
	height: 100%;
	font-size: 0.24rem; /* 24px */
	color: var(--color-text-light);
}
/* Input */
.user-profile-page__input {
	background: none;
	border: none;
	outline: none !important; /* Override global input outline styles */
	width: 100%;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	padding: var(--spacing-16);
	border-radius: var(--border-radius-small);
	transition: color 0.3s ease; /* Smooth color transition only */
	
	/* Override global input hover/focus styles */
}
.user-profile-page__input:hover,.user-profile-page__input:focus,.user-profile-page__input:focus-within {
		outline: none !important;
		color: var(--color-text-light) !important; /* Keep text color consistent */
	}
.user-profile-page__input::placeholder {
		color: var(--color-text-light);
		opacity: 0.5;
	}
/* Input in no-bg wrapper */
.user-profile-page__input-wrapper--no-bg .user-profile-page__input {
	padding-left: 0;
	padding-right: var(--spacing-16);
	padding-top: var(--spacing-16);
	padding-bottom: var(--spacing-16);
	background-color: transparent;
}
/* Submit Button */
.user-profile-page__submit-btn {
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-dark);
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
}
.user-profile-page__submit-btn:hover {
		opacity: 0.9;
		transform: translateY(-0.01rem); /* -1px */
	}
.user-profile-page__submit-btn:active {
		transform: translateY(0);
	}
/* ============================================
   MOBILE RESPONSIVE (768px breakpoint)
   ============================================ */
@media (max-width: 768px) { /* 768px */
	.user-profile-page {
		padding-top: 0.5rem; /* 50px - adjusted for mobile header */
		padding-bottom: var(--spacing-32);
	}
	
	.user-profile-page__container {
		padding: 0 var(--spacing-20);
		gap: var(--spacing-24);
	}
	
	.user-profile-page__title-section {
		gap: var(--spacing-20);
	}
	
	.user-profile-page__title-wrapper {
		flex-direction: column;
		align-items: center !important;
		gap: var(--spacing-16);
	}
	
	.user-profile-page__title {
		font-size: var(--font-size-28); /* Slightly smaller on mobile */
	}
	
	.user-profile-page__back-btn {
		width: 100%;
		justify-content: center;
	}
	
	.user-profile-page__sections {
		flex-direction: column;
		gap: var(--spacing-24);
	}
	
	.user-profile-page__section {
		width: 100% !important;
		padding: var(--spacing-20);
	}
	
	.user-profile-page__form-row {
		flex-direction: column;
		gap: var(--spacing-24);
	}
	
	.user-profile-page__submit-btn {
		width: 100%;
	}
}
/* Extra small mobile adjustments */
@media (max-width: 4.8rem) { /* 480px */
	.user-profile-page__title {
		font-size: var(--font-size-24);
	}
	
	.user-profile-page__section-title {
		font-size: var(--font-size-18);
	}
}
/* Success/Error Messages */
.user-profile-page__message {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	padding: var(--spacing-16);
	border-radius: var(--border-radius-small);
	margin-bottom: var(--spacing-24);
}
.user-profile-page__message--success {
	background-color: rgba(196, 219, 2, 0.2);
	color: var(--color-accent);
	border: 1px solid var(--color-accent);
}
.user-profile-page__message--error {
	background-color: rgba(255, 107, 107, 0.2);
	color: #ff6b6b;
	border: 1px solid #ff6b6b;
}
/* ============================================
   CREATIVE BRIEF STEPS PAGE
   Multi-step form with tab navigation
   ============================================ */
.creative-brief-page {
	background-color: var(--color-background);
	min-height: 100vh;
	padding-top: 0.7rem; /* 70px - space for header */
	padding-bottom: 1.84rem; /* 184px */
}
/* Title Section */
.creative-brief-page__title-section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-30); /* 30px */
}
.creative-brief-page__title-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}
.creative-brief-page__title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-36);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
	white-space: nowrap;
}
.creative-brief-page__back-btn {
	border: 1px solid var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 0.5rem; /* 50px */
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}
.creative-brief-page__back-btn:hover {
		opacity: 0.9;
	}
.creative-brief-page__divider {
	height: 1px;
	width: 100%;
	background-color: var(--color-text-light);
	opacity: 0.2;
}
/* Tabs Wrapper */
.creative-brief-page__tabs-wrapper {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-28); /* 28px */
}
/* Tabs Navigation */
.creative-brief-page__tabs {
	display: flex;
	gap: var(--spacing-8);
	border: 1px solid var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: 0;
	background-color: transparent;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.creative-brief-page__tabs::-webkit-scrollbar {
		display: none;
	}
.creative-brief-page__tab {
	flex: 1;
	min-width: 1.48rem; /* 148px */
	background: none;
	border: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	transition: all 0.2s ease;
	white-space: nowrap;
}
.creative-brief-page__tab:hover {
		opacity: 0.8;
	}
.creative-brief-page__tab--active {
	background-color: var(--color-accent);
	color: var(--color-text-dark);
}
.creative-brief-page__tab-indicator {
	width: 0.12rem; /* 12px */
	height: 0.12rem; /* 12px */
	border-radius: 50%;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	opacity: 1;
	flex-shrink: 0;
}
.creative-brief-page__tab--active .creative-brief-page__tab-indicator {
	display: block;
}
/* Status: Complete (green) - all fields filled */
.creative-brief-page__tab-indicator--complete {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}
/* Status: Partial (red) - started but not finished */
.creative-brief-page__tab-indicator--partial {
	background-color: #E53935;
	border-color: #E53935;
}
/* Status: Empty (blank/outline only) - not started */
/* Default state - just the outline */
.creative-brief-page__tab-text {
	flex-shrink: 0;
}
/* Step Header Card */
.creative-brief-page__step-header {
	background-color: var(--color-card-bg);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-28);
}
.creative-brief-page__step-header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}
.creative-brief-page__step-header-title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
}
.creative-brief-page__step-number {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-accent);
	text-transform: uppercase;
	white-space: nowrap;
}
/* Step Content */
.creative-brief-step {
	display: none;
}
.creative-brief-step--active {
	display: block;
}
.creative-brief-step__content {
	background-color: var(--color-card-bg);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-24);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
	align-items: flex-end;
	margin-bottom: var(--spacing-24);
}
.creative-brief-step__section-title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0;
	width: 100%;
}
.creative-brief-step__subsection-title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	margin: 0 0 var(--spacing-24) 0;
}
/* Form */
.creative-brief-step__form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
	width: 100%;
}
.creative-brief-step__row {
	display: flex;
	gap: var(--spacing-28);
	width: 100%;
}
.creative-brief-step__col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}
/* Field */
.creative-brief-step__field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	width: 100%;
}
.creative-brief-step__label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	white-space: nowrap;
}
/* Input Wrapper */
.creative-brief-step__input-wrapper {
	background-color: var(--color-input-bg);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
}
.creative-brief-step__input-wrapper--active {
	border-bottom-color: var(--color-accent);
}
.creative-brief-step__input-wrapper:focus-within {
	border-bottom-color: var(--color-accent);
}
/* Input */
.creative-brief-step__input {
	background: none;
	border: none;
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: outline 0.3s ease;
	width: 100%;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	padding: 0;
}
.creative-brief-step__input::placeholder {
		color: var(--color-text-light);
		opacity: 0.5;
	}
.creative-brief-step__input--url {
	flex: 1;
}
/* URL Input */
.creative-brief-step__url-input {
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
	width: 100%;
}
.creative-brief-step__url-prefix {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	white-space: nowrap;
	padding-left: .1rem !important;
}
.creative-brief-step__url-icon {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-text-light);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}
.creative-brief-step__url-icon:hover {
		opacity: 0.7;
	}
.creative-brief-step__url-icon svg {
		width: 100%;
		height: 100%;
		display: block;
	}
.creative-brief-step__date-icon {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	color: var(--color-accent);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s ease;
}
.creative-brief-step__date-icon:hover {
		opacity: 0.7;
	}
.creative-brief-step__date-icon svg {
		width: 100%;
		height: 100%;
		display: block;
	}
/* Date Input Styling */
.creative-brief-step__input-wrapper--date {
	cursor: pointer;
}
.creative-brief-step__input--date {
	cursor: pointer;
}
.creative-brief-step__input--date::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 1;
	filter: brightness(0) saturate(100%) invert(77%) sepia(95%) saturate(1352%) hue-rotate(28deg) brightness(101%) contrast(89%);
}
.creative-brief-step__input--date::-webkit-calendar-picker-indicator:hover {
	opacity: 0.8;
}
/* Textarea */
.creative-brief-step__textarea-wrapper {
	background-color: var(--color-input-bg);
	border-radius: var(--border-radius-small);
}
.creative-brief-step__textarea {
	background: none;
	border: none;
	outline: 0 solid transparent; /* Always have outline to prevent layout shift */
	outline-offset: 0;
	transition: outline 0.3s ease;
	width: 100%;
	min-height: 0.72rem; /* 72px */
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	resize: vertical;
}
.creative-brief-step__textarea::placeholder {
		color: var(--color-text-light);
		opacity: 0.5;
	}
/* Checkbox Grid */
.creative-brief-step__checkbox-grid {
	display: flex;
	gap: var(--spacing-24);
	width: 100%;
}
.creative-brief-step__checkbox-column {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.creative-brief-step__checkbox-item {
	background-color: var(--color-input-bg);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	gap: var(--spacing-16);
	cursor: pointer;
	transition: background-color 0.2s ease;
	position: relative;
}
.creative-brief-step__checkbox-item:hover {
		background-color: rgba(38, 38, 40, 0.8);
	}
.creative-brief-step__checkbox-item input[type="checkbox"] {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
	}
.creative-brief-step__checkbox-item input[type="checkbox"]:checked + .creative-brief-step__checkbox-label::before {
		background-color: transparent;
		border-color: var(--color-accent);
	}
.creative-brief-step__checkbox-item input[type="checkbox"]:checked + .creative-brief-step__checkbox-label::after {
		background-color: var(--color-accent);
		opacity: 1 !important;
	}
.creative-brief-step__checkbox-label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	position: relative;
	padding-left: 0.32rem; /* 32px */
}
.creative-brief-step__checkbox-label::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 0.24rem; /* 24px */
		height: 0.24rem; /* 24px */
		border: 0.5px solid var(--color-text-light);
		border-radius: var(--border-radius-small);
		background-color: transparent;
		transition: all 0.2s ease;
	}
.creative-brief-step__checkbox-label::after {
		content: '';
		position: absolute;
		left: 0.06rem; /* 6px */
		top: 50%;
		transform: translateY(-50%);
		width: 0.12rem; /* 12px */
		height: 0.12rem; /* 12px */
		border-radius: 50%;
		background-color: transparent;
		transition: opacity 0.2s ease;
	}
/* Range Slider */
.creative-brief-step__range-field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}
.creative-brief-step__range-labels {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-8);
}
.creative-brief-step__range-label {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	white-space: nowrap;
}
.creative-brief-step__range-wrapper {
	background-color: var(--color-background-darker);
	position: relative;
	height: 0.52rem; /* 52px */
	padding: var(--spacing-16);
	display: flex;
	align-items: center;
	border-radius: var(--border-radius-small);
}
.creative-brief-step__range {
	position: absolute;
	width: 100%;
	height: 0.24rem; /* 24px */
	right: -6px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	cursor: pointer;
	z-index: 2;
}
.creative-brief-step__range::-webkit-slider-track {
		background: transparent;
		height: 0.06rem; /* 6px */
	}
.creative-brief-step__range::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 0.24rem; /* 24px */
		height: 0.24rem; /* 24px */
		border-radius: 50%;
		background-color: var(--color-accent);
		cursor: pointer;
		position: relative;
		z-index: 3;
		transition: transform 0.2s ease;
	}
:is(.creative-brief-step__range::-webkit-slider-thumb):hover {
			transform: scale(1.2);
		}
.creative-brief-step__range::-moz-range-track {
		background: transparent;
		height: 0.06rem; /* 6px */
		border: none;
	}
.creative-brief-step__range::-moz-range-thumb {
		width: 0.24rem; /* 24px */
		height: 0.24rem; /* 24px */
		border-radius: 50%;
		background-color: var(--color-accent);
		cursor: pointer;
		border: none;
		transition: transform 0.2s ease;
	}
:is(.creative-brief-step__range::-moz-range-thumb):hover {
			transform: scale(1.2);
		}
.creative-brief-step__range:focus {
		outline: none;
	}
.creative-brief-step__range:focus::-webkit-slider-thumb {
		box-shadow: 0 0 0 0.04rem rgba(196, 219, 2, 0.3);
	}
.creative-brief-step__range:focus::-moz-range-thumb {
		box-shadow: 0 0 0 0.04rem rgba(196, 219, 2, 0.3);
	}
.creative-brief-step__range-track {
	position: absolute;
	left: var(--spacing-16);
	right: var(--spacing-16);
	top: 50%;
	transform: translateY(-50%);
	height: 0.06rem; /* 6px */
	background-color: var(--color-background-lighter);
	border-radius: 0.03rem; /* 3px */
	overflow: hidden;
}
.creative-brief-step__range-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background-color: var(--color-accent);
	border-radius: 0.03rem; /* 3px */
	transition: width 0.1s ease;
}
.creative-brief-step__range-thumb {
	position: absolute;
	width: 0.24rem; /* 24px */
	height: 0.24rem; /* 24px */
	border-radius: 50%;
	background-color: var(--color-accent);
	border: 0.5px solid var(--color-text-light);
	top: 50%;
	transform: translate(-50%, -50%);
	transition: left 0.1s ease;
	pointer-events: none;
}
/* Competitor Entry */
.creative-brief-step__competitor-entry {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
	padding-bottom: var(--spacing-24);
	border-bottom: 1px solid rgba(248, 244, 242, 0.1);
	margin-bottom: 0;
}
.creative-brief-step__competitor-entry:last-of-type {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}
.creative-brief-step__add-competitor-btn {
	border: 1px solid var(--color-accent);
	background: none;
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
	align-self: flex-start;
}
.creative-brief-step__add-competitor-btn:hover {
		opacity: 0.9;
	}
/* Upload */
.creative-brief-step__upload-wrapper {
	position: relative;
}
.creative-brief-step__file-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	overflow: hidden;
}
.creative-brief-step__upload-dropzone {
	border: 0.5px dashed var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	min-height: 1.04rem; /* 104px */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-8);
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.creative-brief-step__upload-dropzone:hover {
		border-color: var(--color-accent);
	}
.creative-brief-step__upload-dropzone svg {
		width: 0.24rem; /* 24px */
		height: 0.24rem; /* 24px */
		color: var(--color-text-light);
		flex-shrink: 0;
	}
.creative-brief-step__upload-text {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	text-align: center;
	margin: 0;
}
.creative-brief-step__upload-text--accent {
	font-weight: var(--font-weight-bold);
	color: var(--color-accent);
}
.creative-brief-step__upload-hint {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	text-align: center;
	margin: 0;
	opacity: 0.7;
}
/* Uploaded Files List */
.creative-brief-step__uploaded-files {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	margin-top: var(--spacing-16);
}
.creative-brief-step__uploaded-file {
	display: flex;
	align-items: center;
	gap: var(--spacing-16);
	padding: var(--spacing-12) var(--spacing-16);
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--border-radius-small);
}
.creative-brief-step__file-name {
	flex: 1;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-light);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.creative-brief-step__file-type {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-12);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-light);
	opacity: 0.7;
	min-width: 0.5rem; /* 50px */
	text-align: center;
}
.creative-brief-step__file-date {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-12);
	font-weight: var(--font-weight-regular);
	color: var(--color-text-light);
	opacity: 0.7;
	min-width: 0.8rem; /* 80px */
}
.creative-brief-step__file-actions {
	display: flex;
	align-items: center;
	gap: var(--spacing-8);
}
.creative-brief-step__file-view,
.creative-brief-step__file-delete {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 0.32rem; /* 32px */
	height: 0.32rem; /* 32px */
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-text-light);
	opacity: 0.7;
	transition: opacity 0.2s ease;
}
:is(.creative-brief-step__file-view,.creative-brief-step__file-delete):hover {
		opacity: 1;
	}
:is(.creative-brief-step__file-view,.creative-brief-step__file-delete) svg {
		width: 0.2rem; /* 20px */
		height: 0.2rem; /* 20px */
	}
.creative-brief-step__file-delete:hover svg path {
	fill: var(--color-accent);
}
/* Sample Style Entry */
.creative-brief-step__sample-style-entry {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--border-radius-small);
	padding: var(--spacing-20);
	margin-bottom: var(--spacing-20);
	background-color: rgba(255, 255, 255, 0.02);
}
.creative-brief-step__entry-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--spacing-16);
	padding-bottom: var(--spacing-12);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.creative-brief-step__entry-number {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-light);
}
.creative-brief-step__remove-entry-btn.accordion__delete {
	width: 0.32rem; /* 32px */
	height: 0.32rem; /* 32px */
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.2s ease;
}
.creative-brief-step__remove-entry-btn.accordion__delete:hover {
	opacity: 0.8;
}
.creative-brief-step__remove-entry-btn.accordion__delete svg {
	width: 0.2rem; /* 20px */
	height: 0.2rem; /* 20px */
}
/* Sample Style Files Table - uses concept-design-content__files */
.sample-style-files-table {
	margin-top: var(--spacing-16);
}
/* Green delete button in tables */
.concept-design-content__action-btn.accordion__delete {
	width: 0.32rem; /* 32px */
	height: 0.32rem; /* 32px */
	background-color: var(--color-accent);
	border: none;
	border-radius: var(--border-radius-small);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.2s ease;
	padding: 0;
}
.concept-design-content__action-btn.accordion__delete:hover {
	opacity: 0.8;
}
.concept-design-content__action-btn.accordion__delete svg {
	width: 0.2rem; /* 20px */
	height: 0.2rem; /* 20px */
}
/* Info Text */
.creative-brief-step__info-text {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
}
.creative-brief-step__info-text p {
		margin: 0;
	}
.creative-brief-step__info-text strong {
		font-weight: var(--font-weight-bold);
	}
/* Navigation Buttons */
.creative-brief-page__navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
}
.creative-brief-page__nav-btn {
	border-radius: var(--border-radius-small);
	padding: var(--spacing-16);
	height: 0.5rem; /* 50px */
	min-width: 1.48rem; /* 148px */
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
	white-space: nowrap;
}
.creative-brief-page__nav-btn:hover {
		opacity: 0.9;
		transform: translateY(-0.01rem); /* -1px */
	}
.creative-brief-page__nav-btn:active {
		transform: translateY(0);
	}
.creative-brief-page__nav-btn--prev {
	border: 1px solid var(--color-accent);
	background: none;
	color: var(--color-text-light);
}
.creative-brief-page__nav-btn--next,
.creative-brief-page__nav-btn--submit {
	background-color: var(--color-accent);
	border: none;
	color: var(--color-text-dark);
	margin-left: auto;
}
/* ============================================
   MOBILE RESPONSIVE (768px breakpoint)
   ============================================ */
@media (max-width: 768px) { /* 768px */
	.creative-brief-page {
		padding-top: 0.5rem; /* 50px */
		padding-bottom: var(--spacing-32);
	}
	
	.creative-brief-page__container {
		padding: 0 var(--spacing-20);
		gap: var(--spacing-28);
	}
	
	.creative-brief-page__title-section {
		gap: var(--spacing-20);
	}
	
	.creative-brief-page__title-wrapper {
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-16);
	}

	.creative-brief-step__label {
		white-space: normal;
	}

	.creative-brief-step__range-label {
		white-space: normal;
	}
	
	.creative-brief-page__title {

	}
	
	.creative-brief-page__back-btn {
		width: 100%;
		justify-content: center;
	}
	
	.creative-brief-page__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	
	.creative-brief-page__tab {
		min-width: auto;
		flex-shrink: 0;
		padding: var(--spacing-12) var(--spacing-16);
		font-size: var(--font-size-14);
	}
	
	.creative-brief-page__tab-indicator {
		display: none; /* Hide indicators on mobile */
	}
	
	.creative-brief-page__step-header {
		padding: var(--spacing-20);
	}
	
	.creative-brief-page__step-header-content {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-12);
	}
	
	.creative-brief-page__step-header-title {
		font-size: var(--font-size-18);
	}
	
	.creative-brief-step__content {
		padding: var(--spacing-20);
	}
	
	.creative-brief-step__row {
		flex-direction: column;
		gap: var(--spacing-24);
	}
	
	.creative-brief-step__checkbox-grid {
		flex-direction: column;
		gap: var(--spacing-16);
	}
	
	.creative-brief-page__navigation {
		flex-direction: column;
		gap: var(--spacing-16);
	}
	
	.creative-brief-page__nav-btn {
		width: 100%;
		margin-left: 0;
	}
}
/* Extra small mobile adjustments */
@media (max-width: 4.8rem) { /* 480px */
	.creative-brief-page__title {
		font-size: var(--font-size-24);
	}
	
	.creative-brief-page__step-header-title {
		font-size: var(--font-size-16);
	}
	
	.creative-brief-step__section-title {
		font-size: var(--font-size-18);
	}
}
.project-types-manager {
	min-height: 100vh;
	background-color: var(--color-background);
	padding: 0.4rem 0.6rem;
}
.project-types-manager__container {
	max-width: 100%;
	margin: 0 auto;
}
.project-types-manager__title-section {
	margin-bottom: 0.4rem;
}
.project-types-manager__title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-36);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-light);
	margin: 0 0 0.15rem 0;
}
.project-types-manager__title-line {
	height: 1px;
	background-color: var(--color-accent);
	width: 100%;
}
/* Project Type Selector */
.project-types-manager__selector {
	display: flex;
	gap: 0.15rem;
	margin-bottom: 0.4rem;
	flex-wrap: wrap;
}
.project-types-manager__type-btn {
	background: none;
	border: 1px solid var(--color-accent);
	border-radius: var(--border-radius-small);
	padding: 0 0.16rem;
	height: 0.5rem;
	cursor: pointer;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	color: var(--color-text-light);
	transition: opacity 0.2s ease;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}
.project-types-manager__type-btn:hover {
	opacity: 0.8;
}
.project-types-manager__type-btn--active {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text-dark);
}
.project-types-manager__type-btn--new {
	border-style: dashed;
}
/* Form Container */
.project-types-manager__form-container {
	background-color: var(--color-background-dark);
	border-radius: 0.08rem;
	padding: 0.3rem;
}
.project-types-manager__form-title {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-22);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-light);
	margin: 0 0 0.25rem 0;
	padding-bottom: 0.15rem;
	border-bottom: 1px solid var(--color-background-darker);
}
/* ACF Form Overrides */
.project-types-manager .acf-fields {
	background: transparent !important;
	border: none !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0 0.2rem !important;
}
.project-types-manager .acf-field {
	padding: 0.15rem 0 !important;
	border: none !important;
	background: transparent !important;
}
/* Half-width fields (data-width="50") */
.project-types-manager .acf-field[data-width="50"] {
	width: calc(50% - 0.1rem) !important;
	flex: 0 0 calc(50% - 0.1rem) !important;
}
/* Full-width fields */
.project-types-manager .acf-field[data-width="100"],
.project-types-manager .acf-field:not([data-width]) {
	width: 100% !important;
	flex: 0 0 100% !important;
}
.project-types-manager .acf-label {
	margin-bottom: 0.08rem !important;
}
.project-types-manager .acf-label label {
	font-family: var(--font-family-primary) !important;
	font-size: var(--font-size-14) !important;
	font-weight: var(--font-weight-medium) !important;
	color: var(--color-text-light) !important;
}
.project-types-manager .acf-input input[type="text"],
.project-types-manager .acf-input input[type="number"],
.project-types-manager .acf-input input[type="email"],
.project-types-manager .acf-input input[type="url"],
.project-types-manager .acf-input textarea,
.project-types-manager .acf-input select {
	background-color: var(--color-background-darker) !important;
	border: 1px solid var(--color-background-darker) !important;
	border-radius: 0.04rem !important;
	color: var(--color-text-light) !important;
	font-family: var(--font-family-primary) !important;
	font-size: var(--font-size-14) !important;
	padding: 0.1rem 0.12rem !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
/* Remove all white/default borders */
.project-types-manager .acf-table,
.project-types-manager .acf-table > thead,
.project-types-manager .acf-table > tbody,
.project-types-manager .acf-table th,
.project-types-manager .acf-table td,
.project-types-manager .acf-table tr {
	border: none !important;
	border-color: transparent !important;
}
.project-types-manager .acf-input input[type="text"]:focus,
.project-types-manager .acf-input textarea:focus,
.project-types-manager .acf-input select:focus {
	border-color: var(--color-accent) !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(196, 219, 2, 0.2) !important;
}
.project-types-manager .acf-input input::placeholder,
.project-types-manager .acf-input textarea::placeholder {
	color: rgba(248, 244, 242, 0.4) !important;
}
/* Select2 Overrides */
.project-types-manager .select2-container--default .select2-selection--single {
	background-color: var(--color-background-darker) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 0.04rem !important;
	height: auto !important;
	padding: 0.06rem 0.08rem !important;
}
.project-types-manager .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--color-text-light) !important;
	font-family: var(--font-family-primary) !important;
	font-size: var(--font-size-14) !important;
	line-height: 1.4 !important;
}
.project-types-manager .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
}
.project-types-manager .select2-dropdown {
	background-color: var(--color-background-darker) !important;
	border: 1px solid var(--color-border) !important;
}
.project-types-manager .select2-results__option {
	color: var(--color-text-light) !important;
	font-family: var(--font-family-primary) !important;
	font-size: var(--font-size-14) !important;
	padding: 0.08rem 0.12rem !important;
}
.project-types-manager .select2-results__option--highlighted {
	background-color: var(--color-accent) !important;
	color: var(--color-text-dark) !important;
}
/* True/False Toggle */
.project-types-manager .acf-switch {
	background-color: var(--color-background-darker) !important;
	border: none !important;
	border-color: transparent !important;
}
.project-types-manager .acf-switch.-on {
	background-color: var(--color-accent) !important;
	border: none !important;
}
.project-types-manager .acf-switch .acf-switch-slider {
	background-color: var(--color-text-light) !important;
}
.project-types-manager .acf-switch.-on .acf-switch-on {
	color: var(--color-text-dark) !important;
}
.project-types-manager .acf-switch .acf-switch-off {
	color: var(--color-text-light) !important;
}
/* Repeater Styles */
.project-types-manager .acf-repeater {
	border: none !important;
	border-radius: 0.06rem !important;
	overflow: hidden;
	background: transparent !important;
}
.project-types-manager .acf-repeater .acf-table {
	background: transparent !important;
	border: none !important;
	border-collapse: collapse !important;
}
.project-types-manager .acf-repeater .acf-row {
	background-color: var(--color-background) !important;
	border: none !important;
	border-bottom: 1px solid var(--color-background-darker) !important;
}
.project-types-manager .acf-repeater .acf-row:last-child {
	border-bottom: none !important;
}
.project-types-manager .acf-repeater .acf-row > td {
	border: none !important;
	padding: 0.15rem !important;
}
.project-types-manager .acf-repeater .acf-row-handle {
	background-color: var(--color-background-darker) !important;
	color: var(--color-text-light) !important;
	border: none !important;
}
.project-types-manager .acf-repeater .acf-row-handle .acf-icon {
	color: var(--color-text-light) !important;
}
.project-types-manager .acf-repeater .acf-row-handle .acf-icon:hover {
	color: var(--color-accent) !important;
}
.project-types-manager .acf-repeater.-collapsed .acf-row .acf-fields {
	display: none;
}
/* Repeater footer/actions row */
.project-types-manager .acf-repeater .acf-actions {
	background: transparent !important;
	border: none !important;
}
.project-types-manager .acf-repeater .acf-actions td {
	border: none !important;
	padding: 0.15rem !important;
}
/* Add Row Button */
.project-types-manager .acf-actions .acf-button {
	background-color: var(--color-accent) !important;
	border: none !important;
	color: var(--color-text-dark) !important;
	font-family: var(--font-family-primary) !important;
	font-size: var(--font-size-14) !important;
	font-weight: var(--font-weight-medium) !important;
	padding: 0.1rem 0.2rem !important;
	border-radius: 0.04rem !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}
.project-types-manager .acf-actions .acf-button:hover {
	background-color: #d4eb12 !important;
}
/* Submit Button */
.project-types-manager .acf-form-submit {
	margin-top: 0.25rem;
	padding-top: 0.2rem;
	border-top: 1px solid var(--color-background-darker);
}
.project-types-manager .acf-form-submit input[type="submit"] {
	background-color: var(--color-accent) !important;
	border: none !important;
	color: var(--color-text-dark) !important;
	font-family: var(--font-family-primary) !important;
	font-size: var(--font-size-16) !important;
	font-weight: var(--font-weight-medium) !important;
	padding: 0.14rem 0.4rem !important;
	border-radius: 0.04rem !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}
.project-types-manager .acf-form-submit input[type="submit"]:hover {
	background-color: #d4eb12 !important;
}
/* Instructions */
.project-types-manager .acf-field .description {
	color: rgba(248, 244, 242, 0.6) !important;
	font-family: var(--font-family-primary) !important;
	font-size: var(--font-size-12) !important;
	margin-top: 0.05rem !important;
}
/* Collapsed Row Preview */
.project-types-manager .acf-repeater .acf-row .acf-fc-layout-handle,
.project-types-manager .acf-repeater .acf-row-handle .order {
	color: var(--color-text-light) !important;
	font-family: var(--font-family-primary) !important;
}
/* Remove icons color */
.project-types-manager .acf-icon.-minus,
.project-types-manager .acf-icon.-plus,
.project-types-manager .acf-icon.-collapse {
	color: var(--color-text-light) !important;
}
.project-types-manager .acf-icon.-minus:hover {
	color: #E53935 !important;
}
.project-types-manager .acf-icon.-plus:hover,
.project-types-manager .acf-icon.-collapse:hover {
	color: var(--color-accent) !important;
}
/* Success/Error Messages */
.project-types-manager .acf-notice {
	border-radius: 0.04rem !important;
	padding: 0.12rem 0.15rem !important;
	margin-bottom: 0.2rem !important;
}
.project-types-manager .acf-notice.-success {
	background-color: rgba(196, 219, 2, 0.15) !important;
	border-left: 3px solid var(--color-accent) !important;
	color: var(--color-accent) !important;
}
.project-types-manager .acf-notice.-error {
	background-color: rgba(229, 57, 53, 0.15) !important;
	border-left: 3px solid #E53935 !important;
	color: #E53935 !important;
}
/* Post Title Field */
.project-types-manager .acf-form .acf-post-title {
	margin-bottom: 0.2rem !important;
	padding-bottom: 0.2rem !important;
	border-bottom: 1px solid var(--color-background-darker) !important;
}
.project-types-manager .acf-form .acf-post-title label {
	font-family: var(--font-family-primary) !important;
	font-size: var(--font-size-14) !important;
	font-weight: var(--font-weight-medium) !important;
	color: var(--color-text-light) !important;
	display: block !important;
	margin-bottom: 0.08rem !important;
}
.project-types-manager .acf-form .acf-post-title input[type="text"] {
	background-color: var(--color-background-darker) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 0.04rem !important;
	color: var(--color-text-light) !important;
	font-family: var(--font-family-primary) !important;
	font-size: var(--font-size-16) !important;
	font-weight: var(--font-weight-medium) !important;
	padding: 0.12rem 0.15rem !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
.project-types-manager .acf-form .acf-post-title input[type="text"]:focus {
	border-color: var(--color-accent) !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(196, 219, 2, 0.2) !important;
}
/* Force native selects - disable Select2 */
.project-types-manager .select2-container {
	display: none !important;
}
.project-types-manager select,
.project-types-manager select.select2-hidden-accessible {
	display: block !important;
	position: relative !important;
	clip: auto !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0.1rem 0.12rem !important;
	border: none !important;
	background-color: var(--color-background-darker) !important;
	color: var(--color-text-light) !important;
	font-family: var(--font-family-primary) !important;
	font-size: var(--font-size-14) !important;
	border-radius: 0.04rem !important;
	cursor: pointer !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f8f4f2' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.12rem center !important;
	padding-right: 0.35rem !important;
}
.project-types-manager select:focus,
.project-types-manager select.select2-hidden-accessible:focus {
	outline: 2px solid var(--color-accent) !important;
	outline-offset: -2px !important;
}
.project-types-manager select option,
.project-types-manager select.select2-hidden-accessible option {
	background-color: var(--color-background-darker) !important;
	color: var(--color-text-light) !important;
	padding: 0.08rem !important;
}
/* Targeted border removal for ACF elements */
.project-types-manager .acf-fields > .acf-field {
	border-top: none !important;
}
.project-types-manager .acf-table,
.project-types-manager .acf-table thead,
.project-types-manager .acf-table tbody,
.project-types-manager .acf-table tfoot,
.project-types-manager .acf-table th,
.project-types-manager .acf-table td,
.project-types-manager .acf-table tr,
.project-types-manager .acf-input-wrap,
.project-types-manager .acf-input {
	border: none !important;
}
/* Empty State */
.project-types-manager__empty {
	text-align: center;
	padding: 0.5rem;
	color: var(--color-text-light);
}
.project-types-manager__empty p {
	font-family: var(--font-family-primary);
	font-size: var(--font-size-16);
	margin-bottom: 0.2rem;
	opacity: 0.7;
}
.project-types-manager__create-btn {
	display: inline-block;
	padding: 0.12rem 0.3rem;
	background-color: var(--color-accent);
	color: var(--color-text-dark);
	text-decoration: none;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	font-weight: var(--font-weight-medium);
	border-radius: 0.04rem;
	transition: all 0.2s ease;
}
.project-types-manager__create-btn:hover {
	background-color: #d4eb12;
}
/* Back Link */
.project-types-manager__back {
	display: inline-flex;
	align-items: center;
	gap: 0.08rem;
	color: var(--color-text-light);
	text-decoration: none;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	margin-bottom: 0.2rem;
	opacity: 0.7;
	transition: all 0.2s ease;
}
.project-types-manager__back:hover {
	opacity: 1;
	color: var(--color-accent);
}
.project-types-manager__back svg {
	width: 0.16rem;
	height: 0.16rem;
}
html {
    font-size: 6.944vw;
	box-sizing: border-box;
}
@media screen and (min-width: 1440px) {
html {
        font-size: 100px;
}
    }
@media screen and (max-width: 768px) and (orientation: portrait) {
html {
        font-size: 26.667vw;
}
    }
html {

    background-image: unset;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
	margin: 0;
	padding: 0;
	font-weight: normal;
}
ol,
ul {
	list-style: none;
}
img {
	max-width: 100%;
	height: auto;
}
a {
	color: inherit;
	text-decoration: none;
}
html {
	background-color: var(--color-background);
}
.gap-16 {
	gap: var(--spacing-16);
}
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "liga" 1;
	font-smoothing: antialiased;
	font-family: var(--font-family-primary);
	font-size: var(--font-size-14);
	line-height: var(--line-height-normal);
	color: var(--color-text-light);
	background-color: var(--color-background);
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
}
/* Image with 'data' attribute is hidden */
img[data-lazy-src] {
	/* we set the opacity to 0 */
	opacity: 0;
}
/* Image without 'data' attribute is (or becomes) visible */
img.lazyloaded {
	/* prepare the future animation */
	-webkit-transition: opacity 0.5s linear 0.2s;
	-moz-transition: opacity 0.5s linear 0.2s;
	transition: opacity 0.5s linear 0.2s;
	/* we set the opacity to 1 to do the magic */
	opacity: 1;
}
.spacer {
	height: 200vh;
}
.relative {
	position: relative !important;
}
/* use the same nesting syntax as in sass: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting */
section.example-section {
	display: block;
	position: relative;
	padding: 0.6rem 0;

	/* syntax example for extra class on section */
}
section.example-section.hidden {
		display: none;
	}
/* syntax example for container inside section */
section.example-section .container {
		width: 100%;
		max-width: 12rem;
		margin: auto;
	}
.position_relative {
	position: relative;
}
.absolute-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.main.not-admin .add-correction {
		display: none;
	}
.main.not-admin .accordion__status-select-wrapper {
		border-color: transparent !important;
		pointer-events: none !important;
	}
.main.not-admin .accordion__status-select-content {
		justify-content: flex-end;
	}
.main.not-admin .accordion__status-arrow,.main.not-admin .accordion__delete {
		display: none !important;
	}
.field-label-edit, .concept-design-content__edit-name {
	color: var(--color-accent);
}
.creative-brief-step__input-wrapper {
	padding: 0;
}
.creative-brief-step__input-wrapper input,.creative-brief-step__input-wrapper select {
		height: inherit;
		padding: var(--spacing-16);
		border-radius: var(--border-radius-small);
	}
.creative-brief-step__range {
	outline: 0 !important;
}
div textarea {
		background-color: var(--color-background-darker);
		border-radius: var(--border-radius-small);
		padding: var(--spacing-16);
		transition: all 0.3s ease;
		min-height: 1.04rem; /* 104px */
		outline: 0 solid var(--color-accent); /* Always have outline to prevent layout shift */
		outline-offset: 0;
		border: none;
	}
:is(div textarea):focus,:is(div textarea):focus-within,:is(div textarea):hover {
			outline: 1px solid var(--color-accent);
			outline-offset: 0;
			color: white !important;
		}
[readonly]:is(div textarea) {
			opacity: .9;
			cursor: not-allowed;
			pointer-events: none;
		}
div input {
		border: none;
		transition: outline 0.3s ease, color 0.3s ease;
		background-color: var(--color-background-darker);
		outline: 0 solid transparent; /* Always have outline to prevent layout shift */
		outline-offset: 0;
	
	}
:is(div input):focus,:is(div input):focus-within,:is(div input):hover {
			outline: 1px solid var(--color-accent);
			outline-offset: 0;
			color: white !important;
		}
[readonly]:is(div input) {
			opacity: .9;
			cursor: not-allowed;
			pointer-events: none;
		}