.outer-wrapper.boxed {
			background: transparent;
		}

		.btn-primary
		{
			color:#fff;
			background-color: #ff0000; //#337ab7;
			border-color: #e50000; //#2e6da4
		}

		.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open> .dropdown-toggle .btn-primary
		{
			color:#fff;
			background-color: #b30000; //#286090;
			border-color: #74204d; //#204d74;
		}

		.btn-primary.active, .btn-primary:active, .open> .dropdown-toggle .btn-primary
		{
			background-image:none
		}
			
		.section-btn {
			height: 50px;
			width: 50px;
			cursor: pointer;
			background: #eee;
			border: 1px solid #ccc;
		}

		.section-btn.active {
			background: #eedfde;
			border: 1px solid #d4aeac;
		}

		.section-btn-icon {
			font-size: 1.6em;color: #555;
		}

		.roles-container.active, .roles-wrap.active, .tags-wrap.active {
			background: #eedfde;
			border: 1px solid #d4aeac;
		}

		.roles-container, .tags-container {
			display: grid;
			grid-gap: 5px;
			grid-template-columns: repeat(3, 1fr);
			margin: 0px auto;
			max-width: 500px;
		}

		.roles-wrap, .tags-wrap {
			height: 20px;
			min-width: 100px;
			cursor: pointer;
			position: relative;
			border: 1px solid #ccc;
			background: #eee;
			border-radius: 4px;
			padding: 3px 3px;
		}

		.roles-wrapper, .tag-btn {
			font-size: .7em;
			color: #555;
			position: relative;
			top: 50%;
			transform: translateY(-50%);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.roles-wrapper {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
		}

		.roles-wrapper-check {
			color: #488f5d;
			font-weight: 600;
		}

		.roles-wrapper-missing {
			color: #ff0000;
			font-weight: 600;
		}

		.upload-container {
		    display: flex;
		    justify-content: center;
		    flex-direction: column;
		    align-items: center;
		}

		.missing-media-container{
			display: contents;
		}

		.media-container, .uploaded-container {
			display: flex;
			grid-gap: 2px;
			flex-wrap: wrap;
			margin: 20px 0;
			justify-content: center;
			width: 100%;
		}

		.media-container > .medium-container, .uploaded-container > .medium-container {
			flex: 0 0 19%;
			aspect-ratio: 1 / 1;
			position: relative;
			overflow: hidden;
			position: relative;
		}

		.medium-container img,
		.medium-container video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.medium-container > div {
			position: relative;
			width: 100%;
			height: 100%;
		}

		.missing-media-container .missing-container{
			flex:0 0 19%;
			aspect-ratio:1/1;
			position:relative;
			overflow:hidden;
			background: #3a3e47;
		}

		.missing-number {
			position: absolute;
			bottom: 0;
			right: 10px;
			font-size: 2em;
			color: #ffff00;
		}

		.image-full-view {
			display: none;
			position: fixed;
			inset: 0;
			background: rgba(0, 0, 0, 0.8);
			z-index: 999999;

			justify-content: center;
			align-items: center;
			padding: 1rem;
			box-sizing: border-box;
		}

		.image-full-view-content {
			position: relative;
			max-width: 90%;
			max-height: 90%;
			background: #fff;
			border-radius: 6px;
			padding: 10px;
			box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
		}

		.image-full-view-content img {
			max-width: 100%;
			max-height: 80vh;
			display: block;
			margin: 0 auto;
		}

		.image-full-view-close {
			position: absolute;
			top: 5px;
			right: 10px;
			font-size: 24px;
			color: #333;
			cursor: pointer;
		}

		.silhouette-image-wrapper {
			position: absolute;
			width: 100%;
			height: 72%;
			top: 0;
			left: 0;
		}

		.silhouette-image-wrapper img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		.silhouette-tag {
			position: absolute;
			top: 72%;
			left: 0;
			width: 100%;
			height: 13%;
			background: #4c5059;
			text-align: center;
			text-transform: uppercase;
			color: #fff;
			font-size: 1.3em;
			line-height: 31px;
		}

		.silhouette-missing {
			position: absolute;
			top: 85%;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 15%;
			background: transparent;
			text-align: center;
			text-transform: uppercase;
			color: #fff;
			/*font-size: 1.5em;*/
			font-size: 1.2em;
			line-height: 36px;
		}

		.silhouette-missing-count {
			margin-left: 5px;
			color: #3dff00;/*#ff00dd;*/
			font-size: 1em;
			font-weight: bolder;
		}

		.silhouette-media-type {
			position: absolute;
			right: 10px;
			top: 10px;
			color: #fff;
			font-size: 2.5em;
		}

		.silhouette-image-step-4 {
			position: absolute;
			left: 30px;
			top: 0;
			transform: scale(.7);
			filter: brightness(0.3);
		}

		.silhouette-image-step-3 {
			position: absolute;
			left: 20px;
			top: 0;
			transform: scale(.8);
			filter: brightness(0.4);
		}

		.silhouette-image-step-2 {
			position: absolute;
			left: 10px;
			top: 0;
			transform: scale(.9);
			filter: brightness(0.5);
		}

		.silhouette-image-step-1 {
			position: absolute;
			left: 0;
			top: 0;
		}

		.medium-tag {
			position: absolute;
			top: 10px;
			display: flex;
			width: 100%;
			justify-content: center;
			cursor: pointer;
			text-align: center;
			line-height: 30px;
		}

		.medium-tag-content {
			font-size: 2em;
			color: #fff;
			text-shadow: 1px 1px 2px #000000;
		}

		.medium-icons {
		    position: absolute !important;
		    bottom: 0;
		    right: 0;
		    height: fit-content !important;
		    margin: 0 10px;
		    display: flex;
		    width: calc(100% - 20px);
		    justify-content: flex-end;
		    pointer-events: none;
		}
		.icon-cog-colored {
			cursor: pointer;
			font-size: 2em;
			pointer-events: auto;
		}

		[id^='trash-medium-'], [id^='move-medium-'], [id^='locked-medium-'] {
			cursor: pointer;
			font-size: 2em;
			color: #fff;
			text-shadow: 1px 1px 2px #000000;
		}

		[id^='move-medium-'].disabled {
			color: #a1a1a1;
			cursor: not-allowed;
			pointer-events: none;
		}

		.option-modal {
			position: fixed;
			inset: 0;
			background: rgba(0,0,0,.6);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 99999;
		}

		.option-modal-content {
			background: #fff;
			border-radius: 8px;
			max-width: 500px;
			width: 100%;
			max-height: 90vh;
			overflow: auto;
			box-shadow: 0 10px 40px rgba(0,0,0,.3);
			position: relative;
			background: #000 url("/www/images/pattern/pattern16.png") repeat;
			position: relative;
			--tab-h: 25px;
			padding-bottom: var(--tab-h);
		}

		.option-modal-admin-tags {
			position: sticky;
			bottom: -25px;
			z-index: 50;
			color: #ddd;
			max-height: var(--tab-h);
			overflow: hidden;
			transition: max-height .25s ease;
			text-align: center;
		}

		.option-modal-admin-tags.is-open {
			max-height: 80vh;
		}

		.option-modal-admin-tags .drawer-tab {
			--tab-bg: #ddd;
			height: var(--tab-h);
			line-height: var(--tab-h);
			display: inline-block;
			position: relative;
			padding: 0 18px;
			margin: 0 auto;
			background: var(--tab-bg);
			color: #a1a1a1;
			font-weight: 700;
			cursor: pointer;
			user-select: none;
		}

		.option-modal-admin-tags .drawer-tab {
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
		}

		.option-modal-admin-tags .drawer-tab::before, .option-modal-admin-tags .drawer-tab::after {
			content: "";
			position: absolute;
			top: 0px;
			width: 0;
			height: 25px;
			/* background: blue; */
			border-top: calc(var(--tab-h)/2) solid transparent;
			/* border-bottom: calc(var(--tab-h)/0) solid transparent; */
		}

		.option-modal-admin-tags .drawer-tab::before {
			left: -13px;
			border-right: 18px solid #ddd;
		}

		.option-modal-admin-tags .drawer-tab::after {
			right: -12px;
			border-left: 18px solid #ddd;
		}

		.option-modal-admin-tags .drawer-body {
			padding: 12px 16px 16px;
			overflow: auto;
			max-height: calc(80vh - var(--tab-h));
			background: #000 url("/www/images/pattern/pattern16.png") repeat;
		}

		.drawer-body-content {
			padding: 10px;
		}

		.drawer-body-content-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			align-items: end;
			justify-items: start;
			grid-row-gap: 5px;
			color: #a1a1a1;
		}

/* volitelné: mírné zaoblení horní hrany “stuhy” */
.option-modal-admin-tags .drawer-tab{ border-top-left-radius: 8px; border-top-right-radius: 8px; }

/* otevření i na hover záložky (dotyk řeší JS toggle níže) */
.option-modal-admin-tags .drawer-tab:hover{ /* vizuál beze změny */ }
.option-modal-admin-tags .drawer-tab:hover ~ .drawer-body,
.option-modal-admin-tags .drawer-tab:hover{
	/* necháme řídit výškou rodiče – jen kosmetika případně */
}
		.option-modal-close {
			position: absolute;
			top: 10px;
			right: 14px;
			font-size: 28px;
			border: none;
			background: transparent;
			cursor: pointer;
			color: #666;
			color: #fff;
			text-shadow: 1px 1px 2px #000;
		}
		.option-modal-close:hover { color: #000; }

		.option-modal-media {
			width: 100%;
			/*max-height: 300px;*/
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.option-modal-media img,
		.option-modal-media video {
			max-width: 100%;
			max-height: 300px;
			object-fit: contain;
			display: block;
		}

		.option-modal-body {
			padding: 20px;
		}

		#progress-bar-wrap {
		    width: 100%;
		    max-width: 500px;
		}

		.progress {
			height: 100%;
		    width: 100%
		}

		.progress-bar {
			height: 100%;
		    background: #ff0000;
		    width: 0;
		}

		@media (max-width: 1024px) {
			/*.missing-media-container {
				width: 32%;
			}*/
			.media-container > .medium-container, .uploaded-container > .medium-container {
				flex: 0 0 32%;
			}
			.missing-media-container .missing-container {
				flex-basis: 32%;
			}
		}

		/* Mobil */
		@media (max-width: 768px) {
			/*.missing-media-container {
				width: 49%;
			}*/
			.media-container > .medium-container, .uploaded-container > .medium-container {
				flex: 0 0 49%;
			}
			.missing-media-container .missing-container {
				flex-basis: 49%;
			}
			.option-modal-content {
				max-width: none;
				width: 100%;
				height: 100%;
				border-radius: 0;
				max-height: none;
			}
		}

		.toast{
			position: fixed;
			right: 24px;
			top: 24px;
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 14px 16px;
			min-width: 260px;
			max-width: 360px;
			border-radius: 12px;
			background: rgba(28,30,36,.96);
			color: #fff;
			box-shadow: 0 10px 30px rgba(0,0,0,.25);
			backdrop-filter: blur(6px);
			z-index: 9999;
			animation: toast-in .35s ease forwards;
			z-index: 999999;
		}

		/* Hide helper (toggle by adding .is-hidden) */
		.toast.is-hidden{ display:none; }

		/* Spinner */
		.toast__spinner{
			width: 24px; height: 24px; border-radius: 50%;
			border: 3px solid rgba(255,255,255,.25);
			border-top-color: #fff;
			animation: spin 1s linear infinite;
			flex: 0 0 auto;
		}

		/* Text */
		.toast__title{ font-weight: 600; line-height: 1.2; }
		.toast__sub{ font-size: .85rem; opacity: .7; margin-top: 2px; }

		/* Progress (indeterminate) */
		.toast__bar{
			margin-top: 10px; height: 3px; width: 100%;
			border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden;
		}
		.toast__bar > span{
			display:block; height:100%; width:40%;
			background: linear-gradient(90deg, rgba(255,255,255,.2), #fff, rgba(255,255,255,.2));
			animation: slide 1.2s ease-in-out infinite;
		}

		/* Close */
		.toast__close{
			margin-left: 4px;
			border: 0; background: transparent; color: #fff;
			font-size: 20px; line-height: 1; cursor: pointer; opacity: .7;
			display: none;
		}
		.toast__close:hover{ opacity: 1; }

		@keyframes spin{ to{ transform: rotate(360deg); } }
		@keyframes slide{
			0%{ transform: translateX(-60%); }
			50%{ transform: translateX(20%); }
			100%{ transform: translateX(120%); }
		}
		@keyframes toast-in{
			from{ transform: translateY(-8px); opacity: 0; }
			to{ transform: translateY(0); opacity: 1; }
		}

		.tag-desc {
			text-shadow: 1px 1px 2px #fff;
			font-style: italic;
			line-height: 16px;
			color: #878787;
			font-size: .8em;
		}

		.btn-disable {
			opacity: 0.5;
			cursor: not-allowed;
			pointer-events: none;
			user-select: none;
		}

/* === Smazané médium === */
.medium-deleted img,
.medium-deleted video,
.medium-old-version {
	filter: grayscale(100%) brightness(.85);
}

.medium-deleted::after {
	/* jemné šrafování přes celý náhled */
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		45deg,
		rgba(220, 0, 0, .10) 0 12px,
		rgba(220, 0, 0, .18) 12px 24px
	);
	pointer-events: none;
}

.medium-deleted::before {
	/* razítko DELETED uprostřed */
	content: "DELETED";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(-12deg);
	background: rgba(200, 0, 0, .9);
	color: #fff;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,.35);
	pointer-events: none;
}

/* === Personal médium === */
.medium-personal, .medium-own-tag {
	box-shadow: inset 0 0 0 2px rgba(230, 0, 122, .85);
}

.medium-substitute {
	position: relative;
	overflow: hidden; /* jistota, aby ::after nepřetékalo */
}

.medium-substitute::after {
	content: "Substitute";
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(255, 165, 0, 0.9); /* oranžový badge */
	color: #fff;
	font-size: 11px;
	font-weight: bold;
	padding: 2px 6px;
	border-radius: 3px;
	pointer-events: none;
}

.medium-personal::after {
	/* badge v levém spodním rohu */
	content: "PERSONAL";
	position: absolute;
	left: 8px;
	bottom: 8px;
	background: rgba(230, 0, 122, .95);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 9999px;
	letter-spacing: .02em;
	pointer-events: none;
}

.medium-own-tag::after {
	content: "OWN TAG";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 10px;
	background: rgba(230, 0, 122, .95);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 9999px;
	letter-spacing: .02em;
	pointer-events: none;
}

.medium-outside {
	display: none !important;
}

.media-outside-notice {
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #8f818b;
    width: fit-content;
    margin: 0 auto;
    background: #cdb9c7;
    font-size: .8em;
    display: none;
}

.intro-example-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.border-crop {
    width: 28px;
    height: 40px;
    position: relative;
    background: #000;
    cursor: pointer;
}