/* =============================================================================
   Playground CSS
   ====================================================l=========================
   Component catalog UI styles. Uses pg-* prefix exclusively.

   IMPORTANT:
   - This file is loaded LAST (after ds.css and env CSS) so it wins cascade
   - NEVER style .ds-* classes or their descendants
   - Sandbox (.pg-sandbox) only provides container, not component styles
   ============================================================================= */

/* =============================================================================
   Variables
   ============================================================================= */

:root {
	/* Grays - neutral palette */
	--pg-gray-50: #fafafa;
	--pg-gray-100: #f4f4f5;
	--pg-gray-200: #e4e4e7;
	--pg-gray-300: #d4d4d8;
	--pg-gray-400: #a1a1aa;
	--pg-gray-500: #71717a;
	--pg-gray-600: #52525b;
	--pg-gray-700: #3f3f46;
	--pg-gray-800: #27272a;
	--pg-gray-900: #18181b;
	--pg-gray-950: #09090b;

	/* Accent - brand colors */
	--pg-accent: #0085FF;
	--pg-accent-light: #e6f3ff;

	/* Environment indicators */
	--pg-env-none: var(--pg-gray-400);
	--pg-env-cestujlevne: #10b981;
	--pg-env-cestee: #8b5cf6;

	/* Layout */
	--pg-sidebar-width: 16rem;
	--pg-header-height: 3.5rem;

	/* Typography */
	--pg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--pg-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;

	/* Spacing */
	--pg-space-1: 0.25rem;
	--pg-space-2: 0.5rem;
	--pg-space-3: 0.75rem;
	--pg-space-4: 1rem;
	--pg-space-5: 1.25rem;
	--pg-space-6: 1.5rem;
	--pg-space-8: 2rem;
	--pg-space-10: 2.5rem;
	--pg-space-12: 3rem;

	/* Radius */
	--pg-radius-sm: 0.25rem;
	--pg-radius-md: 0.375rem;
	--pg-radius-lg: 0.5rem;

	/* Shadows */
	--pg-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--pg-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* =============================================================================
   Base Reset (pg-* scoped)
   ============================================================================= */

.pg-body {
	margin: 0;
	padding: 0;
	font-family: var(--pg-font);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--pg-gray-700);
	background: var(--pg-gray-50);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.pg-body *,
.pg-body *::before,
.pg-body *::after {
	box-sizing: border-box;
}

/* =============================================================================
   Layout
   ============================================================================= */

.pg-layout {
	min-height: 100vh;
}

.pg-main {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin-left: var(--pg-sidebar-width);
}

/* =============================================================================
   Sidebar
   ============================================================================= */

.pg-sidebar {
	background: linear-gradient(180deg, var(--pg-gray-900) 0%, var(--pg-gray-950) 100%);
	color: var(--pg-gray-300);
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--pg-sidebar-width);
	z-index: 100;
	box-shadow:
		1px 0 0 0 var(--pg-gray-800),
		4px 0 24px -4px rgba(0, 0, 0, 0.3);
}

@media (max-width: 599px) {
	.pg-sidebar {
		transform: translateX(-100%);
		transition: transform 0.25s ease;
	}

	.pg-sidebar-toggle:checked ~ .pg-layout .pg-sidebar {
		transform: translateX(0);
	}

	.pg-sidebar-toggle:checked ~ .pg-layout .pg-sidebar::after {
		content: '';
		position: fixed;
		top: 0;
		left: var(--pg-sidebar-width);
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(2px);
	}

	.pg-main {
		margin-left: 0;
	}
}

.pg-sidebar__close {
	display: none;
	position: absolute;
	top: var(--pg-space-4);
	right: var(--pg-space-4);
	width: 1.5rem;
	height: 1.5rem;
	color: var(--pg-gray-500);
	cursor: pointer;
	transition: color 0.15s ease;
}

.pg-sidebar__close:hover {
	color: var(--pg-gray-200);
}

@media (max-width: 599px) {
	.pg-sidebar__close {
		display: block;
	}
}

.pg-sidebar__header {
	padding: var(--pg-space-6);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pg-logo {
	display: flex;
	align-items: center;
	gap: var(--pg-space-3);
	font-size: 1rem;
	font-weight: 700;
	color: white;
	letter-spacing: -0.02em;
}

.pg-logo::before {
	content: '';
	display: block;
	width: 1.75rem;
	height: 1.75rem;
	background: linear-gradient(135deg, #0085FF 0%, #3DEC00 100%);
	border-radius: var(--pg-radius-md);
	flex-shrink: 0;
}

.pg-logo-sub {
	display: block;
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--pg-gray-500);
	margin-top: var(--pg-space-2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.pg-sidebar__footer {
	padding: var(--pg-space-4) var(--pg-space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(0, 0, 0, 0.15);
}

.pg-version {
	font-size: 0.6875rem;
	font-weight: 500;
	color: var(--pg-gray-600);
	font-family: var(--pg-font-mono);
}

/* =============================================================================
   Navigation
   ============================================================================= */

.pg-nav {
	flex: 1;
	padding: var(--pg-space-4) var(--pg-space-3);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--pg-gray-700) transparent;
}

.pg-nav::-webkit-scrollbar {
	width: 6px;
}

.pg-nav::-webkit-scrollbar-track {
	background: transparent;
}

.pg-nav::-webkit-scrollbar-thumb {
	background: var(--pg-gray-700);
	border-radius: 3px;
}

.pg-nav__group {
	margin-bottom: var(--pg-space-6);
}

.pg-nav__group:last-child {
	margin-bottom: 0;
}

.pg-nav__label {
	display: block;
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--pg-gray-500);
	padding: var(--pg-space-2) var(--pg-space-3);
	margin-bottom: var(--pg-space-1);
}

.pg-nav__item {
	display: flex;
	align-items: center;
	gap: var(--pg-space-3);
	padding: var(--pg-space-2) var(--pg-space-3);
	border-radius: var(--pg-radius-md);
	color: var(--pg-gray-400);
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 500;
	transition: all 0.15s ease;
	position: relative;
}

.pg-nav__item:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--pg-gray-100);
}

.pg-nav__item--active {
	background: rgba(59, 130, 246, 0.15);
	color: var(--pg-accent);
}

.pg-nav__item--active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 1rem;
	background: var(--pg-accent);
	border-radius: 0 2px 2px 0;
}

.pg-nav__item--active:hover {
	background: rgba(59, 130, 246, 0.2);
	color: var(--pg-accent);
}

.pg-nav__icon {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
	opacity: 0.6;
}

.pg-nav__item:hover .pg-nav__icon {
	opacity: 0.9;
}

.pg-nav__item--active .pg-nav__icon {
	opacity: 1;
}

/* Focus states */
.pg-nav__item:focus {
	outline: none;
}

.pg-nav__item:focus-visible {
	outline: 2px solid var(--pg-accent);
	outline-offset: 2px;
}

/* =============================================================================
   Header
   ============================================================================= */

.pg-header {
	height: var(--pg-header-height);
	background: white;
	border-bottom: 1px solid var(--pg-gray-200);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--pg-space-6);
	position: sticky;
	top: 0;
	z-index: 50;
}

.pg-header__title {
	display: flex;
	align-items: center;
	gap: var(--pg-space-3);
}

.pg-header__menu {
	display: none;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--pg-gray-600);
	cursor: pointer;
	transition: color 0.15s ease;
}

.pg-header__menu:hover {
	color: var(--pg-gray-900);
}

@media (max-width: 599px) {
	.pg-header__menu {
		display: block;
	}
}

.pg-header__h1 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--pg-gray-900);
	margin: 0;
}

/* =============================================================================
   Environment Switcher
   ============================================================================= */

.pg-env {
	display: flex;
	align-items: center;
	gap: var(--pg-space-4);
}

.pg-env__label {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--pg-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.pg-env__switcher {
	display: flex;
	background: var(--pg-gray-100);
	border-radius: var(--pg-radius-md);
	padding: 0.1875rem;
	gap: 0.125rem;
}

.pg-env__option {
	padding: var(--pg-space-1) var(--pg-space-3);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--pg-gray-600);
	text-decoration: none;
	border-radius: var(--pg-radius-sm);
	transition: background 0.15s ease, color 0.15s ease;
}

.pg-env__option:hover {
	background: var(--pg-gray-200);
	color: var(--pg-gray-800);
}

.pg-env__option--active {
	background: white;
	color: var(--pg-gray-900);
	box-shadow: var(--pg-shadow-sm);
}

.pg-env__option--active:hover {
	background: white;
}

/* Environment color hints */
.pg-env__option--cestujlevne.pg-env__option--active {
	color: var(--pg-env-cestujlevne);
}

.pg-env__option--cestee.pg-env__option--active {
	color: var(--pg-env-cestee);
}

/* Status indicator - ordered before switcher visually */
.pg-env__status {
	display: flex;
	align-items: center;
	gap: var(--pg-space-2);
	padding-right: var(--pg-space-4);
	border-right: 1px solid var(--pg-gray-200);
	order: -1;
	min-width: 14rem;
}

.pg-env__status--empty {
	border-right: none;
}

.pg-env__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--pg-env-cestujlevne);
	animation: pg-pulse 2s ease-in-out infinite;
}

.pg-env__option--cestee.pg-env__option--active ~ .pg-env__status .pg-env__dot,
.pg-env__switcher:has(.pg-env__option--cestee.pg-env__option--active) ~ .pg-env__status .pg-env__dot {
	background: var(--pg-env-cestee);
}

@keyframes pg-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.pg-env__url {
	font-size: 0.6875rem;
	font-family: var(--pg-font-mono);
	color: var(--pg-gray-400);
	max-width: 12rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Focus states */
.pg-env__option:focus {
	outline: none;
}

.pg-env__option:focus-visible {
	outline: 2px solid var(--pg-accent);
	outline-offset: 2px;
}

/* =============================================================================
   Header Controls
   ============================================================================= */

.pg-header__controls {
	display: none;
	align-items: center;
	gap: var(--pg-space-6);
}

@media (min-width: 1400px) {
	.pg-header__controls {
		display: flex;
	}
}

/* =============================================================================
   Header Dropdown (for narrow screens)
   ============================================================================= */

.pg-header__dropdown {
	position: relative;
}

@media (min-width: 1400px) {
	.pg-header__dropdown {
		display: none;
	}
}

.pg-header__toggle {
	display: flex;
	align-items: center;
	gap: var(--pg-space-2);
	padding: var(--pg-space-2) var(--pg-space-3);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--pg-gray-600);
	background: var(--pg-gray-100);
	border-radius: var(--pg-radius-md);
	cursor: pointer;
	list-style: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.pg-header__toggle::-webkit-details-marker {
	display: none;
}

.pg-header__toggle:hover {
	background: var(--pg-gray-200);
	color: var(--pg-gray-800);
}

.pg-header__toggle-icon {
	width: 1rem;
	height: 1rem;
}

.pg-header__dropdown-content {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: var(--pg-space-2);
	padding: var(--pg-space-4);
	background: white;
	border: 1px solid var(--pg-gray-200);
	border-radius: var(--pg-radius-lg);
	box-shadow: var(--pg-shadow-md);
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: var(--pg-space-4);
	min-width: 16rem;
}

.pg-header__dropdown-content .pg-device,
.pg-header__dropdown-content .pg-env {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pg-space-2);
}

.pg-header__dropdown-content .pg-env__status {
	display: none;
}

/* =============================================================================
   Device Switcher
   ============================================================================= */

.pg-device {
	display: flex;
	align-items: center;
	gap: var(--pg-space-4);
}

.pg-device__label {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--pg-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.pg-device__switcher {
	display: flex;
	background: var(--pg-gray-100);
	border-radius: var(--pg-radius-md);
	padding: 0.1875rem;
	gap: 0.125rem;
}

.pg-device__option {
	padding: var(--pg-space-1) var(--pg-space-3);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--pg-gray-600);
	text-decoration: none;
	border-radius: var(--pg-radius-sm);
	transition: background 0.15s ease, color 0.15s ease;
}

.pg-device__option:hover {
	background: var(--pg-gray-200);
	color: var(--pg-gray-800);
}

.pg-device__option--active {
	background: white;
	color: var(--pg-gray-900);
	box-shadow: var(--pg-shadow-sm);
}

.pg-device__option--active:hover {
	background: white;
}

.pg-device__option:focus {
	outline: none;
}

.pg-device__option:focus-visible {
	outline: 2px solid var(--pg-accent);
	outline-offset: 2px;
}

/* =============================================================================
   Content Area
   ============================================================================= */

.pg-content {
	flex: 1;
	padding: var(--pg-space-8);
}

/* Device-specific sandbox widths */
.pg-content--mobile .pg-sandbox {
	max-width: 375px;
}

.pg-content--tablet .pg-sandbox {
	max-width: 820px;
}

.pg-content--desktop .pg-sandbox {
	max-width: 1440px;
}

.pg-content--full .pg-sandbox {
	max-width: none;
}

/* =============================================================================
   Section
   ============================================================================= */

.pg-section {
	margin-bottom: var(--pg-space-10);
}

.pg-section__title {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--pg-gray-900);
	margin: 0 0 var(--pg-space-4);
	padding-bottom: var(--pg-space-3);
	border-bottom: 1px solid var(--pg-gray-200);
}

.pg-section__subtitle {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pg-gray-500);
	margin: var(--pg-space-6) 0 var(--pg-space-3);
}

.pg-section__subtitle:first-child {
	margin-top: 0;
}

/* =============================================================================
   Intro / Description
   ============================================================================= */

.pg-intro {
	margin-bottom: var(--pg-space-8);
}

.pg-intro__title {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--pg-gray-900);
	margin: 0 0 var(--pg-space-2);
	letter-spacing: -0.02em;
}

.pg-intro__desc {
	font-size: 0.9375rem;
	color: var(--pg-gray-500);
	margin: 0;
	max-width: 36rem;
}

/* =============================================================================
   Sandbox (Component Preview Area)
   =============================================================================
   Container for DS components. Provides visual boundary only.
   NEVER adds styles that could affect .ds-* components.
   ============================================================================= */

.pg-sandbox {
	background: white;
	border: 1px solid var(--pg-gray-200);
	border-radius: var(--pg-radius-lg);
	padding: var(--pg-space-6);
	margin-bottom: var(--pg-space-3);
}

/* Variant: inset/recessed look */
.pg-sandbox--inset {
	background: var(--pg-gray-50);
	border-color: var(--pg-gray-200);
	box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.02);
}

/* Variant: dark background for light components */
.pg-sandbox--dark {
	background: var(--pg-gray-900);
	border-color: var(--pg-gray-800);
}

/* =============================================================================
   Note / Meta Text
   ============================================================================= */

.pg-note {
	font-size: 0.75rem;
	color: var(--pg-gray-400);
	margin: 0 0 var(--pg-space-4);
	line-height: 1.6;
}

.pg-note code {
	font-family: var(--pg-font-mono);
	font-size: 0.6875rem;
	background: var(--pg-gray-100);
	padding: 0.125rem 0.375rem;
	border-radius: var(--pg-radius-sm);
	color: var(--pg-gray-600);
}

/* =============================================================================
   Card (optional grouping)
   ============================================================================= */

.pg-card {
	background: white;
	border: 1px solid var(--pg-gray-200);
	border-radius: var(--pg-radius-lg);
	padding: var(--pg-space-5);
	margin-bottom: var(--pg-space-4);
}

.pg-card__title {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--pg-gray-800);
	margin: 0 0 var(--pg-space-3);
}

/* =============================================================================
   Utilities
   ============================================================================= */

.pg-stack {
	display: flex;
	flex-direction: column;
	gap: var(--pg-space-3);
}

.pg-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pg-space-4);
}

.pg-divider {
	height: 1px;
	background: var(--pg-gray-200);
	margin: var(--pg-space-6) 0;
}

/* =============================================================================
   Homepage
   ============================================================================= */

.pg-home-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--pg-space-4);
}

/* Getting Started Cards */
.pg-home-card {
	background: white;
	border: 1px solid var(--pg-gray-200);
	border-radius: var(--pg-radius-lg);
	padding: var(--pg-space-5);
}

.pg-home-card__icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--pg-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--pg-space-4);
}

.pg-home-card__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.pg-home-card__icon--install {
	background: var(--pg-accent-light);
	color: var(--pg-accent);
}

.pg-home-card__icon--usage {
	background: #f0fdf4;
	color: #16a34a;
}

.pg-home-card__icon--tokens {
	background: #faf5ff;
	color: #9333ea;
}

.pg-home-card__title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--pg-gray-900);
	margin: 0 0 var(--pg-space-2);
}

.pg-home-card__desc {
	font-size: 0.8125rem;
	color: var(--pg-gray-500);
	margin: 0;
	line-height: 1.5;
}

.pg-home-card__desc code {
	font-family: var(--pg-font-mono);
	font-size: 0.75rem;
	background: var(--pg-gray-100);
	padding: 0.125rem 0.375rem;
	border-radius: var(--pg-radius-sm);
	color: var(--pg-gray-600);
}

/* Component Cards */
.pg-home-component {
	display: block;
	background: white;
	border: 1px solid var(--pg-gray-200);
	border-radius: var(--pg-radius-lg);
	padding: var(--pg-space-5);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pg-home-component:hover {
	border-color: var(--pg-accent);
	box-shadow: 0 0 0 3px var(--pg-accent-light);
}

.pg-home-component:focus {
	outline: none;
}

.pg-home-component:focus-visible {
	border-color: var(--pg-accent);
	box-shadow: 0 0 0 3px var(--pg-accent-light);
}

.pg-home-component__badge {
	display: inline-block;
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--pg-gray-500);
	background: var(--pg-gray-100);
	padding: 0.125rem 0.5rem;
	border-radius: var(--pg-radius-full);
	margin-bottom: var(--pg-space-3);
}

.pg-home-component__title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--pg-gray-900);
	margin: 0 0 var(--pg-space-1);
}

.pg-home-component__desc {
	font-size: 0.8125rem;
	color: var(--pg-gray-500);
	margin: 0;
}

/* Token Swatches */
.pg-tokens-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: var(--pg-space-3);
}

.pg-token-swatch {
	border-radius: var(--pg-radius-md);
	padding: var(--pg-space-4);
	color: white;
}

.pg-token-swatch--primary {
	background: var(--ds-color-primary);
}

.pg-token-swatch--success {
	background: var(--ds-color-success);
}

.pg-token-swatch--warning {
	background: var(--ds-color-warning);
	color: var(--pg-gray-900);
}

.pg-token-swatch--danger {
	background: var(--ds-color-danger);
}

.pg-token-swatch__name {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: var(--pg-space-1);
}

.pg-token-swatch__value {
	display: block;
	font-family: var(--pg-font-mono);
	font-size: 0.6875rem;
	opacity: 0.8;
}

/* Token Spacing */
.pg-tokens-spacing {
	display: flex;
	flex-direction: column;
	gap: var(--pg-space-2);
}

.pg-token-space {
	display: flex;
	align-items: center;
	gap: var(--pg-space-3);
}

.pg-token-space__bar {
	height: 1.5rem;
	background: var(--pg-accent);
	border-radius: var(--pg-radius-sm);
	min-width: 0.25rem;
}

.pg-token-space code {
	font-family: var(--pg-font-mono);
	font-size: 0.75rem;
	color: var(--pg-gray-500);
}

/* Token Radius */
.pg-tokens-radius {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pg-space-4);
}

.pg-token-radius {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pg-space-2);
}

.pg-token-radius__box {
	width: 3rem;
	height: 3rem;
	background: var(--pg-gray-200);
	border: 2px solid var(--pg-gray-400);
}

.pg-token-radius code {
	font-family: var(--pg-font-mono);
	font-size: 0.6875rem;
	color: var(--pg-gray-500);
}

/* =============================================================================
   Login Page
   ============================================================================= */

.pg-body--login {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background: linear-gradient(135deg, var(--pg-gray-900) 0%, var(--pg-gray-950) 100%);
}

.pg-login {
	width: 100%;
	max-width: 24rem;
	padding: var(--pg-space-4);
}

.pg-login__card {
	background: white;
	border-radius: var(--pg-radius-lg);
	box-shadow:
		0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -2px rgba(0, 0, 0, 0.1),
		0 0 0 1px rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.pg-login__header {
	padding: var(--pg-space-8) var(--pg-space-6) var(--pg-space-6);
	text-align: center;
	background: linear-gradient(180deg, var(--pg-gray-50) 0%, white 100%);
	border-bottom: 1px solid var(--pg-gray-100);
}

.pg-login__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--pg-space-3);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--pg-gray-900);
	letter-spacing: -0.02em;
}

.pg-login__logo::before {
	content: '';
	display: block;
	width: 2rem;
	height: 2rem;
	background: linear-gradient(135deg, #0085FF 0%, #3DEC00 100%);
	border-radius: var(--pg-radius-md);
	flex-shrink: 0;
}

.pg-login__subtitle {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--pg-gray-500);
	margin-top: var(--pg-space-2);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.pg-login__flash {
	padding: var(--pg-space-3) var(--pg-space-4);
	font-size: 0.8125rem;
	border-bottom: 1px solid var(--pg-gray-100);
}

.pg-login__flash--info {
	background: var(--pg-accent-light);
	color: var(--pg-accent);
}

.pg-login__flash--success {
	background: #f0fdf4;
	color: #16a34a;
}

.pg-login__flash--error {
	background: #fef2f2;
	color: #dc2626;
}

.pg-login__form {
	padding: var(--pg-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--pg-space-5);
}

.pg-login__form-error {
	padding: var(--pg-space-3) var(--pg-space-4);
	background: #fef2f2;
	color: #dc2626;
	font-size: 0.8125rem;
	border-radius: var(--pg-radius-md);
	border: 1px solid #fecaca;
}

.pg-login__field {
	display: flex;
	flex-direction: column;
	gap: var(--pg-space-2);
}

.pg-login__label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--pg-gray-700);
}

.pg-login__input {
	appearance: none;
	border: none;
	background: none;
	font: inherit;
	display: block;
	width: 100%;
	padding: var(--pg-space-3) var(--pg-space-4);
	border: 1px solid var(--pg-gray-300);
	border-radius: var(--pg-radius-md);
	background: white;
	font-size: 0.9375rem;
	color: var(--pg-gray-900);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pg-login__input::placeholder {
	color: var(--pg-gray-400);
}

.pg-login__input:focus {
	outline: none;
	border-color: var(--pg-accent);
	box-shadow: 0 0 0 3px var(--pg-accent-light);
}

.pg-login__error {
	font-size: 0.75rem;
	color: #dc2626;
}

.pg-login__submit {
	appearance: none;
	border: none;
	background: none;
	font: inherit;
	display: block;
	width: 100%;
	padding: var(--pg-space-3) var(--pg-space-4);
	background: linear-gradient(180deg, var(--pg-accent) 0%, #336699 100%);
	color: white;
	font-size: 0.9375rem;
	font-weight: 600;
	border-radius: var(--pg-radius-md);
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.pg-login__submit:hover {
	opacity: 0.9;
}

.pg-login__submit:active {
	transform: scale(0.98);
}

.pg-login__submit:focus {
	outline: none;
}

.pg-login__submit:focus-visible {
	box-shadow: 0 0 0 3px var(--pg-accent-light), 0 0 0 5px var(--pg-accent);
}

.pg-login__footer {
	text-align: center;
	font-size: 0.75rem;
	color: var(--pg-gray-500);
	margin-top: var(--pg-space-6);
}