@font-face {
    font-family: Montserrat;
    font-weight: 400;
    font-style: normal;
    src: url("../fonts/Montserrat-Regular.ttf") format('truetype');
}

* {
	font-family: Montserrat;
}

html {
	overflow-x: hidden;
	overflow-y: hidden;
	background-color: #151516;
}

body {
	overflow-y: hidden;
	overflow-x: hidden;
	background-color: #151516;
	padding-bottom: 43px;
    display: block;
    /* height: calc(100vh - 43px)!important; */
}

#welcomeTitle {
	color: white;
	font-size: 18px;
	display: block;
	position: relative;
	white-space: nowrap;
	float: left;
}

.previewText {
	color: white;
	font-size: 12px;
	width: 100%;
	height: 30px;
	white-space: nowrap;
    overflow: hidden;
}

#fullVersionButton {
	width: 150px;       /* Largura (antes era 90px) */
    height: 25px;       /* Altura (adicione essa linha) */
    line-height: 25px;
	font-size: 12px;
	border-radius: 5px;
	background-color: rgb(28, 123, 248);
	width: 90px;
	color: white;
	position: relative;
	display: inline-block;
	text-align: center;
	-webkit-transition: .6s ease;
	transition: .6s ease;
	transform: translate(0px, -6px);
}

#fullVersionButton:hover {
	opacity: 1;
	cursor: pointer;
}

#welcomeButton {
	color: #999999;
	font-size: 16px;
	display: block;
	position: relative;
	background-color: #232323;
	border-radius: 10px;
	width: 65px;
	height: 35px;
	margin-top: 15px;
	padding-top: 15px;
	padding-left: 20px;
	float: left;
}

#welcomeButton:hover {
	cursor: pointer;
	color: white;
}

#loadingText {
	font-size: 14px;
	color: white;	
    display: inline-block;
    position: relative;
	transform: translate(-80px, 0px);
    -ms-transform: translate(-80px, 0px);
    -webkit-transform: translate(-80px, 0px);
}

.loader_container{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: linear-gradient(180deg, #A1A1FF 0%, #343455 100%);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.8s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 1.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.8s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.8s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1);
    }
	100% {
		transform: scale(0);
	  }
  }

   @keyframes lds-ellipsis2 {
    0% {
		transform: scale(0);
	  }
	  50% {
		transform: scale(1);
	  }
	  100% {
		  transform: scale(0);
		}
  }

  @keyframes lds-ellipsis3 {
	0% {
		transform: scale(1);
	  }
	  50% {
		transform: scale(0);
	  }
	  100% {
		  transform: scale(1);
		}
    
  }
 
  .overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(3px);
	transition: opacity 100ms;
	visibility: hidden;
	opacity: 0;
  }
  .overlay:target {
	visibility: visible;
	opacity: 1;
  }

#displayText {
	white-space: nowrap;
	float: left;
	height: 25px;
	width: 200px;
	margin-left: 5px;
	text-align: left;
	color: #CCCCCC;
	-webkit-transition: .6s ease;
	transition: .6s ease;
	font-size: 12px;
	transform: translate(0px, 3px);
    -ms-transform: translate(0px, 3px);
    -webkit-transform: translate(0px, 3px);
}

#mainColour {
	margin-top: 5px;
	width: 15px;
	height: 15px;
	opacity: 0;
	cursor: pointer;
	pointer-events: none;
	transform: translate(-15px, -10px);
    -ms-transform: translate(-15px, -10px);
    -webkit-transform: translate(-15px, -10px);
}

#textColour {
	margin-top: 5px;
	width: 15px;
	height: 15px;
	opacity: 0;
	cursor: pointer;
	pointer-events: none;
	transform: translate(-15px, -10px);
    -ms-transform: translate(-15px, -10px);
    -webkit-transform: translate(-15px, -10px);
}

#regInput {
	width: 280px;
	height: 30px;
	background-color: #161615;
	color: white;
	border: 1px solid #707070;
	outline: none;
	border-radius: 15px;
	padding-left: 20px;
	margin-left: 80px;
	margin-top: 50px;
}

#registerButton {
	width: 100px;
	height: 30px;
	background-color: #161616;
	color: white;
	border: 1px solid #707070;
	outline: none;
	border-radius: 15px;
	opacity: .6;
	-webkit-transition: .6s ease;
	transition: .6s ease;
}

#registerButton:hover {
	cursor: pointer;
	opacity: 1;
}

#titleText {
	font-size: 14px;
	display: inline-block;
	position: relative;
	transform: translate(0px, -8px);
    -ms-transform: translate(0px, -8px);
    -webkit-transform: translate(0px, -8px);
}

#titleTextArea {
	display: inline-block;
	overflow-x: hidden;
	overflow-y: hidden;
	position: relative;
	resize: none;
	width: 100px;
	height: 20px;
}

#subtitleText {
	font-size: 14px;
	display: inline-block;
	position: relative;
	transform: translate(0px, -8px);
    -ms-transform: translate(0px, -8px);
    -webkit-transform: translate(0px, -8px);
    margin-left: 5px;
}

#subtitleTextArea {
	display: inline-block;
	overflow-x: hidden;
	overflow-y: hidden;
	position: relative;
	resize: none;
	width: 100px;
	height: 20px;
}

#colourButton {
	display: none;
	opacity: 0;
	pointer-events: none;
	display: inline-block;
	width: 50px;
	height: 30px;
	transform: translate(5px, 2.5px);
    -ms-transform: translate(5px, 2.5px);
    -webkit-transform: translate(5px, 2.5px);
    margin-left: calc(100vw - 685px);
}

#container {
	display: none;
	width: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	height: 100%;
	text-align: center;
}

#previewBox {
	width: 448px;
	height: 252px;
	background-color: #000000;
	opacity: .8;
	-webkit-transition: .6s ease;
	transition: .6s ease;
}

#previewBox:hover {
	opacity: 1;
	cursor: pointer;
}

#searchDiv {
	float: right;
	position: relative;
	height: 25px;
	-webkit-transition: .6s ease;
	transition: .6s ease;
	
}

#searchInput {
	display: inline-block;
	position: relative;
	background-color: #232323;
	color: #999999;
	outline: none;
	border: none;
	padding-left: 10px;
	border-radius: 10px;
	-webkit-transition: .6s ease;
	transition: .6s ease;
	transform: translate(0px, -3px);
    -ms-transform: translate(0px, -3px);
    -webkit-transform: translate(0px, -3px);
}

#searchButton {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
	transform: translate(-24px, 3px);
    -ms-transform: translate(-24px, 3px);
    -webkit-transform: translate(-24px, 3px);
	opacity: .7;
}

#searchButton:hover {
	cursor: pointer;
	opacity: 1;
}

#menubar {
	width: 100vw;
	height: 30px;
	position: relative;
	display: block;
	white-space: nowrap;
	background-color: #151516;
	border-bottom: .5px solid #303030;
	text-align: center;
}

#audioOption {
	float: right;
	-webkit-transition: .6s ease;
	transition: .6s ease;
	margin-right: 20px;
	opacity: .7;
}

#audioOption:hover {
	opacity: 1;
	cursor: pointer;
}

#timingDiv {
	float: right;
	margin-right: 5px;
}

.innerCircle {
	-webkit-transition: .6s ease;
	transition: .6s ease;
	width: 25px;
	height: 25px;
	margin-left: 5px;
	margin-right: 5px;
}

.innerCircle:hover {
	cursor: pointer;
}

.outerCircle {
	-webkit-transition: .6s ease;
	transition: .6s ease;
	width: 25px;
	height: 25px;
}


.outerCircle:hover {
	cursor: pointer;
}

#fav {
	-webkit-transition: .6s ease;
	transition: .6s ease;
	width: 25px;
	height: 25px;
	float: right;
	transform: translate(-25px, 0px);
    -ms-transform: translate(-25px, 0px);
    -webkit-transform: translate(-25px, 0px); 
}

#fav:hover {
	cursor: pointer;
}


.thisFav {
	-webkit-transition: .6s ease;
	transition: .6s ease;
	width: 15px;
	height: 15px;
	float: right;
	padding-bottom: 30px;
	opacity: .6;
	transform: translate(0px, -20px);
    -ms-transform: translate(0px, -20px);
    -webkit-transform: translate(0px, -20px);
}

.thisFav:hover {
	cursor: pointer;
	opacity: 1;
}

.inOutOverlay {
	width: 15px;
	height: 15px;
	
	transform: translate(0px, -20px);
    -ms-transform: translate(0px, -20px);
    -webkit-transform: translate(0px, -20px);
	float: left;
}

#tuts {
	-webkit-transition: .6s ease;
	transition: .6s ease;
	width: 25px;
	height: 25px;
	float: right;
	margin-right: 5px;
}

#tuts:hover {
	cursor: pointer;
}

#speedTextArea {
	position: relative;
	display: inline-block;
	width: 35px;
	height: 25px;
	padding-left: 5px;
	background-color: #232323;
	color: #999999;
	border: transparent;
	transform: translate(0px, -8px);
    -ms-transform: translate(0px, -8px);
    -webkit-transform: translate(0px, -8px);
    
}

#speedPercentLabel {
	color: #999999;
	position: relative;
	display: inline-block;
	transform: translate(3px, -7px);
    -ms-transform: translate(3px, -7px);
    -webkit-transform: translate(3px, -7px);
}

#menubarTwo {
	min-width: 500px;
	width: 100vw;
	height: 35px;
	position: relative;
	display: inline-block;
	white-space: nowrap;
	margin-top: 10px;
	margin-left: 200px;/*
	transform: translate(0px, -25px);
    -ms-transform: translate(0px, -25px);
    -webkit-transform: translate(0px -25px);*/
}

#menuButtonOne {
	width: 25px;
	height: 25px;
	margin-right: 5px;
	margin-left: 15px;
	display: inline-block;
	position: relative;
}

#playDiv {
	float: right;
	width: 220px;
	height: 100%;
	position: relative;
}

#sliderDiv {
	min-width: 475px;
	width: 100%;
	height: 35px;
	padding-top: 8px;
	border-top: .5px solid #303030;
}

#scaleImage {
	width: 15px;
	height: 15px;
	opacity: 0.7;
	-webkit-transition: .2s; /* 0.2 seconds transition on hover */
	transition: .2s;
}

#scaleImage:hover {
	cursor: pointer;
	opacity: 1;
}

#sizeSlider {
	border-radius: 25px;
	-webkit-appearance: none;  /* Override default CSS styles */
	appearance: none;
	width: 200px; /* Full-width */
	height: 5px; /* Specified height */
	background: #707070; /* Grey background */
	outline: none; /* Remove outline */
	-webkit-transition: .2s; /* 0.2 seconds transition on hover */
	transition: .2s;
	display: inline-block;
	transform: translate(5px, -5px);
    -ms-transform: translate(5px, -5px);
    -webkit-transform: translate(5px, -5px);
}

#sizeSlider::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	border-radius: 25px;
	width: 15px; /* Set a specific slider handle width */
	height: 15px; /* Slider handle height */
	background: #7a7aff; /* Green background */
	cursor: pointer; /* Cursor on hover */
  }
  
#sizeSlider::-moz-range-thumb {
	width: 15px; /* Set a specific slider handle width */
	height: 15px; /* Slider handle height */
	background: #7a7aff; /* Green background */
	cursor: pointer; /* Cursor on hover */
	border-radius: 25px;
  }

.folderItem {
	opacity: 1;
	color: #CCCCCC;
	font-size: 13px;
	padding-top: 5px;
	border-top: .5px solid #303030;
	margin-top: 5px;
	margin-bottom: 5px;
	}

.folderItem:hover {
	cursor: pointer;
}	

.subFolderItem {
	color: #CCCCCC;
	font-size: 11px;
	margin-left: 10px;
	padding-top: 5px;
	border-top: .5px solid #505050;
	margin-top: 5px;
	margin-bottom: 5px;
	}

.subFolderItem:hover {
	cursor: pointer;
}	


.image {
	cursor: pointer;
	width: 100%;
	height: 100%;
	display: inline-block;
	color: white;
}

.preview {
	display: inline-block;
	width: 126px;
	height: 56px;
	/* width: 15vw;
	height: 7vw; */
	-webkit-transition: .6s ease;
	transition: .6s ease;
	margin-left: 5px;
	opacity: .7;
	/* border: 5px solid transparent; */
	text-align: center;
	/* margin: 2.5px 2.5px 2.5px 2.5px; */
}

.preview:hover {
	cursor: pointer;
	opacity: 1;
}

#moreProducts {
	width: 250px;
	height: 35px;
	text-align: center;
	position: relative;
	display: block;
	border-radius: 15px;
	color: #999999;
	background-color: #303030;
	padding-top: 17px;
	opacity: .7;
	margin-top: 20px;
	margin-left: 37%;
}

#moreProducts:hover {
	cursor: pointer;
	opacity: 1;
}

#factoryResetButton {
	width: 100px;
	height: 15px;
	text-align: center;
	position: relative;
	display: block;
	border-radius: 10px;
	font-size: 10px;
	padding-top: 3px;
	color: #999999;
	background-color: #303030;
	opacity: .7;
	margin-top: 40px;

	margin-left: 37%;
	transform: translate(80px, 0px);
    -ms-transform: translate(80px, 0px);
    -webkit-transform: translate(80px 0px);
}

#factoryResetButton:hover {
	cursor: pointer;
	opacity: 1;
}

#nextButton {
	width: 250px;
	height: 35px;
	text-align: center;
	position: relative;
	display: block;
	border-radius: 15px;
	color: #999999;
	background-color: #303030;
	padding-top: 17px;
	opacity: .7;
	margin-top: 20px;
	margin-left: 20%;
}

#nextButton:hover {
	cursor: pointer;
	opacity: 1;
}

#moreProductsTwo {
	width: 250px;
	height: 35px;
	text-align: center;
	position: relative;
	display: block;
	border-radius: 15px;
	color: #999999;
	background-color: #303030;
	margin-left: 37%;
	padding-top: 17px;
	opacity: .7;
	margin-top: 20px;
}

#moreProductsTwo:hover {
	cursor: pointer;
	opacity: 1;
}

.previewText {
	background-color: rgba(23, 23, 23, .6);
	transform: translate(0px, -25px);
    -ms-transform: translate(0px, -25px);
    -webkit-transform: translate(0px -25px);
	
}

#addButton {
	transform: translate(40px, -35px);
    -ms-transform: translate(40px, -35px);
    -webkit-transform: translate(40px -35px);
    opacity: 0;
    -webkit-transition: .6s ease;
	transition: .6s ease;
}

#checkboxOne {
	margin-left: 5px;
}

#checkboxTwo {
	margin-left: 5px;
}

#checkboxRainbow {
	margin-left: 5px;
}

#logoText {
	position: relative;
	display: inline-block;
	font-size: 12px;
	transform: translate(0px, -12px);
    -ms-transform: translate(0px, -12px);
    -webkit-transform: translate(0px, -12px);
}

#ddDiv {
	width: 220px;
	height: 30px;
}

#refreshButton {
	width: 25px;
	height: 25px;
	color: #888888;
    opacity: .7;
    -webkit-transition: .6s ease;
	transition: .6s ease;
    transform: translate(0px, -5px);
    -ms-transform: translate(0px, -5px);
    -webkit-transform: translate(0px, -5px);
}

#refreshButton:hover {
	opacity: 1;
	cursor: pointer;
}

/* --- BARRA DE ROLAGEM MODERNA (SCROLLBAR) --- */
::-webkit-scrollbar {
  width: 6px;               /* Largura bem fininha */
  height: 6px;              /* Altura (para scroll horizontal se houver) */
  background-color: transparent; /* Fundo invisível */
}

::-webkit-scrollbar-track {
  background-color: transparent; /* Trilho invisível */
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;       /* Arredondado */
  background-color: #444;    /* Cor cinza escuro discreto */
  border: 1px solid #151516; /* Borda para separar do fundo */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #666;    /* Clareia um pouco ao passar o mouse */
}

/* Esconde os botões (setinhas) da barra de rolagem que ocupam espaço */
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.dropdown {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 28px;
  width: 150px;
  background: #f2f2f2;
  border: 1px solid;
  border-color: white #f7f7f7 whitesmoke;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

.dropdown:before, .dropdown:after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 10px;
  width: 0;
  height: 0;
  border: 4px dashed;
  border-color: #888888 transparent;
  pointer-events: none;
}

.dropdown:before {
  border-bottom-style: solid;
  border-top: none;
}

.dropdown:after {
  margin-top: 7px;
  border-top-style: solid;
  border-bottom: none;
}

.dropdown-select {
  position: relative;
  width: 130%;
  margin: 0;
  padding: 6px 8px 6px 10px;
  height: 28px;
  line-height: 14px;
  font-size: 12px;
  color: #62717a;
  text-shadow: 0 1px white;
  background: #f2f2f2; /* Fallback for IE 8 */
  background: rgba(0, 0, 0, 0) !important; /* "transparent" doesn't work with Opera */
  border: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.dropdown-select:focus {
  z-index: 3;
  width: 100%;
  color: #394349;
  outline: 2px solid #49aff2;
  outline: 2px solid -webkit-focus-ring-color;
  outline-offset: -2px;
}

.dropdown-select > option {
  margin: 3px;
  padding: 6px 8px;
  text-shadow: none;
  background: #f2f2f2;
  border-radius: 3px;
  cursor: pointer;
}

/* Fix for IE 8 putting the arrows behind the select element. */

.lt-ie9 .dropdown {
  z-index: 1;
}

.lt-ie9 .dropdown-select {
  z-index: -1;
}

.lt-ie9 .dropdown-select:focus {
  z-index: 3;
}

/* Dirty fix for Firefox adding padding where it shouldn't. */

@-moz-document url-prefix() {
  .dropdown-select {
    padding-left: 6px;
  }
}

.dropdown-dark {
  background: #444;
  border-color: #111111 #0a0a0a black;
  background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
  background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
  background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
}

.dropdown-dark:before {
  border-bottom-color: #aaa;
}

.dropdown-dark:after {
  border-top-color: #aaa;
}

.dropdown-dark .dropdown-select {
  color: #aaa;
  text-shadow: 0 1px black;
  background: #444;  /* Fallback for IE 8 */
}

.dropdown-dark .dropdown-select:focus {
  color: #ccc;
}

.dropdown-dark .dropdown-select > option {
  background: #444;
  text-shadow: 0 1px rgba(0, 0, 0, 0.4);
}

#cepConsole {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: #0f0f0f;
    color: #00ff88;
    font-family: monospace;
    font-size: 11px;
    overflow-y: auto;
    padding: 6px;
    border-top: 1px solid #333;
    z-index: 9999;
}

/* --- LOADER TELA CHEIA (SÓLIDO) --- */
.loading-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    
    /* MUDANÇA: Cor Sólida (Cinza escuro igual ao fundo da extensão) */
    background: #151516; 
    
    z-index: 99999; /* Z-index altíssimo para tapar tudo */
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-box {
    width: 300px;
    /* Removemos o fundo da caixa e a borda para ficar "flutuando" no cinza,
       ou mantemos se você quiser um destaque. Vou deixar clean. */
    background: transparent; 
    padding: 20px;
    text-align: center;
    border: none; 
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ESTILO DA LOGO */
.loader-logo {
    max-width: 180px; /* Tamanho da logo */
    height: auto;
    margin-bottom: 20px;
}

.loader-text {
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
}

.progress-container {
    width: 100%;
    background-color: #333; /* Trilho mais escuro */
    border-radius: 10px;
    height: 6px; /* Barra mais fina e elegante */
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: #0078D7; /* Azul Premiere */
    transition: width 0.3s ease;
}

/* Overlay de Aplicação de Efeito - AJUSTADO */
.overlay_apply {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* MUDANÇA AQUI: 0.98 deixa o fundo bem fechado, quase preto sólido */
    background: rgba(18, 18, 18, 0.98); 
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.loader_center {
    text-align: center;
    width: 300px;
}

/* Animação da Logo (Pulsar) - CORRIGIDA */
.loader_logo_pulse {
    width: 80px;
    height: auto;
    border-radius: 50%;
    margin-bottom: 20px;
    animation: pulseLogo 1.5s infinite ease-in-out;
    /* Adicionei isso para garantir que a imagem não fique transparente */
    opacity: 1 !important; 
    box-shadow: 0 0 15px rgba(0, 120, 212, 0.3);
}

@keyframes pulseLogo {
    /* REMOVIDO as linhas de 'opacity' da animação */
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

#loaderText {
    color: #ffffff;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    margin-bottom: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Barra de Progresso */
.progress_track {
    width: 100%;
    height: 6px;
    background: #333;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

#progressBar {
    width: 0%;
    height: 100%;
    background: #0078d4;
    border-radius: 3px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 120, 212, 0.7);
}

/* --- RODAPÉ FIXO E TRAVADO (SOLUÇÃO DEFINITIVA) --- */

/* Ajuste no corpo para o rodapé não cobrir o conteúdo final */
body {
    padding-bottom: 35px !important; /* Mesma altura do rodapé */
}

#sliderDiv {
    /* "Descola" o rodapé e cola no fundo da tela */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    
    /* Trava as dimensões */
    width: 100% !important;
    height: 35px !important;
    min-height: 35px !important;
    max-height: 35px !important;
    
    /* Visual */
    background-color: #151516;
    border-top: 1px solid #303030;
    z-index: 9999; /* Garante que fique na frente de tudo */
    
    /* Alinhamento */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
    
    /* Segurança: corta qualquer coisa que tente estourar a altura */
    overflow: hidden; 
    margin: 0 !important;
}

/* Grupo da Esquerda (Slider) */
.footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
}

#scaleImage {
    width: 14px;
    height: 14px;
    opacity: 0.7;
    cursor: pointer;
    transition: .2s;
    margin: 0 !important; /* Remove margens antigas */
}
#scaleImage:hover { opacity: 1; }

#sizeSlider {
    -webkit-appearance: none;
    width: 130px;
    height: 4px;
    background: #444;
    border-radius: 2px;
    outline: none;
    opacity: 0;
    margin: 0 !important;
    transition: .2s;
}

#sizeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #A1A1FF;
    border-radius: 50%;
    cursor: pointer;
}

/* Grupo da Direita (Botões) */
.footer-right {
    display: flex;
    align-items: center;
    gap: 0; /* Gap zero, controlado pelo padding do botão */
    height: 100%;
}

/* Estilo dos Botões de Texto */
.footer-text-btn {
    color: #ffffff;
    font-size: 11px;
    font-weight: 400;
    
    /* Espaçamento interno */
    padding: 0 12px;
    
    /* Altura total para o hover preencher a barra */
    height: 35px;
    line-height: 35px;
    
    cursor: pointer;
    border-bottom: 2px solid transparent; 
    transition: all 0.2s ease;
    background-color: transparent; /* Começa transparente */
}

/* O Efeito Hover que você gosta */
.footer-text-btn:hover {
    background-color: rgba(255, 255, 255, 0.08); /* Fundo cinza suave */
    border-bottom: 2px solid #A1A1FF; /* Linha colorida em baixo */
    color: #fff;
}

/* Botão Preview All - VERSÃO FINAL CORRIGIDA */
#playAllButton {
    background-color: #333333;
    color: #DDDDDD;
    border: none;
    outline: none;
    border-radius: 20px; /* Mais arredondado */
    width: 90px;
    height: 22px; /* Altura fina para caber no rodapé de 30px */
    font-size: 10px;
    cursor: pointer;
    opacity: 0.5;
    transition: 0.3s ease;
    
    /* Posicionamento */
    margin-left: 10px;
    padding: 0;
    
    /* --- A CORREÇÃO DE ALINHAMENTO --- */
    /* Isso anula o código antigo que jogava o botão pra cima */
    transform: none !important; 
    margin-top: 0 !important;
    
    /* Garante que o Flexbox alinhe ele ao centro verticalmente */
    align-self: center !important;
}

#playAllButton:hover {
    opacity: 1;
    color: #A1A1FF;
    background-color: #212121;
}

/* Botão de Reset do Slider */
.reset-btn {
    color: #666;
    font-size: 16px; /* Tamanho do ícone */
    font-weight: bold;
    cursor: pointer;
    margin-left: 8px; /* Afasta um pouco do slider */
    transition: 0.3s;
    line-height: 1; /* Garante alinhamento vertical */
}

.reset-btn:hover {
    color: #A1A1FF; /* Fica da cor do tema ao passar o mouse */
    transform: rotate(-180deg); /* Faz uma gracinha girando ao passar o mouse */
}

/* --- LAYOUT FLEXBOX COM REDIMENSIONAMENTO (RESIZABLE) --- */

/* O Container Principal vira Flexbox */
#bottomHolder {
    margin-top: 10px;
    width: 100%;
    /* Removemos altura fixa para o flex se ajustar */
    background-color: #151516;
    text-align: left;
    
    /* MÁGICA: Coloca os itens um ao lado do outro */
    display: flex; 
    align-items: flex-start;
    overflow: hidden; 
}

/* A Lista de Pastas (Esquerda) */
#folderNavigation {
    width: 320px; /* Largura inicial */
    min-width: 200px; /* Não deixa ficar muito estreito */
    max-width: 600px; /* Não deixa ficar gigante */
    
    /* Altura calculada (Topo + Rodapé) */
    height: calc(100vh - 335px) !important; 
    
    background-color: #151516;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 50px !important;
    
    /* Impede que a lista seja "esmagada" */
    flex-shrink: 0; 
}

/* A Barra de Arrastar (Handle) */
#dragHandle {
    width: 5px; /* Espessura da barra */
    height: calc(100vh - 335px) !important; /* Mesma altura das listas */
    background-color: #252526; /* Cor discreta inicial */
    cursor: col-resize; /* Ícone do mouse muda para setinhas laterais */
    flex-shrink: 0; 
    transition: background-color 0.2s;
    z-index: 100; /* Garante que fique por cima */
}

/* Efeito visual ao passar o mouse ou arrastar */
#dragHandle:hover, #dragHandle.active {
    background-color: #555555; /* Roxo do tema */
}

/* A Área de Cards (Direita) */
#previewSection {
    /* MÁGICA: Cresce para ocupar todo o espaço que sobrar */
    flex-grow: 1; 
    width: auto !important; 
    
    height: calc(100vh - 335px) !important;
    
    overflow-y: auto !important;
    overflow-x: hidden;
    padding-bottom: 50px !important;
    
    margin-left: 0; /* Encosta na barra de arrastar */
    text-align: center;
    vertical-align: top;
}