/* AI updated, model - Claude Sonnet 4.5 */
:root {
	--blue: #0092B6;
	--blue-rgb: 0, 146, 182;
	--pink: #DF96BE;

	--bit-lighter-blue: #18a6c6;
	--light-blue: #AAF2FE;
	--light: #FFFFFF;

	--container-width: min(1054px, 100vw);
	--container-padding: 15px;

	--header-height: 94px;
}

*, *:before, *:after {box-sizing: border-box;}
html, body {scroll-behavior: smooth; overflow-x: clip;}
body {margin: 0; background: var(--blue);}
body, a, button, input, select, textarea {font-family: var(--roboto);}
body, a, button {color: var(--light);}

h1, h2, h3, h4, h5, h6, p, ol, ul {margin-top: 0;}

.Container {width: var(--container-width); padding-left: var(--container-padding); padding-right: var(--container-padding); margin-left: auto; margin-right: auto;}

.Button {
	--bg: var(--pink);
	--border: var(--light-blue);
	--color: var(--light);
}
.Button.Alt {
	--bg: var(--light-blue);
	--border: var(--pink);
	--color: var(--blue);
}
.Button.Stealth {
	--bg: transparent;
	--border: #ABF1FD;
	--color: #ABF1FD;
}
.Button {background: var(--bg); color: var(--color); padding: 9px 24px; border: 2px solid var(--border); border-radius: 9999px; cursor: pointer; text-decoration: none; outline: none; font-weight: 500; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 7px; text-align: center; max-width: max-content;}

video, img {max-width: 100%; height: auto;}

.Video, .Image {display: flex; border-radius: 10px; overflow: hidden; outline: 1px solid rgba(255,255,255,0.2); outline-offset: -1px;}

h2 {font-size: 54px; line-height: 72px; font-weight: bold; margin-bottom: 7px;}
.Text {
	--font-size: 20px;
	--line-height: 160%;
	--block-margin: 18px;
	--inline-margin: 0;
}
.Text, .Text :is(p, li, td, th) {font-size: var(--font-size); line-height: var(--line-height);}
.Text :is(p, ul, ol, table, .Media):not(:last-child) {margin-bottom: var(--block-margin);}
.Text :is(p, ul, ol, table, .Media):last-child {margin-bottom: 0;}
.Text li:not(:last-child) {margin-bottom: var(--inline-margin);}

@media (min-width: 1024px) {
	.MobileOnly {display: none;}
}

@media (max-width: 1023px) {
	.DesktopOnly {display: none;}

	:root {--header-height: 100px; --container-padding: 12px;}
	h2 {font-size: 42px; line-height: 56px;}
	.Button {font-size: 15px; padding: 8px 20px;}
	.Text {--font-size: 18px; --line-height: 150%; --block-margin: 16px;}
}

@media (max-width: 767px) {
	:root {--header-height: 90px; --container-padding: 16px;}
	h2 {font-size: 32px; line-height: 44px; margin-bottom: 6px;}
	.Button {font-size: 14px; padding: 7px 18px; gap: 5px;}
	.Text {--font-size: 16px; --line-height: 145%; --block-margin: 14px;}
}.ContentItem {flex: 0 0 min(328px, 80vw); outline: 1px solid rgba(255,255,255,0.2); outline-offset: -1px; border-radius: 10px; overflow: hidden; scroll-snap-align: start;}
.ContentItem a {display: flex; flex-direction: column; text-decoration: none; height: 100%;}
.ContentItem .Image {overflow: hidden; border-radius: 0; aspect-ratio: 16 / 9;}
.ContentItem .Image img, .ContentItem .Image picture {object-fit: cover; object-position: center; width: 100%; height: 100%;}
.ContentItem .Info {padding: 11px 26px; display: flex; flex-direction: column; background-color: var(--bit-lighter-blue); flex: 1;}
.ContentItem .Tags {margin-bottom: 11px; display: flex; gap: 9px;}
.ContentItem .Tags span {padding: 3px 10px; border-radius: 8px; font-weight: bold; font-size: 12px; line-height: 100%;}
.ContentItem .Tags span:nth-child(1) {background-color: #01BDD5; display: grid; place-items: center;}
.ContentItem .Tags span:nth-child(2) { border: 2px solid #abf1fd; display: flex; align-items: center; gap: 3px; color: #abf1fd;}
.ContentItem .Tags img {width: 10px; height: 10ppx; margin-right: 3px;}
.ContentItem h3 {margin-bottom: 20px;}
.ContentItem .Button {margin-left: auto; margin-right: 0;}
.ContentItem .Text {
	--font-size: 16px;
	--line-height: 20px;
	margin-bottom: 13px; flex: 1;
}

@media (max-width: 767px) {
.ContentItem {flex: 0 0 min(280px, 75vw);}
.ContentItem .Info {padding: 10px 20px;}
.ContentItem .Tags span {font-size: 11px; padding: 3px 8px;}
.ContentItem h3 {font-size: 16px; line-height: 22px; margin-bottom: 16px;}
.ContentItem .Text {--font-size: 14px; --line-height: 18px; margin-bottom: 10px;}
.ContentItem .Button {font-size: 13px; padding: 5px 16px;}
}@font-face {
	font-family: 'Roboto';
	src: url('Grace/Projects/ProfiCamp/Design/Fonts/Roboto.ttf') format('truetype-variations');
	font-weight: 100 900;
	font-style: normal;
}

@font-face {
	font-family: 'Roboto';
	src: url('Grace/Projects/ProfiCamp/Design/Fonts/Roboto-Italic.ttf') format('truetype-variations');
	font-weight: 100 900;
	font-style: italic;
}

:root {
	--roboto: 'Roboto', sans-serif;
}/* AI updated, model - Claude Sonnet 4.5 */
@media (min-width: 1024px) {.PhotoGalleryItem {cursor: zoom-in;}}
.PhotoLightbox {display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.95); z-index: 9999; align-items: center; justify-content: center; padding: 20px;}
.PhotoLightbox.Active {display: flex;}
.PhotoLightbox img {max-width: 85vw; max-height: 85vh; object-fit: contain; border-radius: 10px; user-select: none;}
.PhotoLightbox .Close {position: absolute; top: 20px; right: 20px; background: var(--pink); color: var(--light); border: 2px solid var(--light-blue); border-radius: 50%; width: 50px; height: 50px; font-size: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: opacity 0.2s;}
.PhotoLightbox .Close:hover {opacity: 0.8;}
.PhotoLightbox .Nav {position: absolute; top: 50%; transform: translateY(-50%); background: var(--pink); color: var(--light); border: 2px solid var(--light-blue); border-radius: 50%; width: 50px; height: 50px; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: opacity 0.2s;}
.PhotoLightbox .Nav:hover {opacity: 0.8;}
.PhotoLightbox .Nav.Disabled {opacity: 0.3; cursor: not-allowed; pointer-events: none;}
.PhotoLightbox .Prev {left: 20px;}
.PhotoLightbox .Next {right: 20px;}
.PhotoLightbox .Counter {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.7); color: var(--light); padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 500;}.Intro {text-align: center; padding-top: 0;}
.Intro h1 {font-size: 41px; line-height: 120%; margin-bottom: 31px;}
.Intro .Buttons {display: flex; justify-content: center; gap: 15px 33px; margin-bottom: 51px;}
.Intro video {border-radius: 19px;}
.Intro .Video {position: relative; z-index: 1; display: flex; margin-bottom: 60px; outline: none;}
.Intro .Video button {position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: grid; place-content: center; background: transparent; border: none; cursor: pointer;}

.About {
	--video-height-half: calc(var(--container-width) * 9 / 16) / 2;
}
.About {padding-top: 108px; padding-bottom: 62px; position: relative;}
.About::before {content: ''; position: absolute; inset: 0 calc(50% - 50vw) 0; background: linear-gradient(to bottom, var(--light-blue) 0%, var(--blue) 20%, var(--blue) 50%, var(--pink) 100%); z-index: -1;}
.About .Info {display: grid; grid-template-columns: 485px 1fr; gap: 30px 108px; margin-bottom: 60px;}
.About .Bigger {
	--font-size: 24px;
	--line-height: 32px;
	font-weight: 600;
}
.About .Image img {border-radius: 20px; box-shadow: 20px 20px 0px #01BDD5;}
.About .Space {border-radius: 10px; background: var(--light-blue); padding: 16px; margin-bottom: 132px; text-align: center;}
.About .Space p {margin-bottom: 0; max-width: 682px; color: var(--blue); font-weight: bold; font-size: 24px; line-height: 36px; margin-left: auto; margin-right: auto;}
.About .PacksHeading {text-align: center; margin-bottom: 44px;}
.About .Packs {display: flex; gap: 13px; justify-content: center; flex-wrap: wrap;}
.About .Pack {
	--font-size: 16px;
	--line-height: 24px;
	flex: 1; width: min(100%, 350px); background: var(--blue); border-radius: 10px; padding: 38px 29px; display: flex; flex-direction: column;
}
.About .Pack p {flex: 1;}
.About .Pack .Label {font-weight: bold; line-height: normal; padding: 5px 12px; border-radius: 10px; background: #01BDD5; margin-bottom: 12px; width: fit-content;}
.About .Pack h3 {line-height: normal; font-size: 24px;}
.About .Pack .Pricing {font-size: 12px; margin-bottom: 23px;}
.About .Pack .Pricing strong {font-size: 37.55px; vertical-align: text-bottom;}
.About .Pack .Pricing + div {margin-top: -15px;}
.About .Pack .Button {display: flex; width: fit-content; margin-right: 0; margin-left: auto; padding-top: 4px; padding-bottom: 4px;}

.Reg {padding-top: 92px; padding-bottom: 57px; position: relative; display: grid; grid-template-columns: 441px 1fr; gap: 30px 82px; align-items: start; color: var(--blue);}
.Reg::before {content: ''; position: absolute; inset: 0 calc(50% - 50vw); background: var(--light-blue); z-index: -1;}
.Reg .Text {
	--font-size: 16px;
	--line-height: 24px;
}
.Reg .VideoPreview img {border-radius: 10px;}
.Reg h2 {font-size: 40px;}
.Reg h3 {font-size: 24px; line-height: normal; font-weight: 600; margin-bottom: 15px;}

.Off {padding-top: 62px; padding-bottom: 71px;}
.Off header {text-align: center; margin-bottom: 35px; max-width: 754px; margin-left: auto; margin-right: auto;}

.Off .Image {position: relative;}
.Off .Label {position: absolute; line-height: normal; font-weight: bold; border-radius: 10px;}

.Off .Upcoming {display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: stretch; margin-bottom: 42px;}
.Off .Upcoming > * {flex: 1; width: min(100%, 500px);}
.Off .Upcoming .Image img {object-fit: cover; object-position: center; border-radius: 10px; width: 100%; height: 100%;}
.Off .Upcoming .Image img, .Off .Upcoming .Info {outline: 1px solid rgba(255,255,255,0.2); outline-offset: -1px;}
.Off .Upcoming .Label {top: 17px; left: 17px; background: #DF96BE; font-size: 14px; padding: 4px 12px;}
.Off .Upcoming .Info {background: rgba(255,255,255,0.05); padding: 27px 26px; border-radius: 10px;}
.Off .Upcoming .SubTitle {font-size: 16px; line-height: normal; font-weight: 500; margin-bottom: 6px;}
.Off .Upcoming h3 {font-size: 28px; line-height: 36px; margin-bottom: 12px;}
.Off .Upcoming .Text {
	--font-size: 14px;
	--line-height: 18px;
	margin-bottom: 10px;
}
.Off .Upcoming :is(.Starts, .Place) {font-size: 13px; line-height: 110%;}
.Off .Upcoming :is(.Date, .Time, .Place) {display: flex; align-items: center; max-width: 196px;}
.Off .Upcoming .Starts img, .Off .Upcoming .Place img {margin-right: 6.13px;}
.Off .Upcoming .Starts {display: flex;}
.Off .Upcoming .Date {padding-right: 15.5px; border-right: 1px solid var(--light); margin-right: 14.5px;}
.Off .Upcoming .Place {margin-top: 13px;}

.Off .EventsH {font-size: 24px; line-height: 32px; margin-bottom: 16px; font-weight: 600;}
.Off .Events {display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; align-items: stretch; margin-bottom: 71px;}
.Off .Events article {width: min(100%, calc((100% - 32px) / 3)); border-radius: 10px; background: rgba(255,255,255,0.05); outline: 1px solid rgba(255,255,255,0.2); outline-offset: -1px; overflow: hidden;}
.Off .Events .Image {height: 200px;}
.Off .Events .Label {top: 17px; left: 12px; background: var(--blue); font-size: 12px; padding: 3px 8px;}
.Off .Events .Image img, .Off .Events .Image picture {object-fit: cover; object-position: center; width: 100%; height: 100%;}
.Off .Events .Info {padding: 13px 26px;}
.Off .Events h3 {font-size: 16px; line-height: 22px; margin-bottom: 10px;}
.Off .Events .Text {
	--font-size: 13px;
	--line-height: auto;
	margin-bottom: 13px;
}
.Off .Events :is(.Starts, .Place) {font-size: 13px; line-height: 110%;}
.Off .Events :is(.Date, .Time, .Place) {display: flex; align-items: center;}
.Off .Events .Starts img, .Off .Events .Place img {margin-right: 6.13px;}
.Off .Events .Starts {display: flex;}
.Off .Events .Date {padding-right: 15.5px; border-right: 1px solid var(--light); margin-right: 14.5px;}
.Off .Events .Place {margin-top: 5px;}

.Tiers {padding-top: 63px; padding-bottom: 63px;}
.Tiers header {text-align: center;}
.Tiers header p {max-width: 754px; margin-left: auto; margin-right: auto; margin-bottom: 44px;}
.Tiers article + article {margin-top: 15px;}
.Tiers article {display: flex; gap: 20px; align-items: center; flex-wrap: wrap;}
.Tiers article .Text {
	--font-size: 14px;
	--line-height: 20px;
	flex: 1; border-radius: 10px; background: rgba(255,255,255,0.05); padding: 25px 32px; border: 1px solid rgba(255,255,255,0.2);
}
.Tiers .Basics {width: min(100%, 220px);}
.Tiers h3 {font-size: 36px; line-height: normal; margin-bottom: 3px;}
.Tiers .Pricing {font-size: 12px; line-height: 100%; margin-bottom: 13px;}
.Tiers .Pricing strong {font-size: 28px; line-height: 100%; vertical-align: text-bottom;}
.Tiers .Label {font-size: 12px; line-height: 100%; padding: 4px 12px; border-radius: 10px; background: #01BDD5; margin-bottom: 5px; display: flex; max-width: fit-content; font-weight: bold;}

.BookingSection {display: grid; grid-template-columns: 1fr 0.5fr; gap: 15px; position: relative; padding-top: 54px; padding-bottom: 54px;}
.BookingSection::before {content: ''; position: absolute; inset: 0 calc(50% - 50vw) 0; background: #F8F8F8; z-index: -1;}

@media (max-width: 1023px) {
	.Intro h1 {font-size: 36px; line-height: 48px; margin-bottom: 24px;}
	.Intro .Buttons {flex-direction: column; align-items: center; gap: 15px; margin-bottom: 40px;}
	.About {padding-top: 80px; padding-bottom: 50px;}
	.About .Info {grid-template-columns: 1fr; gap: 24px;}
	.About .Image {order: -1;}
	.About .Space {margin-bottom: 80px;}
	.About .Packs {flex-direction: column; align-items: center;}
	.About .Pack {width: 100%; max-width: 400px;}
	.Reg {grid-template-columns: 1fr; gap: 24px; padding-top: 60px; padding-bottom: 40px;}
	.Reg .AuthSection {order: -1;}
	.Reg .AuthSection h2 {margin-bottom: 24px;}
	.Off .Upcoming {flex-direction: column;}
	.Off .Upcoming > * {width: 100%;}
	.Off .Events article {width: min(100%, calc((100% - 16px) / 2));}
	.Tiers article {flex-direction: column; gap: 16px;}
	.Tiers .Basics {width: 100%;}
	.BookingSection {grid-template-columns: 1fr; gap: 24px;}
}

@media (max-width: 767px) {
	.Intro {padding-top: 32px;}
	.Intro h1 {font-size: 28px; line-height: 38px; margin-bottom: 20px;}
	.Intro .Video button img {max-width: 75px;}
	.About h2, h2 {font-size: 36px; line-height: 48px;}
	.About .Bigger {--font-size: 20px; --line-height: 28px;}
	.About .Space p {font-size: 20px; line-height: 30px;}
	.About .PacksHeading {margin-bottom: 32px;}
	.Reg h2 {font-size: 32px; line-height: 42px;}
	.Off header {margin-bottom: 28px;}
	.Off .Upcoming .Info {padding: 20px 18px;}
	.Off .Upcoming h3 {font-size: 24px; line-height: 32px;}
	.Off .Events article {width: 100%;}
	.Tiers {padding-top: 48px; padding-bottom: 48px;}
	.Tiers h3 {font-size: 28px;}
}#Header {padding: 12px 0 12px 0; background: var(--blue); position: sticky; top: 0; left: 0; right: 0; border-bottom: 1px solid rgba(171, 241, 253, 0.2); z-index: 100; margin-bottom: 60px;}
#Header .Container {display: flex; align-items: center; justify-content: space-between; gap: 20px;}
#Header .Logo img {height: 65px; width: auto;}
#Header nav {display: flex; align-items: center; gap: 5px; flex: 1; justify-content: center;}
#Header nav a:not(.Button) {font-weight: 500; font-size: 16px; line-height: normal; text-decoration: none; color: white; padding: 8px 15px;}
#Header .BurgerMenu {display: none; background: none; border: none; cursor: pointer; padding: 8px; z-index: 101; position: relative;}
#Header .BurgerMenu svg {width: 28px; height: 28px; fill: white;}
#Header .BurgerMenu rect {transition: transform 0.25s ease, opacity 0.25s ease; transform-origin: 12px 12px;}
#Header .BurgerMenu.Active rect:nth-child(1) {transform: translate(0,4px) rotate(45deg);}
#Header .BurgerMenu.Active rect:nth-child(2) {opacity: 0;}
#Header .BurgerMenu.Active rect:nth-child(3) {transform: translate(0,-7px) rotate(-45deg);}

@media (min-width: 1024px) {
	.MenuOverlay {display: none;}
}

@media (max-width: 1023px) {
	#Header {padding: 20px 0 18px 0; margin-bottom: 40px;}
	#Header .Logo img {height: 40px;}
	#Header nav {position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: var(--blue); flex-direction: column; justify-content: flex-start; padding: 80px 0 20px; gap: 0; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3); transition: right 0.3s ease; border-left: 1px solid rgba(171, 241, 253, 0.2); z-index: 100;}
	#Header nav.Active {right: 0;}
	#Header nav a:not(.Button) {padding: 16px 24px; font-size: 16px; width: 100%; text-align: left; border-bottom: 1px solid rgba(171, 241, 253, 0.1);}
	#Header nav a:not(.Button):hover {background: rgba(255, 255, 255, 0.08);}
	#Header .Button {margin: 16px 24px 0; width: calc(100% - 48px);}
	#Header .BurgerMenu {display: block;}
	#Header .MenuOverlay {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 99; opacity: 0; transition: opacity 0.3s ease;}
	#Header .MenuOverlay.Active {display: block; opacity: 1;}
}

@media (max-width: 767px) {
	#Header {padding: 16px 0; margin-bottom: 24px;}
	#Header .Logo img {height: 36px;}
	#Header nav {width: 260px;}
	#Header .BurgerMenu svg {width: 26px; height: 26px;}
}.ContactRomanForm {width: min(500px, 90vw); padding: 30px;}
.ContactRomanForm h3 {font-size: 28px; line-height: 36px; margin-bottom: 10px;}
.ContactRomanForm p {margin-bottom: 20px; opacity: 0.9;}
.ContactRomanForm textarea {width: 100%; padding: 15px; border: 2px solid rgba(255,255,255,0.2); border-radius: 10px; background: rgba(255,255,255,0.1); color: var(--light); font-size: 16px; line-height: 24px; resize: vertical; min-height: 150px; font-family: var(--roboto); outline: none;}
.ContactRomanForm textarea::placeholder {color: rgba(255,255,255,0.5);}
.ContactRomanForm textarea:focus {border-color: var(--pink); background: rgba(255,255,255,0.15);}
.ContactRomanForm .FormButtons {display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;}
.ContactRomanForm .Button {margin: 0;}

.ContactSuccess, .ContactError, .ContactSending {width: min(500px, 90vw); padding: 30px; text-align: center;}
.ContactSuccess h3, .ContactError h3, .ContactSending h3 {font-size: 28px; line-height: 36px; margin-bottom: 10px;}
.ContactSuccess p, .ContactError p, .ContactSending p {margin-bottom: 20px; opacity: 0.9;}
.ContactSuccess .Button, .ContactError .Button {margin-top: 10px;}
.ContactSending {min-height: 120px; display: flex; flex-direction: column; justify-content: center;}

/* Auth System Container */
.AuthSystemContainer {width: 100%; max-width: 500px; margin: 0 auto;}

/* Tab Navigation */
.AuthTabs {display: flex; flex: 1; padding: 3px 5px; border-radius: 99px; background: #0092B6; width: max-content; margin-left: auto; position: relative;}
.AuthTab {background: none; border: none; padding: 3px 10px; cursor: pointer; font-size: 12px; font-weight: 500; color: #AAF2FE; z-index: 1; position: relative; text-align: center;}
.AuthTab.active {color: white;}
.LostPwdBtn {background: none; border: none; outline: none; cursor: pointer; margin-left: auto; text-decoration: underline; color: #0092B6; font-weight: bold; font-size: 12px; display: block; width: max-content; margin-top: 5px;}

/* Auth Content */
.AuthContent {
	position: relative;
	min-height: 300px;
}

/* Auth Forms */
.AuthForm {
	display: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.AuthForm.active {
	display: block;
	opacity: 1;
}

/* Form Fields */
.AuthSystemContainer {
	& {
		--side: 27px;
	}

	.FormItem {display: grid; grid-template-columns: 85px 1fr; gap: 15px; border-bottom: 1px solid #0092B6; margin-bottom: 13px; align-items: center; padding: 0 0 0 var(--side);}
	.FormItem span {color: #0092B6; font-size: 16px; line-height: 28px;}
	.FormItem input {height: 50px; background: none; border: none; outline: none; font-size: 16px; color: var(--blue);}

	.FormButton .Button {margin-left: auto; margin-right: var(--side); margin-top: 35px;}

	.FormTerms {padding-left: var(--side); display: flex; gap: 15px; align-items: flex-start;}
	.FormTerms [type="checkbox"] {width: 20px; height: 20px; border: 1px solid #0092B6; background: var(--blue);}

	a {color: #0092B6;}
}

/* Messages */
.AuthMessages {
	margin-top: 20px;
}

.AuthMessage {
	padding: 15px;
	border-radius: 8px;
	margin-bottom: 10px;
	font-size: 14px;
}

.AuthMessage-error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}

.AuthMessage-success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}

@media (max-width: 767px) {
	.AuthSystemContainer {max-width: 100%; padding: 0 8px;}
	.AuthSystemContainer .FormItem {grid-template-columns: 70px 1fr; gap: 10px; padding: 0 0 0 16px;}
	.AuthSystemContainer .FormItem span {font-size: 14px; line-height: 24px;}
	.AuthSystemContainer .FormItem input {height: 44px; font-size: 14px;}
	.AuthSystemContainer .FormButton .Button {margin-right: 16px; margin-top: 24px;}
	.AuthSystemContainer .FormTerms {padding-left: 16px; gap: 10px;}
	.AuthTab {padding: 3px 8px;}
}

@media (max-width: 480px) {
	.AuthSystemContainer .FormItem {grid-template-columns: 1fr; gap: 6px; padding: 8px 0 0 12px;}
	.AuthSystemContainer .FormItem span {font-size: 13px; line-height: 20px;}
	.AuthSystemContainer .FormItem input {height: 40px; font-size: 13px;}
	.AuthSystemContainer .FormButton .Button {margin-right: 12px; margin-top: 20px;}
	.AuthSystemContainer .FormTerms {padding-left: 12px; font-size: 13px;}
	.AuthTab {padding: 2px 6px;}
}