html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 125%; }
h4 { font-size: 112.5%; }
h6 { font-size: 80%; }

/* Темно-серый абстрактный фон с акцентами цвета травы */
body {
	/* Базовый темно-серый цвет */
	background: #1a1e1a;  /* Темно-серый с зеленоватым оттенком */
	
	/* Абстрактный градиент с вкраплениями цвета травы */
	background-image: 
		/* Крупные абстрактные формы */
		radial-gradient(circle at 10% 20%, rgba(124, 179, 66, 0.15) 0%, transparent 30%),
		radial-gradient(circle at 90% 70%, rgba(86, 130, 49, 0.12) 0%, transparent 35%),
		radial-gradient(circle at 30% 80%, rgba(154, 205, 89, 0.1) 0%, transparent 25%),
		radial-gradient(circle at 70% 30%, rgba(76, 118, 42, 0.1) 0%, transparent 28%),
		
		/* Мелкие детали, имитирующие текстуру травы */
		radial-gradient(circle at 15% 45%, rgba(139, 195, 74, 0.08) 0%, transparent 8%),
		radial-gradient(circle at 45% 72%, rgba(104, 159, 56, 0.08) 0%, transparent 10%),
		radial-gradient(circle at 82% 33%, rgba(124, 179, 66, 0.07) 0%, transparent 12%),
		radial-gradient(circle at 63% 88%, rgba(86, 130, 49, 0.09) 0%, transparent 15%),
		radial-gradient(circle at 38% 15%, rgba(154, 205, 89, 0.06) 0%, transparent 20%),
		
		/* Легкая текстура шума для глубины */
		repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 2px, transparent 2px, transparent 4px);
	
	color: #e0e5d9;  /* Светлый текст с травяным оттенком */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 0;  /* Убираем padding, так как он был перенесен в header/footer */
	position: relative;
	min-height: 100vh;
}

/* Добавляем тонкую линию травы внизу страницы */
body::after {
	content: '';
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, 
		transparent 0%,
		#7cb342 20%,
		#8bc34a 40%,
		#5a8f2c 60%,
		#7cb342 80%,
		transparent 100%);
	opacity: 0.5;
	z-index: 1000;
}

a { 
	color: #8bc34a;  /* Травяной зеленый для ссылок */
	transition: color 0.2s ease;
}
a:hover { 
	color: #a5d6a5;  /* Светло-травяной при наведении */
}

body > header, #page, body > footer {
	width: 90%;
	margin: 1em auto;
	border-radius: 1em;
	/* Темный полупрозрачный фон с травяным оттенком */
	background: rgba(26, 30, 26, 0.85);
	backdrop-filter: blur(5px);
	border: 1px solid rgba(124, 179, 66, 0.2);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	padding: 1em;
	text-align: center;
}

body > header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: .5em;
	border-bottom: 2px solid #7cb342;  /* Травяной акцент */
}

body > header h1 a {
	text-decoration: none;
	color: #e0e5d9;
#	font-style: italic;
	transition: color 0.2s;
}

body > header h1 a:hover {
	color: #8bc34a;
}

body > header h2 {
	color: #a5d6a5;  /* Светло-травяной */
}

body > footer {
	font-size: .9em;
	color: #8ba87b;  /* Приглушенный травяной */
	border-top: 1px solid rgba(124, 179, 66, 0.3);
}

article nav {
	margin: .5em 0;
}

nav ul li a {
	color: #e0e5d9;
	margin: .2em;
	border-radius: .5em;
	background: rgba(124, 179, 66, 0.15);  /* Полупрозрачный травяной */
	padding: .4em .5em;
	font-size: 1.2em;
	display: inline-block;
	transition: all 0.2s ease;
	border: 1px solid transparent;
}

nav ul li a:hover {
	background: rgba(124, 179, 66, 0.3);
	color: #ffffff;
	border-color: #7cb342;
}

nav ul li.current a {
	box-shadow: 0px 0px 10px #7cb342;  /* Травяное свечение */
	font-weight: bold;
	background: rgba(124, 179, 66, 0.25);
	border: 1px solid #7cb342;
}

[type=submit] {
	font-size: 112.5%;
}

[type=submit], [type=button] {
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

[type=submit], [type=button], input[type=text], input[type=password], select {
	padding: .3em .5em;
	background: rgba(30, 34, 30, 0.7);
	border: 1px solid #7cb342;
	border-radius: .3em;
	cursor: pointer;
	transition: all .2s ease;
	color: #e0e5d9;
}

[type=submit]:hover, [type=button]:hover, input[type=submit]:focus, input[type=button]:focus  {
	color: #ffffff;
	box-shadow: 0px 0px 12px #7cb342;  /* Травяное свечение */
	background: rgba(124, 179, 66, 0.3);
	outline: none;
	border-color: #a5d6a5;
}

label {
	cursor: pointer;
	display: block;
	padding: .3em .5em;
	color: #e0e5d9;
}
label:hover {
	background: rgba(124, 179, 66, 0.15);
	border-radius: .3em;
}

dd label {
	display: inline-block;
}

label strong {
	font-weight: bold;
	color: #8bc34a;
}

small {
	color: #8ba87b;
	font-size: .9em;
	font-weight: normal;
	margin: .5rem 0;
	display: block;
}

input[type=text], input[type=password], select {
	width: 95%;
	font-size: 1.2em;
	cursor: unset;
	border: 2px solid #3a4a3a;  /* Темно-травяной */
	background: rgba(20, 24, 20, 0.8);
}

input[type=text]:focus, input[type=password]:focus, select:focus {
	box-shadow: 0px 0px 10px #7cb342;
	border-color: #8bc34a;
	outline: none;
}

fieldset dl dt {
	font-weight: bold;
	color: #a5d6a5;
}

fieldset dl dd {
	margin: .5em;
}

fieldset {
	width: 50%;
	margin: 0 auto;
	border: 1px solid rgba(124, 179, 66, 0.3);
	border-radius: 1em;
	padding: 1em;
}

.info {
	margin: .8em 0;
	color: #8ba87b;
	font-size: .9em;
}

div.pic {
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	width: 100%;
}

div.pic div {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2em;
	text-align: center;
	flex-grow: 1;
}

/* Empty, just to make the image centered even if button is not there */
div.pic p {
	width: 2em;
}

div.pic div a {
	display: flex;
	justify-content: center;
	height: 100%;
	width: 100%;
	padding-top: 2em;
}

div.pic div a span {
	display: block;
	overflow: hidden;
	width: 2em;
	height: 2em;
	text-indent: -100em;
	background: rgba(124, 179, 66, 0.25);
	border-radius: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 80%;
	opacity: 0.7;
	transition: all .2s ease;
	border: 1px solid #7cb342;
}

div.pic div a:hover span {
	opacity: 1;
	box-shadow: 0px 0px 15px #7cb342;
	background-color: rgba(124, 179, 66, 0.4);
	transform: scale(1.1);
}

.picture header h3 {
	color: #8ba87b;
}

.picture header h3 a {
	color: #8bc34a;
}

.examples {
	margin: 1rem auto;
	max-width: 40em;
}

.examples dl {
	margin: .8rem 0;
}

.examples dd, .examples dt {
	margin-bottom: .8rem;
}

.examples dt {
	font-weight: bold;
	text-align: left;
	color: #a5d6a5;
}

.examples input[type=button] {
	float: right;
}

.examples input[type=text], .admin input[type=text], .examples textarea {
	background: rgba(30, 34, 30, 0.7);
	border: 1px solid #7cb342;
	border-radius: .5em;
	font-family: "Courier New", Courier, monospace;
	width: calc(100% - 1em);
	font-size: 8pt;
	padding: .5em;
	color: #e0e5d9;
}

.examples input[type=text]:focus, .admin input[type=text]:focus, .examples textarea:focus {
	box-shadow: 0px 0px 8px #7cb342;
	outline: none;
}

figure {
	display: inline-block;
	margin: 1em;
	vertical-align: middle;
	position: relative;
	min-width: 150px;
	background: rgba(30, 34, 30, 0.5);
	border-radius: 0.5em;
	padding: 0.5em;
	border: 1px solid rgba(124, 179, 66, 0.2);
}

figure figcaption {
	font-size: small;
	margin-top: .5em;
	color: #8ba87b;
}

#albumParent figcaption {
	display: flex;
	justify-content: stretch;
}

#albumParent figcaption button {
	font-size: 1.5em;
	cursor: pointer;
	color: #8bc34a;
	border: 1px solid #7cb342;
	background: rgba(30, 34, 30, 0.8);
	margin-left: .2em;
	transition: all 0.2s ease;
}

#albumParent figcaption button:hover {
	background: rgba(124, 179, 66, 0.3);
	color: #ffffff;
	box-shadow: 0 0 8px #7cb342;
}

#albumParent img {
	max-width: 100%;
}

form.new #albumImages figure:only-child figcaption input {
	visibility: hidden;
}

figure a:hover img {
	box-shadow: 0px 0px 15px #7cb342;  /* Травяное свечение */
	background: rgba(124, 179, 66, 0.1);
}

figure span {
	background: rgba(20, 24, 20, 0.9);
	color: #e0e5d9;
	position: absolute;
	padding: .5em 1em;
	font-weight: bold;
	top: 1em;
	left: 0;
	border-right: 2px solid #7cb342;
}

figure span.private {
	left: unset;
	right: 0;
	background: rgba(80, 40, 40, 0.9);
	border-right: none;
	border-left: 2px solid #ff6b6b;
	color: #ffb3b3;
}

.pagination .selected {
	font-weight: bold;
	font-size: 125%;
	color: #8bc34a;
	text-shadow: 0 0 8px rgba(124, 179, 66, 0.5);
}

form.admin, #albumParent {
	background: rgba(26, 30, 26, 0.9);
	padding: 1em;
	width: 50%;
	margin: .8em auto;
	border-radius: .8em;
	color: #e0e5d9;
	border: 1px solid rgba(124, 179, 66, 0.3);
	backdrop-filter: blur(5px);
}

dl.admin {
	background: rgba(26, 30, 26, 0.7);
	padding: .8em;
	border-radius: .8em;
	margin: .8em auto;
	border: 1px solid rgba(124, 179, 66, 0.2);
}

dl.admin button[type=submit] {
	border: 2px solid #7cb342;
	background: rgba(124, 179, 66, 0.2);
}

dl.admin button[type=submit]:hover {
	background: rgba(124, 179, 66, 0.4);
}

.admin p:nth-child(2n) {
	margin-top: 1rem;
}

.icon {
	background-position: .5em center;
	background-repeat: no-repeat;
	padding-left: 2.5em;
	background-size: 24px 24px;
}

/* Кнопка Upload image - исправление эффекта размножения */
.icon.upload {
	background-image: url('data:image/svg+xml;utf8,<svg height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m15 51c-8.28427125 0-15-6.7157288-15-15s6.71572875-15 15-15c2.1706646 0 4.2336397.4610733 6.0963309 1.2906254.8484446-7.4793433 7.197408-13.2906254 14.9036691-13.2906254 8.2842712 0 15 6.7157288 15 15 0 1.0287036-.1035536 2.0332209-.3008052 3.0036966.0999699-.0024596.2002431-.0036966.3008052-.0036966 6.627417 0 12 5.372583 12 12s-5.372583 12-12 12z" fill="%237cb342"/><path d="m15 25c-6.07513225 0-11 4.9248678-11 11" stroke="%23fff" stroke-linecap="round" stroke-width="2"/><g fill="%235a8f2c" transform="matrix(-1 0 0 -1 43 60)"><path d="m6 1.99700466c0-1.10291522.88670635-1.99700466 1.99810135-1.99700466h4.00379725c1.103521 0 1.9981014.89497885 1.9981014 1.99700466v24.00299534h-8z"/><path d="m9.41913411 20.8132122c.32080337-.4491247.83810749-.453074 1.16173179 0l8.8382682 12.3735756c.3208034.4491247.1255603.8132122-.4109372.8132122h-18.01639379c-.54775773 0-.73456153-.3601382-.41093722-.8132122z" transform="matrix(1 0 0 -1 0 54)"/></g></g></svg>');
	background-position: 0.5em center;
	background-repeat: no-repeat;
	background-size: 32px 32px;
	background-color: rgba(124, 179, 66, 0.1);
	/* Отключаем возможные фоны от других правил */
	background-blend-mode: normal;
}

.icon.upload:hover {
	/* Сохраняем то же изображение, меняем только цвет фона */
	background-image: url('data:image/svg+xml;utf8,<svg height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m15 51c-8.28427125 0-15-6.7157288-15-15s6.71572875-15 15-15c2.1706646 0 4.2336397.4610733 6.0963309 1.2906254.8484446-7.4793433 7.197408-13.2906254 14.9036691-13.2906254 8.2842712 0 15 6.7157288 15 15 0 1.0287036-.1035536 2.0332209-.3008052 3.0036966.0999699-.0024596.2002431-.0036966.3008052-.0036966 6.627417 0 12 5.372583 12 12s-5.372583 12-12 12z" fill="%237cb342"/><path d="m15 25c-6.07513225 0-11 4.9248678-11 11" stroke="%23fff" stroke-linecap="round" stroke-width="2"/><g fill="%235a8f2c" transform="matrix(-1 0 0 -1 43 60)"><path d="m6 1.99700466c0-1.10291522.88670635-1.99700466 1.99810135-1.99700466h4.00379725c1.103521 0 1.9981014.89497885 1.9981014 1.99700466v24.00299534h-8z"/><path d="m9.41913411 20.8132122c.32080337-.4491247.83810749-.453074 1.16173179 0l8.8382682 12.3735756c.3208034.4491247.1255603.8132122-.4109372.8132122h-18.01639379c-.54775773 0-.73456153-.3601382-.41093722-.8132122z" transform="matrix(1 0 0 -1 0 54)"/></g></g></svg>');
	background-color: rgba(124, 179, 66, 0.3);
	background-position: 0.5em center;
	background-repeat: no-repeat;
	background-size: 32px 32px;
	box-shadow: 0 0 15px #7cb342;
}

/* Состояние когда файл выбран для загрузки */
.icon.upload.has-file,
.icon.upload.selected,
.icon.upload.file-selected {
	background-image: url('data:image/svg+xml;utf8,<svg height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m15 51c-8.28427125 0-15-6.7157288-15-15s6.71572875-15 15-15c2.1706646 0 4.2336397.4610733 6.0963309 1.2906254.8484446-7.4793433 7.197408-13.2906254 14.9036691-13.2906254 8.2842712 0 15 6.7157288 15 15 0 1.0287036-.1035536 2.0332209-.3008052 3.0036966.0999699-.0024596.2002431-.0036966.3008052-.0036966 6.627417 0 12 5.372583 12 12s-5.372583 12-12 12z" fill="%234caf50"/><path d="m15 25c-6.07513225 0-11 4.9248678-11 11" stroke="%23fff" stroke-linecap="round" stroke-width="2"/><g fill="%232e7d32" transform="matrix(-1 0 0 -1 43 60)"><path d="m6 1.99700466c0-1.10291522.88670635-1.99700466 1.99810135-1.99700466h4.00379725c1.103521 0 1.9981014.89497885 1.9981014 1.99700466v24.00299534h-8z"/><path d="m9.41913411 20.8132122c.32080337-.4491247.83810749-.453074 1.16173179 0l8.8382682 12.3735756c.3208034.4491247.1255603.8132122-.4109372.8132122h-18.01639379c-.54775773 0-.73456153-.3601382-.41093722-.8132122z" transform="matrix(1 0 0 -1 0 54)"/></g><circle cx="48" cy="16" r="8" fill="%234caf50" stroke="%23fff" stroke-width="2"/><path d="M45 16 L48 19 L53 13" stroke="%23fff" stroke-width="2" stroke-linecap="round"/></g></svg>');
	background-color: rgba(76, 175, 80, 0.2);
	border-color: #4caf50;
}

.icon.upload.has-file:hover,
.icon.upload.selected:hover,
.icon.upload.file-selected:hover {
	background-image: url('data:image/svg+xml;utf8,<svg height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m15 51c-8.28427125 0-15-6.7157288-15-15s6.71572875-15 15-15c2.1706646 0 4.2336397.4610733 6.0963309 1.2906254.8484446-7.4793433 7.197408-13.2906254 14.9036691-13.2906254 8.2842712 0 15 6.7157288 15 15 0 1.0287036-.1035536 2.0332209-.3008052 3.0036966.0999699-.0024596.2002431-.0036966.3008052-.0036966 6.627417 0 12 5.372583 12 12s-5.372583 12-12 12z" fill="%234caf50"/><path d="m15 25c-6.07513225 0-11 4.9248678-11 11" stroke="%23fff" stroke-linecap="round" stroke-width="2"/><g fill="%232e7d32" transform="matrix(-1 0 0 -1 43 60)"><path d="m6 1.99700466c0-1.10291522.88670635-1.99700466 1.99810135-1.99700466h4.00379725c1.103521 0 1.9981014.89497885 1.9981014 1.99700466v24.00299534h-8z"/><path d="m9.41913411 20.8132122c.32080337-.4491247.83810749-.453074 1.16173179 0l8.8382682 12.3735756c.3208034.4491247.1255603.8132122-.4109372.8132122h-18.01639379c-.54775773 0-.73456153-.3601382-.41093722-.8132122z" transform="matrix(1 0 0 -1 0 54)"/></g><circle cx="48" cy="16" r="8" fill="%234caf50" stroke="%23fff" stroke-width="2"/><path d="M45 16 L48 19 L53 13" stroke="%23fff" stroke-width="2" stroke-linecap="round"/></g></svg>');
	background-color: rgba(76, 175, 80, 0.4);
	background-position: 0.5em center;
	background-repeat: no-repeat;
	background-size: 32px 32px;
	box-shadow: 0 0 15px #4caf50;
}

.icon.delete {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="%23F4900C" d="M35 19c0-2.062-.367-4.039-1.04-5.868-.46 5.389-3.333 8.157-6.335 6.868-2.812-1.208-.917-5.917-.777-8.164.236-3.809-.012-8.169-6.931-11.794 2.875 5.5.333 8.917-2.333 9.125-2.958.231-5.667-2.542-4.667-7.042-3.238 2.386-3.332 6.402-2.333 9 1.042 2.708-.042 4.958-2.583 5.208-2.84.28-4.418-3.041-2.963-8.333C2.52 10.965 1 14.805 1 19c0 9.389 7.611 17 17 17s17-7.611 17-17z"/><path fill="%23FFCC4D" d="M28.394 23.999c.148 3.084-2.561 4.293-4.019 3.709-2.106-.843-1.541-2.291-2.083-5.291s-2.625-5.083-5.708-6c2.25 6.333-1.247 8.667-3.08 9.084-1.872.426-3.753-.001-3.968-4.007C7.352 23.668 6 26.676 6 30c0 .368.023.73.055 1.09C9.125 34.124 13.342 36 18 36s8.875-1.876 11.945-4.91c.032-.36.055-.722.055-1.09 0-2.187-.584-4.236-1.606-6.001z"/></svg>');
}

.icon.select {
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g fill="%237cb342"><path d="m39.87 48h-21.87a2 2 0 1 0 0 4h23.21a10.79 10.79 0 0 0 10.79-10.79v-23.31a2 2 0 0 0 -2.34-2 2.08 2.08 0 0 0 -1.66 2.1v21.87a8.13 8.13 0 0 1 -8.13 8.13z"/><path d="m43.71 56h-13.71a2 2 0 1 0 0 4h14.56a15.43 15.43 0 0 0 15.44-15.44v-2.56a2 2 0 0 0 -2.34-2 2.08 2.08 0 0 0 -1.66 2.11v1.6a12.29 12.29 0 0 1 -12.29 12.29z"/><path d="m12.24 44h23.52a8.24 8.24 0 0 0 8.24-8.24v-23.52a8.24 8.24 0 0 0 -8.24-8.24h-23.52a8.24 8.24 0 0 0 -8.24 8.24v23.52a8.24 8.24 0 0 0 8.24 8.24zm11.76-32a6 6 0 1 1 -6 6 6 6 0 0 1 6-6zm-8.18 13.61a1.51 1.51 0 0 1 1.82.09 10 10 0 0 0 12.73 0 1.51 1.51 0 0 1 1.82-.09 8.89 8.89 0 0 1 3.81 7.3 3.09 3.09 0 0 1 -3.09 3.09h-17.82a3.09 3.09 0 0 1 -3.09-3.09 8.89 8.89 0 0 1 3.82-7.3z"/><path d="m58 24a2 2 0 0 0 -2 2v8a2 2 0 0 0 4 0v-8a2 2 0 0 0 -2-2z"/></g></svg>');
}

.icon.zip {
	background-image: url('data:image/svg+xml;utf8,<svg height="64" viewBox="0 0 56 64" width="56" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m5.113-.026c-2.803 0-5.074 2.272-5.074 5.074v53.841c0 2.803 2.271 5.074 5.074 5.074h45.773c2.801 0 5.074-2.271 5.074-5.074v-38.605l-18.901-20.31h-31.946z" fill="%238bc34a" fill-rule="evenodd"/><g clip-rule="evenodd" fill-rule="evenodd"><path d="m55.977 20.352v1h-12.799s-6.312-1.26-6.129-6.707c0 0 .208 5.707 6.004 5.707z" fill="%23617f9b"/><path d="m37.074 0v14.561c0 1.656 1.104 5.791 6.104 5.791h12.799z" fill="%23fff" opacity=".5"/></g><path d="m18.438 53.906h-7.581c-.378 0-.756-.342-.756-.828 0-.18.054-.36.162-.504l6.68-9.345h-6.212c-.36 0-.648-.288-.648-.684 0-.36.288-.648.648-.648h7.454c.378 0 .756.342.756.829 0 .18-.054.36-.162.504l-6.68 9.345h6.338c.36 0 .648.288.648.648.001.395-.287.683-.647.683zm4.012.108c-.414 0-.738-.324-.738-.738v-10.767c0-.396.324-.721.774-.721.396 0 .72.324.72.721v10.767c0 .413-.324.738-.756.738zm8.839-4.879h-3.331v4.141c0 .414-.324.738-.756.738-.414 0-.738-.324-.738-.738v-10.299c0-.594.486-1.081 1.081-1.081h3.745c2.413 0 3.763 1.657 3.763 3.619s-1.387 3.62-3.764 3.62zm-.18-5.906h-3.151v4.573h3.151c1.422 0 2.395-.936 2.395-2.287-.001-1.35-.973-2.286-2.395-2.286z" fill="%23fff"/></svg>');
}

#albumParent {
	width: 90%;
}

#albumParent .add {
	border: 2px solid #7cb342;
	border-radius: .2em;
	cursor: pointer;
	display: block;
	padding: .2em;
	padding-left: 2em;
	font-size: 1.7em;
	margin: .5rem auto;
	background-size: 32px 32px;
	background-color: rgba(124, 179, 66, 0.1);
	/* Явно указываем фоновое изображение */
	background-image: url('data:image/svg+xml;utf8,<svg height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m15 51c-8.28427125 0-15-6.7157288-15-15s6.71572875-15 15-15c2.1706646 0 4.2336397.4610733 6.0963309 1.2906254.8484446-7.4793433 7.197408-13.2906254 14.9036691-13.2906254 8.2842712 0 15 6.7157288 15 15 0 1.0287036-.1035536 2.0332209-.3008052 3.0036966.0999699-.0024596.2002431-.0036966.3008052-.0036966 6.627417 0 12 5.372583 12 12s-5.372583 12-12 12z" fill="%237cb342"/><path d="m15 25c-6.07513225 0-11 4.9248678-11 11" stroke="%23fff" stroke-linecap="round" stroke-width="2"/><g fill="%235a8f2c" transform="matrix(-1 0 0 -1 43 60)"><path d="m6 1.99700466c0-1.10291522.88670635-1.99700466 1.99810135-1.99700466h4.00379725c1.103521 0 1.9981014.89497885 1.9981014 1.99700466v24.00299534h-8z"/><path d="m9.41913411 20.8132122c.32080337-.4491247.83810749-.453074 1.16173179 0l8.8382682 12.3735756c.3208034.4491247.1255603.8132122-.4109372.8132122h-18.01639379c-.54775773 0-.73456153-.3601382-.41093722-.8132122z" transform="matrix(1 0 0 -1 0 54)"/></g></g></svg>');
	background-position: 0.5em center;
	background-repeat: no-repeat;
	color: #e0e5d9;
	transition: all 0.2s ease;
	/* Запрещаем изменение фонового изображения при наведении */
	background-blend-mode: normal;
}

#albumParent .add:hover {
	background-color: rgba(124, 179, 66, 0.4);
	box-shadow: 0 0 15px #7cb342;
	/* Сохраняем то же фоновое изображение */
	background-image: url('data:image/svg+xml;utf8,<svg height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m15 51c-8.28427125 0-15-6.7157288-15-15s6.71572875-15 15-15c2.1706646 0 4.2336397.4610733 6.0963309 1.2906254.8484446-7.4793433 7.197408-13.2906254 14.9036691-13.2906254 8.2842712 0 15 6.7157288 15 15 0 1.0287036-.1035536 2.0332209-.3008052 3.0036966.0999699-.0024596.2002431-.0036966.3008052-.0036966 6.627417 0 12 5.372583 12 12s-5.372583 12-12 12z" fill="%237cb342"/><path d="m15 25c-6.07513225 0-11 4.9248678-11 11" stroke="%23fff" stroke-linecap="round" stroke-width="2"/><g fill="%235a8f2c" transform="matrix(-1 0 0 -1 43 60)"><path d="m6 1.99700466c0-1.10291522.88670635-1.99700466 1.99810135-1.99700466h4.00379725c1.103521 0 1.9981014.89497885 1.9981014 1.99700466v24.00299534h-8z"/><path d="m9.41913411 20.8132122c.32080337-.4491247.83810749-.453074 1.16173179 0l8.8382682 12.3735756c.3208034.4491247.1255603.8132122-.4109372.8132122h-18.01639379c-.54775773 0-.73456153-.3601382-.41093722-.8132122z" transform="matrix(1 0 0 -1 0 54)"/></g></g></svg>');
	background-color: rgba(124, 179, 66, 0.4);
	background-position: 0.5em center;
	background-repeat: no-repeat;
	background-size: 32px 32px;
}

/* Состояние когда фото уже выбрано/прикреплено */
#albumParent .add.selected,
#albumParent .add.has-image,
#albumParent .add.active {
	background-image: url('data:image/svg+xml;utf8,<svg height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m15 51c-8.28427125 0-15-6.7157288-15-15s6.71572875-15 15-15c2.1706646 0 4.2336397.4610733 6.0963309 1.2906254.8484446-7.4793433 7.197408-13.2906254 14.9036691-13.2906254 8.2842712 0 15 6.7157288 15 15 0 1.0287036-.1035536 2.0332209-.3008052 3.0036966.0999699-.0024596.2002431-.0036966.3008052-.0036966 6.627417 0 12 5.372583 12 12s-5.372583 12-12 12z" fill="%234caf50"/><path d="m15 25c-6.07513225 0-11 4.9248678-11 11" stroke="%23fff" stroke-linecap="round" stroke-width="2"/><g fill="%232e7d32" transform="matrix(-1 0 0 -1 43 60)"><path d="m6 1.99700466c0-1.10291522.88670635-1.99700466 1.99810135-1.99700466h4.00379725c1.103521 0 1.9981014.89497885 1.9981014 1.99700466v24.00299534h-8z"/><path d="m9.41913411 20.8132122c.32080337-.4491247.83810749-.453074 1.16173179 0l8.8382682 12.3735756c.3208034.4491247.1255603.8132122-.4109372.8132122h-18.01639379c-.54775773 0-.73456153-.3601382-.41093722-.8132122z" transform="matrix(1 0 0 -1 0 54)"/></g><circle cx="48" cy="16" r="8" fill="%234caf50" stroke="%23fff" stroke-width="2"/><path d="M45 16 L48 19 L53 13" stroke="%23fff" stroke-width="2" stroke-linecap="round"/></g></svg>');
	background-color: rgba(76, 175, 80, 0.2);
	border-color: #4caf50;
}

#albumParent .add.selected:hover,
#albumParent .add.has-image:hover,
#albumParent .add.active:hover {
	background-color: rgba(76, 175, 80, 0.4);
	box-shadow: 0 0 15px #4caf50;
	/* Сохраняем иконку с галочкой */
	background-image: url('data:image/svg+xml;utf8,<svg height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="m15 51c-8.28427125 0-15-6.7157288-15-15s6.71572875-15 15-15c2.1706646 0 4.2336397.4610733 6.0963309 1.2906254.8484446-7.4793433 7.197408-13.2906254 14.9036691-13.2906254 8.2842712 0 15 6.7157288 15 15 0 1.0287036-.1035536 2.0332209-.3008052 3.0036966.0999699-.0024596.2002431-.0036966.3008052-.0036966 6.627417 0 12 5.372583 12 12s-5.372583 12-12 12z" fill="%234caf50"/><path d="m15 25c-6.07513225 0-11 4.9248678-11 11" stroke="%23fff" stroke-linecap="round" stroke-width="2"/><g fill="%232e7d32" transform="matrix(-1 0 0 -1 43 60)"><path d="m6 1.99700466c0-1.10291522.88670635-1.99700466 1.99810135-1.99700466h4.00379725c1.103521 0 1.9981014.89497885 1.9981014 1.99700466v24.00299534h-8z"/><path d="m9.41913411 20.8132122c.32080337-.4491247.83810749-.453074 1.16173179 0l8.8382682 12.3735756c.3208034.4491247.1255603.8132122-.4109372.8132122h-18.01639379c-.54775773 0-.73456153-.3601382-.41093722-.8132122z" transform="matrix(1 0 0 -1 0 54)"/></g><circle cx="48" cy="16" r="8" fill="%234caf50" stroke="%23fff" stroke-width="2"/><path d="M45 16 L48 19 L53 13" stroke="%23fff" stroke-width="2" stroke-linecap="round"/></g></svg>');
	background-position: 0.5em center;
	background-repeat: no-repeat;
	background-size: 32px 32px;
}

#albumParent img.loading, #albumParent span b {
	background: rgba(30, 34, 30, 0.9);
	padding: .5em;
	border-radius: 1em;
	vertical-align: middle;
	color: #8bc34a;
	display: inline-block;
	line-height: 16px;
	border: 1px solid #7cb342;
}

#albumParent img {
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(124, 179, 66, 0.3);
}

article h2 {
	margin-bottom: .5em;
	font-weight: bold;
	color: #a5d6a5;
}

.error {
	color: #ffb3b3;
	margin: .8em;
	text-shadow: 0 0 8px rgba(255, 0, 0, 0.3);
}

.picture figure img {
	max-width: 100%;
	max-height: 75vh;
}

@media screen and (max-width: 800px) {
	div.pic {
		flex-direction: column;
	}

	div.pic div {
		width: auto;
	}

	div.pic div a {
		padding: 0;
	}
}

.dropping::after {
    display: block;
    content: "";
    backdrop-filter: blur(5px);
    background-color: rgba(26, 30, 26, 0.8);
    color: #fff;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: fixed;
    border-radius: .5em;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    border: 2px dashed #7cb342;
    z-index: 10000;
}

p.help {
	font-size: .9em;
	color: #8ba87b;
	font-style: italic;
	text-shadow: 0px 0px 5px #000;
}

/* Добавляем декоративные травяные элементы для абстракции */
#page::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	pointer-events: none;
	background: radial-gradient(circle at 20% 30%, rgba(124, 179, 66, 0.03) 0%, transparent 20%),
				radial-gradient(circle at 80% 70%, rgba(139, 195, 74, 0.03) 0%, transparent 25%);
	z-index: -1;
}