/* ==========================================================================
   Rede Artista — Nova Linguagem Visual (Inspirada no ArtLab e Guia Urban Arts)
   ========================================================================== */

:root {
	/* Superfícies e Fundos */
	--ua-bg: #FFFFFF;
	--ua-surface: #F7F7F5;
	--ua-surface-subtle: #FAFAF9;
	--ua-surface-hover: #F0F0EE;
	--ua-overlay: rgba(0, 0, 0, 0.45);

	/* Textos e Tipografia */
	--ua-text: #111111;
	--ua-text-secondary: #555555;
	--ua-muted: #737373;
	--ua-subtle: #A3A3A3;
	--ua-inverse: #FFFFFF;

	/* Linhas e Contornos */
	--ua-border: #E5E5E5;
	--ua-border-light: #EAEAEA;
	--ua-border-strong: #D4D4D4;
	--ua-border-dark: #111111;
	--ua-focus: #111111;

	/* Cores Funcionais */
	--ua-status-success: #2E7D32;
	--ua-status-warning: #ED6C02;
	--ua-status-error: #D32F2F;

	/* Espaçamentos e Geometria */
	--ua-space-1: 4px;
	--ua-space-2: 8px;
	--ua-space-3: 12px;
	--ua-space-4: 16px;
	--ua-space-5: 24px;
	--ua-space-6: 32px;
	--ua-space-7: 48px;

	--ua-radius-none: 0px;
	--ua-radius-sm: 2px;
	--ua-radius-md: 4px;

	--ua-shadow-modal: 0 4px 24px rgba(0, 0, 0, 0.08);
	--ua-shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.06);

	--ua-content-width: 1520px;
}
html.dark-theme {
	/* Superfícies e Fundos Dark */
	--ua-bg: #0E0E10;
	--ua-surface: #18181B;
	--ua-surface-subtle: #141416;
	--ua-surface-hover: #222225;
	--ua-overlay: rgba(0, 0, 0, 0.75);

	/* Textos e Tipografia Dark */
	--ua-text: #F4F4F6;
	--ua-text-secondary: #A1A1AA;
	--ua-muted: #71717A;
	--ua-subtle: #52525B;
	--ua-inverse: #0E0E10;

	/* Linhas e Contornos Dark */
	--ua-border: rgba(255, 255, 255, 0.1);
	--ua-border-light: rgba(255, 255, 255, 0.06);
	--ua-border-strong: rgba(255, 255, 255, 0.18);
	--ua-border-dark: #FFFFFF;
	--ua-focus: #FF008F;

	/* Cores Funcionais Dark */
	--ua-status-success: #34D399;
	--ua-status-warning: #FBBF24;
	--ua-status-error: #F87171;

	/* Sombras Dark */
	--ua-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.7);
	--ua-shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.6);
}


/* ==========================================================================
   1. Base Global & Tipografia
   ========================================================================== */

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background-color: var(--ua-bg) !important;
	color: var(--ua-text) !important;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
	font-size: 14px;
	line-height: 1.55;
	margin: 0;
}

::selection {
	background: var(--ua-text);
	color: var(--ua-inverse);
}

:focus-visible {
	outline: 2px solid var(--ua-focus);
	outline-offset: 3px;
}

a {
	color: var(--ua-text);
	text-decoration: none;
	transition: color 0.15s ease, opacity 0.15s ease;
}

a:hover, a:focus {
	color: #333333;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	font-family: inherit;
	color: var(--ua-text);
	font-weight: 600;
	letter-spacing: -0.015em;
}

.main .conteudo h1 {
	font-size: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 12px 0 8px;
	color: var(--ua-text);
}

.main .conteudo h2 {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-top: 32px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--ua-border);
	color: var(--ua-text);
}

.main p.firstp {
	font-size: 14px;
	color: var(--ua-muted);
	margin-bottom: 24px;
}

.divisor {
	border-top: 1px solid var(--ua-border);
	margin: 20px 0 24px;
	clear: both;
}

/* ==========================================================================
   2. Cabeçalho ArtLab (Exato ArtLab Design System & Cores)
   ========================================================================== */

#header,
header,
header.artlab-header {
	/* modern topbar */
	background: #FFFFFF !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border-top: none !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 1px 12px rgba(0, 0, 0, 0.03) !important;
	height: 68px !important;
	min-height: 68px !important;
	width: 100% !important;
	left: 0;
	top: 0;
	padding: 0 !important;
	margin: 0 !important;
	position: relative;
	z-index: 1000;
	box-sizing: border-box;
}

.header-inner,
header .header-inner,
header .topbar,
header .container,
header .topbar.container {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	height: 68px !important;
	min-height: 68px !important;
	max-width: 1170px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 15px !important;
	box-sizing: border-box !important;
	float: none !important;
}

/* Left: Hamburger + Logo + Badge */
.header-left,
header .topbar .logo {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	height: 100% !important;
}

/* Botão Menu Hambúrguer (Removido por solicitação) */
.btn-menu {
	display: none !important;
}

/* Brand Group: Logo + Badge perfeitamente alinhados */
.brand-group {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
	padding: 0 !important;
	height: 100% !important;
}

.brand-group #urbanarts,
header .topbar .logo a {
	display: inline-flex !important;
	align-items: center !important;
	line-height: 0 !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	text-decoration: none !important;
	transition: opacity 0.2s ease !important;
}

.brand-group #urbanarts:hover,
header .topbar .logo a:hover {
	opacity: 0.85 !important;
}

.brand-group .logo-ua-img,
header .topbar .logo img {
	height: 24px !important;
	max-height: 24px !important;
	width: auto !important;
	display: block !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Badge ARTLAB / REDE DO ARTISTA */
.badge-artlab,
.badge-rede-artista,
.brand-group .badge-artlab,
.brand-group .badge-rede-artista {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	visibility: visible !important;
	opacity: 1 !important;
	background: #111111 !important;
	color: #FFFFFF !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	line-height: 1 !important;
	padding: 4px 7px !important;
	border-radius: 3px !important;
	text-transform: uppercase !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
	white-space: nowrap !important;
	vertical-align: middle !important;
	margin: 0 !important;
	border: none !important;
}

/* Right: Flags + User Data */
.header-right,
header .topbar .col-right {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	height: 100% !important;
}

/* Seletor de Idioma */
.lang-selector,
header .topbar .navbar-text {
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	float: none !important;
}

.lang-selector a,
header .topbar .navbar-text a {
	display: block !important;
	line-height: 0 !important;
	opacity: 0.55 !important;
	transition: opacity 0.15s ease !important;
	border: none !important;
	text-decoration: none !important;
}

.lang-selector a:hover,
.lang-selector a.active,
header .topbar .navbar-text a:hover {
	opacity: 1 !important;
}

.lang-selector img,
header .topbar .navbar-text img {
	display: block !important;
	width: 19px !important;
	height: 13px !important;
	object-fit: cover !important;
	border-radius: 1px !important;
	border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

/* User Data: igual ao ArtLab */
.user-data,
header .topbar .login {
	color: #555555 !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	height: 44px !important;
	letter-spacing: 0.04em !important;
	line-height: 44px !important;
	text-transform: uppercase !important;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	position: relative !important;
}

.user-data .gallery {
	color: #737373 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	letter-spacing: 0.04em !important;
}

.user-data .store {
	color: #111111 !important;
	font-weight: 600 !important;
}

.user-data .pipe {
	color: #D4D4D4 !important;
	margin: 0 4px !important;
	font-weight: 300 !important;
}

/* O botão do usuário com o ícone exato ico-user.png do ArtLab */
.user-data .user,
header .topbar .login .user {
	background: url(../imgs/ico-user.png) no-repeat right center !important;
	background-size: 20px 20px !important;
	color: #111111 !important;
	display: inline-flex !important;
	align-items: center !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	line-height: 44px !important;
	height: 44px !important;
	padding: 0 28px 0 0 !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	transform: none !important;
	margin: 0 !important;
	float: none !important;
	transition: opacity 0.2s ease !important;
}

.user-data .user:hover {
	opacity: 0.7 !important;
	text-decoration: none !important;
}

.user-dropdown-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.dropdown-menu-user {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	background: #FFFFFF;
	border: 1px solid var(--ua-border);
	border-radius: var(--ua-radius-sm);
	box-shadow: var(--ua-shadow-dropdown);
	padding: 6px 0;
	min-width: 150px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: all 0.2s ease;
	z-index: 1010;
}

.user-dropdown-wrapper:hover .dropdown-menu-user,
.dropdown-menu-user.active {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
}

.dropdown-menu-user a {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 16px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--ua-text) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.4 !important;
}

.dropdown-menu-user a:hover {
	background: var(--ua-surface) !important;
}

.dropdown-menu-user a.logout-link {
	border-top: 1px solid var(--ua-border-light);
	color: var(--ua-status-error) !important;
	margin-top: 4px;
	padding-top: 8px;
}

/* Sub-navegação / Menu do Usuário */
header .menu {
	background: #FFFFFF !important;
	border-bottom: 1px solid var(--ua-border) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;
	padding: 0 !important;
	margin: 0 !important;
}

.header-menu-inner,
header .menu .container {
	max-width: 1170px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 15px !important;
	box-sizing: border-box !important;
}

header .menu nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

header .menu a {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	color: var(--ua-text);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	transition: all 0.15s ease;
	text-decoration: none;
}

header .menu a:hover,
header .menu a:focus {
	border-bottom-color: var(--ua-text);
	color: #000000;
}

header .menu {
	background: #FFFFFF !important;
	border-bottom: 1px solid var(--ua-border);
}

header .menu nav {
	margin: 0;
}

header .menu nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

header .menu nav li {
	margin: 0;
	padding: 0;
}

header .menu a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	color: var(--ua-text);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0 2px;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

header .menu a:hover,
header .menu a:focus {
	color: var(--ua-text);
	border-bottom-color: var(--ua-border-strong);
}

header .menu a:after {
	display: none !important;
}

/* ==========================================================================
   4. Abas Laterais (Subnavegação)
   ========================================================================== */

.main .aba-lateral {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 10px;
}

.main .aba-lateral .item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100% !important;
	text-align: left !important;
	padding: 10px 14px !important;
	margin: 0 !important;
	border: 1px solid transparent !important;
	border-radius: var(--ua-radius-sm);
	color: var(--ua-muted) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.3;
	background: transparent;
	transition: all 0.15s ease;
}

.main .aba-lateral .item:hover {
	background: var(--ua-surface);
	color: var(--ua-text) !important;
}

.main .aba-lateral .item .ico {
	width: 32px !important;
	height: 32px !important;
	line-height: 32px !important;
	font-size: 16px !important;
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: var(--ua-radius-sm) !important;
	color: var(--ua-text) !important;
	box-shadow: none !important;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.15s ease;
}

.main .aba-lateral .item:hover .ico {
	background: #FFFFFF !important;
	border-color: var(--ua-border-strong) !important;
}

/* Abas Laterais — Estados Ativos */
.enviar-novas-artes .como-enviar-arte .aba-lateral .item1,
.enviar-novas-artes .formatos-possiveis .aba-lateral .item2,
.enviar-novas-artes .enviar-novas-artes .aba-lateral .item3,
.enviar-novas-artes .termos-uso .aba-lateral .item4,
.suas-artes .artes-aprovadas .aba-lateral .item1,
.suas-artes .artes-pendentes .aba-lateral .item2,
.suas-artes .artes-reprovadas .aba-lateral .item3,
.suas-artes .series .aba-lateral .item4,
.suas-artes .landing-page .aba-lateral .item5,
.suas-artes .remover-artes .aba-lateral .item6,
.suas-vendas .tabela .aba-lateral .item1,
.suas-vendas .dashboard .aba-lateral .item2,
.main .aba-lateral .item.ativo {
	background: var(--ua-surface) !important;
	border-color: var(--ua-border) !important;
	color: var(--ua-text) !important;
	font-weight: 600 !important;
	border-left: 3px solid var(--ua-text) !important;
}

.enviar-novas-artes .como-enviar-arte .aba-lateral .item1 .ico,
.enviar-novas-artes .formatos-possiveis .aba-lateral .item2 .ico,
.enviar-novas-artes .enviar-novas-artes .aba-lateral .item3 .ico,
.enviar-novas-artes .termos-uso .aba-lateral .item4 .ico,
.suas-artes .artes-aprovadas .aba-lateral .item1 .ico,
.suas-artes .artes-pendentes .aba-lateral .item2 .ico,
.suas-artes .artes-reprovadas .aba-lateral .item3 .ico,
.suas-artes .series .aba-lateral .item4 .ico,
.suas-artes .landing-page .aba-lateral .item5 .ico,
.suas-artes .remover-artes .aba-lateral .item6 .ico,
.suas-vendas .tabela .aba-lateral .item1 .ico,
.suas-vendas .dashboard .aba-lateral .item2 .ico,
.main .aba-lateral .item.ativo .ico {
	background: var(--ua-text) !important;
	border-color: var(--ua-text) !important;
	color: #FFFFFF !important;
}

/* ==========================================================================
   5. Filtros & Controles de Listagem
   ========================================================================== */

.filtro {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 24px;
	padding: 0;
	background: transparent;
	float: none !important;
	flex-wrap: wrap;
}

.filtro > span,
.filtro label {
	font-size: 13px;
	color: var(--ua-muted);
	font-weight: 500;
	margin: 0;
}

.filtro .dropdown button.btn,
.filtro select.form-control {
	background: #FFFFFF;
	border: 1px solid var(--ua-border-strong);
	border-radius: var(--ua-radius-sm);
	color: var(--ua-text);
	font-size: 13px;
	font-weight: 500;
	padding: 8px 14px;
	height: 38px;
	box-shadow: none !important;
	transition: border-color 0.15s ease;
}

.filtro .dropdown button.btn:hover,
.filtro .dropdown button.btn:focus,
.filtro select.form-control:focus {
	border-color: var(--ua-text);
	outline: none;
}

.filtro .dropdown-menu {
	border: 1px solid var(--ua-border);
	border-radius: var(--ua-radius-sm);
	box-shadow: var(--ua-shadow-dropdown);
	padding: 4px 0;
	margin-top: 4px;
}

.filtro .dropdown-menu > li > a {
	padding: 8px 16px;
	font-size: 13px;
	color: var(--ua-text);
}

.filtro .dropdown-menu > li > a:hover {
	background: var(--ua-surface);
}

/* ==========================================================================
   6. Grid de Obras ("Suas Artes")
   ========================================================================== */

.listagem-artes {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
	gap: 24px !important;
	padding: 10px 0 30px !important;
	overflow: visible !important;
	float: none !important;
	width: 100% !important;
}

.listagem-artes:before,
.listagem-artes:after {
	display: none !important;
}

.listagem-artes .arte {
	float: none !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	position: relative;
	background: #FFFFFF;
	border: 1px solid var(--ua-border);
	border-radius: var(--ua-radius-sm);
	padding: 12px;
	display: flex;
	flex-direction: column;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.listagem-artes .arte:hover {
	border-color: var(--ua-border-strong);
}

.listagem-artes .arte .img {
	background-color: var(--ua-surface) !important;
	border: 1px solid var(--ua-border-light) !important;
	border-radius: var(--ua-radius-sm);
	width: 100% !important;
	height: 240px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden;
	position: relative;
}

.listagem-artes .arte .img img {
	max-width: 90% !important;
	max-height: 90% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.listagem-artes .arte:hover .img img {
	transform: scale(1.025);
}

.listagem-artes .arte .nome {
	display: block !important;
	padding-top: 10px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--ua-text) !important;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.listagem-artes .arte .infos {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--ua-border);
	font-size: 11px;
	color: var(--ua-muted);
}

.listagem-artes .arte .infos span {
	display: block;
	margin-top: 3px;
}

.listagem-artes .arte .infos strong {
	color: var(--ua-text);
	font-weight: 600;
}

/* ==========================================================================
   7. "Suas Vendas" — Resumo Métrico & Tabela
   ========================================================================== */

.tabela-vendas {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
	gap: 16px !important;
	margin: 24px 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	float: none !important;
}

.tabela-vendas:before,
.tabela-vendas:after {
	display: none !important;
}

.tabela-vendas .item {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 20px !important;
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: var(--ua-radius-sm) !important;
	display: flex !important;
	align-items: center !important;
	gap: 16px;
	transition: border-color 0.15s ease;
}

.tabela-vendas .item:hover {
	border-color: var(--ua-border-strong);
}

.tabela-vendas .item .ico {
	float: none !important;
	width: 48px !important;
	height: 48px !important;
	background: #FFFFFF !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: var(--ua-radius-sm) !important;
	box-shadow: none !important;
	color: var(--ua-text) !important;
	font-size: 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0;
}

.tabela-vendas .item .valor {
	padding: 0 !important;
	font-size: 12px !important;
	color: var(--ua-muted) !important;
	line-height: 1.4 !important;
}

.tabela-vendas .item .valor strong {
	display: block;
	margin-top: 4px;
	color: var(--ua-text) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;
}

.link-planilha {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: transparent;
	border: 1px solid var(--ua-border-strong);
	border-radius: var(--ua-radius-sm);
	color: var(--ua-text) !important;
	font-size: 13px !important;
	font-weight: 500;
	text-decoration: none !important;
	margin: 12px 0 24px;
	float: none !important;
	transition: all 0.15s ease;
}

.link-planilha:hover {
	background: var(--ua-surface);
	border-color: var(--ua-text);
}

.link-planilha span {
	position: static !important;
}

/* ==========================================================================
   8. "Enviar Artes" — Passos & Upload
   ========================================================================== */

.abas-envio {
	border-bottom: 1px solid var(--ua-border) !important;
	height: auto !important;
	margin: 24px 0 32px !important;
	padding-bottom: 12px;
	display: flex !important;
	flex-wrap: wrap;
	gap: 16px 32px;
	position: relative;
}

.abas-envio:after {
	display: none !important;
}

.abas-envio .aba {
	float: none !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--ua-muted) !important;
	padding: 4px 0;
	position: relative;
	transition: color 0.15s ease;
}

.passo1 .abas-envio .aba1,
.passo2 .abas-envio .aba1, .passo2 .abas-envio .aba2,
.passo3 .abas-envio .aba1, .passo3 .abas-envio .aba2, .passo3 .abas-envio .aba3,
.passo4 .abas-envio .aba1, .passo4 .abas-envio .aba2, .passo4 .abas-envio .aba3, .passo4 .abas-envio .aba4,
.passo5 .abas-envio .aba {
	color: var(--ua-text) !important;
	font-weight: 600 !important;
}

.passos-envio .box-sombra {
	background: var(--ua-surface);
	border: 1px solid var(--ua-border);
	border-radius: var(--ua-radius-sm);
	box-shadow: none !important;
	padding: 24px;
	margin: 24px 0 !important;
}

/* ==========================================================================
   9. Formulários & Botões Padronizados
   ========================================================================== */

.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], select, textarea {
	background-color: #FFFFFF !important;
	border: 1px solid var(--ua-border-strong) !important;
	border-radius: var(--ua-radius-sm) !important;
	box-shadow: none !important;
	color: var(--ua-text) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	height: 44px;
	padding: 8px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea.form-control,
textarea {
	height: auto !important;
	min-height: 100px;
}

.form-control:focus,
input:focus, select:focus, textarea:focus {
	border-color: var(--ua-text) !important;
	box-shadow: 0 0 0 1px var(--ua-text) !important;
	outline: none !important;
}

.form-control:disabled,
.form-control[readonly],
input:disabled, select:disabled, textarea:disabled {
	background-color: var(--ua-surface) !important;
	border-color: var(--ua-border) !important;
	color: var(--ua-muted) !important;
	cursor: not-allowed;
}

label {
	color: var(--ua-text);
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 6px;
}

/* Botões Globais */
.bt1, .btn-primary, button.btn-primary, input[type="submit"] {
	background: var(--ua-text) !important;
	color: #FFFFFF !important;
	border: 1px solid var(--ua-text) !important;
	border-radius: var(--ua-radius-sm) !important;
	font-family: inherit;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	padding: 10px 24px !important;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.bt1:hover, .btn-primary:hover, input[type="submit"]:hover {
	background: #333333 !important;
	border-color: #333333 !important;
	color: #FFFFFF !important;
}

.bt2, .btn-secondary, .btn-default {
	background: transparent !important;
	color: var(--ua-text) !important;
	border: 1px solid var(--ua-border-strong) !important;
	border-radius: var(--ua-radius-sm) !important;
	font-family: inherit;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	padding: 10px 24px !important;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: none !important;
	cursor: pointer;
	transition: all 0.15s ease;
}

.bt2:hover, .btn-secondary:hover, .btn-default:hover {
	background: var(--ua-surface) !important;
	border-color: var(--ua-text) !important;
	color: var(--ua-text) !important;
}

/* ==========================================================================
   10. Modais, Diálogos & Popups
   ========================================================================== */

.modal-content {
	background: #FFFFFF !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: var(--ua-radius-md) !important;
	box-shadow: var(--ua-shadow-modal) !important;
	padding: 0 !important;
	overflow: hidden;
}

.modal-header {
	padding: 18px 24px !important;
	border-bottom: 1px solid var(--ua-border) !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modal-header .modal-title {
	font-size: 18px !important;
	font-weight: 600 !important;
	color: var(--ua-text) !important;
	margin: 0 !important;
}

.modal-header .close {
	font-size: 24px;
	font-weight: 300;
	color: var(--ua-muted);
	opacity: 0.7;
	margin: 0 !important;
	transition: opacity 0.15s ease;
}

.modal-header .close:hover {
	opacity: 1;
	color: var(--ua-text);
}

.modal-body {
	padding: 24px !important;
}

.modal-footer {
	padding: 16px 24px !important;
	border-top: 1px solid var(--ua-border) !important;
	background: var(--ua-surface-subtle);
}

/* Popup de Avisos Gerais */
.popup {
	background: #FFFFFF !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: var(--ua-radius-md) !important;
	box-shadow: var(--ua-shadow-modal) !important;
	max-width: 440px !important;
	padding: 32px 28px !important;
}

.popup h2, #popup-title {
	font-size: 20px !important;
	font-weight: 600 !important;
	margin-bottom: 12px !important;
	color: var(--ua-text) !important;
}

.popup p, #popup-text {
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--ua-muted) !important;
	margin-bottom: 24px !important;
}

.popup button, #popup-button {
	width: 100% !important;
	background: var(--ua-text) !important;
	color: #FFFFFF !important;
	border: 1px solid var(--ua-text) !important;
	border-radius: var(--ua-radius-sm) !important;
	height: 44px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	cursor: pointer;
}

/* ==========================================================================
   11. Portal do Artista - Redesign Moderno & Editorial Urban Arts
   ========================================================================== */

body.portal-artista-page {
	background: #F8F8F6 !important;
	background-image: 
		radial-gradient(at 15% 15%, rgba(255, 0, 143, 0.035) 0px, transparent 45%),
		radial-gradient(at 85% 75%, rgba(17, 17, 17, 0.03) 0px, transparent 50%) !important;
	background-attachment: fixed !important;
	color: #111111 !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Header no Portal: Consistente com ArtLab (Off-White #EAEAE6 com blur) */
body.portal-artista-page header.artlab-header {
	background: #FFFFFF !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.portal-artista-page header .topbar .logo img {
	filter: none !important;
}

body.portal-artista-page .badge-rede-artista {
	background: #111111 !important;
	color: #FFFFFF !important;
	box-shadow: none !important;
	border: none !important;
}

/* Ponto Rosa da Marca (Hot Pink #FF008F) */
.pink-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #FF008F;
	display: inline-block;
	box-shadow: 0 0 8px rgba(255, 0, 143, 0.7);
	flex-shrink: 0;
}

/* 1. Hero Section com Tipografia Editorial & Moldura de Arte */
.portal-hero-section {
	padding: 48px 0 20px;
}

.portal-container {
	max-width: 1170px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	box-sizing: border-box !important;
}

.portal-hero-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 36px;
}

.portal-hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #737373;
	background: rgba(0, 0, 0, 0.04);
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 16px;
}

.portal-hero-title {
	font-size: 38px !important;
	font-weight: 800 !important;
	line-height: 1.18 !important;
	letter-spacing: -0.03em !important;
	color: #111111 !important;
	margin: 0 0 14px !important;
	border: none !important;
	padding: 0 !important;
}

.highlight-pink {
	color: #111111;
	position: relative;
	display: inline-block;
}

.highlight-pink::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 2px;
	width: 100%;
	height: 3px;
	background: #FF008F;
	border-radius: 2px;
}

.portal-hero-subtitle {
	font-size: 15.5px !important;
	color: #666666 !important;
	line-height: 1.6 !important;
	max-width: 620px;
	margin: 0 auto !important;
	font-weight: 400;
}

/* Moldura de Galeria para o Banner Autoral */
.portal-cover-frame {
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 16px 44px -8px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: #FFFFFF;
	position: relative;
	line-height: 0;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portal-cover-frame:hover {
	box-shadow: 0 22px 56px -6px rgba(0, 0, 0, 0.12);
}

.portal-cover-image {
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	object-position: center;
	display: block;
}

.portal-cover-overlay-badge {
	position: absolute;
	bottom: 18px;
	left: 18px;
	background: rgba(17, 17, 17, 0.88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: #FFFFFF;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 8px 16px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.portal-cover-overlay-badge svg {
	color: #FF008F;
}

/* 2. Action Hub Section (Card de Abas Fluidas) */
.portal-hub-section {
	padding: 44px 0 84px;
	position: relative;
}

.portal-hub-card {
	max-width: 540px;
	margin: 0 auto;
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02);
	padding: 40px 42px;
	position: relative;
	transition: box-shadow 0.3s ease;
}

.portal-hub-card:hover {
	box-shadow: 0 24px 70px -8px rgba(0, 0, 0, 0.12);
}

/* Segmented Control / Pill Tabs */
.portal-tabs-nav {
	background: #EFEFEA;
	border-radius: 999px;
	padding: 5px;
	display: flex;
	gap: 4px;
	margin-bottom: 32px;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.portal-tab-btn {
	flex: 1;
	height: 44px;
	border: none;
	background: transparent;
	border-radius: 999px;
	font-family: 'Inter', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: #666666;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	cursor: pointer;
	transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
	user-select: none;
	padding: 0 16px;
}

.portal-tab-btn .tab-icon {
	color: #888888;
	transition: color 0.2s ease, transform 0.2s ease;
	flex-shrink: 0;
}

.portal-tab-btn:hover {
	color: #111111;
}

.portal-tab-btn:hover .tab-icon {
	color: #111111;
}

.portal-tab-btn.active {
	background: #FFFFFF;
	color: #111111;
	font-weight: 700;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.09);
}

.portal-tab-btn.active .tab-icon {
	color: #FF008F;
	transform: scale(1.05);
}

.tab-indicator-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: transparent;
	display: inline-block;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.portal-tab-btn.active .tab-indicator-dot {
	background: #FF008F;
	box-shadow: 0 0 8px rgba(255, 0, 143, 0.7);
}

/* Tab Panels */
.portal-tab-panel {
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.portal-tab-panel.active {
	opacity: 1;
	transform: translateY(0);
}

.portal-panel-header {
	margin-bottom: 26px;
	text-align: left;
}

.portal-panel-kicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #737373;
	margin-bottom: 8px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.portal-panel-title {
	font-size: 24px !important;
	font-weight: 800 !important;
	color: #111111 !important;
	letter-spacing: -0.025em !important;
	margin: 0 0 8px !important;
	line-height: 1.2 !important;
	border: none !important;
	padding: 0 !important;
}

.portal-panel-desc {
	font-size: 13.5px !important;
	color: #666666 !important;
	line-height: 1.55 !important;
	margin: 0 !important;
}

/* Formulários Modernos com Ícones de Campo */
.portal-form {
	margin-top: 4px;
}

.portal-field-group {
	margin-bottom: 20px !important;
	text-align: left !important;
}

.portal-field-label {
	display: block !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #333333 !important;
	margin-bottom: 7px !important;
}

.portal-field-label-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 7px !important;
}

.portal-forgot-link {
	font-size: 12px !important;
	color: #666666 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	transition: color 0.15s ease !important;
	cursor: pointer;
}

.portal-forgot-link:hover {
	color: #FF008F !important;
}

.portal-input-wrapper {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
}

.portal-input-wrapper .field-icon {
	position: absolute !important;
	left: 14px !important;
	color: #9E9E9C !important;
	pointer-events: none !important;
	transition: color 0.2s ease !important;
	z-index: 2;
}

.portal-modern-input {
	width: 100% !important;
	height: 48px !important;
	background: #FCFCFA !important;
	border: 1.5px solid #E5E5E2 !important;
	border-radius: 6px !important;
	padding: 10px 14px 10px 42px !important;
	font-size: 14px !important;
	color: #111111 !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
	box-sizing: border-box !important;
}

.portal-modern-input:focus {
	border-color: #111111 !important;
	background: #FFFFFF !important;
	box-shadow: 0 0 0 3px rgba(255, 0, 143, 0.14) !important;
	outline: none !important;
}

.portal-input-wrapper:focus-within .field-icon {
	color: #FF008F !important;
}

.portal-modern-input::placeholder {
	color: #999999 !important;
	font-weight: 400 !important;
}

select.portal-modern-input,
select.portal-select,
select.form-control,
.portal-select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 14px 14px !important;
	background-color: #FFFFFF !important;
	border: 1.5px solid #E5E7EB !important;
	border-radius: 9px !important;
	padding: 10px 38px 10px 14px !important;
	font-family: 'Inter', -apple-system, sans-serif !important;
	font-size: 14px !important;
	color: #111111 !important;
	height: 44px !important;
	min-height: 44px !important;
	line-height: normal !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: all 0.2s ease !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Botão Moderno com Micro-interação */
.portal-btn-action {
	margin-top: 10px !important;
	width: 100% !important;
	height: 52px !important;
	background: #111111 !important;
	color: #FFFFFF !important;
	border: 1px solid #111111 !important;
	border-radius: 6px !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
	float: none !important;
}

.portal-btn-action svg {
	transition: transform 0.2s ease;
}

.portal-btn-action:hover {
	background: #000000 !important;
	border-color: #000000 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24) !important;
	color: #FFFFFF !important;
}

.portal-btn-action:hover svg {
	transform: translateX(4px);
}

.portal-form-status-overlay {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	z-index: 10;
	text-align: center;
}

/* 3. Seção Curadoria (Cards & Timeline Editorial) */
.portal-curation-section {
	background: #FFFFFF;
	padding: 80px 0 96px;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	position: relative;
}

.portal-section-header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto 52px;
}

.portal-section-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #737373;
	background: #F4F4F0;
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.portal-section-title {
	font-size: 30px !important;
	font-weight: 800 !important;
	color: #111111 !important;
	letter-spacing: -0.025em !important;
	margin: 0 0 12px !important;
	border: none !important;
	padding: 0 !important;
	line-height: 1.25 !important;
}

.portal-section-desc {
	font-size: 15px !important;
	color: #666666 !important;
	line-height: 1.6 !important;
	margin: 0 !important;
}

.portal-steps-timeline {
	display: flex !important;
	gap: 20px !important;
	margin-bottom: 48px !important;
}

.portal-timeline-step {
	flex: 1 !important;
	min-width: 0 !important;
	background: #FAFAF8 !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	border-radius: 10px !important;
	padding: 30px 24px !important;
	display: flex !important;
	flex-direction: column !important;
	transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
	position: relative !important;
}

.portal-timeline-step:hover {
	border-color: #111111 !important;
	background: #FFFFFF !important;
	transform: translateY(-5px) !important;
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.07) !important;
}

.portal-timeline-step .step-card-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 18px !important;
}

.portal-timeline-step .step-badge {
	font-size: 12px !important;
	font-weight: 800 !important;
	color: #FFFFFF !important;
	background: #111111 !important;
	padding: 3px 9px !important;
	border-radius: 4px !important;
	letter-spacing: 0.04em !important;
}

.portal-timeline-step .step-icon-wrap {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	background: #EFEFEA !important;
	color: #111111 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.2s ease, color 0.2s ease !important;
}

.portal-timeline-step:hover .step-icon-wrap {
	background: #FF008F !important;
	color: #FFFFFF !important;
}

.portal-timeline-step .step-title {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #111111 !important;
	margin: 0 0 8px !important;
	letter-spacing: -0.01em !important;
}

.portal-timeline-step .step-desc {
	font-size: 13.5px !important;
	color: #666666 !important;
	line-height: 1.55 !important;
	margin: 0 !important;
}

/* Card de Diretrizes e Termos */
.portal-terms-card {
	background: #FAFAF8;
	border: 1px solid rgba(0, 0, 0, 0.07);
	border-radius: 10px;
	padding: 28px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	transition: box-shadow 0.2s ease;
}

.portal-terms-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.portal-terms-card .terms-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #737373;
	margin-bottom: 6px;
}

.portal-terms-card .terms-info {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.portal-terms-card .terms-info strong {
	font-size: 15px;
	font-weight: 700;
	color: #111111;
	margin-bottom: 4px;
}

.portal-terms-card .terms-info span {
	font-size: 13px;
	color: #666666;
	line-height: 1.5;
}

.portal-terms-card .terms-links {
	display: flex;
	gap: 12px;
	flex-shrink: 0;
}

.portal-btn-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: #FFFFFF !important;
	border: 1px solid #D8D8D8 !important;
	border-radius: 6px !important;
	padding: 10px 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #111111 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	white-space: nowrap !important;
}

.portal-btn-link:hover {
	background: #111111 !important;
	color: #FFFFFF !important;
	border-color: #111111 !important;
	text-decoration: none !important;
}

.portal-btn-link:hover svg {
	transform: translateX(3px);
}

.portal-btn-link svg {
	transition: transform 0.2s ease;
}

/* Modal de Recuperação de Senha */
.portal-modal-content {
	border-radius: 12px !important;
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16) !important;
	padding: 8px !important;
}

.portal-modal-header {
	border-bottom: 1px solid #EEEEEE !important;
	padding: 18px 20px 14px !important;
}

.portal-modal-header .modal-title {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #111111 !important;
}

.portal-modal-body {
	padding: 20px !important;
}

.portal-modal-hint {
	font-size: 13.5px !important;
	color: #666666 !important;
	line-height: 1.5 !important;
	margin-bottom: 18px;
}

.portal-modal-footer {
	border-top: 1px solid #EEEEEE !important;
	padding: 16px 0 0 !important;
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.portal-modal-btn-cancel {
	background: transparent !important;
	border: 1px solid #D8D8D8 !important;
	color: #555555 !important;
	border-radius: 6px !important;
	padding: 10px 18px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

.portal-modal-btn-submit {
	background: #111111 !important;
	border: 1px solid #111111 !important;
	color: #FFFFFF !important;
	border-radius: 6px !important;
	padding: 10px 22px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

.portal-modal-btn-submit:hover {
	background: #000000 !important;
}

/* Responsividade de Abas & Timeline */
@media (max-width: 991px) {
	.portal-hero-title {
		font-size: 30px !important;
	}

	.portal-hub-section {
		padding: 36px 0 60px;
	}

	.portal-hub-card {
		padding: 32px 24px;
	}

	.portal-steps-timeline {
		flex-wrap: wrap !important;
	}

	.portal-timeline-step {
		flex: 1 1 calc(50% - 10px) !important;
	}

	.portal-terms-card {
		flex-direction: column;
		align-items: flex-start;
	}

	.portal-terms-card .terms-links {
		width: 100%;
		flex-direction: column;
	}

	.portal-btn-link {
		justify-content: center;
	}
}

@media (max-width: 640px) {
	.portal-hero-title {
		font-size: 25px !important;
	}

	.portal-hub-card {
		padding: 24px 18px;
	}

	.portal-tabs-nav {
		margin-bottom: 24px;
	}

	.portal-tab-btn {
		font-size: 12.5px;
		height: 40px;
		padding: 0 10px;
	}

	.portal-steps-timeline {
		flex-direction: column !important;
	}

	.portal-timeline-step {
		flex: 1 1 100% !important;
	}
}

/* ==========================================================================
   12. Rodapé Institucional (Footer)
   ========================================================================== */

footer,
.portal-footer {
	background: #F7F7F5 !important;
	border-top: 1px solid #E5E5E5 !important;
	margin-top: 0 !important;
	padding: 56px 0 28px !important;
	color: #666666 !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.footer-container {
	max-width: 1170px !important;
	margin: 0 auto !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	box-sizing: border-box !important;
}

.footer-grid {
	display: flex !important;
	justify-content: space-between !important;
	gap: 40px !important;
	padding-bottom: 44px !important;
	border-bottom: 1px solid #E5E5E5 !important;
}

.footer-col {
	flex: 1 !important;
	min-width: 0 !important;
}

.footer-col-brand {
	flex: 1.4 !important;
}

.footer-brand {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-bottom: 14px !important;
}

.footer-logo-link {
	display: inline-block !important;
	line-height: 0 !important;
	text-decoration: none !important;
}

.footer-logo-img {
	height: 22px !important;
	width: auto !important;
	display: block !important;
}

.footer-brand-copy {
	font-size: 13px !important;
	color: #737373 !important;
	line-height: 1.55 !important;
	margin: 0 0 16px !important;
	max-width: 320px !important;
}

.footer-social-links a,
.footer-social-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	border: 1px solid #D8D8D8 !important;
	border-radius: 50% !important;
	color: #111111 !important;
	background: #FFFFFF !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}

.footer-social-links a:hover,
.footer-social-icon:hover {
	border-color: #111111 !important;
	background: #111111 !important;
	color: #FFFFFF !important;
	transform: translateY(-2px) !important;
}

.footer-col-title {
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #111111 !important;
	margin: 0 0 16px !important;
	border: none !important;
	padding: 0 !important;
}

.footer-nav-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

.footer-nav-list li {
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

.footer-nav-list a {
	font-size: 13px !important;
	color: #666666 !important;
	text-decoration: none !important;
	transition: color 0.15s ease !important;
	display: inline-block !important;
}

.footer-nav-list a:hover {
	color: #111111 !important;
	text-decoration: underline !important;
}


/* Barra Inferior (Bottom Bar) */
.footer-bottom-bar {
	display: flex !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	gap: 24px !important;
	padding-top: 24px !important;
	font-size: 12px !important;
	color: #8E8E93 !important;
	line-height: 1.6 !important;
}

.footer-legal-address p {
	margin: 0 !important;
	color: #737373 !important;
	font-size: 12px !important;
}

.footer-legal-address strong {
	color: #444444 !important;
}

.footer-copyright p {
	margin: 0 !important;
	text-align: right !important;
	white-space: nowrap !important;
	color: #8E8E93 !important;
	font-size: 12px !important;
}

/* Responsividade Geral */
@media (max-width: 991px) {
	.portal-actions-section {
		padding: 32px 0 48px;
	}

	.portal-cards-row {
		flex-direction: column !important;
		gap: 28px !important;
	}

	.portal-steps-row {
		flex-wrap: wrap !important;
	}

	.portal-step-col {
		flex: 1 1 calc(50% - 10px) !important;
	}

	.portal-terms-card {
		flex-direction: column !important;
		align-items: flex-start !important;
		padding: 24px !important;
	}

	.portal-terms-card .terms-links {
		width: 100% !important;
		flex-direction: column !important;
	}

	.portal-btn-link {
		width: 100% !important;
		text-align: center !important;
	}

	.footer-grid {
		flex-wrap: wrap !important;
		gap: 32px !important;
	}

	.footer-col {
		flex: 1 1 calc(50% - 20px) !important;
	}

	.footer-col-brand {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}

	.footer-bottom-bar {
		flex-direction: column !important;
		gap: 12px !important;
	}

	.footer-copyright p {
		text-align: left !important;
	}
}

@media (max-width: 640px) {
	.portal-steps-row {
		flex-direction: column !important;
	}

	.portal-step-col {
		flex: 1 1 100% !important;
	}

	.portal-card {
		padding: 28px 20px !important;
	}

	.footer-grid {
		flex-direction: column !important;
		gap: 28px !important;
	}

	.footer-col {
		flex: 1 1 100% !important;
	}
}

/* ==========================================================================
   13. Responsividade & Acessibilidade
   ========================================================================== */

@media (max-width: 991px) {
	.btn-menu {
		display: none !important;
	}

	header .menu {
		display: block !important;
		border-top: 1px solid var(--ua-border);
		background: #FFFFFF;
		overflow-x: auto;
		white-space: nowrap;
	}

	header .menu nav ul {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 0 20px;
		padding: 0 16px;
	}

	header .menu a {
		min-height: 42px;
		padding: 0 4px;
		flex-shrink: 0;
	}

	.main .aba-lateral {
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
		padding-bottom: 12px;
		margin-bottom: 24px;
		border-bottom: 1px solid var(--ua-border);
	}

	.main .aba-lateral .item {
		width: auto !important;
		flex-shrink: 0;
	}

	.tabela-vendas {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 767px) {
	.header-inner.topbar,
	header .topbar.container {
		min-height: 60px;
		height: 60px;
		padding: 0 16px;
		gap: 12px;
	}

	.header-left,
	header .topbar .logo {
		gap: 10px;
	}

	.brand-group {
		gap: 8px;
	}

	.brand-group .logo-ua-img,
	header .topbar .logo img {
		max-height: 26px !important;
	}

	.badge-artlab,
	.badge-rede-artista {
		font-size: 8.5px !important;
		padding: 3px 6px !important;
		letter-spacing: 0.08em !important;
		display: inline-flex !important;
		visibility: visible !important;
	}

	.header-right,
	header .topbar .col-right {
		gap: 10px;
	}

	.user-chip .txt,
	header .topbar .login .txt {
		max-width: 110px;
		font-size: 11px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.user-avatar,
	header .topbar .login .img {
		width: 30px;
		height: 30px;
	}

	.lang-selector img,
	header .topbar .navbar-text img {
		width: 18px;
		height: 13px;
	}

	header .menu .container {
		padding: 0 16px;
	}

	header .menu nav ul {
		gap: 0 16px;
	}

	header .menu a {
		min-height: 42px;
		font-size: 11px;
	}

	.listagem-artes {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
		gap: 16px !important;
	}

	.listagem-artes .arte .img {
		height: 180px !important;
	}

	.tabela-vendas {
		grid-template-columns: 1fr !important;
	}

	.home .cadastro .entrar {
		padding: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*, *:before, *:after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}


/* ==========================================================================
   13. Modo Escuro Moderno (Dark Mode) - Portal Inteiro
   ========================================================================== */

/* Botão Alternador de Tema */
.theme-toggle-btn {
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.05) !important;
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
	color: #444444 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	padding: 0 !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	position: relative !important;
	user-select: none !important;
	outline: none !important;
	line-height: 0 !important;
	flex-shrink: 0 !important;
}

.theme-toggle-btn:hover {
	background: rgba(0, 0, 0, 0.09) !important;
	color: #111111 !important;
	transform: scale(1.06) !important;
}

.theme-toggle-btn .theme-icon-sun {
	display: none !important;
}

.theme-toggle-btn .theme-icon-moon {
	display: block !important;
}

html.dark-theme .theme-toggle-btn {
	background: rgba(255, 255, 255, 0.09) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
	color: #F5F5F7 !important;
}

html.dark-theme .theme-toggle-btn:hover {
	background: rgba(255, 255, 255, 0.16) !important;
	color: #FF008F !important;
	transform: scale(1.06) !important;
	box-shadow: 0 0 12px rgba(255, 0, 143, 0.35) !important;
}

html.dark-theme .theme-toggle-btn .theme-icon-sun {
	display: block !important;
	color: #FFD600 !important;
}

html.dark-theme .theme-toggle-btn .theme-icon-moon {
	display: none !important;
}

/* Base Dark Mode */
html.dark-theme,
html.dark-theme body {
	background-color: #0E0E10 !important;
	color: #F4F4F6 !important;
}

html.dark-theme body.portal-artista-page {
	background: #0E0E10 !important;
	background-image: 
		radial-gradient(at 15% 15%, rgba(255, 0, 143, 0.07) 0px, transparent 45%),
		radial-gradient(at 85% 75%, rgba(255, 255, 255, 0.03) 0px, transparent 50%) !important;
	background-attachment: fixed !important;
}

/* Header Dark Mode */
html.dark-theme #header,
html.dark-theme header,
html.dark-theme header.artlab-header,
html.dark-theme body.portal-artista-page #header,
html.dark-theme body.portal-artista-page header.artlab-header {
	background: #0E0E10 !important;
	background: rgba(14, 14, 16, 0.95) !important;
	backdrop-filter: blur(16px) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 1px 12px rgba(0, 0, 0, 0.5) !important;
}

html.dark-theme #header .topbar,
html.dark-theme header .topbar {
	background: transparent !important;
}

html.dark-theme #header .topbar .logo img,
html.dark-theme header .topbar .logo img,
html.dark-theme .logo-ua-img,
html.dark-theme .footer-logo-img {
	filter: brightness(0) invert(1) !important;
}

html.dark-theme .badge-rede-artista {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #FFFFFF !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

html.dark-theme #header .topbar .user-data,
html.dark-theme #header .topbar .user-data .gallery,
html.dark-theme #header .topbar .user-data .gallery .store,
html.dark-theme #header .topbar .user-data .user,
html.dark-theme header .topbar .user-data .user,
html.dark-theme .header-right .user-data .gallery,
html.dark-theme .header-right .user-data .gallery .store,
html.dark-theme .header-right .user-data .user {
	color: #F4F4F6 !important;
}

html.dark-theme .header-right .user-data .pipe {
	color: rgba(255, 255, 255, 0.25) !important;
}

html.dark-theme .header-right .user-data .link-login:hover,
html.dark-theme .header-right .user-data .user:hover {
	color: #FF008F !important;
}

html.dark-theme .dropdown-menu-user {
	background: #18181B !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7) !important;
}

html.dark-theme .dropdown-menu-user a {
	color: #E4E4E7 !important;
}

html.dark-theme .dropdown-menu-user a:hover {
	background: #27272A !important;
	color: #FF008F !important;
}

/* Menus e Navegações Internas (Portal Inteiro) */
html.dark-theme nav#menu,
html.dark-theme .menu-navegacao,
html.dark-theme .nav-tabs,
html.dark-theme .abas-interno {
	background: #141416 !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme nav#menu a,
html.dark-theme .nav-tabs > li > a {
	color: #A1A1AA !important;
}

html.dark-theme nav#menu a:hover,
html.dark-theme nav#menu a.active,
html.dark-theme .nav-tabs > li.active > a {
	color: #FFFFFF !important;
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Hero Section (Portal do Artista) */
html.dark-theme .portal-hero-title {
	color: #FFFFFF !important;
}

html.dark-theme .highlight-pink {
	color: #FFFFFF !important;
}

html.dark-theme .portal-hero-subtitle {
	color: #A1A1AA !important;
}

html.dark-theme .portal-cover-frame {
	border-color: rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
	background: #18181B !important;
}

/* Action Hub Card (Abas Fluidas) Dark Mode */
html.dark-theme .portal-hub-card {
	background: #18181B !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.75), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

html.dark-theme .portal-tabs-nav {
	background: #111113 !important;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) !important;
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .portal-tab-btn {
	color: #8E8E93 !important;
}

html.dark-theme .portal-tab-btn .tab-icon {
	color: #71717A !important;
}

html.dark-theme .portal-tab-btn:hover {
	color: #FFFFFF !important;
}

html.dark-theme .portal-tab-btn:hover .tab-icon {
	color: #FFFFFF !important;
}

html.dark-theme .portal-tab-btn.active {
	background: #27272A !important;
	color: #FFFFFF !important;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4) !important;
}

html.dark-theme .portal-tab-btn.active .tab-icon {
	color: #FF008F !important;
}

html.dark-theme .portal-panel-kicker {
	color: #A1A1AA !important;
}

html.dark-theme .portal-panel-title {
	color: #FFFFFF !important;
}

html.dark-theme .portal-panel-desc {
	color: #A1A1AA !important;
}

html.dark-theme .portal-field-label {
	color: #D4D4D8 !important;
}

html.dark-theme .portal-forgot-link {
	color: #A1A1AA !important;
}

html.dark-theme .portal-forgot-link:hover {
	color: #FF008F !important;
}

html.dark-theme .portal-modern-input,
html.dark-theme .form-control {
	background: #121214 !important;
	border-color: rgba(255, 255, 255, 0.14) !important;
	color: #FFFFFF !important;
}

html.dark-theme .portal-modern-input:focus,
html.dark-theme .form-control:focus {
	border-color: #FF008F !important;
	background: #161619 !important;
	box-shadow: 0 0 0 3px rgba(255, 0, 143, 0.3) !important;
}

html.dark-theme .portal-input-wrapper .field-icon {
	color: #71717A !important;
}

html.dark-theme .portal-input-wrapper:focus-within .field-icon {
	color: #FF008F !important;
}

html.dark-theme .portal-modern-input::placeholder,
html.dark-theme .form-control::placeholder {
	color: #636366 !important;
}

html.dark-theme select.portal-modern-input,
html.dark-theme select.portal-select,
html.dark-theme select.form-control,
html.dark-theme .portal-select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 14px 14px !important;
	background-color: #141417 !important;
	border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
	color: #FFFFFF !important;
	padding-right: 38px !important;
	height: 44px !important;
	min-height: 44px !important;
	cursor: pointer !important;
}

html.dark-theme select.portal-modern-input option,
html.dark-theme select.form-control option {
	background: #18181B !important;
	color: #FFFFFF !important;
}

/* Botão de Ação Dark Mode (Glow Rosa Vibrante) */
html.dark-theme .portal-btn-action {
	background: #FF008F !important;
	color: #FFFFFF !important;
	border-color: #FF008F !important;
	box-shadow: 0 6px 24px rgba(255, 0, 143, 0.35) !important;
}

html.dark-theme .portal-btn-action:hover {
	background: #E60081 !important;
	border-color: #E60081 !important;
	box-shadow: 0 10px 32px rgba(255, 0, 143, 0.55) !important;
}

/* Curadoria Dark Mode */
html.dark-theme .portal-curation-section {
	background: #111113 !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .portal-section-badge {
	background: #18181B !important;
	color: #A1A1AA !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .portal-section-title {
	color: #FFFFFF !important;
}

html.dark-theme .portal-section-desc {
	color: #A1A1AA !important;
}

html.dark-theme .portal-timeline-step {
	background: #18181B !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4) !important;
}

html.dark-theme .portal-timeline-step:hover {
	background: #1E1E22 !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

html.dark-theme .portal-timeline-step .step-badge {
	background: #FFFFFF !important;
	color: #111111 !important;
}

html.dark-theme .portal-timeline-step .step-icon-wrap {
	background: #27272A !important;
	color: #FFFFFF !important;
}

html.dark-theme .portal-timeline-step:hover .step-icon-wrap {
	background: #FF008F !important;
	color: #FFFFFF !important;
}

html.dark-theme .portal-timeline-step .step-title {
	color: #FFFFFF !important;
}

html.dark-theme .portal-timeline-step .step-desc {
	color: #A1A1AA !important;
}

/* Card de Diretrizes Dark Mode */
html.dark-theme .portal-terms-card {
	background: #18181B !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .portal-terms-card .terms-badge {
	color: #A1A1AA !important;
}

html.dark-theme .portal-terms-card .terms-info strong {
	color: #FFFFFF !important;
}

html.dark-theme .portal-terms-card .terms-info span {
	color: #A1A1AA !important;
}

html.dark-theme .portal-btn-link {
	background: #27272A !important;
	border-color: rgba(255, 255, 255, 0.14) !important;
	color: #FFFFFF !important;
}

html.dark-theme .portal-btn-link:hover {
	background: #FFFFFF !important;
	color: #111111 !important;
	border-color: #FFFFFF !important;
}

/* Rodapé Dark Mode */
html.dark-theme .portal-footer {
	background: #09090B !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .footer-brand-copy {
	color: #A1A1AA !important;
}

html.dark-theme .footer-social-icon {
	background: #18181B !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	color: #FFFFFF !important;
}

html.dark-theme .footer-social-icon:hover {
	background: #FF008F !important;
	border-color: #FF008F !important;
	color: #FFFFFF !important;
}

html.dark-theme .footer-col-title {
	color: #FFFFFF !important;
}

html.dark-theme .footer-nav-list li a {
	color: #A1A1AA !important;
}

html.dark-theme .footer-nav-list li a:hover {
	color: #FF008F !important;
}

html.dark-theme .footer-bottom-bar {
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	color: #71717A !important;
}

html.dark-theme .footer-legal-address strong {
	color: #FFFFFF !important;
}

/* Telas Internas do Portal (Tabelas, Painéis, Caixas) */
html.dark-theme .box,
html.dark-theme .panel,
html.dark-theme .well,
html.dark-theme .card,
html.dark-theme .main-content {
	background-color: #18181B !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
	color: #F4F4F6 !important;
}

html.dark-theme table,
html.dark-theme .table {
	color: #E4E4E7 !important;
	background-color: transparent !important;
}

html.dark-theme .table > thead > tr > th,
html.dark-theme table th {
	background-color: #27272A !important;
	color: #FFFFFF !important;
	border-bottom: 2px solid rgba(255, 255, 255, 0.12) !important;
}

html.dark-theme .table > tbody > tr > td,
html.dark-theme table td {
	border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .table-striped > tbody > tr:nth-of-type(odd) {
	background-color: rgba(255, 255, 255, 0.02) !important;
}

html.dark-theme .table-hover > tbody > tr:hover {
	background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Modais Dark Mode */
html.dark-theme .modal-content,
html.dark-theme .portal-modal-content {
	background: #18181B !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8) !important;
	color: #FFFFFF !important;
}

html.dark-theme .modal-header,
html.dark-theme .portal-modal-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .modal-title,
html.dark-theme .portal-modal-header .modal-title {
	color: #FFFFFF !important;
}

html.dark-theme .modal-header .close,
html.dark-theme .portal-modal-header .close {
	color: #FFFFFF !important;
	opacity: 0.7 !important;
}

html.dark-theme .modal-header .close:hover,
html.dark-theme .portal-modal-header .close:hover {
	opacity: 1 !important;
}

html.dark-theme .portal-modal-hint {
	color: #A1A1AA !important;
}

html.dark-theme .modal-footer,
html.dark-theme .portal-modal-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme .portal-modal-btn-cancel {
	border-color: rgba(255, 255, 255, 0.16) !important;
	color: #D4D4D8 !important;
}

html.dark-theme .portal-modal-btn-cancel:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #FFFFFF !important;
}

html.dark-theme .portal-modal-btn-submit {
	background: #FF008F !important;
	border-color: #FF008F !important;
	color: #FFFFFF !important;
}

html.dark-theme .portal-modal-btn-submit:hover {
	background: #E60081 !important;
}



/* Avatar do Usuário na Header (Substituindo ico-user.png escuro por ícone claro e nítido) */
.user-data .user,
header .topbar .login .user {
	background: none !important;
	padding-right: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.header-user-avatar {
	width: 26px !important;
	height: 26px !important;
	border-radius: 50% !important;
	background: #111111 !important;
	color: #FFFFFF !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.2s ease !important;
	flex-shrink: 0 !important;
}

.user-data .user:hover .header-user-avatar {
	background: #FF008F !important;
	color: #FFFFFF !important;
	transform: scale(1.08) !important;
}

/* Ícone claro no Dark Mode (Fundo translúcido claro + ícone branco) */
html.dark-theme .header-user-avatar {
	background: rgba(255, 255, 255, 0.18) !important;
	color: #FFFFFF !important;
	border: 1px solid rgba(255, 255, 255, 0.28) !important;
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.1) !important;
}

html.dark-theme .user-data .user:hover .header-user-avatar {
	background: #FF008F !important;
	border-color: #FF008F !important;
	box-shadow: 0 0 14px rgba(255, 0, 143, 0.5) !important;
}

/* Seletor de Idioma no Footer */
.footer-lang-selector {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	margin-top: 14px !important;
}

.footer-lang-selector a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	color: #737373 !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	letter-spacing: 0.05em !important;
	opacity: 0.7 !important;
	transition: opacity 0.15s ease, color 0.15s ease !important;
}

.footer-lang-selector a:hover,
.footer-lang-selector a.active {
	opacity: 1 !important;
	color: #111111 !important;
	font-weight: 700 !important;
}

.footer-lang-selector a img {
	width: 17px !important;
	height: 12px !important;
	object-fit: cover !important;
	border-radius: 1px !important;
}

.footer-lang-selector .lang-divider {
	color: #D4D4D4 !important;
	font-size: 11px !important;
	margin: 0 2px !important;
}

html.dark-theme .footer-lang-selector a {
	color: #8E8E93 !important;
}

html.dark-theme .footer-lang-selector a:hover,
html.dark-theme .footer-lang-selector a.active {
	color: #FFFFFF !important;
}

html.dark-theme .footer-lang-selector .lang-divider {
	color: rgba(255, 255, 255, 0.2) !important;
}



/* ==========================================================================
   Modal de Recuperação de Senha (Design Moderno & Consistente)
   ========================================================================== */

#ExemploModalCentralizado .modal-dialog {
	max-width: 480px !important;
	margin: 80px auto !important;
}

.portal-modal-content {
	border-radius: 14px !important;
	padding: 28px 30px !important;
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22) !important;
	background: #FFFFFF !important;
	overflow: hidden !important;
}

html.dark-theme .portal-modal-content {
	background: #18181B !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8) !important;
}

.portal-modal-header {
	padding: 0 0 16px !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	float: none !important;
}

html.dark-theme .portal-modal-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.portal-modal-header .modal-title {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: #111111 !important;
	letter-spacing: -0.02em !important;
	margin: 0 !important;
}

html.dark-theme .portal-modal-header .modal-title {
	color: #FFFFFF !important;
}

.portal-modal-close {
	background: rgba(0, 0, 0, 0.05) !important;
	border: none !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #666666 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	padding: 0 !important;
	line-height: 0 !important;
	outline: none !important;
	opacity: 1 !important;
	float: none !important;
	margin: 0 !important;
}

.portal-modal-close:hover {
	background: rgba(0, 0, 0, 0.1) !important;
	color: #111111 !important;
	transform: scale(1.05) !important;
}

html.dark-theme .portal-modal-close {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #A1A1AA !important;
}

html.dark-theme .portal-modal-close:hover {
	background: rgba(255, 255, 255, 0.16) !important;
	color: #FFFFFF !important;
}

.portal-modal-body {
	padding: 20px 0 0 !important;
}

.portal-modal-hint {
	font-size: 14px !important;
	color: #666666 !important;
	line-height: 1.55 !important;
	margin: 0 0 20px !important;
}

html.dark-theme .portal-modal-hint {
	color: #A1A1AA !important;
}

/* Modal Footer & Buttons (Eliminando a barra branca no dark mode) */
.portal-modal-footer,
.modal-footer {
	background: transparent !important;
	background-color: transparent !important;
	border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
	padding: 18px 0 0 !important;
	margin-top: 24px !important;
	display: flex !important;
	justify-content: flex-end !important;
	align-items: center !important;
	gap: 10px !important;
	text-align: right !important;
}

html.dark-theme .portal-modal-footer,
html.dark-theme .modal-footer {
	background: transparent !important;
	background-color: transparent !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.portal-modal-btn-cancel {
	background: transparent !important;
	background-color: transparent !important;
	border: 1.5px solid #D8D8D8 !important;
	color: #666666 !important;
	border-radius: 6px !important;
	padding: 10px 20px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
	box-shadow: none !important;
	margin: 0 !important;
}

.portal-modal-btn-cancel:hover {
	background: rgba(0, 0, 0, 0.04) !important;
	color: #111111 !important;
	border-color: #AAAAAA !important;
}

html.dark-theme .portal-modal-btn-cancel {
	background: rgba(255, 255, 255, 0.06) !important;
	background-color: rgba(255, 255, 255, 0.06) !important;
	border-color: rgba(255, 255, 255, 0.16) !important;
	color: #E4E4E7 !important;
}

html.dark-theme .portal-modal-btn-cancel:hover {
	background: rgba(255, 255, 255, 0.12) !important;
	background-color: rgba(255, 255, 255, 0.12) !important;
	color: #FFFFFF !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
}

.portal-modal-btn-submit {
	background: #111111 !important;
	border: 1.5px solid #111111 !important;
	color: #FFFFFF !important;
	border-radius: 6px !important;
	padding: 10px 24px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
	margin: 0 !important;
}

.portal-modal-btn-submit:hover {
	background: #000000 !important;
	border-color: #000000 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
	color: #FFFFFF !important;
}

html.dark-theme .portal-modal-btn-submit {
	background: #FF008F !important;
	background-color: #FF008F !important;
	border-color: #FF008F !important;
	color: #FFFFFF !important;
	box-shadow: 0 4px 16px rgba(255, 0, 143, 0.4) !important;
}

html.dark-theme .portal-modal-btn-submit:hover {
	background: #E60081 !important;
	background-color: #E60081 !important;
	border-color: #E60081 !important;
	box-shadow: 0 8px 22px rgba(255, 0, 143, 0.55) !important;
	transform: translateY(-1px) !important;
	color: #FFFFFF !important;
}



/* ==========================================================================
   CADASTRO DE ARTISTA — WIZARD DE ONBOARDING MODERNO
   ========================================================================== */

/* Reset de legados do custom.css para a área de cadastro */
.seus-dados .abas-cadastro:after {
	display: none !important;
}

.seus-dados .form-cadastro .cadastro-passo1 .bloco-campos:before {
	display: none !important;
}

.seus-dados .lista-recebimento {
	float: none !important;
	left: auto !important;
	transform: none !important;
	padding: 0 !important;
	width: 100% !important;
	position: static !important;
	overflow: visible !important;
}

.seus-dados .box-recebimento {
	float: none !important;
	left: auto !important;
	transform: none !important;
	width: 100% !important;
	position: static !important;
}

.seus-dados .box-recebimento .campos {
	float: none !important;
	width: 100% !important;
}

.seus-dados .perfil {
	padding: 0 !important;
	overflow: visible !important;
}

.seus-dados .perfil .foto {
	float: none !important;
	position: static !important;
}

/* Container & Background */
.portal-cadastro-page {
	background-color: var(--ua-surface-subtle, #F8F9FA) !important;
	min-height: 100vh;
}

html.dark-theme .portal-cadastro-page {
	background-color: #0E0E10 !important;
}

.portal-wizard-main {
	padding: 48px 0 80px 0 !important;
}

.portal-wizard-container {
	max-width: 1060px !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
}

/* Hero / Header */
.portal-wizard-hero {
	text-align: center;
	margin-bottom: 36px;
}

.portal-wizard-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px;
	background: rgba(255, 0, 143, 0.08);
	border: 1px solid rgba(255, 0, 143, 0.22);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #FF008F;
	margin-bottom: 14px;
}

.portal-wizard-badge .badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #FF008F;
	box-shadow: 0 0 8px #FF008F;
}

.portal-wizard-title {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.025em;
	color: #111111;
	margin: 0 0 10px 0;
}

.portal-wizard-title .cor2 {
	color: #FF008F !important;
}

html.dark-theme .portal-wizard-title {
	color: #FFFFFF !important;
}

.portal-wizard-subtitle {
	font-size: 15px;
	line-height: 1.6;
	color: #6B7280;
	max-width: 640px;
	margin: 0 auto;
}

html.dark-theme .portal-wizard-subtitle {
	color: #9CA3AF !important;
}

/* Stepper Moderno */
.portal-stepper-wrapper {
	position: relative;
	margin-bottom: 32px;
	padding: 0 12px;
}

.portal-stepper-track {
	position: absolute;
	top: 26px;
	left: 48px;
	right: 48px;
	height: 4px;
	background: #E5E7EB;
	border-radius: 4px;
	z-index: 1;
}

html.dark-theme .portal-stepper-track {
	background: rgba(255, 255, 255, 0.1);
}

.portal-stepper-progress {
	height: 100%;
	background: linear-gradient(90deg, #FF008F 0%, #FF4D6D 100%);
	border-radius: 4px;
	transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s ease;
	width: 15%;
}

.main.passo1 .portal-stepper-progress {
	width: 15%;
	background: linear-gradient(90deg, #FF008F 0%, #FF4D6D 100%) !important;
}
.main.passo2 .portal-stepper-progress {
	width: 50% !important;
	background: #10B981 !important;
}
.main.passo3 .portal-stepper-progress {
	width: 100% !important;
	background: #10B981 !important;
}

.portal-stepper-nav.abas-cadastro {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	height: auto !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.portal-step-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #FFFFFF;
	padding: 8px 18px 8px 10px;
	border-radius: 999px;
	border: 1.5px solid #E5E7EB;
	cursor: pointer;
	transition: all 0.25s ease;
	user-select: none;
	width: auto !important;
	float: none !important;
}

html.dark-theme .portal-step-item {
	background: #18181C;
	border-color: rgba(255, 255, 255, 0.12);
}

.step-num-bubble {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F3F4F6;
	color: #6B7280;
	font-size: 13px;
	font-weight: 700;
	transition: all 0.25s ease;
	flex-shrink: 0;
}

html.dark-theme .step-num-bubble {
	background: #27272A;
	color: #9CA3AF;
}

.step-num-bubble .step-check-icon {
	display: none;
}

.step-text-wrap {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.step-kicker {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #9CA3AF;
	line-height: 1.2;
}

.step-label {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	line-height: 1.3;
	white-space: nowrap;
}

html.dark-theme .step-label {
	color: #E5E7EB;
}

/* Step Ativo / Concluído conforme a classe .main.passo1/.passo2/.passo3 */
.main.passo1 .step-item-1,
.main.passo2 .step-item-2,
.main.passo3 .step-item-3 {
	border-color: #FF008F !important;
	box-shadow: 0 4px 16px rgba(255, 0, 143, 0.2);
}

.main.passo1 .step-item-1 .step-num-bubble,
.main.passo2 .step-item-2 .step-num-bubble,
.main.passo3 .step-item-3 .step-num-bubble {
	background: #FF008F !important;
	color: #FFFFFF !important;
	box-shadow: 0 0 0 3px rgba(255, 0, 143, 0.25);
}

.main.passo1 .step-item-1 .step-label,
.main.passo2 .step-item-2 .step-label,
.main.passo3 .step-item-3 .step-label {
	color: #FF008F !important;
}

/* Passos já concluídos */
.main.passo2 .step-item-1,
.main.passo3 .step-item-1,
.main.passo3 .step-item-2 {
	border-color: #10B981 !important;
}

.main.passo2 .step-item-1 .step-num-bubble,
.main.passo3 .step-item-1 .step-num-bubble,
.main.passo3 .step-item-2 .step-num-bubble {
	background: #10B981 !important;
	color: #FFFFFF !important;
}

.main.passo2 .step-item-1 .step-num-bubble .step-num,
.main.passo3 .step-item-1 .step-num-bubble .step-num,
.main.passo3 .step-item-2 .step-num-bubble .step-num {
	display: none;
}

.main.passo2 .step-item-1 .step-num-bubble .step-check-icon,
.main.passo3 .step-item-1 .step-num-bubble .step-check-icon,
.main.passo3 .step-item-2 .step-num-bubble .step-check-icon {
	display: block;
}

/* Card Principal do Wizard */
.portal-wizard-card {
	background: #FFFFFF;
	border: 1px solid #E5E7EB;
	border-radius: 18px;
	box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.02);
	padding: 40px 44px;
	position: relative;
	transition: all 0.3s ease;
}

html.dark-theme .portal-wizard-card {
	background: #18181C !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

/* Cabeçalhos de Seção Internos */
.portal-section-header {
	margin-bottom: 28px;
	padding-bottom: 16px;
	border-bottom: 1px solid #F3F4F6;
}

html.dark-theme .portal-section-header {
	border-bottom-color: rgba(255, 255, 255, 0.07);
}

.portal-step-header-full {
	margin-bottom: 28px;
	padding-bottom: 18px;
	border-bottom: 1px solid #F3F4F6;
}

html.dark-theme .portal-step-header-full {
	border-bottom-color: rgba(255, 255, 255, 0.07);
}

.portal-section-title {
	font-size: 22px;
	font-weight: 700;
	color: #111111;
	margin: 0 0 6px 0;
	letter-spacing: -0.015em;
}

html.dark-theme .portal-section-title {
	color: #FFFFFF !important;
}

.portal-section-desc {
	font-size: 14px;
	color: #6B7280;
	margin: 0;
	line-height: 1.5;
}

html.dark-theme .portal-section-desc {
	color: #9CA3AF !important;
}

/* PASSO 1: Grid e Uploader */
.portal-step-grid {
	display: flex;
	gap: 36px;
	align-items: flex-start;
}

.portal-step-sidebar {
	flex: 0 0 310px;
}

.portal-step-content {
	flex: 1;
	min-width: 0;
}

/* Tip Box / Dicas: Card Neutro e Sofisticado */
.portal-tip-box {
	background: #FAFAFA !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 16px !important;
	padding: 24px !important;
	position: sticky !important;
	top: 24px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

html.dark-theme .portal-tip-box {
	background: #18181C !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

.portal-tip-icon {
	width: 38px !important;
	height: 38px !important;
	border-radius: 10px !important;
	background: rgba(255, 0, 143, 0.08) !important;
	color: #FF008F !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 14px !important;
}

html.dark-theme .portal-tip-icon {
	background: rgba(255, 0, 143, 0.15) !important;
	color: #FF008F !important;
}

.portal-tip-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #111111 !important;
	margin: 0 0 8px 0 !important;
	letter-spacing: -0.01em !important;
}

html.dark-theme .portal-tip-title {
	color: #FFFFFF !important;
}

.portal-tip-text {
	font-size: 13px !important;
	line-height: 1.55 !important;
	color: #4B5563 !important;
	margin: 0 0 16px 0 !important;
}

html.dark-theme .portal-tip-text {
	color: #A1A1AA !important;
}

.portal-tip-features {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

.portal-tip-features li {
	font-size: 12.5px !important;
	font-weight: 500 !important;
	color: #374151 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	line-height: 1.4 !important;
}

html.dark-theme .portal-tip-features li {
	color: #D4D4D8 !important;
}

.feature-check-icon {
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	background: rgba(16, 185, 129, 0.12) !important;
	color: #10B981 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

/* Card Moderno de Upload de Avatar */
.portal-avatar-uploader {
	background: #FAFAFA !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 16px !important;
	padding: 24px 28px !important;
	margin-bottom: 28px !important;
	display: flex !important;
	align-items: center !important;
	gap: 28px !important;
	transition: all 0.2s ease !important;
}

html.dark-theme .portal-avatar-uploader {
	background: #18181C !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

.portal-avatar-uploader .perfil {
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
}

.portal-avatar-uploader .perfil .foto {
	float: none !important;
	margin: 0 !important;
	position: static !important;
}

.portal-avatar-uploader .fileinput {
	display: flex !important;
	align-items: center !important;
	gap: 24px !important;
	margin: 0 !important;
}

/* Círculo do Preview */
.portal-avatar-uploader .perfil .foto .thumbnail,
.avatar-preview-circle {
	width: 104px !important;
	height: 104px !important;
	min-width: 104px !important;
	min-height: 104px !important;
	max-width: 104px !important;
	max-height: 104px !important;
	border-radius: 50% !important;
	border: 3px solid #FFFFFF !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
	background-color: #F3F4F6 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	cursor: pointer !important;
	position: relative !important;
	transition: all 0.2s ease !important;
	flex-shrink: 0 !important;
}

/* Remover o ícone font-icon antigo duplicado (\e900) */
.portal-avatar-uploader .perfil .foto .thumbnail:before,
.avatar-preview-circle:before {
	display: none !important;
	content: "" !important;
}

html.dark-theme .portal-avatar-uploader .perfil .foto .thumbnail,
html.dark-theme .avatar-preview-circle {
	border-color: #27272A !important;
	background-color: #27272A !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.portal-avatar-uploader .perfil .foto .thumbnail:hover,
.avatar-preview-circle:hover {
	transform: scale(1.02);
	border-color: #FF008F !important;
}

.avatar-placeholder-overlay {
	color: #9CA3AF;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	transition: all 0.2s ease !important;
}

.avatar-preview-circle:hover .avatar-placeholder-overlay {
	color: #FF008F;
}

/* Imagem carregada no preview */
.portal-avatar-uploader .thumbnail img,
.avatar-preview-circle img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	display: block !important;
}

/* Quando há imagem, esconder o placeholder de câmera */
.fileinput-exists .avatar-placeholder-overlay {
	display: none !important;
}

/* Coluna de Informações e Ações do Avatar */
.portal-avatar-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	flex: 1 !important;
}

.avatar-info-header {
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
}

.avatar-info-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #111111 !important;
	margin: 0 !important;
	letter-spacing: -0.01em !important;
}

html.dark-theme .avatar-info-title {
	color: #FFFFFF !important;
}

.avatar-info-desc {
	font-size: 12.5px !important;
	color: #6B7280 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

html.dark-theme .avatar-info-desc {
	color: #9CA3AF !important;
}

/* Botões de Ação do Avatar */
.avatar-actions {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin: 0 !important;
}

.portal-btn-choose,
.portal-btn-change {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	background: #111111 !important;
	color: #FFFFFF !important;
	height: 38px !important;
	min-height: 38px !important;
	padding: 0 16px !important;
	border-radius: 9px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	border: none !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
	width: auto !important;
}

.portal-btn-choose:hover,
.portal-btn-change:hover {
	background: #FF008F !important;
	box-shadow: 0 4px 14px rgba(255, 0, 143, 0.35) !important;
	color: #FFFFFF !important;
	transform: translateY(-1px) !important;
}

html.dark-theme .portal-btn-choose,
html.dark-theme .portal-btn-change {
	background: #27272A !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: #FFFFFF !important;
}

html.dark-theme .portal-btn-choose:hover,
html.dark-theme .portal-btn-change:hover {
	background: #FF008F !important;
	border-color: #FF008F !important;
}

/* Botão Remover Foto */
.portal-btn-remove {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	background: rgba(239, 68, 68, 0.08) !important;
	border: 1px solid rgba(239, 68, 68, 0.2) !important;
	color: #DC2626 !important;
	height: 38px !important;
	min-height: 38px !important;
	padding: 0 14px !important;
	border-radius: 9px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	width: auto !important;
}

.portal-btn-remove:hover {
	background: #DC2626 !important;
	color: #FFFFFF !important;
	border-color: #DC2626 !important;
	box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
	transform: translateY(-1px) !important;
}

html.dark-theme .portal-btn-remove {
	background: rgba(239, 68, 68, 0.15) !important;
	border-color: rgba(239, 68, 68, 0.3) !important;
	color: #F87171 !important;
}

html.dark-theme .portal-btn-remove:hover {
	background: #EF4444 !important;
	color: #FFFFFF !important;
	border-color: #EF4444 !important;
}

/* Controle Estrito dos Estados Jasny (fileinput-new vs fileinput-exists) */
.fileinput.fileinput-new .portal-btn-choose {
	display: inline-flex !important;
}
.fileinput.fileinput-new .portal-btn-change,
.fileinput.fileinput-new .portal-btn-remove {
	display: none !important;
}

.fileinput.fileinput-exists .portal-btn-choose {
	display: none !important;
}
.fileinput.fileinput-exists .portal-btn-change {
	display: inline-flex !important;
}
.fileinput.fileinput-exists .portal-btn-remove {
	display: inline-flex !important;
}

/* Chips de Especificações (Formatos, Dimensões, Peso) */
.portal-specs-chips {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	flex-wrap: wrap !important;
	margin-top: 2px !important;
}

.spec-chip {
	display: inline-flex !important;
	align-items: center !important;
	padding: 3px 8px !important;
	border-radius: 6px !important;
	background: #E5E7EB !important;
	color: #4B5563 !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	line-height: 1 !important;
}

html.dark-theme .spec-chip {
	background: #27272A !important;
	color: #9CA3AF !important;
}

/* Campos de Formulário Modernos */
.portal-form-group {
	margin-bottom: 22px;
}

.portal-label-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.portal-form-label {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #374151 !important;
	margin: 0 0 7px 0 !important;
	display: flex;
	align-items: center;
	gap: 8px;
}

html.dark-theme .portal-form-label {
	color: #E5E7EB !important;
}

.portal-char-counter {
	font-size: 11.5px;
	font-weight: 600;
	color: #9CA3AF;
	font-variant-numeric: tabular-nums;
}

.portal-input,
.portal-textarea {
	background: #FFFFFF !important;
	border: 1.5px solid #E5E7EB !important;
	border-radius: 9px !important;
	padding: 10px 14px !important;
	font-size: 14px !important;
	color: #111111 !important;
	box-shadow: none !important;
	transition: all 0.2s ease !important;
	width: 100% !important;
	height: 44px;
	box-sizing: border-box !important;
}

select.portal-select,
.portal-select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 14px 14px !important;
	background-color: #FFFFFF !important;
	border: 1.5px solid #E5E7EB !important;
	border-radius: 9px !important;
	padding: 10px 38px 10px 14px !important;
	font-size: 14px !important;
	color: #111111 !important;
	box-shadow: none !important;
	transition: all 0.2s ease !important;
	width: 100% !important;
	height: 44px !important;
	min-height: 44px !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
}

.portal-input:focus,
.portal-select:focus,
.portal-textarea:focus {
	border-color: #FF008F !important;
	box-shadow: 0 0 0 3px rgba(255, 0, 143, 0.18) !important;
	outline: none !important;
}

html.dark-theme .portal-input,
html.dark-theme .portal-textarea {
	background: #141417 !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	color: #FFFFFF !important;
}

html.dark-theme select.portal-select,
html.dark-theme .portal-select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 14px 14px !important;
	background-color: #141417 !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	color: #FFFFFF !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	padding-right: 38px !important;
	height: 44px !important;
	min-height: 44px !important;
	cursor: pointer !important;
}

html.dark-theme .portal-input:focus,
html.dark-theme .portal-select:focus,
html.dark-theme .portal-textarea:focus {
	border-color: #FF008F !important;
	box-shadow: 0 0 0 3px rgba(255, 0, 143, 0.3) !important;
}

.portal-input-locked {
	background: #F9FAFB !important;
	color: #6B7280 !important;
	cursor: not-allowed !important;
	border-style: dashed !important;
}

html.dark-theme .portal-input-locked {
	background: #17171B !important;
	color: #9CA3AF !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

.portal-form-hint {
	font-size: 12px;
	color: #9CA3AF;
	display: block;
	margin-top: 5px;
}

.portal-label-row .portal-form-label {
	margin-bottom: 0 !important;
}

.portal-badge-locked {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	padding: 3px 8px !important;
	background: #F3F4F6 !important;
	border: 1px solid #E5E7EB !important;
	border-radius: 6px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: #4B5563 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

.portal-badge-locked svg {
	display: inline-block !important;
	vertical-align: middle !important;
	flex-shrink: 0 !important;
	stroke: #D97706 !important;
}

html.dark-theme .portal-badge-locked {
	background: #27272A !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	color: #D4D4D8 !important;
}

html.dark-theme .portal-badge-locked svg {
	stroke: #FBBF24 !important;
}

.portal-badge-verified {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	background: rgba(16, 185, 129, 0.1);
	border: 1px solid rgba(16, 185, 129, 0.25);
	border-radius: 4px;
	font-size: 10.5px;
	font-weight: 700;
	color: #10B981;
}

/* PASSO 2: Cards de Agrupamento */
.portal-form-card {
	background: #FFFFFF;
	border: 1px solid #F3F4F6;
	border-radius: 14px;
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

html.dark-theme .portal-form-card {
	background: #1D1D22;
	border-color: rgba(255, 255, 255, 0.06);
	box-shadow: none;
}

.portal-card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid #F3F4F6;
}

html.dark-theme .portal-card-header {
	border-bottom-color: rgba(255, 255, 255, 0.06);
}

.portal-card-icon {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: rgba(255, 0, 143, 0.08);
	color: #FF008F;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.portal-card-title {
	font-size: 15px;
	font-weight: 700;
	color: #111111;
	margin: 0;
}

html.dark-theme .portal-card-title {
	color: #FFFFFF !important;
}

.portal-card-subtitle {
	font-size: 12px;
	color: #6B7280;
	margin: 0;
}

html.dark-theme .portal-card-subtitle {
	color: #9CA3AF !important;
}

/* Grids Responsivos */
.portal-grid {
	display: grid;
	gap: 16px;
}

.portal-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.portal-grid-3 {
	grid-template-columns: repeat(3, 1fr);
}

.portal-grid-4 {
	grid-template-columns: repeat(4, 1fr);
}

.portal-col-span-2 {
	grid-column: span 2;
}

/* PASSO 3: Formas de Recebimento */
/* Formas de Recebimento Uniformes (PIX, Itaú, PayPal) */
.portal-payment-options,
.lista-recebimento,
.seus-dados .lista-recebimento {
	overflow: visible !important;
}

.portal-payment-options {
	margin-bottom: 30px;
}

.portal-payment-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px !important;
	margin: 0 !important;
	padding-top: 10px !important;
	padding-bottom: 8px !important;
	overflow: visible !important;
}

.portal-pay-card {
	position: relative !important;
	height: 100% !important;
	overflow: visible !important;
}

.portal-pay-card .portal-pay-radio {
	position: absolute !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.portal-pay-card-label {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	background: #FFFFFF !important;
	border: 2px solid #E5E7EB !important;
	border-radius: 16px !important;
	padding: 26px 18px 22px 18px !important;
	min-height: 140px !important;
	height: 100% !important;
	cursor: pointer !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	position: relative !important;
	margin: 0 !important;
	width: 100% !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

html.dark-theme .portal-pay-card-label {
	background: #18181C !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.portal-pay-card-label:hover {
	transform: translateY(-2px) !important;
	border-color: rgba(255, 0, 143, 0.5) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}

html.dark-theme .portal-pay-card-label:hover {
	background: #1F1F24 !important;
	border-color: rgba(255, 0, 143, 0.5) !important;
}

.portal-pay-radio:checked + .portal-pay-card-label {
	border-color: #FF008F !important;
	background: rgba(255, 0, 143, 0.03) !important;
	box-shadow: 0 0 0 3px rgba(255, 0, 143, 0.2), 0 8px 24px rgba(255, 0, 143, 0.12) !important;
}

html.dark-theme .portal-pay-radio:checked + .portal-pay-card-label {
	background: rgba(255, 0, 143, 0.08) !important;
	box-shadow: 0 0 0 3px rgba(255, 0, 143, 0.3), 0 8px 24px rgba(255, 0, 143, 0.2) !important;
}

.portal-pay-logo-wrap {
	width: 60px !important;
	height: 60px !important;
	border-radius: 14px !important;
	background: #F3F4F6 !important;
	border: 1.5px solid #E5E7EB !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 14px !important;
	color: #1F2937 !important;
	transition: all 0.25s ease !important;
	padding: 0 !important;
	box-shadow: none !important;
}

html.dark-theme .portal-pay-logo-wrap {
	background: rgba(255, 255, 255, 0.05) !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
	color: #FFFFFF !important;
}

.portal-pay-card-label:hover .portal-pay-logo-wrap {
	border-color: rgba(255, 0, 143, 0.4) !important;
	color: #FF008F !important;
}

.portal-pay-radio:checked + .portal-pay-card-label .portal-pay-logo-wrap {
	border-color: #FF008F !important;
	background: rgba(255, 0, 143, 0.14) !important;
	color: #FF008F !important;
}

.portal-pay-icon {
	display: block !important;
}

.portal-pay-name {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #111111 !important;
	letter-spacing: 0.3px !important;
	margin: 0 !important;
	text-align: center !important;
}

html.dark-theme .portal-pay-name {
	color: #FFFFFF !important;
}

.portal-pay-desc,
.portal-pay-badge-rec,
.portal-pay-more-link {
	display: none !important;
}

/* Selected Payment Logo in Box */
.portal-selected-logo {
	width: 52px !important;
	height: 52px !important;
	border-radius: 12px !important;
	background: rgba(255, 0, 143, 0.12) !important;
	border: 1px solid rgba(255, 0, 143, 0.3) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #FF008F !important;
}

.portal-selected-logo svg {
	max-width: 28px !important;
	max-height: 28px !important;
	display: block !important;
}

/* Box de Recebimento Detalhado (Reset Radical) */
.portal-wizard-card .box-recebimento,
.portal-cadastro-page .box-recebimento,
.portal-receiving-box {
	background: #FAFAFA !important;
	border: 1.5px solid #E5E7EB !important;
	border-radius: 16px !important;
	padding: 24px 28px !important;
	margin-bottom: 30px !important;
	width: 100% !important;
	max-width: 100% !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	bottom: auto !important;
	position: static !important;
	float: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	clear: both !important;
}

html.dark-theme .portal-wizard-card .box-recebimento,
html.dark-theme .portal-cadastro-page .box-recebimento,
html.dark-theme .portal-receiving-box {
	background: #18181C !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
}

.portal-receiving-header {
	margin-bottom: 24px !important;
	padding-bottom: 18px !important;
	border-bottom: 1px solid #E5E7EB !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	float: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
}

html.dark-theme .portal-receiving-header {
	border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.portal-selected-header-left {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
}

.portal-wizard-card .box-recebimento .item,
.portal-receiving-header .item,
.portal-selected-method-item {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.portal-wizard-card .box-recebimento .item .logo,
.portal-selected-logo {
	width: 52px !important;
	height: 52px !important;
	min-width: 52px !important;
	min-height: 52px !important;
	max-width: 52px !important;
	max-height: 52px !important;
	border-radius: 12px !important;
	background: #FFFFFF !important;
	border: 1px solid #E5E7EB !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 6px !important;
	margin: 0 !important;
	float: none !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
	box-sizing: border-box !important;
}

.portal-wizard-card .box-recebimento .item .logo:after,
.portal-selected-logo:after {
	display: none !important;
	content: none !important;
}

.portal-selected-logo img,
.portal-wizard-card .box-recebimento .item .logo img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 auto !important;
}

/* Ocultar rigorosamente qualquer texto que caia dentro de .logo */
.portal-selected-logo p,
.portal-selected-logo h4,
.portal-selected-logo span,
.portal-selected-logo .portal-pay-name,
.portal-selected-logo .portal-pay-desc,
.portal-selected-logo .portal-pay-badge-rec,
.portal-selected-logo .portal-pay-more-link {
	display: none !important;
}

.portal-selected-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
}

.portal-selected-badge {
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: #9CA3AF !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	line-height: 1.2 !important;
}

.portal-selected-title {
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #111111 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	line-height: 1.2 !important;
}

html.dark-theme .portal-selected-title {
	color: #FFFFFF !important;
}

.portal-change-method-link,
.portal-wizard-card .box-recebimento .item a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #FF008F !important;
	padding: 8px 16px !important;
	background: rgba(255, 0, 143, 0.08) !important;
	border: 1px solid rgba(255, 0, 143, 0.22) !important;
	border-radius: 9px !important;
	text-decoration: none !important;
	text-transform: none !important;
	transition: all 0.2s ease !important;
	float: none !important;
	margin: 0 !important;
	cursor: pointer !important;
	line-height: 1 !important;
}

.portal-change-method-link:hover,
.portal-wizard-card .box-recebimento .item a:hover {
	background: rgba(255, 0, 143, 0.16) !important;
	color: #FF008F !important;
	text-decoration: none !important;
	transform: translateY(-1px) !important;
}

/* Reset dos campos */
.portal-wizard-card .box-recebimento .campos,
.portal-receiving-fields {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

/* Pills de Chave PIX */
.portal-pix-container {
	margin-top: 10px;
}

.portal-pix-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
}

.portal-pix-pill {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	background: #FFFFFF;
	border: 1.5px solid #E5E7EB;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #4B5563;
	cursor: pointer;
	transition: all 0.2s ease;
	user-select: none;
	margin: 0 !important;
}

html.dark-theme .portal-pix-pill {
	background: #141417;
	border-color: rgba(255, 255, 255, 0.12);
	color: #D4D4D8;
}

.portal-pix-pill input[type="radio"] {
	margin: 0 8px 0 0;
	accent-color: #FF008F;
}

.portal-pix-pill:hover {
	border-color: #FF008F;
}

.portal-pix-pill:has(input[type="radio"]:checked) {
	background: rgba(255, 0, 143, 0.06);
	border-color: #FF008F;
	color: #FF008F;
}

html.dark-theme .portal-pix-pill:has(input[type="radio"]:checked) {
	background: rgba(255, 0, 143, 0.15);
	color: #FFFFFF;
}

/* Barra de Ações do Wizard e Botão Próximo */
.portal-wizard-actions {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-top: 32px !important;
	padding-top: 24px !important;
	border-top: 1px solid #F3F4F6 !important;
	clear: both !important;
}

html.dark-theme .portal-wizard-actions {
	border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Reset radical de .bt1 para botões do wizard */
.portal-wizard-actions .portal-btn,
.portal-wizard-actions button.portal-btn,
.portal-wizard-actions a.portal-btn,
.portal-wizard-card .portal-wizard-actions .bt1 {
	width: auto !important;
	min-width: 200px !important;
	max-width: 100% !important;
	height: 48px !important;
	min-height: 48px !important;
	line-height: 1 !important;
	padding: 0 26px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	border-radius: 10px !important;
	font-family: 'Inter', -apple-system, sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em !important;
	text-transform: none !important;
	white-space: nowrap !important;
	float: none !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
	text-decoration: none !important;
}

.portal-wizard-actions .portal-btn-primary,
.portal-btn-primary {
	background: linear-gradient(135deg, #FF008F 0%, #E60081 100%) !important;
	color: #FFFFFF !important;
	border: none !important;
	box-shadow: 0 4px 14px rgba(255, 0, 143, 0.35) !important;
}

.portal-wizard-actions .portal-btn-primary:hover,
.portal-btn-primary:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 22px rgba(255, 0, 143, 0.45) !important;
	color: #FFFFFF !important;
}

.portal-wizard-actions .portal-btn-secondary,
.portal-btn-secondary {
	background: #F3F4F6 !important;
	color: #374151 !important;
	border: 1px solid #E5E7EB !important;
	box-shadow: none !important;
}

.portal-wizard-actions .portal-btn-secondary:hover,
.portal-btn-secondary:hover {
	background: #E5E7EB !important;
	color: #111111 !important;
	transform: translateY(-1px) !important;
}

html.dark-theme .portal-wizard-actions .portal-btn-secondary,
html.dark-theme .portal-btn-secondary {
	background: #27272A !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
	color: #E5E7EB !important;
}

html.dark-theme .portal-wizard-actions .portal-btn-secondary:hover,
html.dark-theme .portal-btn-secondary:hover {
	background: #3F3F46 !important;
	color: #FFFFFF !important;
}

.portal-wizard-actions .portal-btn-submit-wizard,
.portal-btn-submit-wizard {
	background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
	color: #FFFFFF !important;
	padding: 0 32px !important;
	height: 48px !important;
	min-height: 48px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35) !important;
	border: none !important;
}

.portal-wizard-actions .portal-btn-submit-wizard:hover,
.portal-btn-submit-wizard:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px rgba(16, 185, 129, 0.5) !important;
	color: #FFFFFF !important;
}

/* Responsividade */
@media (max-width: 992px) {
	.portal-step-grid {
		flex-direction: column !important;
		gap: 24px !important;
	}

	.portal-step-sidebar {
		flex: none !important;
		width: 100% !important;
		order: 2 !important;
	}

	.portal-step-content {
		order: 1 !important;
	}

	.portal-payment-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.portal-grid-3,
	.portal-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.portal-col-span-2 {
		grid-column: span 1;
	}
}

@media (max-width: 768px) {
	.portal-wizard-card {
		padding: 24px 18px;
	}

	.portal-stepper-nav {
		gap: 8px;
	}

	.step-text-wrap {
		display: none;
	}

	.portal-step-item {
		padding: 6px;
	}

	.portal-stepper-track {
		left: 24px;
		right: 24px;
	}

	.portal-avatar-uploader .fileinput {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center !important;
	}

	.portal-avatar-info {
		align-items: center !important;
		text-align: center !important;
	}

	.portal-specs-chips {
		justify-content: center !important;
	}

	.avatar-actions {
		justify-content: center !important;
		flex-wrap: wrap !important;
	}

	.avatar-actions {
		justify-content: center;
	}

	.portal-grid-2,
	.portal-grid-3,
	.portal-grid-4 {
		grid-template-columns: 1fr;
	}

	.portal-payment-grid {
		grid-template-columns: 1fr;
	}

	.portal-wizard-actions {
		display: flex !important;
		flex-direction: column-reverse !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 12px !important;
		width: 100% !important;
	}

	.portal-wizard-actions > div:empty {
		display: none !important;
	}

	.portal-wizard-actions .portal-btn,
	.portal-wizard-actions button.portal-btn,
	.portal-wizard-actions a.portal-btn,
	.portal-wizard-card .portal-wizard-actions .bt1 {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		height: 48px !important;
		min-height: 48px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		box-sizing: border-box !important;
		float: none !important;
		margin: 0 !important;
		border-radius: 10px !important;
	}
}


/* ==========================================================================
   TOPBAR UNIFICADA INTEGRADA (MODERN HEADER)
   ========================================================================== */

/* Desativar completamente o menu inferior antigo e linhas redundantes */
header .menu,
.artlab-header .menu,
#header .menu,
.header-menu-inner,
#nav-principal,
header .linha-menu,
.linha-menu {
	display: none !important;
}

#header.topbar-modern,
header.artlab-header.topbar-modern {
	position: relative;
	z-index: 1000;
	height: 68px !important;
	min-height: 68px !important;
}

.topbar-modern .header-inner.topbar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	height: 68px !important;
	max-width: 1240px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding: 0 20px !important;
	box-sizing: border-box !important;
}

/* Navegação Central */
.topbar-nav {
	display: flex;
	align-items: center;
	margin: 0 16px;
}

.topbar-nav-list {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.topbar-nav-item {
	position: relative;
	margin: 0;
	padding: 0;
}

.topbar-nav-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	height: 38px !important;
	min-height: 38px !important;
	padding: 0 14px !important;
	border-radius: 9px !important;
	font-family: 'Inter', -apple-system, sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #4B5563 !important;
	text-decoration: none !important;
	border: 1px solid transparent !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	line-height: 1 !important;
}

.topbar-nav-icon {
	color: #6B7280;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.topbar-nav-link:hover {
	background: rgba(0, 0, 0, 0.05);
	color: #111111;
}

.topbar-nav-link:hover .topbar-nav-icon {
	color: #111111;
}

/* Item Ativo */
.topbar-nav-item.active .topbar-nav-link {
	background: #FFFFFF;
	color: #111111;
	font-weight: 600;
	border-color: rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.topbar-nav-item.active .topbar-nav-icon {
	color: #FF008F !important;
}

/* Caret Dropdown */
.topbar-caret {
	transition: transform 0.2s ease;
	opacity: 0.6;
	margin-left: 1px;
}

.topbar-dropdown-item:hover .topbar-caret {
	transform: rotate(180deg);
	opacity: 1;
}

/* Dropdown Ajuda */
.topbar-dropdown-item {
	position: relative;
}

.dropdown-menu-ajuda {
	position: absolute;
	top: 100%;
	margin-top: 6px;
	right: 0;
	min-width: 220px;
	background: #FFFFFF;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	padding: 8px;
	z-index: 1050;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.08s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.08s, visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.08s;
	pointer-events: none;
}

/* Hover bridge invisível para eliminar o gap entre o botão e o menu */
.dropdown-menu-ajuda::before {
	content: '' !important;
	position: absolute !important;
	top: -12px !important;
	left: 0 !important;
	right: 0 !important;
	height: 12px !important;
	display: block !important;
	background: transparent !important;
	pointer-events: auto !important;
}

.topbar-dropdown-item:hover .dropdown-menu-ajuda,
.dropdown-menu-ajuda.active,
#dropdown-ajuda-menu.active {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
	pointer-events: auto !important;
	transition-delay: 0s !important;
}

.dropdown-menu-ajuda a {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 9px 12px !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #374151 !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
}

.dropdown-menu-ajuda a svg {
	color: #6B7280;
	flex-shrink: 0;
}

.dropdown-menu-ajuda a:hover {
	background: #F3F4F6 !important;
	color: #111111 !important;
}

.dropdown-menu-ajuda a:hover svg {
	color: #FF008F !important;
}

.dropdown-menu-ajuda a.active {
	background: rgba(255, 0, 143, 0.08) !important;
	color: #FF008F !important;
	font-weight: 600 !important;
}

/* Header Right e alinhamento vertical dos botões */
.topbar-modern .header-right,
header.topbar-modern .topbar .col-right {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	height: 68px !important;
	margin: 0 !important;
	padding: 0 !important;
}

.topbar-modern .user-data,
.topbar-modern .user-data.login {
	height: auto !important;
	line-height: normal !important;
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
}

.user-dropdown-wrapper {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	height: 38px !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Botão CTA: Enviar Artes */
/* Botão Alternador de Tema */
.topbar-modern .theme-toggle-btn {
	width: 38px !important;
	height: 38px !important;
	min-height: 38px !important;
	border-radius: 9px !important;
	background: rgba(0, 0, 0, 0.04) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	color: #4B5563 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	line-height: 1 !important;
	transition: all 0.2s ease !important;
}

.topbar-modern .theme-toggle-btn:hover {
	background: rgba(0, 0, 0, 0.08) !important;
	color: #111111 !important;
	transform: translateY(-1px) !important;
}

/* Botão do Usuário (Nome / Perfil) alinhado perfeitamente com os demais botões */
.topbar-user-pill {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	height: 38px !important;
	min-height: 38px !important;
	padding: 0 12px 0 8px !important;
	background: rgba(0, 0, 0, 0.04) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 9px !important;
	text-decoration: none !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	line-height: 1 !important;
}

.topbar-user-pill:hover {
	background: rgba(0, 0, 0, 0.08) !important;
	border-color: rgba(0, 0, 0, 0.14) !important;
	transform: translateY(-1px) !important;
}

.topbar-user-avatar {
	width: 24px !important;
	height: 24px !important;
	border-radius: 6px !important;
	background: rgba(0, 0, 0, 0.08) !important;
	color: #111111 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	flex-shrink: 0 !important;
}

.topbar-user-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.topbar-user-avatar svg {
	width: 14px !important;
	height: 14px !important;
	stroke: currentColor !important;
}

.topbar-user-name {
	font-family: 'Inter', -apple-system, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #111111 !important;
	line-height: 1 !important;
	max-width: 140px !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.topbar-user-pill .topbar-caret {
	color: #6B7280 !important;
	transition: transform 0.2s ease !important;
	margin-left: 1px !important;
}

.user-dropdown-wrapper:hover .topbar-caret {
	transform: rotate(180deg) !important;
}

/* User Dropdown */
#header .dropdown-menu-user,
.topbar-modern .dropdown-menu-user,
.user-dropdown-wrapper .dropdown-menu-user,
.dropdown-menu-user {
	position: absolute !important;
	top: 100% !important;
	margin-top: 6px !important;
	right: 0 !important;
	left: auto !important;
	width: 230px !important;
	min-width: 230px !important;
	max-width: 260px !important;
	background: #FFFFFF !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 12px !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
	padding: 8px !important;
	margin: 0 !important;
	z-index: 1050 !important;
	opacity: 0 !important;
	visibility: hidden !important;
	transform: translateY(-4px) !important;
	transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.08s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.08s, visibility 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.08s !important;
	pointer-events: none !important;
	float: none !important;
	clear: none !important;
	box-sizing: border-box !important;
}

/* Hover bridge invisível para eliminar o gap do menu do usuário */
#header .dropdown-menu-user::before,
.topbar-modern .dropdown-menu-user::before,
.user-dropdown-wrapper .dropdown-menu-user::before,
.dropdown-menu-user::before {
	content: '' !important;
	position: absolute !important;
	top: -12px !important;
	left: 0 !important;
	right: 0 !important;
	height: 12px !important;
	display: block !important;
	background: transparent !important;
	pointer-events: auto !important;
}

.user-dropdown-wrapper:hover .dropdown-menu-user,
.user-dropdown-wrapper .dropdown-menu-user.active,
#dropdown-user-menu.active {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateY(0) !important;
	pointer-events: auto !important;
	transition-delay: 0s !important;
}

.dropdown-user-header {
	padding: 10px 12px !important;
	margin-bottom: 6px !important;
	border-bottom: 1px solid #F3F4F6 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
	float: none !important;
	clear: both !important;
	box-sizing: border-box !important;
}

.dropdown-user-greeting {
	font-family: 'Inter', sans-serif !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: #9CA3AF !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

.dropdown-user-title {
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #111111 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	display: block !important;
}

#header .dropdown-menu-user a,
.topbar-modern .dropdown-menu-user a,
.user-dropdown-wrapper .dropdown-menu-user a,
.dropdown-menu-user a {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	height: 38px !important;
	min-height: 38px !important;
	line-height: 1 !important;
	padding: 0 12px !important;
	margin: 2px 0 !important;
	border-radius: 8px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #374151 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	transition: all 0.15s ease !important;
	float: none !important;
	clear: none !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

#header .dropdown-menu-user a svg,
.topbar-modern .dropdown-menu-user a svg,
.dropdown-menu-user a svg {
	width: 16px !important;
	height: 16px !important;
	color: #6B7280 !important;
	flex-shrink: 0 !important;
	stroke-width: 2 !important;
}

#header .dropdown-menu-user a:hover,
.topbar-modern .dropdown-menu-user a:hover,
.dropdown-menu-user a:hover {
	background: #F3F4F6 !important;
	color: #111111 !important;
}

#header .dropdown-menu-user a:hover svg,
.topbar-modern .dropdown-menu-user a:hover svg,
.dropdown-menu-user a:hover svg {
	color: #FF008F !important;
}

#header .dropdown-menu-user a.logout-link,
.topbar-modern .dropdown-menu-user a.logout-link,
.dropdown-menu-user a.logout-link {
	margin-top: 6px !important;
	border-top: 1px solid #F3F4F6 !important;
	padding-top: 8px !important;
	height: 38px !important;
	color: #EF4444 !important;
	font-weight: 600 !important;
}

#header .dropdown-menu-user a.logout-link svg,
.topbar-modern .dropdown-menu-user a.logout-link svg,
.dropdown-menu-user a.logout-link svg {
	color: #EF4444 !important;
}

#header .dropdown-menu-user a.logout-link:hover,
.topbar-modern .dropdown-menu-user a.logout-link:hover,
.dropdown-menu-user a.logout-link:hover {
	background: rgba(239, 68, 68, 0.08) !important;
	color: #DC2626 !important;
}

/* Botão de Login quando visitante */
.topbar-login-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 7px !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	color: #111111 !important;
	height: 38px !important;
	min-height: 38px !important;
	padding: 0 14px !important;
	border-radius: 9px !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	background: rgba(0, 0, 0, 0.04) !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	line-height: 1 !important;
	box-sizing: border-box !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	cursor: pointer !important;
}

.topbar-login-btn:hover {
	background: rgba(0, 0, 0, 0.08) !important;
	border-color: rgba(0, 0, 0, 0.16) !important;
	color: #111111 !important;
	transform: translateY(-1px) !important;
}

.topbar-login-btn .login-btn-txt-full {
	display: inline !important;
}

.topbar-login-btn .login-btn-txt-mobile {
	display: none !important;
}

/* ==========================================================================
   TOPBAR DARK MODE
   ========================================================================== */

html.dark-theme .topbar-nav-link {
	color: #9CA3AF;
}

html.dark-theme .topbar-nav-icon {
	color: #9CA3AF;
}

html.dark-theme .topbar-nav-link:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #FFFFFF;
}

html.dark-theme .topbar-nav-link:hover .topbar-nav-icon {
	color: #FFFFFF;
}

html.dark-theme .topbar-nav-item.active .topbar-nav-link {
	background: #1C1C20;
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

html.dark-theme .topbar-nav-item.active .topbar-nav-icon {
	color: #FF008F !important;
}

html.dark-theme .topbar-user-pill {
	background: rgba(255, 255, 255, 0.06) !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
}

html.dark-theme .topbar-user-pill:hover {
	background: rgba(255, 255, 255, 0.1) !important;
	border-color: rgba(255, 255, 255, 0.18) !important;
}

html.dark-theme .topbar-user-name {
	color: #FFFFFF !important;
}

html.dark-theme .topbar-user-avatar {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #FFFFFF !important;
}

html.dark-theme .topbar-user-pill .topbar-caret {
	color: #9CA3AF !important;
}

html.dark-theme #header .dropdown-menu-ajuda,
html.dark-theme #header .dropdown-menu-user,
html.dark-theme .topbar-modern .dropdown-menu-ajuda,
html.dark-theme .topbar-modern .dropdown-menu-user,
html.dark-theme .user-dropdown-wrapper .dropdown-menu-user,
html.dark-theme #dropdown-user-menu,
html.dark-theme #dropdown-ajuda-menu,
html.dark-theme .dropdown-menu-ajuda,
html.dark-theme .dropdown-menu-user {
	background: #18181B !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7) !important;
}

html.dark-theme #header .dropdown-user-header,
html.dark-theme .dropdown-user-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html.dark-theme #header .dropdown-user-greeting,
html.dark-theme .dropdown-user-greeting {
	color: #71717A !important;
}

html.dark-theme #header .dropdown-user-title,
html.dark-theme .dropdown-user-title {
	color: #FFFFFF !important;
}

html.dark-theme #header .dropdown-menu-ajuda a,
html.dark-theme #header .dropdown-menu-user a,
html.dark-theme .topbar-modern .dropdown-menu-ajuda a,
html.dark-theme .topbar-modern .dropdown-menu-user a,
html.dark-theme .user-dropdown-wrapper .dropdown-menu-user a,
html.dark-theme #dropdown-user-menu a,
html.dark-theme #dropdown-ajuda-menu a,
html.dark-theme .dropdown-menu-ajuda a,
html.dark-theme .dropdown-menu-user a {
	color: #D4D4D8 !important;
}

html.dark-theme #header .dropdown-menu-ajuda a svg,
html.dark-theme #header .dropdown-menu-user a svg,
html.dark-theme .topbar-modern .dropdown-menu-ajuda a svg,
html.dark-theme .topbar-modern .dropdown-menu-user a svg,
html.dark-theme .user-dropdown-wrapper .dropdown-menu-user a svg,
html.dark-theme #dropdown-user-menu a svg,
html.dark-theme #dropdown-ajuda-menu a svg,
html.dark-theme .dropdown-menu-ajuda a svg,
html.dark-theme .dropdown-menu-user a svg {
	color: #A1A1AA !important;
}

html.dark-theme #header .dropdown-menu-ajuda a:hover,
html.dark-theme #header .dropdown-menu-user a:hover,
html.dark-theme .topbar-modern .dropdown-menu-ajuda a:hover,
html.dark-theme .topbar-modern .dropdown-menu-user a:hover,
html.dark-theme .user-dropdown-wrapper .dropdown-menu-user a:hover,
html.dark-theme #dropdown-user-menu a:hover,
html.dark-theme #dropdown-ajuda-menu a:hover,
html.dark-theme .dropdown-menu-ajuda a:hover,
html.dark-theme .dropdown-menu-user a:hover {
	background: #27272A !important;
	color: #FFFFFF !important;
}

html.dark-theme #header .dropdown-menu-ajuda a:hover svg,
html.dark-theme #header .dropdown-menu-user a:hover svg,
html.dark-theme .topbar-modern .dropdown-menu-ajuda a:hover svg,
html.dark-theme .topbar-modern .dropdown-menu-user a:hover svg,
html.dark-theme .user-dropdown-wrapper .dropdown-menu-user a:hover svg,
html.dark-theme #dropdown-user-menu a:hover svg,
html.dark-theme #dropdown-ajuda-menu a:hover svg,
html.dark-theme .dropdown-menu-ajuda a:hover svg,
html.dark-theme .dropdown-menu-user a:hover svg {
	color: #FF008F !important;
}

html.dark-theme .dropdown-menu-ajuda a.active {
	background: rgba(255, 0, 143, 0.15) !important;
	color: #FF008F !important;
}

html.dark-theme #header .dropdown-menu-user a.logout-link,
html.dark-theme .topbar-modern .dropdown-menu-user a.logout-link,
html.dark-theme .user-dropdown-wrapper .dropdown-menu-user a.logout-link,
html.dark-theme #dropdown-user-menu a.logout-link,
html.dark-theme .dropdown-menu-user a.logout-link {
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	color: #F87171 !important;
}

html.dark-theme #header .dropdown-menu-user a.logout-link svg,
html.dark-theme .topbar-modern .dropdown-menu-user a.logout-link svg,
html.dark-theme .user-dropdown-wrapper .dropdown-menu-user a.logout-link svg,
html.dark-theme #dropdown-user-menu a.logout-link svg,
html.dark-theme .dropdown-menu-user a.logout-link svg {
	color: #F87171 !important;
}

html.dark-theme #header .dropdown-menu-user a.logout-link:hover,
html.dark-theme .topbar-modern .dropdown-menu-user a.logout-link:hover,
html.dark-theme .user-dropdown-wrapper .dropdown-menu-user a.logout-link:hover,
html.dark-theme #dropdown-user-menu a.logout-link:hover,
html.dark-theme .dropdown-menu-user a.logout-link:hover {
	background: rgba(239, 68, 68, 0.15) !important;
	color: #FCA5A5 !important;
}

html.dark-theme .topbar-login-btn {
	color: #FFFFFF !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	background: rgba(255, 255, 255, 0.06) !important;
}

html.dark-theme .topbar-login-btn:hover {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
	color: #FFFFFF !important;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & DRAWER TOTALMENTE ADAPTADO
   ========================================================================== */

.topbar-mobile-btn {
	display: none;
}

.topbar-mobile-btn .hamburger-icon-close {
	display: none !important;
}

.topbar-mobile-btn.active .hamburger-icon-bars {
	display: none !important;
}

.topbar-mobile-btn.active .hamburger-icon-close {
	display: block !important;
}

.topbar-mobile-drawer {
	display: none;
}

@media (max-width: 991px) {
	/* Prevenir qualquer scroll horizontal indesejado no mobile */
	html,
	body {
		overflow-x: hidden !important;
		max-width: 100vw !important;
	}

	/* Cor uniforme e moderna da Header no Mobile (sem quebras ou divisão de cores) */
	#header,
	header,
	header.artlab-header,
	#header.topbar-modern,
	body.portal-artista-page header.artlab-header,
	body.portal-artista-page #header {
		background: #FFFFFF !important;
		height: 60px !important;
		min-height: 60px !important;
		width: 100% !important;
		max-width: 100vw !important;
		border-top: none !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
		box-sizing: border-box !important;
	}

	/* Dark Mode para Header no Mobile */
	html.dark-theme #header,
	html.dark-theme header,
	html.dark-theme header.artlab-header,
	html.dark-theme #header.topbar-modern,
	html.dark-theme body.portal-artista-page header.artlab-header,
	html.dark-theme body.portal-artista-page #header {
		background: #0E0E10 !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
		box-shadow: 0 1px 8px rgba(0, 0, 0, 0.6) !important;
	}

	.topbar-modern .header-inner.topbar,
	header .topbar,
	.header-inner {
		background: transparent !important;
		height: 60px !important;
		min-height: 60px !important;
		padding: 0 14px !important;
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 8px !important;
		overflow: hidden !important;
	}

	/* Esconder abas desktop, botão CTA desktop e dropdown de usuário no mobile */
	.topbar-nav,
	.topbar-btn-upload,
	.topbar-modern .user-dropdown-wrapper {
		display: none !important;
	}

	.topbar-modern .user-data {
		display: inline-flex !important;
		align-items: center !important;
		margin: 0 !important;
		padding: 0 !important;
		height: auto !important;
	}

	/* Brand Group compacto no Mobile */
	.header-left,
	header .topbar .logo {
		height: 100% !important;
		display: flex !important;
		align-items: center !important;
	}

	.topbar-modern .brand-group {
		gap: 8px !important;
		display: inline-flex !important;
		align-items: center !important;
	}

	.topbar-modern .brand-group .logo-ua-img,
	header .topbar .logo img {
		height: 22px !important;
		max-height: 22px !important;
		width: auto !important;
	}

	.topbar-modern .brand-group .badge-rede-artista {
		font-size: 8px !important;
		padding: 2.5px 5px !important;
		letter-spacing: 0.05em !important;
	}

	/* Ações à direita no mobile */
	.topbar-modern .header-right,
	header.topbar-modern .topbar .col-right {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 8px !important;
		height: 100% !important;
		flex-shrink: 0 !important;
	}

	.topbar-modern .theme-toggle-btn {
		width: 36px !important;
		height: 36px !important;
		min-height: 36px !important;
		border-radius: 8px !important;
		flex-shrink: 0 !important;
	}

	/* Botão de Login quando visitante no mobile: formato e tamanho idênticos aos botões de controle (36px, raio 8px) */
	.topbar-login-btn {
		height: 36px !important;
		min-height: 36px !important;
		border-radius: 8px !important;
		padding: 0 11px !important;
		font-size: 11.5px !important;
		gap: 5px !important;
		white-space: nowrap !important;
		flex-shrink: 0 !important;
		line-height: 1 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-sizing: border-box !important;
	}

	.topbar-login-btn .login-btn-txt-full {
		display: none !important;
	}

	.topbar-login-btn .login-btn-txt-mobile {
		display: inline !important;
		font-weight: 600 !important;
	}

	/* Botão Hambúrguer Mobile */
	.topbar-mobile-btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 36px !important;
		height: 36px !important;
		border-radius: 8px !important;
		border: 1px solid rgba(0, 0, 0, 0.1) !important;
		background: rgba(0, 0, 0, 0.03) !important;
		color: #111111 !important;
		cursor: pointer !important;
		padding: 0 !important;
		margin: 0 !important;
		transition: all 0.2s ease !important;
		outline: none !important;
		box-sizing: border-box !important;
	}

	.topbar-mobile-btn:hover,
	.topbar-mobile-btn.active {
		background: rgba(0, 0, 0, 0.08) !important;
		color: #FF008F !important;
	}

	html.dark-theme .topbar-mobile-btn {
		border-color: rgba(255, 255, 255, 0.15) !important;
		background: rgba(255, 255, 255, 0.05) !important;
		color: #FFFFFF !important;
	}

	html.dark-theme .topbar-mobile-btn:hover,
	html.dark-theme .topbar-mobile-btn.active {
		background: rgba(255, 255, 255, 0.1) !important;
		color: #FF008F !important;
	}

	/* PAINEL MOBILE DRAWER COMPLETO E FLUIDO */
	.topbar-mobile-drawer {
		display: none;
		position: absolute !important;
		top: 60px !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-height: calc(100vh - 60px) !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		background: #FFFFFF !important;
		border-bottom: 2px solid rgba(0, 0, 0, 0.08) !important;
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
		padding: 16px 16px 24px !important;
		z-index: 1040 !important;
		flex-direction: column !important;
		gap: 12px !important;
		box-sizing: border-box !important;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 0.22s ease, transform 0.22s ease !important;
	}

	.topbar-mobile-drawer.active {
		display: flex !important;
		opacity: 1 !important;
		transform: translateY(0) !important;
	}

	html.dark-theme .topbar-mobile-drawer {
		background: #141417 !important;
		border-bottom-color: rgba(255, 255, 255, 0.1) !important;
		box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
	}

	/* Header do Usuário no Drawer */
	.mobile-drawer-profile {
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
		padding: 12px 14px !important;
		background: rgba(0, 0, 0, 0.03) !important;
		border: 1px solid rgba(0, 0, 0, 0.06) !important;
		border-radius: 12px !important;
		box-sizing: border-box !important;
	}

	html.dark-theme .mobile-drawer-profile {
		background: rgba(255, 255, 255, 0.04) !important;
		border-color: rgba(255, 255, 255, 0.08) !important;
	}

	.mobile-drawer-avatar {
		width: 38px !important;
		height: 38px !important;
		border-radius: 10px !important;
		background: #111111 !important;
		color: #FFFFFF !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		overflow: hidden !important;
		flex-shrink: 0 !important;
	}

	html.dark-theme .mobile-drawer-avatar {
		background: #27272A !important;
	}

	.mobile-drawer-avatar img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}

	.mobile-drawer-user-info {
		display: flex !important;
		flex-direction: column !important;
		gap: 2px !important;
		overflow: hidden !important;
	}

	.mobile-drawer-kicker {
		font-family: 'Inter', sans-serif !important;
		font-size: 10px !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.08em !important;
		color: #9CA3AF !important;
		line-height: 1.2 !important;
	}

	.mobile-drawer-username {
		font-family: 'Inter', sans-serif !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		color: #111111 !important;
		line-height: 1.3 !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
	}

	html.dark-theme .mobile-drawer-username {
		color: #FFFFFF !important;
	}

	/* Botão CTA Enviar Artes no Drawer */
	.mobile-drawer-btn-upload {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 8px !important;
		height: 44px !important;
		min-height: 44px !important;
		background: linear-gradient(135deg, #FF008F 0%, #E60081 100%) !important;
		color: #FFFFFF !important;
		font-family: 'Inter', sans-serif !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		padding: 0 16px !important;
		border-radius: 10px !important;
		text-decoration: none !important;
		box-shadow: 0 4px 14px rgba(255, 0, 143, 0.35) !important;
		box-sizing: border-box !important;
		transition: all 0.2s ease !important;
	}

	.mobile-drawer-btn-upload:hover {
		transform: translateY(-1px) !important;
		box-shadow: 0 6px 18px rgba(255, 0, 143, 0.45) !important;
		color: #FFFFFF !important;
	}

	/* Lista de Navegação no Drawer */
	.mobile-drawer-nav {
		display: flex !important;
		flex-direction: column !important;
		gap: 3px !important;
	}

	.mobile-nav-group-label {
		font-family: 'Inter', sans-serif !important;
		font-size: 10.5px !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.08em !important;
		color: #9CA3AF !important;
		padding: 8px 12px 4px !important;
		line-height: 1 !important;
	}

	.mobile-nav-link {
		display: flex !important;
		align-items: center !important;
		gap: 12px !important;
		height: 42px !important;
		min-height: 42px !important;
		padding: 0 14px !important;
		border-radius: 9px !important;
		font-family: 'Inter', sans-serif !important;
		font-size: 14px !important;
		font-weight: 500 !important;
		color: #374151 !important;
		text-decoration: none !important;
		transition: all 0.15s ease !important;
		box-sizing: border-box !important;
	}

	.mobile-nav-link svg {
		color: #6B7280 !important;
		flex-shrink: 0 !important;
	}

	.mobile-nav-link:hover {
		background: #F3F4F6 !important;
		color: #111111 !important;
	}

	.mobile-nav-link:hover svg {
		color: #FF008F !important;
	}

	.mobile-nav-link.active {
		background: rgba(255, 0, 143, 0.08) !important;
		color: #FF008F !important;
		font-weight: 600 !important;
	}

	.mobile-nav-link.active svg {
		color: #FF008F !important;
	}

	html.dark-theme .mobile-nav-link {
		color: #D4D4D8 !important;
	}

	html.dark-theme .mobile-nav-link svg {
		color: #9CA3AF !important;
	}

	html.dark-theme .mobile-nav-link:hover {
		background: #27272A !important;
		color: #FFFFFF !important;
	}

	html.dark-theme .mobile-nav-link:hover svg {
		color: #FF008F !important;
	}

	html.dark-theme .mobile-nav-link.active {
		background: rgba(255, 0, 143, 0.15) !important;
		color: #FF008F !important;
	}

	.mobile-nav-divider {
		height: 1px !important;
		background: #E5E7EB !important;
		margin: 6px 4px !important;
		box-sizing: border-box !important;
	}

	html.dark-theme .mobile-nav-divider {
		background: rgba(255, 255, 255, 0.08) !important;
	}

	/* Link de Logout no Mobile */
	.mobile-nav-logout {
		color: #EF4444 !important;
		font-weight: 600 !important;
	}

	.mobile-nav-logout svg {
		color: #EF4444 !important;
	}

	.mobile-nav-logout:hover {
		background: rgba(239, 68, 68, 0.08) !important;
		color: #DC2626 !important;
	}

	html.dark-theme .mobile-nav-logout {
		color: #F87171 !important;
	}

	html.dark-theme .mobile-nav-logout svg {
		color: #F87171 !important;
	}

	html.dark-theme .mobile-nav-logout:hover {
		background: rgba(239, 68, 68, 0.15) !important;
		color: #FCA5A5 !important;
	}
}

@media (max-width: 480px) {
	.topbar-modern .header-inner.topbar {
		padding: 0 10px !important;
		gap: 6px !important;
	}

	.topbar-modern .brand-group {
		gap: 5px !important;
	}

	.topbar-modern .brand-group .logo-ua-img,
	header .topbar .logo img {
		height: 19px !important;
		max-height: 19px !important;
	}

	.topbar-modern .brand-group .badge-rede-artista {
		font-size: 7.5px !important;
		padding: 2px 4px !important;
	}

	.topbar-modern .theme-toggle-btn {
		width: 34px !important;
		height: 34px !important;
		min-height: 34px !important;
		border-radius: 7px !important;
	}

	.topbar-login-btn {
		height: 34px !important;
		min-height: 34px !important;
		border-radius: 7px !important;
		padding: 0 9px !important;
		font-size: 11px !important;
		gap: 4px !important;
	}

	.topbar-mobile-btn {
		width: 34px !important;
		height: 34px !important;
		min-height: 34px !important;
		border-radius: 7px !important;
	}
}


@media (max-width: 768px) {
	.portal-payment-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
	.portal-pay-card-label {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		padding: 16px 20px !important;
		min-height: auto !important;
		gap: 16px !important;
		text-align: left !important;
	}
	.portal-pay-logo-wrap {
		margin-bottom: 0 !important;
		width: 48px !important;
		height: 48px !important;
		flex-shrink: 0 !important;
	}
	.portal-pay-name {
		font-size: 15px !important;
		text-align: left !important;
	}
}

/* Enhancements for portal wizard elements */
.portal-badge-locked {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 5px !important;
	white-space: nowrap !important;
}

html.dark-theme .portal-selected-logo,
html.dark-theme .box-recebimento .item .logo,
html.dark-theme .portal-wizard-card .box-recebimento .item .logo {
	background: #18181B !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: #FFFFFF !important;
}

@media (max-width: 768px) {
	.portal-wizard-actions,
	.main.cadastro .portal-wizard-actions,
	.portal-wizard-card .portal-wizard-actions {
		display: flex !important;
		flex-direction: column-reverse !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 12px !important;
		width: 100% !important;
		float: none !important;
		clear: both !important;
	}

	.portal-wizard-actions .portal-btn,
	.portal-wizard-actions button,
	.portal-wizard-actions a,
	.portal-wizard-actions .bt1,
	.portal-wizard-actions .bt2,
	.portal-wizard-actions .prev,
	.portal-wizard-actions .next,
	.portal-wizard-actions .fl,
	.portal-wizard-actions .fr,
	.main.cadastro .portal-wizard-actions .bt1,
	.main.cadastro .portal-wizard-actions .bt2,
	.main.cadastro .portal-wizard-actions a,
	.main.cadastro .portal-wizard-actions button {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		height: 48px !important;
		min-height: 48px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		box-sizing: border-box !important;
		float: none !important;
		margin: 0 !important;
		border-radius: 10px !important;
	}
}

/* ==========================================================================
   STICKY FOOTER GLOBAL: Garante o rodapé sempre na base da viewport em todas as páginas
   ========================================================================== */
html {
	height: 100%;
}

body {
	display: flex !important;
	flex-direction: column !important;
	min-height: 100vh !important;
}

.main,
main,
#main,
.portal-container,
.portal-hub-section,
.portal-wizard-container,
.portal-success-wrapper,
.cadastro,
.conteudo-principal {
	flex: 1 0 auto !important;
}

.main {
	min-height: calc(100vh - 420px) !important;
	padding-bottom: 60px !important;
}

footer,
.portal-footer,
#footer {
	margin-top: auto !important;
	flex-shrink: 0 !important;
}

/* ==========================================================================
   TELA DE SUCESSO DO CADASTRO & SUAS ARTES NO DARK MODE
   ========================================================================== */
html.dark-theme .main.artes-aprovadas .conteudo h1,
html.dark-theme .main.artes-pendentes .conteudo h1,
html.dark-theme .main.artes-reprovadas .conteudo h1,
html.dark-theme .main.minhas-series .conteudo h1,
html.dark-theme .main .conteudo h1,
html.dark-theme .main h1 {
	color: #F3F4F6 !important;
}

html.dark-theme .main .divisor,
html.dark-theme .divisor {
	background: rgba(255, 255, 255, 0.08) !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	border: none !important;
	height: 1px !important;
}

html.dark-theme .main .filtro span {
	color: #9CA3AF !important;
}

html.dark-theme .main .filtro .dropdown button {
	background: #18181B !important;
	border-color: #27272A !important;
	color: #F3F4F6 !important;
}

.portal-success-wrapper {
	flex: 1 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 60px 15px 80px !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

.portal-success-card {
	max-width: 620px !important;
	margin: 0 auto !important;
	background: #141416 !important;
	border: 1px solid #232326 !important;
	border-radius: 20px !important;
	padding: 48px 40px !important;
	text-align: center !important;
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45) !important;
}

html:not(.dark-theme) .portal-success-card {
	background: #FFFFFF !important;
	border: 1px solid #EBEBEB !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08) !important;
}

.portal-success-icon-wrap {
	width: 80px !important;
	height: 80px !important;
	margin: 0 auto 24px !important;
	border-radius: 50% !important;
	background: rgba(16, 185, 129, 0.12) !important;
	border: 2px solid rgba(16, 185, 129, 0.3) !important;
	color: #10B981 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.portal-success-title {
	font-size: 28px !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	margin: 0 0 12px 0 !important;
	letter-spacing: -0.02em !important;
}

html:not(.dark-theme) .portal-success-title {
	color: #111111 !important;
}

.portal-success-name {
	color: #FF007F !important;
	font-weight: 700 !important;
}

.portal-success-subtitle {
	font-size: 16px !important;
	color: #A1A1AA !important;
	margin: 0 0 24px 0 !important;
	line-height: 1.5 !important;
}

html:not(.dark-theme) .portal-success-subtitle {
	color: #555555 !important;
}

.portal-success-divider {
	width: 60px !important;
	height: 2px !important;
	background: #27272A !important;
	margin: 0 auto 24px !important;
	border-radius: 2px !important;
}

html:not(.dark-theme) .portal-success-divider {
	background: #E5E7EB !important;
}

.portal-success-message {
	font-size: 14px !important;
	color: #71717A !important;
	line-height: 1.6 !important;
	margin: 0 0 32px 0 !important;
}

html:not(.dark-theme) .portal-success-message {
	color: #666666 !important;
}

.portal-success-link {
	color: #FF007F !important;
	text-decoration: underline !important;
	font-weight: 500 !important;
	transition: opacity 0.2s ease !important;
}

.portal-success-link:hover {
	opacity: 0.8 !important;
	text-decoration: underline !important;
}

.portal-success-actions {
	display: flex !important;
	justify-content: center !important;
	gap: 16px !important;
}

.portal-success-actions .portal-btn {
	padding: 12px 28px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	border-radius: 10px !important;
}

/* Fallback geral para elementos legados com classe .cor2 na tela de cadastro/sucesso */
.dark-theme .cor2,
html.dark-theme .main .cor2,
html.dark-theme .main .conteudo a.cor2,
html.dark-theme .main .conteudo a {
	color: #FF007F !important;
}

@media (max-width: 767px) {
	.portal-success-card {
		padding: 36px 20px !important;
	}
	.portal-success-title {
		font-size: 22px !important;
	}
	.portal-success-actions .portal-btn {
		width: 100% !important;
	}
}


/* ==========================================================================
   MINHAS ARTES — MODERNA ARQUITETURA VISUAL (ArtLab / Urban Arts)
   ========================================================================== */

/* Container de Minhas Artes e Páginas do Portal Alinhados Perfeitamente ao Header (1240px, padding 20px) */
.suas-artes .main .container,
.main.artes-aprovadas .container,
.main.artes-pendentes .container,
.main.artes-reprovadas .container,
.main.series .container,
.main.remover-artes .container,
.enviar-novas-artes .main .container,
.enviar-novas-artes .main > .container,
.main.enviar-novas-artes .container,
.main.como-enviar-arte .container,
.main.formatos-possiveis .container,
.main.termos-uso .container {
	max-width: 1240px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	box-sizing: border-box !important;
}

/* Subnavegação Lateral (.aba-lateral) Refinada */
.main .aba-lateral {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	padding: 0 !important;
	margin: 0 0 30px 0 !important;
	width: 100% !important;
}

.main .aba-lateral .item {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	padding: 10px 14px !important;
	margin: 0 !important;
	border: 1px solid transparent !important;
	border-radius: 10px !important;
	color: var(--ua-text-secondary) !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	background: transparent !important;
	text-align: left !important;
	width: 100% !important;
	text-decoration: none !important;
	transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
	box-sizing: border-box !important;
}

.main .aba-lateral .item:hover {
	background: var(--ua-surface-hover) !important;
	color: var(--ua-text) !important;
	border-color: var(--ua-border-light) !important;
}

.main .aba-lateral .item .ico {
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	border-radius: 8px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	color: var(--ua-muted) !important;
	box-shadow: none !important;
	margin: 0 !important;
	line-height: normal !important;
	transition: all 0.18s ease !important;
}

.main .aba-lateral .item:hover .ico {
	color: var(--ua-text) !important;
	border-color: var(--ua-border-strong) !important;
	background: var(--ua-bg) !important;
}

/* Abas Laterais — Estados Ativos Elegantes (Rosa ArtLab) */
.enviar-novas-artes .como-enviar-arte .aba-lateral .item1,
.enviar-novas-artes .formatos-possiveis .aba-lateral .item2,
.enviar-novas-artes .enviar-novas-artes .aba-lateral .item3,
.enviar-novas-artes .termos-uso .aba-lateral .item4,
.suas-artes .artes-aprovadas .aba-lateral .item1,
.suas-artes .artes-pendentes .aba-lateral .item2,
.suas-artes .artes-reprovadas .aba-lateral .item3,
.suas-artes .series .aba-lateral .item4,
.suas-artes .landing-page .aba-lateral .item5,
.suas-artes .remover-artes .aba-lateral .item6,
.suas-vendas .tabela .aba-lateral .item1,
.suas-vendas .dashboard .aba-lateral .item2,
.main .aba-lateral .item.ativo {
	background: rgba(255, 0, 143, 0.08) !important;
	border: 1px solid rgba(255, 0, 143, 0.28) !important;
	color: var(--ua-text) !important;
	font-weight: 600 !important;
}

.enviar-novas-artes .como-enviar-arte .aba-lateral .item1 .ico,
.enviar-novas-artes .formatos-possiveis .aba-lateral .item2 .ico,
.enviar-novas-artes .enviar-novas-artes .aba-lateral .item3 .ico,
.enviar-novas-artes .termos-uso .aba-lateral .item4 .ico,
.suas-artes .artes-aprovadas .aba-lateral .item1 .ico,
.suas-artes .artes-pendentes .aba-lateral .item2 .ico,
.suas-artes .artes-reprovadas .aba-lateral .item3 .ico,
.suas-artes .series .aba-lateral .item4 .ico,
.suas-artes .landing-page .aba-lateral .item5 .ico,
.suas-artes .remover-artes .aba-lateral .item6 .ico,
.suas-vendas .tabela .aba-lateral .item1 .ico,
.suas-vendas .dashboard .aba-lateral .item2 .ico,
.main .aba-lateral .item.ativo .ico {
	background: #FF008F !important;
	border-color: #FF008F !important;
	color: #FFFFFF !important;
	box-shadow: 0 2px 10px rgba(255, 0, 143, 0.4) !important;
}

/* Header & Títulos de Minhas Artes */
.artes-page-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
	margin-bottom: 8px !important;
}

.artes-page-title {
	font-family: 'Inter', 'Montserrat', sans-serif !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	color: var(--ua-text) !important;
	letter-spacing: -0.02em !important;
	margin: 0 0 4px 0 !important;
	line-height: 1.25 !important;
}

.artes-page-subtitle {
	font-family: 'Inter', sans-serif !important;
	font-size: 13.5px !important;
	color: var(--ua-muted) !important;
	margin: 0 !important;
	line-height: 1.5 !important;
}

/* Divisor Normalizado */
.divisor,
.main .divisor {
	width: 100% !important;
	box-sizing: border-box !important;
	height: 1px !important;
	background: rgba(0, 0, 0, 0.08) !important;
	border: none !important;
	margin: 18px 0 22px 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: both !important;
}

/* Barra de Filtros e Ordenação */
.filtro {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 0 24px 0 !important;
	float: none !important;
}

.filtro .filtro-label {
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--ua-muted) !important;
	margin: 0 !important;
}

.filtro-dropdown .dropdown-toggle,
#filtroArtes {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 14px !important;
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 8px !important;
	color: var(--ua-text) !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	box-shadow: none !important;
	transition: all 0.15s ease !important;
	cursor: pointer !important;
}

.filtro-dropdown .dropdown-toggle:hover,
.filtro-dropdown .dropdown-toggle:focus,
#filtroArtes:hover {
	border-color: var(--ua-border-strong) !important;
	background: var(--ua-surface-hover) !important;
	color: var(--ua-text) !important;
}

.filtro-dropdown .dropdown-chevron {
	color: var(--ua-muted) !important;
	transition: transform 0.2s ease !important;
}

.filtro-dropdown.open .dropdown-chevron {
	transform: rotate(180deg) !important;
}

.filtro-dropdown .dropdown-menu {
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35) !important;
	padding: 6px !important;
	min-width: 175px !important;
	margin-top: 4px !important;
}

.filtro-dropdown .dropdown-menu li a {
	padding: 8px 12px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important;
	color: var(--ua-text) !important;
	border-radius: 6px !important;
	display: block !important;
	text-decoration: none !important;
	transition: background 0.15s ease, color 0.15s ease !important;
}

.filtro-dropdown .dropdown-menu li a:hover {
	background: var(--ua-surface-hover) !important;
	color: #FF008F !important;
}

/* Grid Moderno de Obras (.listagem-artes) */
.listagem-artes {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
	gap: 22px !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
	overflow: visible !important;
	width: 100% !important;
}

.listagem-artes .arte {
	float: none !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 12px !important;
	padding: 12px !important;
	display: flex !important;
	flex-direction: column !important;
	position: relative !important;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
}

.listagem-artes .arte:hover {
	transform: translateY(-4px) !important;
	border-color: rgba(255, 0, 143, 0.35) !important;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22) !important;
}

.listagem-artes .arte .img {
	width: 100% !important;
	height: 240px !important;
	background: var(--ua-bg) !important;
	border: 1px solid var(--ua-border-light) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	margin-bottom: 10px !important;
}

.listagem-artes .arte .img img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.listagem-artes .arte:hover .img img {
	transform: scale(1.04) !important;
}

.listagem-artes .arte .arte-overlay {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(0, 0, 0, 0.45) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	opacity: 0 !important;
	transition: opacity 0.2s ease !important;
	border-radius: 8px !important;
	backdrop-filter: blur(2px) !important;
	-webkit-backdrop-filter: blur(2px) !important;
}

.listagem-artes .arte:hover .arte-overlay {
	opacity: 1 !important;
}

.arte-action-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: #FF008F !important;
	color: #FFFFFF !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	padding: 7px 14px !important;
	border-radius: 20px !important;
	box-shadow: 0 4px 14px rgba(255, 0, 143, 0.4) !important;
}

.listagem-artes .arte .arte-info {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

.listagem-artes .arte .nome {
	font-family: 'Inter', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--ua-text) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	padding: 0 !important;
	margin: 0 !important;
	display: block !important;
}

.arte-footer-meta {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.arte-status-badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 3px 8px !important;
	border-radius: 6px !important;
	letter-spacing: 0.02em !important;
}

.arte-status-badge.aprovada {
	background: rgba(46, 125, 50, 0.12) !important;
	color: #2E7D32 !important;
}

html.dark-theme .arte-status-badge.aprovada {
	background: rgba(52, 211, 153, 0.14) !important;
	color: #34D399 !important;
}

.arte-status-badge.pendente {
	background: rgba(237, 108, 2, 0.12) !important;
	color: #ED6C02 !important;
}

html.dark-theme .arte-status-badge.pendente {
	background: rgba(251, 191, 36, 0.14) !important;
	color: #FBBF24 !important;
}

.arte-status-badge.reprovada {
	background: rgba(211, 47, 47, 0.12) !important;
	color: #D32F2F !important;
}

html.dark-theme .arte-status-badge.reprovada {
	background: rgba(248, 113, 113, 0.14) !important;
	color: #F87171 !important;
}

.arte-status-badge .status-dot {
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: currentColor !important;
}

/* Empty State Moderno */
.artes-empty-state {
	grid-column: 1 / -1 !important;
	background: var(--ua-surface) !important;
	border: 1px dashed var(--ua-border-strong) !important;
	border-radius: 16px !important;
	padding: 64px 24px !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: 10px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.artes-empty-state .empty-icon-wrap {
	width: 76px !important;
	height: 76px !important;
	border-radius: 50% !important;
	background: var(--ua-surface-hover) !important;
	border: 1px solid var(--ua-border) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--ua-muted) !important;
	margin-bottom: 20px !important;
}

.artes-empty-state .empty-title {
	font-family: 'Inter', sans-serif !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	color: var(--ua-text) !important;
	margin: 0 0 8px 0 !important;
}

.artes-empty-state .empty-subtitle {
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	color: var(--ua-muted) !important;
	max-width: 480px !important;
	margin: 0 0 26px 0 !important;
	line-height: 1.55 !important;
}

.artes-empty-state .btn-empty-cta {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 12px 26px !important;
	background: #FF008F !important;
	color: #FFFFFF !important;
	border-radius: 999px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	box-shadow: 0 4px 18px rgba(255, 0, 143, 0.35) !important;
	transition: all 0.2s ease !important;
}

.artes-empty-state .btn-empty-cta:hover {
	background: #E0007E !important;
	color: #FFFFFF !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 22px rgba(255, 0, 143, 0.45) !important;
}

/* Loading State */
.artes-loading {
	grid-column: 1 / -1 !important;
	padding: 60px 0 !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 16px !important;
	color: var(--ua-muted) !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
}

.loading-spinner {
	width: 36px !important;
	height: 36px !important;
	border: 3px solid var(--ua-border) !important;
	border-top-color: #FF008F !important;
	border-radius: 50% !important;
	animation: uaSpin 0.7s linear infinite !important;
}

@keyframes uaSpin {
	to { transform: rotate(360deg); }
}

/* Séries e Coleções Grid */
.series-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
	gap: 22px !important;
	margin-top: 10px !important;
}

.serie-card {
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 12px !important;
	padding: 12px !important;
	display: flex !important;
	flex-direction: column !important;
	text-decoration: none !important;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.serie-card:hover {
	transform: translateY(-4px) !important;
	border-color: rgba(255, 0, 143, 0.35) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2) !important;
}

.serie-card .img {
	width: 100% !important;
	height: 180px !important;
	border-radius: 8px !important;
	background-size: cover !important;
	background-position: center !important;
	border: 1px solid var(--ua-border-light) !important;
	margin-bottom: 10px !important;
}

.serie-card .nome {
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--ua-text) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.serie-add-card {
	border: 2px dashed var(--ua-border-strong) !important;
	background: transparent !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 240px !important;
	gap: 12px !important;
}

.serie-add-card:hover {
	border-color: #FF008F !important;
	background: rgba(255, 0, 143, 0.04) !important;
}

.serie-add-icon {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #FF008F !important;
}

.serie-add-text {
	font-family: 'Inter', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--ua-text) !important;
}

.btn-nova-serie,
.artes-page-header .btn-nova-serie,
html.dark-theme .main .conteudo a.btn-nova-serie,
html.dark-theme .artes-page-header .btn-nova-serie {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 0 14px !important;
	height: 34px !important;
	line-height: 34px !important;
	background: #FF008F !important;
	color: #FFFFFF !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	box-shadow: 0 2px 8px rgba(255, 0, 143, 0.25) !important;
	transition: all 0.15s ease !important;
	box-sizing: border-box !important;
	white-space: nowrap !important;
}

.btn-nova-serie span,
.artes-page-header .btn-nova-serie span,
html.dark-theme .main .conteudo a.btn-nova-serie span,
html.dark-theme .artes-page-header .btn-nova-serie span {
	color: #FFFFFF !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline !important;
}

.btn-nova-serie svg,
.artes-page-header .btn-nova-serie svg,
html.dark-theme .btn-nova-serie svg {
	width: 14px !important;
	height: 14px !important;
	color: #FFFFFF !important;
	stroke: #FFFFFF !important;
	display: inline-block !important;
	flex-shrink: 0 !important;
}

.btn-nova-serie:hover,
html.dark-theme .main .conteudo a.btn-nova-serie:hover,
html.dark-theme .artes-page-header .btn-nova-serie:hover {
	background: #E0007E !important;
	color: #FFFFFF !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(255, 0, 143, 0.35) !important;
}

/* Modal de Edição de Arte (#modalEditarArte) */
.modal-dialog.modal-editar-arte {
	max-width: 680px !important;
	width: 90% !important;
	margin: 50px auto !important;
}

.modal-editar-arte .modal-content {
	background: #18191D !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 18px !important;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75) !important;
	overflow: hidden !important;
}

.modal-editar-arte .modal-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	padding: 20px 28px !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.modal-editar-arte .modal-header .close {
	color: #9E9E9E !important;
	opacity: 0.8 !important;
	font-size: 24px !important;
	text-shadow: none !important;
	outline: none !important;
	margin: 0 !important;
	padding: 4px !important;
	line-height: 1 !important;
	transition: color 0.2s ease, opacity 0.2s ease !important;
	order: 2 !important;
}

.modal-editar-arte .modal-header .close:hover {
	color: #FFFFFF !important;
	opacity: 1 !important;
}

.modal-editar-arte .modal-title {
	font-family: 'Inter', sans-serif !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #F0F0F0 !important;
	letter-spacing: -0.01em !important;
	margin: 0 !important;
	order: 1 !important;
}

.modal-editar-arte .modal-body {
	padding: 28px !important;
	display: flex !important;
	align-items: flex-start !important;
	gap: 28px !important;
}

.modal-editar-arte .img-preview {
	width: 220px !important;
	min-width: 220px !important;
	height: 280px !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	background: #0E0F12 !important;
	margin: 0 !important;
	float: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 8px !important;
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.modal-editar-arte .img-preview .img {
	width: 100% !important;
	height: 100% !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	border-radius: 6px !important;
}

.modal-editar-arte .resumo-arte {
	flex: 1 !important;
	width: auto !important;
	overflow: visible !important;
	float: none !important;
}

.modal-editar-arte .campo-modal {
	margin-bottom: 18px !important;
}

.modal-editar-arte .modal-field-label {
	display: block !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #A0A5B1 !important;
	margin-bottom: 7px !important;
	text-transform: none !important;
	letter-spacing: 0.01em !important;
}

.modal-editar-arte .form-control {
	background: #111215 !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 9px !important;
	color: #EDEDED !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13.5px !important;
	height: 42px !important;
	box-shadow: none !important;
	padding: 0 14px !important;
	transition: border-color 0.15s ease, background-color 0.15s ease !important;
	width: 100% !important;
}

.modal-editar-arte .form-control:focus {
	border-color: #FF008F !important;
	background: #16171B !important;
}

.modal-editar-arte .form-control[disabled] {
	opacity: 0.7 !important;
	background: rgba(255, 255, 255, 0.03) !important;
	border-color: rgba(255, 255, 255, 0.06) !important;
	color: #8C919D !important;
	cursor: not-allowed !important;
}

.modal-editar-arte .select-seta {
	position: relative !important;
	width: 100% !important;
}

.modal-editar-arte .select-seta select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	cursor: pointer !important;
	padding-right: 36px !important;
}

.modal-editar-arte .select-seta:before {
	content: '' !important;
	position: absolute !important;
	right: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 8px !important;
	height: 8px !important;
	border-right: 2px solid #8C919D !important;
	border-bottom: 2px solid #8C919D !important;
	pointer-events: none !important;
	rotate: 45deg !important;
	transition: border-color 0.15s ease !important;
}

.modal-editar-arte .btn-cor-trigger {
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px !important;
	height: 42px !important;
	background: #111215 !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 9px !important;
	color: #EDEDED !important;
	padding: 0 14px !important;
	width: 100% !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	text-align: left !important;
	cursor: pointer !important;
}

.modal-editar-arte .btn-cor-trigger .caret {
	margin-left: auto !important;
	border-top-color: #8C919D !important;
}

.modal-editar-arte .dropdown-cor .dropdown-menu {
	background: #18191D !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
	padding: 8px !important;
	max-height: 220px !important;
	overflow-y: auto !important;
	width: 100% !important;
}

.modal-editar-arte .dropdown-cor .dropdown-menu li a {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	color: #EDEDED !important;
	padding: 8px 12px !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	transition: all 0.15s ease !important;
}

.modal-editar-arte .dropdown-cor .dropdown-menu li a:hover {
	background: rgba(255, 0, 143, 0.15) !important;
	color: #FF008F !important;
}

.modal-editar-arte .box-cor {
	width: 20px !important;
	height: 20px !important;
	border-radius: 5px !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	display: inline-block !important;
	flex-shrink: 0 !important;
}

/* TagsInput estilizado para Dark Mode e alinhado */
.modal-editar-arte .edicao-tags {
	margin-bottom: 0 !important;
}

.modal-editar-arte .edicao-tags .bootstrap-tagsinput {
	background: #111215 !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 9px !important;
	box-shadow: none !important;
	width: 100% !important;
	min-height: 48px !important;
	padding: 8px 10px !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 6px !important;
}

.modal-editar-arte .edicao-tags .bootstrap-tagsinput:focus-within {
	border-color: #FF008F !important;
}

.modal-editar-arte .edicao-tags .bootstrap-tagsinput .twitter-typeahead {
	position: static !important;
	flex: 1 !important;
	min-width: 140px !important;
}

.modal-editar-arte .edicao-tags .bootstrap-tagsinput input,
.modal-editar-arte .edicao-tags .bootstrap-tagsinput .twitter-typeahead input {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #EDEDED !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important;
	height: 30px !important;
	padding: 0 6px !important;
	width: 100% !important;
	margin: 0 !important;
}

.modal-editar-arte .edicao-tags .bootstrap-tagsinput input::placeholder,
.modal-editar-arte .edicao-tags .bootstrap-tagsinput .twitter-typeahead input::placeholder {
	color: #6C727F !important;
}

.modal-editar-arte .bootstrap-tagsinput .label {
	background-color: rgba(255, 0, 143, 0.15) !important;
	border: 1px solid rgba(255, 0, 143, 0.45) !important;
	border-radius: 6px !important;
	color: #FF66BA !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	height: 26px !important;
	line-height: 24px !important;
	margin: 0 !important;
	padding: 0 22px 0 8px !important;
	display: inline-flex !important;
	align-items: center !important;
	position: relative !important;
}

.modal-editar-arte .bootstrap-tagsinput .label span {
	position: absolute !important;
	right: 4px !important;
	font-size: 16px !important;
	line-height: 1 !important;
	opacity: 0.7 !important;
	cursor: pointer !important;
	color: #FF66BA !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
}

.modal-editar-arte .bootstrap-tagsinput .label span:hover {
	opacity: 1 !important;
	color: #FFFFFF !important;
}

.modal-editar-arte .tt-menu {
	background: #18191D !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 8px !important;
	box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
	color: #EDEDED !important;
	padding: 6px !important;
	margin-top: 4px !important;
}

.modal-editar-arte .tt-menu .tt-suggestion {
	padding: 6px 10px !important;
	border-radius: 4px !important;
	font-size: 12.5px !important;
	cursor: pointer !important;
}

.modal-editar-arte .tt-menu .tt-suggestion:hover,
.modal-editar-arte .tt-menu .tt-cursor {
	background: rgba(255, 0, 143, 0.15) !important;
	color: #FF008F !important;
}

.modal-editar-arte .modal-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
	padding: 18px 28px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 12px !important;
	background: transparent !important;
}

.btn-modal-cancel {
	padding: 9px 20px !important;
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 9px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	color: #A0A5B1 !important;
	transition: all 0.15s ease !important;
	cursor: pointer !important;
}

.btn-modal-cancel:hover {
	background: rgba(255, 255, 255, 0.05) !important;
	color: #FFFFFF !important;
	border-color: rgba(255, 255, 255, 0.2) !important;
}

.btn-modal-confirm {
	padding: 9px 24px !important;
	background: #FF008F !important;
	border: 1px solid #FF008F !important;
	border-radius: 9px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: #FFFFFF !important;
	box-shadow: 0 4px 14px rgba(255, 0, 143, 0.35) !important;
	transition: all 0.15s ease !important;
	cursor: pointer !important;
}

.btn-modal-confirm:hover {
	background: #E0007E !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 18px rgba(255, 0, 143, 0.45) !important;
}

/* Notice Popup Modernizado */
.popup {
	width: 440px !important;
	max-width: 90% !important;
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 16px !important;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6) !important;
	padding: 28px !important;
	z-index: 1050 !important;
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) scale(0.9) !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
	text-align: left !important;
}

.popup.open-popup {
	transform: translate(-50%, -50%) scale(1) !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

.popup h2 {
	font-family: 'Inter', sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--ua-text) !important;
	margin: 0 0 12px 0 !important;
}

.popup p {
	font-family: 'Inter', sans-serif !important;
	font-size: 13.5px !important;
	color: var(--ua-muted) !important;
	line-height: 1.6 !important;
	margin: 0 0 24px 0 !important;
}

.popup button {
	width: 100% !important;
	background: #FF008F !important;
	color: #FFFFFF !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	padding: 12px !important;
	border-radius: 8px !important;
	border: none !important;
	cursor: pointer !important;
	box-shadow: 0 4px 16px rgba(255, 0, 143, 0.35) !important;
	transition: background 0.15s ease !important;
}

.popup button:hover {
	background: #E0007E !important;
}

/* ==========================================================================
   DESATIVAR ARTES (remover_artes.php)
   ========================================================================== */
.main.remover-artes .opcao-desativar-artista-obra {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 16px !important;
	padding: 32px !important;
	margin-top: 10px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.desativar-intro-title {
	font-family: 'Inter', sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--ua-text) !important;
	margin: 0 !important;
}

.desativar-cards-grid {
	display: flex !important;
	flex-direction: column !important;
	gap: 14px !important;
	width: 100% !important;
}

.desativar-action-card {
	display: flex !important;
	align-items: center !important;
	gap: 18px !important;
	padding: 20px 24px !important;
	border-radius: 12px !important;
	background: var(--ua-bg) !important;
	border: 1px solid var(--ua-border) !important;
	cursor: pointer !important;
	text-align: left !important;
	width: 100% !important;
	box-sizing: border-box !important;
	height: auto !important;
	line-height: normal !important;
	box-shadow: none !important;
	float: none !important;
	margin: 0 !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.desativar-action-card:hover {
	transform: translateY(-2px) !important;
	border-color: rgba(255, 0, 143, 0.4) !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15) !important;
	background: var(--ua-surface-hover) !important;
}

.action-card-icon {
	width: 48px !important;
	height: 48px !important;
	border-radius: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.action-card-icon.obras {
	background: rgba(255, 0, 143, 0.1) !important;
	color: #FF008F !important;
}

.desativar-action-card.danger {
	border-color: rgba(239, 68, 68, 0.25) !important;
}

.desativar-action-card.danger:hover {
	border-color: #EF4444 !important;
	background: rgba(239, 68, 68, 0.04) !important;
}

.action-card-icon.conta {
	background: rgba(239, 68, 68, 0.1) !important;
	color: #EF4444 !important;
}

.action-card-text {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	flex: 1 !important;
}

.action-card-title {
	font-family: 'Inter', sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--ua-text) !important;
}

.desativar-action-card.danger .action-card-title {
	color: #EF4444 !important;
}

.action-card-desc {
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important;
	color: var(--ua-muted) !important;
	line-height: 1.4 !important;
}

.action-card-arrow {
	color: var(--ua-muted) !important;
	transition: transform 0.2s ease, color 0.2s ease !important;
	flex-shrink: 0 !important;
}

.desativar-action-card:hover .action-card-arrow {
	transform: translateX(4px) !important;
	color: var(--ua-text) !important;
}

/* Controles de Paginação em Desativar Obras */
#opcoes-remover,
.desativar-paginacao-wrap {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	margin: 10px 0 24px 0 !important;
	float: none !important;
	clear: both !important;
}

#paginacao-btn,
.desativar-nav-btns {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	padding: 4px !important;
	border-radius: 12px !important;
	background: transparent !important;
}

#paginacao-btn button.btn-paginas,
.desativar-nav-btns button.btn-paginas {
	width: 38px !important;
	height: 38px !important;
	min-width: 38px !important;
	border-radius: 8px !important;
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	color: var(--ua-text) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	box-shadow: none !important;
	padding: 0 !important;
	font-family: inherit !important;
}

#paginacao-btn button.btn-paginas svg,
.desativar-nav-btns button.btn-paginas svg {
	display: block !important;
	stroke: currentColor !important;
	transition: transform 0.15s ease !important;
}

#paginacao-btn button.btn-paginas:hover:not(:disabled),
.desativar-nav-btns button.btn-paginas:hover:not(:disabled) {
	background: var(--ua-border) !important;
	border-color: rgba(255, 0, 143, 0.4) !important;
	color: #FF008F !important;
	transform: translateY(-1px) !important;
}

#paginacao-btn button.btn-paginas:hover:not(:disabled) svg,
.desativar-nav-btns button.btn-paginas:hover:not(:disabled) svg {
	transform: scale(1.1) !important;
}

#paginacao-btn button.btn-paginas:disabled,
.desativar-nav-btns button.btn-paginas:disabled {
	background: transparent !important;
	border-color: var(--ua-border-light) !important;
	color: var(--ua-border-strong) !important;
	opacity: 0.4 !important;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Listagem de Obras para Desativar */
.listagem-remover-artes,
#listagem-remover-artes {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
	gap: 22px !important;
	margin: 0 0 28px 0 !important;
	padding: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	float: none !important;
	overflow: visible !important;
	justify-content: normal !important;
}

.listagem-remover-artes .arte.remover-arte {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 12px !important;
	padding: 12px !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	position: relative !important;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease !important;
	box-sizing: border-box !important;
	cursor: pointer !important;
}

.listagem-remover-artes .arte.remover-arte:hover {
	transform: translateY(-4px) !important;
	border-color: rgba(255, 0, 143, 0.35) !important;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22) !important;
}

/* Checkbox Nativo Oculto e Seletor Customizado Moderno */
.listagem-remover-artes .arte.remover-arte input[type="checkbox"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	pointer-events: none !important;
}

.listagem-remover-artes .arte.remover-arte .custom-selector {
	position: absolute !important;
	top: 14px !important;
	right: 14px !important;
	width: 26px !important;
	height: 26px !important;
	border-radius: 6px !important;
	background: rgba(255, 255, 255, 0.1) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 5 !important;
	cursor: pointer !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	margin: 0 !important;
	padding: 0 !important;
}

.listagem-remover-artes .arte.remover-arte:hover .custom-selector {
	border-color: rgba(255, 255, 255, 0.6) !important;
	background: rgba(255, 255, 255, 0.18) !important;
	transform: scale(1.05) !important;
}

/* Seletor Marcado / Selecionado */
.listagem-remover-artes .arte.remover-arte input[type="checkbox"]:checked + .custom-selector,
.listagem-remover-artes .arte.remover-arte.selecionado .custom-selector {
	background: #FF008F !important;
	border-color: #FF008F !important;
	box-shadow: 0 2px 10px rgba(255, 0, 143, 0.45) !important;
	transform: scale(1.05) !important;
}

.listagem-remover-artes .arte.remover-arte input[type="checkbox"]:checked + .custom-selector::after,
.listagem-remover-artes .arte.remover-arte.selecionado .custom-selector::after {
	content: "" !important;
	display: block !important;
	width: 6px !important;
	height: 11px !important;
	border: solid #FFFFFF !important;
	border-width: 0 2.2px 2.2px 0 !important;
	transform: rotate(45deg) translate(-1px, -1px) !important;
}

/* Destaque na borda do Card selecionado */
.listagem-remover-artes .arte.remover-arte:has(input[type="checkbox"]:checked),
.listagem-remover-artes .arte.remover-arte.selecionado {
	border-color: rgba(255, 0, 143, 0.5) !important;
	background: rgba(255, 0, 143, 0.03) !important;
}

.listagem-remover-artes .arte.remover-arte .obra {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.listagem-remover-artes .arte.remover-arte .img {
	width: 100% !important;
	height: 240px !important;
	background: var(--ua-bg) !important;
	border: 1px solid var(--ua-border-light) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
	margin: 0 0 10px 0 !important;
	padding: 0 !important;
}

.listagem-remover-artes .arte.remover-arte .img img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	display: block !important;
	margin: 0 auto !important;
}

.listagem-remover-artes .arte.remover-arte:hover .img img {
	transform: scale(1.04) !important;
}

.listagem-remover-artes .arte.remover-arte .nome {
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--ua-text) !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
	text-align: left !important;
}

/* Footer de Ações em Desativar Obras */
.desativar-actions-footer {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-top: 28px !important;
	padding-top: 20px !important;
	border-top: 1px solid var(--ua-border) !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.btn-desativar-voltar {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 10px 18px !important;
	background: transparent !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 8px !important;
	color: var(--ua-text) !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
	height: auto !important;
	line-height: normal !important;
	float: none !important;
	margin: 0 !important;
}

.btn-desativar-voltar:hover {
	background: var(--ua-surface-hover) !important;
	border-color: var(--ua-border-strong) !important;
}

.btn-desativar-confirmar {
	display: inline-flex !important;
	align-items: center !important;
	padding: 11px 22px !important;
	background: #EF4444 !important;
	border: 1px solid #EF4444 !important;
	border-radius: 8px !important;
	color: #FFFFFF !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
	height: auto !important;
	line-height: normal !important;
	box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
	float: none !important;
	margin: 0 !important;
}

.btn-desativar-confirmar:hover {
	background: #DC2626 !important;
	transform: translateY(-1px) !important;
}

/* Grid de Métricas / KPI no Topo */
.artes-kpi-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 16px !important;
	margin: 18px 0 24px 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.artes-kpi-card {
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 12px !important;
	padding: 16px 18px !important;
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	cursor: pointer !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	user-select: none !important;
	position: relative !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.artes-kpi-card:hover {
	transform: translateY(-2px) !important;
	border-color: var(--ua-border-strong) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

.artes-kpi-card.ativo {
	background: rgba(255, 0, 143, 0.06) !important;
	border-color: rgba(255, 0, 143, 0.45) !important;
	box-shadow: 0 4px 16px rgba(255, 0, 143, 0.15) !important;
}

.kpi-icon {
	width: 44px !important;
	height: 44px !important;
	border-radius: 10px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
}

.kpi-icon.total {
	background: rgba(255, 255, 255, 0.08) !important;
	color: var(--ua-text) !important;
	border: 1px solid var(--ua-border) !important;
}

.kpi-icon.aprovada {
	background: rgba(46, 125, 50, 0.14) !important;
	color: #2E7D32 !important;
}

html.dark-theme .kpi-icon.aprovada {
	background: rgba(52, 211, 153, 0.16) !important;
	color: #34D399 !important;
}

.kpi-icon.pendente {
	background: rgba(237, 108, 2, 0.14) !important;
	color: #ED6C02 !important;
}

html.dark-theme .kpi-icon.pendente {
	background: rgba(251, 191, 36, 0.16) !important;
	color: #FBBF24 !important;
}

.kpi-icon.reprovada {
	background: rgba(211, 47, 47, 0.14) !important;
	color: #D32F2F !important;
}

html.dark-theme .kpi-icon.reprovada {
	background: rgba(248, 113, 113, 0.16) !important;
	color: #F87171 !important;
}

.kpi-info {
	display: flex !important;
	flex-direction: column !important;
}

.kpi-value {
	font-family: 'Inter', sans-serif !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--ua-text) !important;
	line-height: 1 !important;
}

.kpi-label {
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: var(--ua-muted) !important;
	margin-top: 4px !important;
	letter-spacing: 0.01em !important;
}

/* Divisor Horizontal 100% Alinhado */
.main .divisor {
	width: 100% !important;
	box-sizing: border-box !important;
	border-bottom: 1px solid var(--ua-border) !important;
	margin: 18px 0 22px 0 !important;
	height: 0 !important;
	float: none !important;
	clear: both !important;
}

/* Barra de Controles 100% Alinhada (Tabs à esquerda, Busca + Dropdown à direita) */
.artes-controls-bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	gap: 12px !important;
	margin: 20px 0 24px 0 !important;
	flex-wrap: wrap !important;
}

@media (min-width: 992px) {
	.artes-controls-bar {
		flex-wrap: nowrap !important;
	}
}

.artes-status-tabs {
	display: inline-flex !important;
	align-items: center !important;
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 10px !important;
	padding: 3px !important;
	gap: 3px !important;
	height: 42px !important;
	box-sizing: border-box !important;
	flex-shrink: 0 !important;
}

.status-tab-btn {
	border: none !important;
	background: transparent !important;
	color: var(--ua-muted) !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	padding: 6px 11px !important;
	border-radius: 7px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
	height: 34px !important;
	box-sizing: border-box !important;
	white-space: nowrap !important;
}

.status-tab-btn:hover {
	color: var(--ua-text) !important;
	background: var(--ua-surface-hover) !important;
}

.status-tab-btn.active {
	background: #FF008F !important;
	color: #FFFFFF !important;
	box-shadow: 0 2px 10px rgba(255, 0, 143, 0.35) !important;
}

.status-tab-btn .tab-badge {
	font-size: 10.5px !important;
	font-weight: 700 !important;
	padding: 1px 6px !important;
	border-radius: 999px !important;
	background: var(--ua-surface-hover) !important;
	color: var(--ua-text) !important;
	transition: all 0.15s ease !important;
}

.status-tab-btn.active .tab-badge {
	background: rgba(255, 255, 255, 0.25) !important;
	color: #FFFFFF !important;
}

/* Área de Busca e Ordenação (Alinhada Perfeitamente à Direita com margin-left: auto) */
.artes-search-filter {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	margin-left: auto !important;
	margin-right: 0 !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
}

.artes-search-input-wrap {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	width: 180px !important;
	min-width: 140px !important;
	max-width: 220px !important;
	height: 42px !important;
	flex-shrink: 1 !important;
	box-sizing: border-box !important;
}

@media (min-width: 1200px) {
	.artes-search-input-wrap {
		width: 220px !important;
	}
}

.artes-search-input-wrap svg,
.artes-search-input-wrap .search-icon {
	position: absolute !important;
	left: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	color: var(--ua-muted) !important;
	pointer-events: none !important;
	z-index: 2 !important;
}

/* Campo de Busca Visual Fixo e Estável */
.artes-search-field,
input#buscaArte,
#buscaArte {
	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
	height: 42px !important;
	min-height: 42px !important;
	max-height: 42px !important;
	line-height: 42px !important;
	padding: 0 12px 0 34px !important;
	border-radius: 10px !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 13px !important;
	box-shadow: none !important;
	outline: none !important;
	box-sizing: border-box !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Modo Escuro */
html.dark-theme .artes-search-field,
html.dark-theme input#buscaArte,
html.dark-theme #buscaArte {
	background: #18181B !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	color: #F4F4F6 !important;
}

html.dark-theme .artes-search-field::placeholder,
html.dark-theme input#buscaArte::placeholder,
html.dark-theme #buscaArte::placeholder {
	color: #71717A !important;
	opacity: 1 !important;
}

html.dark-theme .artes-search-field:focus,
html.dark-theme input#buscaArte:focus,
html.dark-theme #buscaArte:focus {
	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
	background: #18181B !important;
	border-color: #FF008F !important;
	box-shadow: 0 0 0 2px rgba(255, 0, 143, 0.25) !important;
	outline: none !important;
}

/* Modo Claro */
html:not(.dark-theme) .artes-search-field,
html:not(.dark-theme) input#buscaArte,
html:not(.dark-theme) #buscaArte {
	background: #FFFFFF !important;
	border: 1px solid #E5E5E5 !important;
	color: #111111 !important;
}

html:not(.dark-theme) .artes-search-field::placeholder,
html:not(.dark-theme) input#buscaArte::placeholder,
html:not(.dark-theme) #buscaArte::placeholder {
	color: #9CA3AF !important;
	opacity: 1 !important;
}

html:not(.dark-theme) .artes-search-field:focus,
html:not(.dark-theme) input#buscaArte:focus,
html:not(.dark-theme) #buscaArte:focus {
	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
	background: #FFFFFF !important;
	border-color: #FF008F !important;
	box-shadow: 0 0 0 2px rgba(255, 0, 143, 0.15) !important;
	outline: none !important;
}

/* Dropdown de Ordenação - Perfeitamente Alinhado à Direita */
.filtro-dropdown {
	display: inline-block !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
}

.filtro-dropdown .dropdown-toggle,
#filtroArtes {
	height: 42px !important;
	min-height: 42px !important;
	max-height: 42px !important;
	line-height: 42px !important;
	padding: 0 14px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	border-radius: 10px !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	text-transform: uppercase !important;
	letter-spacing: 0.02em !important;
	white-space: nowrap !important;
	margin: 0 !important;
}

html.dark-theme .filtro-dropdown .dropdown-toggle,
html.dark-theme #filtroArtes {
	background: #18181B !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	color: #F4F4F6 !important;
}

html.dark-theme .filtro-dropdown .dropdown-toggle:hover,
html.dark-theme .filtro-dropdown .dropdown-toggle:focus,
html.dark-theme #filtroArtes:hover {
	background: #222225 !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
	color: #FFFFFF !important;
}

/* Responsividade Completa de Minhas Artes e Subnavegação (Mobile & Tablets) */
@media (max-width: 991px) {
	/* Subnavegação Lateral em Pills Horizontais Roláveis */
	.main .aba-lateral {
		flex-direction: row !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		white-space: nowrap !important;
		gap: 8px !important;
		padding: 4px 0 12px 0 !important;
		margin-bottom: 12px !important;
		scrollbar-width: none !important;
	}
	.main .aba-lateral::-webkit-scrollbar {
		display: none !important;
	}
	.main .aba-lateral .item {
		width: auto !important;
		flex: 0 0 auto !important;
		padding: 7px 14px !important;
		font-size: 13px !important;
		border-radius: 999px !important;
		background: var(--ua-surface) !important;
		border: 1px solid var(--ua-border) !important;
	}
	.main .aba-lateral .item .ico {
		width: 26px !important;
		height: 26px !important;
		min-width: 26px !important;
		line-height: 26px !important;
		font-size: 13px !important;
		border-radius: 50% !important;
	}
	.main .aba-lateral .item.ativo {
		background: rgba(255, 0, 143, 0.12) !important;
		border-color: #FF008F !important;
		color: #FF008F !important;
	}
	.main .aba-lateral .item.ativo .ico {
		background: #FF008F !important;
		color: #FFFFFF !important;
	}

	/* Grid de KPIs em 2 Colunas */
	.artes-kpi-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
		margin: 14px 0 18px 0 !important;
	}

	/* Barra de Controles & Tabs */
	.artes-controls-bar {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
		margin: 16px 0 20px 0 !important;
	}
	.artes-status-tabs {
		display: flex !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
		white-space: nowrap !important;
		width: 100% !important;
		max-width: 100% !important;
		scrollbar-width: none !important;
		padding: 4px !important;
		box-sizing: border-box !important;
	}
	.artes-status-tabs::-webkit-scrollbar {
		display: none !important;
	}
	.status-tab-btn {
		flex: 0 0 auto !important;
		white-space: nowrap !important;
	}
	.artes-search-filter {
		width: 100% !important;
		margin-left: 0 !important;
		justify-content: space-between !important;
		gap: 10px !important;
	}
	.artes-search-input-wrap {
		flex: 1 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
	}
	.artes-search-field,
	input#buscaArte,
	#buscaArte {
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
	}
	.artes-search-field:focus,
	input#buscaArte:focus,
	#buscaArte:focus {
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
	}
}

@media (max-width: 767px) {
	/* Título e Subtítulo Responsivos */
	.artes-page-header {
		margin-bottom: 4px !important;
	}
	.artes-page-title {
		font-size: 20px !important;
	}
	.artes-page-subtitle {
		font-size: 12.5px !important;
		line-height: 1.4 !important;
	}

	/* Modal Editar Arte Responsivo */
	.modal-dialog.modal-editar-arte {
		margin: 16px auto !important;
		width: calc(100% - 24px) !important;
		max-width: 480px !important;
	}
	.modal-editar-arte .modal-header {
		padding: 16px 18px !important;
	}
	.modal-editar-arte .modal-title {
		font-size: 15px !important;
	}
	.modal-editar-arte .modal-body {
		padding: 16px 18px !important;
	}
	.modal-editar-arte .img-preview {
		float: none !important;
		margin: 0 auto 16px auto !important;
		width: 150px !important;
		height: 180px !important;
		display: block !important;
	}
	.modal-editar-arte .resumo-arte {
		width: 100% !important;
		float: none !important;
		clear: both !important;
	}
	.modal-editar-arte .campo-modal {
		margin-bottom: 14px !important;
	}
	.modal-editar-arte .modal-footer {
		padding: 14px 18px !important;
		flex-direction: column-reverse !important;
		align-items: stretch !important;
		gap: 8px !important;
	}
	.btn-modal-cancel,
	.btn-modal-salvar {
		width: 100% !important;
		justify-content: center !important;
		text-align: center !important;
		padding: 11px !important;
	}
}

@media (max-width: 640px) {
	/* Grid de Obras: 2 Colunas Limpas e Compactas no Mobile */
	.listagem-artes {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
	.listagem-artes .arte {
		padding: 8px !important;
		border-radius: 10px !important;
	}
	.listagem-artes .arte .img {
		height: 170px !important;
		margin-bottom: 8px !important;
		border-radius: 6px !important;
	}
	.listagem-artes .arte .nome {
		font-size: 12px !important;
		margin-bottom: 2px !important;
	}
	.arte-status-badge {
		font-size: 10px !important;
		padding: 2px 6px !important;
		gap: 4px !important;
		border-radius: 5px !important;
	}
	.arte-status-badge .status-dot {
		width: 5px !important;
		height: 5px !important;
	}
	.arte-action-badge {
		font-size: 11px !important;
		padding: 5px 10px !important;
	}

	/* Desativar Artes no Mobile */
	.desativar-cards-grid {
		gap: 12px !important;
	}
	.desativar-action-card {
		padding: 14px 16px !important;
		gap: 12px !important;
	}
	.action-card-icon {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
	}
	.action-card-title {
		font-size: 14px !important;
	}
	.action-card-desc {
		font-size: 12px !important;
	}
	.listagem-remover-artes {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
	.listagem-remover-artes .arte.remover-arte {
		padding: 8px !important;
	}
	.listagem-remover-artes .arte.remover-arte .img {
		height: 150px !important;
	}
	.desativar-actions-footer {
		flex-direction: column-reverse !important;
		gap: 10px !important;
	}
	.btn-desativar-voltar,
	.btn-desativar-confirmar {
		width: 100% !important;
		justify-content: center !important;
	}

	/* Séries / Coleções no Mobile */
	.series-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
	.serie-card {
		padding: 10px !important;
	}
	.serie-card .serie-cover {
		height: 135px !important;
	}
	.artes-page-header .btn-nova-serie {
		width: 100% !important;
		justify-content: center !important;
		margin-top: 6px !important;
	}
}

@media (max-width: 576px) {
	/* KPIs Compactos 2x2 no Smartphone */
	.artes-kpi-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 8px !important;
		margin: 12px 0 16px 0 !important;
	}
	.artes-kpi-card {
		padding: 10px 12px !important;
		gap: 10px !important;
		border-radius: 10px !important;
	}
	.kpi-icon {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		border-radius: 8px !important;
	}
	.kpi-icon svg {
		width: 17px !important;
		height: 17px !important;
	}
	.kpi-value {
		font-size: 18px !important;
	}
	.kpi-label {
		font-size: 11px !important;
		margin-top: 2px !important;
	}

	/* Tabs e Badges de Status Mais Compactos */
	.status-tab-btn {
		font-size: 12px !important;
		padding: 6px 10px !important;
		gap: 6px !important;
	}
	.status-tab-btn .tab-badge {
		font-size: 10px !important;
		padding: 1px 6px !important;
	}

	/* Busca e Ordenação Empilhados com Largura Total */
	.artes-search-filter {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
	}
	.artes-search-input-wrap,
	.artes-search-field,
	input#buscaArte,
	#buscaArte,
	.filtro-dropdown,
	.filtro-dropdown .dropdown-toggle,
	#filtroArtes {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
	}
	.filtro-dropdown .dropdown-toggle,
	#filtroArtes {
		justify-content: space-between !important;
	}
	.filtro-dropdown .dropdown-menu {
		width: 100% !important;
		min-width: 100% !important;
	}

	/* Empty State Amigável ao Mobile */
	.artes-empty-state {
		padding: 36px 18px !important;
		border-radius: 12px !important;
		margin: 16px 0 !important;
	}
	.empty-icon-wrap {
		width: 60px !important;
		height: 60px !important;
		margin-bottom: 14px !important;
	}
	.empty-icon-wrap svg {
		width: 30px !important;
		height: 30px !important;
	}
	.empty-title {
		font-size: 16px !important;
	}
	.empty-subtitle {
		font-size: 12.5px !important;
		line-height: 1.4 !important;
		margin-bottom: 20px !important;
	}
	.btn-empty-cta {
		width: 100% !important;
		max-width: 260px !important;
		justify-content: center !important;
		padding: 10px 18px !important;
		font-size: 13px !important;
	}
}

@media (max-width: 380px) {
	.listagem-artes {
		gap: 8px !important;
	}
	.listagem-artes .arte {
		padding: 6px !important;
	}
	.listagem-artes .arte .img {
		height: 145px !important;
	}
	.listagem-artes .arte .nome {
		font-size: 11.5px !important;
	}
}


/* ==========================================================================
   Divisores Globais Sutis e Agradáveis (Toda a Rede do Artista)
   ========================================================================== */
.divisor,
.main .divisor,
div.divisor,
hr {
	width: 100% !important;
	box-sizing: border-box !important;
	height: 1px !important;
	background: rgba(0, 0, 0, 0.08) !important;
	background-color: rgba(0, 0, 0, 0.08) !important;
	border: none !important;
	margin: 18px 0 22px 0 !important;
	padding: 0 !important;
	float: none !important;
	clear: both !important;
}

html.dark-theme .divisor,
html.dark-theme .main .divisor,
html.dark-theme div.divisor,
html.dark-theme div.divisor.clearfix,
html.dark-theme hr {
	background: rgba(255, 255, 255, 0.08) !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	border: none !important;
	border-color: transparent !important;
	height: 1px !important;
}

/* ==========================================================================
   Modernização de Séries (Criar / Editar Série) e Botões de Formulário
   ========================================================================== */

/* Footer de Ações em Séries (Voltar e Criar / Salvar Série) */
.serie-actions-footer {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-top: 24px !important;
	padding-top: 18px !important;
	border-top: 1px solid var(--ua-border) !important;
	width: 100% !important;
	box-sizing: border-box !important;
	clear: both !important;
}

@media (max-width: 576px) {
	.serie-actions-footer {
		flex-direction: column-reverse !important;
		gap: 12px !important;
	}
	.serie-actions-footer .bt1,
	.serie-actions-footer .btn-criar-serie {
		width: 100% !important;
	}
}

/* Botão Primário (Criar Série / Salvar / Confirmar) */
.main.series button[name="bt_salvar"],
.main.series .bt-criar-serie,
.main.series .btn-salvar-serie,
.main.series .btn-confirma-exclusao {
	background: #FF008F !important;
	border: 1px solid #FF008F !important;
	color: #FFFFFF !important;
	border-radius: 8px !important;
	height: 42px !important;
	padding: 0 24px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
	box-shadow: 0 2px 10px rgba(255, 0, 143, 0.25) !important;
}

.main.series button[name="bt_salvar"]:hover:not(.disabled):not(:disabled),
.main.series .bt-criar-serie:hover:not(.disabled):not(:disabled),
.main.series .btn-salvar-serie:hover:not(.disabled):not(:disabled),
.main.series .btn-confirma-exclusao:hover {
	background: #E60081 !important;
	border-color: #E60081 !important;
	box-shadow: 0 4px 16px rgba(255, 0, 143, 0.4) !important;
	transform: translateY(-1px) !important;
}

/* Botão desabilitado pelo Bootstrap Validator */
.main.series button[name="bt_salvar"].disabled,
.main.series button[name="bt_salvar"]:disabled,
.main.series button.disabled[type="submit"] {
	background: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	color: #71717A !important;
	box-shadow: none !important;
	cursor: not-allowed !important;
	transform: none !important;
	opacity: 0.8 !important;
}

html:not(.dark-theme) .main.series button[name="bt_salvar"].disabled,
html:not(.dark-theme) .main.series button[name="bt_salvar"]:disabled {
	background: #E4E4E7 !important;
	border: 1px solid #D4D4D8 !important;
	color: #A1A1AA !important;
}

/* Botão Voltar / Secundário (Ghost Button Refinado) */
.main.series a.bt1.bt2,
.main.series a.bt2,
.main.series .bt2 {
	background: transparent !important;
	border: 1px solid var(--ua-border-strong) !important;
	color: var(--ua-text) !important;
	border-radius: 8px !important;
	height: 42px !important;
	padding: 0 22px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.2s ease !important;
	text-decoration: none !important;
}

.main.series a.bt1.bt2:hover,
.main.series a.bt2:hover,
.main.series .bt2:hover {
	background: var(--ua-surface) !important;
	border-color: var(--ua-text-secondary) !important;
	color: var(--ua-text) !important;
	transform: translateY(-1px) !important;
}

/* Botão Excluir Série */
.main.series .bt-excluir-serie {
	background: rgba(239, 68, 68, 0.12) !important;
	border: 1px solid rgba(239, 68, 68, 0.3) !important;
	color: #EF4444 !important;
	border-radius: 8px !important;
	height: 42px !important;
	padding: 0 22px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
}

.main.series .bt-excluir-serie:hover {
	background: #EF4444 !important;
	border-color: #EF4444 !important;
	color: #FFFFFF !important;
	box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35) !important;
	transform: translateY(-1px) !important;
}

/* ==========================================================================
   Novo Design Global de Paginação (.pagination)
   ========================================================================== */
nav[aria-label="Page navigation"],
.ajax-paginacao nav,
.ajax-paginacao-fora-serie nav,
.pagination-container {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	margin: 28px 0 16px 0 !important;
	clear: both !important;
	float: none !important;
}

ul.pagination,
.pagination {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	padding: 6px !important;
	margin: 0 auto !important;
	border-radius: 12px !important;
	float: none !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

ul.pagination > li,
.pagination > li {
	display: inline-flex !important;
	margin: 0 !important;
	padding: 0 !important;
}

ul.pagination > li > a,
ul.pagination > li > span,
.pagination > li > a,
.pagination > li > span {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 38px !important;
	height: 38px !important;
	padding: 0 12px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--ua-text-secondary) !important;
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	margin: 0 !important;
	line-height: 1 !important;
	transition: all 0.15s ease !important;
	box-sizing: border-box !important;
}

/* Primeiro e Último Item - remove cantos especiais antigos do bootstrap */
ul.pagination > li:first-child > a,
ul.pagination > li:first-child > span,
ul.pagination > li:last-child > a,
ul.pagination > li:last-child > span {
	border-radius: 8px !important;
	border: 1px solid var(--ua-border) !important;
}

/* Hover nos itens interativos */
ul.pagination > li:not(.active):not(.disabled) > a:hover,
.pagination > li:not(.active):not(.disabled) > a:hover {
	background: var(--ua-border) !important;
	border-color: rgba(255, 0, 143, 0.3) !important;
	color: #FF008F !important;
	transform: translateY(-1px) !important;
}

/* Item Ativo (Página Atual) */
ul.pagination > li.active > a,
ul.pagination > li.active > span,
ul.pagination > li.active > a:hover,
ul.pagination > li.active > a:focus,
.pagination > li.active > a,
.pagination > li.active > span {
	background: #FF008F !important;
	background: linear-gradient(135deg, #FF008F 0%, #D80079 100%) !important;
	border-color: #FF008F !important;
	color: #FFFFFF !important;
	box-shadow: 0 4px 12px rgba(255, 0, 143, 0.35) !important;
	cursor: default !important;
	font-weight: 700 !important;
	transform: none !important;
}

/* Item Desabilitado (Ex: seta voltar na primeira página) */
ul.pagination > li.disabled > a,
ul.pagination > li.disabled > span,
ul.pagination > li.disabled > a:hover,
.pagination > li.disabled > a,
.pagination > li.disabled > span {
	background: transparent !important;
	border-color: var(--ua-border-light) !important;
	color: var(--ua-border-strong) !important;
	opacity: 0.45 !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
	transform: none !important;
}

/* Ícones de Navegação da Paginação (Setas) */
ul.pagination .icon-angle-left,
ul.pagination .icon-angle-right,
.pagination .icon-angle-left,
.pagination .icon-angle-right {
	font-size: 16px !important;
	line-height: 1 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Marcador de Seleção nos Cards de Arte (.listagem-selecionar) */
.listagem-selecionar .arte {
	position: relative !important;
}

.listagem-selecionar .arte:after {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	width: 28px !important;
	height: 28px !important;
	line-height: 28px !important;
	border-radius: 50% !important;
	background-color: rgba(255, 255, 255, 0.2) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
	color: #FFFFFF !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
	z-index: 5 !important;
}

.listagem-selecionar .arte:hover:after {
	transform: scale(1.1) !important;
	background-color: rgba(255, 255, 255, 0.35) !important;
}

.listagem-selecionar .arte.selecionado:after {
	background-color: #10B981 !important;
	border-color: #10B981 !important;
	color: #FFFFFF !important;
	box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important;
	transform: scale(1.05) !important;
}

.listagem-selecionar .arte.selecionado:not(.block):hover:after {
	background-color: #EF4444 !important;
	border-color: #EF4444 !important;
	box-shadow: 0 2px 10px rgba(239, 68, 68, 0.45) !important;
}

/* ==========================================================================
   Envio de Artes — Nova Linguagem Visual (ArtLab / Urban Arts)
   ========================================================================== */

.enviar-novas-artes .main > .container {
	padding-top: 28px;
	padding-bottom: 64px;
}

.enviar-novas-artes .conteudo h1 {
	color: var(--ua-text);
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 700;
	letter-spacing: -.03em;
	margin: 0 0 8px;
}

.enviar-novas-artes .conteudo .subtitulo-envio {
	color: var(--ua-text-secondary);
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 24px;
}

.enviar-novas-artes .conteudo p,
.enviar-novas-artes .passos-envio p,
.enviar-novas-artes .leg {
	color: var(--ua-text-secondary);
	line-height: 1.6;
}

.enviar-novas-artes .aba-lateral {
	margin-top: 0;
}

/* Stepper Moderno (Indicador de Passos) */
.enviar-novas-artes .abas-envio {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 10px !important;
	border: 0 !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
}

.enviar-novas-artes .abas-envio .aba {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 14px !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 8px !important;
	background: var(--ua-surface) !important;
	color: var(--ua-text-secondary) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	transition: all 0.2s ease !important;
	position: relative !important;
}

.enviar-novas-artes .abas-envio .aba-num {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	height: 26px !important;
	border-radius: 50% !important;
	background: var(--ua-surface-hover) !important;
	color: var(--ua-text-secondary) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	flex-shrink: 0 !important;
	transition: all 0.2s ease !important;
}

.enviar-novas-artes .abas-envio .aba-txt {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

/* Estado Ativo do Passo Atual */
.enviar-novas-artes .passo1 .abas-envio .aba1,
.enviar-novas-artes .passo2 .abas-envio .aba2,
.enviar-novas-artes .passo3 .abas-envio .aba3,
.enviar-novas-artes .passo4 .abas-envio .aba4,
.enviar-novas-artes .passo5 .abas-envio .aba7 {
	border-color: #FF008F !important;
	background: rgba(255, 0, 143, 0.08) !important;
	color: var(--ua-text) !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 12px rgba(255, 0, 143, 0.18) !important;
}

.enviar-novas-artes .passo1 .abas-envio .aba1 .aba-num,
.enviar-novas-artes .passo2 .abas-envio .aba2 .aba-num,
.enviar-novas-artes .passo3 .abas-envio .aba3 .aba-num,
.enviar-novas-artes .passo4 .abas-envio .aba4 .aba-num,
.enviar-novas-artes .passo5 .abas-envio .aba7 .aba-num {
	background: #FF008F !important;
	color: #FFFFFF !important;
	box-shadow: 0 2px 8px rgba(255, 0, 143, 0.45) !important;
}

/* Passos Concluídos */
.enviar-novas-artes .passo2 .abas-envio .aba1,
.enviar-novas-artes .passo3 .abas-envio .aba1,
.enviar-novas-artes .passo3 .abas-envio .aba2,
.enviar-novas-artes .passo4 .abas-envio .aba1,
.enviar-novas-artes .passo4 .abas-envio .aba2,
.enviar-novas-artes .passo4 .abas-envio .aba3,
.enviar-novas-artes .passo5 .abas-envio .aba1,
.enviar-novas-artes .passo5 .abas-envio .aba2,
.enviar-novas-artes .passo5 .abas-envio .aba3,
.enviar-novas-artes .passo5 .abas-envio .aba4 {
	border-color: rgba(16, 185, 129, 0.45) !important;
	color: var(--ua-text) !important;
}

.enviar-novas-artes .passo2 .abas-envio .aba1 .aba-num,
.enviar-novas-artes .passo3 .abas-envio .aba1 .aba-num,
.enviar-novas-artes .passo3 .abas-envio .aba2 .aba-num,
.enviar-novas-artes .passo4 .abas-envio .aba1 .aba-num,
.enviar-novas-artes .passo4 .abas-envio .aba2 .aba-num,
.enviar-novas-artes .passo4 .abas-envio .aba3 .aba-num,
.enviar-novas-artes .passo5 .abas-envio .aba1 .aba-num,
.enviar-novas-artes .passo5 .abas-envio .aba2 .aba-num,
.enviar-novas-artes .passo5 .abas-envio .aba3 .aba-num,
.enviar-novas-artes .passo5 .abas-envio .aba4 .aba-num {
	background: #10B981 !important;
	color: #FFFFFF !important;
}

/* Painel de Conteúdo dos Passos */
.enviar-novas-artes .passos-envio {
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 12px !important;
	padding: 32px !important;
	color: var(--ua-text) !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
	position: relative !important;
}

.enviar-novas-artes .passos-envio:after {
	content: '';
	display: table;
	clear: both;
}

.enviar-novas-artes .passos-envio label,
.enviar-novas-artes .tit2 {
	color: var(--ua-text) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	margin-bottom: 8px !important;
}

.enviar-novas-artes .passos-envio .tit2 {
	font-size: 18px !important;
	letter-spacing: -0.02em !important;
	margin-bottom: 16px !important;
}

/* Inputs, Selects e Form Controls Modernizados */
.enviar-novas-artes .passos-envio .form-control {
	height: 46px !important;
	border-radius: 8px !important;
	border: 1px solid var(--ua-border-strong) !important;
	background: var(--ua-bg) !important;
	color: var(--ua-text) !important;
	font-size: 14px !important;
	padding: 0 14px !important;
	box-shadow: none !important;
	transition: border-color 0.2s, box-shadow 0.2s !important;
}

.enviar-novas-artes .passos-envio .form-control:focus {
	border-color: #FF008F !important;
	box-shadow: 0 0 0 3px rgba(255, 0, 143, 0.16) !important;
	outline: none !important;
}

.enviar-novas-artes .passos-envio select.form-control {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 36px !important;
	cursor: pointer !important;
}

html.dark-theme .enviar-novas-artes .passos-envio select.form-control {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* Divisores e Caixas Informativas */
.enviar-novas-artes .passos-envio .divisor {
	border-color: var(--ua-border) !important;
	margin: 28px 0 !important;
	clear: both !important;
}

.enviar-novas-artes .passos-envio .box-sombra,
.enviar-novas-artes .box-orientacoes,
.enviar-novas-artes .gradient-box {
	background: var(--ua-surface-subtle) !important;
	color: var(--ua-text-secondary) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	padding: 18px 20px !important;
	width: 100% !important;
	line-height: 1.6 !important;
	position: relative !important;
}

.enviar-novas-artes .gradient-box {
	border-left: 4px solid #FF008F !important;
	background: rgba(255, 0, 143, 0.04) !important;
	color: var(--ua-text) !important;
	margin: 24px 0 !important;
}

.enviar-novas-artes .gradient-box:before {
	display: none !important;
}

.enviar-novas-artes .box-infos {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-top: 20px !important;
}

.enviar-novas-artes .box-infos ul {
	margin: 0 !important;
	padding-left: 20px !important;
}

/* Botões Modernos de Navegação e Envio */
.enviar-novas-artes .passos-envio .bt1 {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	height: 44px !important;
	padding: 0 24px !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
}

.enviar-novas-artes .passos-envio .bt1:not(.bt2):not(#enviar) {
	background: var(--ua-text) !important;
	border: 1px solid var(--ua-text) !important;
	color: var(--ua-inverse) !important;
}

.enviar-novas-artes .passos-envio .bt1:not(.bt2):not(#enviar):hover {
	opacity: 0.9 !important;
	transform: translateY(-1px) !important;
}

.enviar-novas-artes .passos-envio .bt1.bt2,
.enviar-novas-artes .passos-envio .prev {
	background: transparent !important;
	border: 1px solid var(--ua-border-strong) !important;
	color: var(--ua-text) !important;
}

.enviar-novas-artes .passos-envio .bt1.bt2:hover,
.enviar-novas-artes .passos-envio .prev:hover {
	background: var(--ua-surface-hover) !important;
	color: var(--ua-text) !important;
}

.enviar-novas-artes .passos-envio #enviar {
	background: #FF008F !important;
	border: 1px solid #FF008F !important;
	color: #FFFFFF !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 16px rgba(255, 0, 143, 0.35) !important;
}

.enviar-novas-artes .passos-envio #enviar:hover {
	background: #E0007E !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 20px rgba(255, 0, 143, 0.45) !important;
}

.enviar-novas-artes .passos-envio #mensagem {
	background: var(--ua-surface-hover) !important;
	border: 1px solid var(--ua-border) !important;
	color: var(--ua-text-secondary) !important;
	cursor: not-allowed !important;
}

/* Passo 2 — Upload de Imagem e Dropzone */
.enviar-novas-artes .area-upload-moderna {
	border: 2px dashed var(--ua-border-strong);
	border-radius: 12px;
	padding: 36px 24px;
	text-align: center;
	background: var(--ua-surface-subtle);
	transition: all 0.25s ease;
	cursor: pointer;
	position: relative;
	margin-bottom: 24px;
}

.enviar-novas-artes .area-upload-moderna:hover,
.enviar-novas-artes .area-upload-moderna.dragover {
	border-color: #FF008F;
	background: rgba(255, 0, 143, 0.04);
}

.enviar-novas-artes .area-upload-moderna .icone-upload {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 0, 143, 0.1);
	color: #FF008F;
	margin-bottom: 16px;
}

.enviar-novas-artes .area-upload-moderna .titulo-upload {
	font-size: 16px;
	font-weight: 600;
	color: var(--ua-text);
	margin-bottom: 6px;
}

.enviar-novas-artes .area-upload-moderna .subtitulo-upload {
	font-size: 13px;
	color: var(--ua-text-secondary);
	margin-bottom: 18px;
}

.enviar-novas-artes .upload-pills {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}

.enviar-novas-artes .upload-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	background: var(--ua-bg);
	border: 1px solid var(--ua-border);
	color: var(--ua-text-secondary);
}

/* Preview da Obra e Loading */
.enviar-novas-artes .passos-envio .img-preview {
	border: 1px solid var(--ua-border);
	border-radius: 10px;
	background: var(--ua-surface-subtle);
	overflow: hidden;
	width: 280px;
	height: 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
	position: relative;
}

.enviar-novas-artes .passos-envio .img-preview .img {
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.enviar-novas-artes .passos-envio .img-preview .replace {
	font-size: 48px;
	color: var(--ua-subtle);
}

.enviar-novas-artes .passo-envio-2 .loading {
	background: var(--ua-surface) !important;
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px;
	visibility: hidden;
	opacity: 0;
	transition: all 0.25s ease;
	border-radius: 12px;
}

.enviar-novas-artes .passo-envio-2.upload-img .loading {
	visibility: visible !important;
	opacity: 1 !important;
}

.enviar-novas-artes .passo-envio-2 .loading .trilho-progresso {
	width: 100%;
	max-width: 320px;
	height: 10px;
	background: var(--ua-surface-hover);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 12px;
}

.enviar-novas-artes .passo-envio-2 .loading .cont {
	height: 100%;
	background: linear-gradient(90deg, #FF008F, #FF5EB8) !important;
	border-radius: 6px;
	width: 0%;
	transition: width 0.2s ease;
}

/* Substituído por estado de sucesso moderno unificado em .card-sucesso-upload */
.enviar-novas-artes .passo-envio-2 .sucesso {
	display: none !important;
}

/* Passo 3 — Nome da Arte e Tags */
.enviar-novas-artes .passo-envio-3 .contador-caracteres {
	font-size: 12px;
	color: var(--ua-muted);
	float: right;
	margin-top: 6px;
}

.enviar-novas-artes .bootstrap-tagsinput {
	background: var(--ua-bg) !important;
	border: 1px solid var(--ua-border-strong) !important;
	border-radius: 8px !important;
	padding: 8px 12px !important;
	min-height: 48px !important;
	width: 100% !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 6px !important;
	box-shadow: none !important;
}

.enviar-novas-artes .bootstrap-tagsinput:focus-within {
	border-color: #FF008F !important;
	box-shadow: 0 0 0 3px rgba(255, 0, 143, 0.16) !important;
}

.enviar-novas-artes .bootstrap-tagsinput .label {
	background: rgba(255, 0, 143, 0.12) !important;
	border: 1px solid rgba(255, 0, 143, 0.35) !important;
	border-radius: 6px !important;
	color: #FF008F !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	padding: 4px 22px 4px 8px !important;
	margin: 0 !important;
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
}

.enviar-novas-artes .bootstrap-tagsinput .label span {
	position: absolute !important;
	right: 6px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	cursor: pointer !important;
	font-size: 14px !important;
	opacity: 0.7 !important;
	color: #FF008F !important;
}

.enviar-novas-artes .bootstrap-tagsinput .label span:hover {
	opacity: 1 !important;
}

.enviar-novas-artes .bootstrap-tagsinput input {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--ua-text) !important;
	font-size: 13px !important;
	padding: 4px 8px !important;
	margin: 0 !important;
	min-width: 140px !important;
}

/* Passo 4 — Categorias e Cores */
.enviar-novas-artes .dropdown-cor,
.enviar-novas-artes .dropdown-cor.dropdown {
	width: 100% !important;
	display: block !important;
	position: relative !important;
}

.enviar-novas-artes .dropdown-cor .dropdown-toggle,
.enviar-novas-artes .dropdown-cor button.dropdown-toggle,
.enviar-novas-artes .dropdown-cor .btn.dropdown-toggle {
	width: 100% !important;
	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;
	border-radius: 8px !important;
	border: 1px solid var(--ua-border-strong) !important;
	background: var(--ua-bg) !important;
	color: var(--ua-text) !important;
	-webkit-text-fill-color: var(--ua-text) !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: flex-start !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 0 14px !important;
	margin: 0 !important;
	font-size: 14px !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 400 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
}

.enviar-novas-artes .dropdown-cor .dropdown-toggle:focus,
.enviar-novas-artes .dropdown-cor .dropdown-toggle:hover {
	border-color: #FF008F !important;
	background: var(--ua-bg) !important;
	color: var(--ua-text) !important;
}

/* Oculta .box-cor quando vazio ou sem estilo de cor para alinhar o texto perfeitamente à esquerda como os selects */
.enviar-novas-artes .dropdown-cor .dropdown-toggle .box-cor,
.enviar-novas-artes .dropdown-cor .dropdown-toggle .box-cor:empty {
	display: none !important;
	margin: 0 !important;
}

.enviar-novas-artes .dropdown-cor .dropdown-toggle .box-cor[style*="background"],
.enviar-novas-artes .dropdown-cor .dropdown-toggle .box-cor[style*="rgb"],
.enviar-novas-artes .dropdown-cor .dropdown-toggle .box-cor[style*="#"] {
	display: inline-block !important;
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	float: none !important;
}

.enviar-novas-artes .dropdown-cor .box-cor {
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	float: none !important;
}

.enviar-novas-artes .dropdown-cor .dropdown-toggle .cor-nome,
.enviar-novas-artes .dropdown-cor .dropdown-toggle span:not(.caret) {
	display: inline-block !important;
	text-align: left !important;
	text-transform: none !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	color: var(--ua-text) !important;
	-webkit-text-fill-color: var(--ua-text) !important;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 1 auto !important;
}

.enviar-novas-artes .dropdown-cor .dropdown-toggle .caret {
	margin-left: auto !important;
	margin-right: 0 !important;
	border: none !important;
	position: static !important;
	top: auto !important;
	right: auto !important;
	width: 14px !important;
	height: 14px !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 14px 14px !important;
	flex-shrink: 0 !important;
}

html.dark-theme .enviar-novas-artes .dropdown-cor .dropdown-toggle .caret {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E4E4E7%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
}

.enviar-novas-artes .dropdown-cor .dropdown-menu {
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22) !important;
	padding: 6px !important;
	max-height: 260px !important;
	overflow-y: auto !important;
	width: 100% !important;
}

.enviar-novas-artes .dropdown-cor .dropdown-menu li a {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 8px 12px !important;
	border-radius: 6px !important;
	color: var(--ua-text) !important;
	font-size: 13px !important;
	transition: background 0.15s ease !important;
}

.enviar-novas-artes .dropdown-cor .dropdown-menu li a:hover {
	background: var(--ua-surface-hover) !important;
	color: var(--ua-text) !important;
}

/* Passo 5 — Resumo da Obra (Ficha Técnica) */
.enviar-novas-artes .passo-envio-5 .ficha-obra {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 32px;
	align-items: flex-start;
}

.enviar-novas-artes .passo-envio-5 .img-preview-2 {
	width: 100%;
	height: 320px;
}

.enviar-novas-artes .passo-envio-5 .resumo-item {
	margin-bottom: 18px;
}

.enviar-novas-artes .passo-envio-5 .resumo-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ua-muted);
	margin-bottom: 4px;
}

.enviar-novas-artes .passo-envio-5 .resumo-valor-nome {
	font-size: 20px;
	font-weight: 700;
	color: var(--ua-text);
	letter-spacing: -0.02em;
}

.enviar-novas-artes .passo-envio-5 .resumo-tags .tag {
	display: inline-flex;
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(255, 0, 143, 0.1);
	border: 1px solid rgba(255, 0, 143, 0.3);
	color: #FF008F;
	font-size: 12px;
	font-weight: 600;
	margin-right: 6px;
	margin-bottom: 6px;
}

/* Telas de Feedback (Sucesso, Erro, Limite Excedido) */
.card-feedback-portal {
	max-width: 620px;
	margin: 48px auto;
	background: var(--ua-surface);
	border: 1px solid var(--ua-border);
	border-radius: 16px;
	padding: 48px 36px;
	text-align: center;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
}

.card-feedback-portal .feedback-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	margin-bottom: 24px;
}

.card-feedback-portal .feedback-ico.sucesso {
	background: rgba(16, 185, 129, 0.12);
	color: #10B981;
}

.card-feedback-portal .feedback-ico.erro {
	background: rgba(239, 68, 68, 0.12);
	color: #EF4444;
}

.card-feedback-portal .feedback-ico.alerta {
	background: rgba(245, 158, 11, 0.12);
	color: #F59E0B;
}

.card-feedback-portal h1 {
	font-size: 26px;
	font-weight: 700;
	color: var(--ua-text);
	letter-spacing: -0.03em;
	margin: 0 0 12px;
}

.card-feedback-portal p {
	font-size: 15px;
	color: var(--ua-text-secondary);
	line-height: 1.6;
	margin-bottom: 28px;
}

.card-feedback-portal .botoes-acoes {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Página "Como Enviar sua Arte" */
.enviar-novas-artes .como-enviar-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin: 28px 0;
}

.enviar-novas-artes .card-requisito {
	background: var(--ua-surface);
	border: 1px solid var(--ua-border);
	border-radius: 12px;
	padding: 24px 20px;
	text-align: center;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.enviar-novas-artes .card-requisito:hover {
	transform: translateY(-2px);
	border-color: #FF008F;
}

.enviar-novas-artes .card-requisito .card-badge {
	display: inline-flex;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 700;
	background: rgba(255, 0, 143, 0.1);
	color: #FF008F;
	margin-bottom: 12px;
}

.enviar-novas-artes .card-requisito .card-desc {
	font-size: 13px;
	color: var(--ua-text-secondary);
	line-height: 1.5;
}

/* Formatos Possíveis */
.enviar-novas-artes .formatos .abas {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	height: auto;
	gap: 8px;
	border: 0;
	width: 100%;
	max-width: 945px;
	margin: 24px 0 18px;
}

.enviar-novas-artes .formatos .abas div {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	float: none;
	margin: 0;
	min-height: 56px;
	padding: 10px 18px;
	color: var(--ua-text-secondary);
	border: 1px solid var(--ua-border);
	border-radius: 8px;
	background: var(--ua-surface);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.enviar-novas-artes .formatos .abas div::before {
	flex-shrink: 0;
	float: none;
	margin: 0 8px 0 0;
}

.enviar-novas-artes .formatos .abas div::after {
	display: none;
}

.enviar-novas-artes .formatos .abas div.ativo,
.enviar-novas-artes .formatos .abas div:hover {
	border-color: #FF008F;
	color: var(--ua-text);
	background: rgba(255, 0, 143, 0.06);
}

.enviar-novas-artes .formatos .parede {
	width: 100%;
	background: var(--ua-surface);
	border: 1px solid var(--ua-border);
	border-radius: 12px;
	padding: 24px;
	min-height: 140px;
}

.enviar-novas-artes .formatos .parede .quadros {
	display: none;
}

.enviar-novas-artes .formatos .parede .quadros.ativo {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.enviar-novas-artes .formato-medida {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border: 1px solid var(--ua-border-strong);
	border-radius: 8px;
	color: var(--ua-text);
	background: var(--ua-bg);
	font-weight: 600;
	font-size: 14px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

/* Responsividade Mobile */
@media (max-width: 991px) {
	.enviar-novas-artes .abas-envio {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.enviar-novas-artes .passo-envio-5 .ficha-obra {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.enviar-novas-artes .main > .container { padding-top: 16px; }
	.enviar-novas-artes .passos-envio { padding: 20px 16px !important; }
	.enviar-novas-artes .abas-envio { grid-template-columns: 1fr 1fr !important; }
	.enviar-novas-artes .passos-envio .img-preview { width: 100%; max-width: 280px; margin: 0 auto 20px; }
}
/* ==========================================================================
   Correções de Contraste, Botões e Dark Mode para Enviar Artes
   ========================================================================== */

/* 1. Botões Rosas (Garantir texto sempre branco legível) */
.enviar-novas-artes .btn-portal-primary,
.enviar-novas-artes a.btn-portal-primary,
.enviar-novas-artes .bt1#enviar,
.enviar-novas-artes .bt1.bt-upload-arte,
.btn-portal.btn-portal-primary,
a.btn-portal.btn-portal-primary {
	background-color: #FF008F !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.enviar-novas-artes .btn-portal-primary:hover,
.enviar-novas-artes a.btn-portal-primary:hover,
.enviar-novas-artes .bt1#enviar:hover,
.btn-portal.btn-portal-primary:hover,
a.btn-portal.btn-portal-primary:hover {
	background-color: #D60078 !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
}

/* 2. Corrigir texto escuro em Dark Mode */
html.dark-theme .enviar-novas-artes .pass-send-link-color,
html.dark-theme .enviar-novas-artes .pass-send-link-color a,
html.dark-theme .enviar-novas-artes .cor3,
html.dark-theme .enviar-novas-artes p.cor3,
html.dark-theme .enviar-novas-artes p,
html.dark-theme .enviar-novas-artes span,
html.dark-theme .enviar-novas-artes strong,
html.dark-theme .enviar-novas-artes .gradient-box,
html.dark-theme .enviar-novas-artes .box-orientacoes,
html.dark-theme .enviar-novas-artes .box-orientacoes li,
html.dark-theme .enviar-novas-artes .box-orientacoes strong,
html.dark-theme .enviar-novas-artes .box-sombra,
html.dark-theme .enviar-novas-artes .box-infos,
html.dark-theme .enviar-novas-artes .card-requisito .card-desc {
	color: var(--ua-text) !important;
}

html.dark-theme .enviar-novas-artes .cor3,
html.dark-theme .enviar-novas-artes p.cor3,
html.dark-theme .enviar-novas-artes .subtitulo-envio {
	color: var(--ua-text-secondary) !important;
}

html.dark-theme .enviar-novas-artes .pass-send-link-color a {
	color: #FF008F !important;
	text-decoration: underline !important;
}

html.dark-theme .enviar-novas-artes .pass-send-link-color a:hover {
	color: #FF66BA !important;
}

/* 3. Reverter 'formatos' para a parede clássica com imagens dos ambientes que o usuário irá recriar */
.enviar-novas-artes .formatos .parede {
	background: url(../imgs/parede-formatos.jpg) no-repeat center bottom !important;
	height: 550px !important;
	min-height: 550px !important;
	position: relative !important;
	width: 100% !important;
	max-width: 945px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 8px !important;
	overflow: hidden !important;
}

.enviar-novas-artes .formatos .parede.tamanho2 {
	height: 902px !important;
	min-height: 902px !important;
}

.enviar-novas-artes .formatos .parede .quadros {
	display: block !important;
	background: no-repeat center !important;
	position: absolute !important;
	opacity: 0 !important;
	transition: opacity .2s ease-in-out !important;
	pointer-events: none !important;
}

.enviar-novas-artes .formatos .parede .quadros.ativo {
	opacity: 1 !important;
	pointer-events: auto !important;
}

.enviar-novas-artes .formatos .parede .quadros.retrato { 
	background-image: url(../imgs/quadros-ambiente-retrato.png) !important; 
	left: 210px !important; 
	top: 10px !important; 
	height: 370px !important; 
	width: 528px !important; 
}

.enviar-novas-artes .formatos .parede .quadros.paisagem { 
	background-image: url(../imgs/quadros-ambiente-paisagem.png) !important; 
	left: 158px !important; 
	top: 50px !important; 
	height: 276px !important; 
	width: 578px !important; 
}

.enviar-novas-artes .formatos .parede .quadros.panoramicoh { 
	background-image: url(../imgs/quadros-ambiente-panoramicoh.png?v=2) !important;
	left: 55px !important; 
	top: 50px !important; 
	height: 260px !important; 
	width: 699px !important; 
}

.enviar-novas-artes .formatos .parede .quadros.panoramicov { 
	background-image: url(../imgs/quadros-ambiente-panoramicov.png?v=2) !important;
	left: 367px !important; 
	top: 22px !important; 
	height: 699px !important; 
	width: 260px !important; 
}

.enviar-novas-artes .formatos .parede .quadros.quadrado {
	background-image: url(../imgs/quadros-ambiente-quadrado.png?v=2) !important;
	left: 220px !important; 
	top: 52px !important; 
	height: 275px !important; 
	width: 517px !important; 
}

@media (max-width: 991px) {
	.enviar-novas-artes .formatos .parede {
		height: 380px !important;
		min-height: 380px !important;
		background-size: cover !important;
	}
	.enviar-novas-artes .formatos .parede.tamanho2 {
		height: 520px !important;
		min-height: 520px !important;
	}
	.enviar-novas-artes .formatos .parede .quadros {
		transform: scale(0.7);
		transform-origin: center top;
	}
}


/* ==========================================================================
   Reforço Definitivo de Contraste e Botões - Novas Artes & Formatos
   ========================================================================== */

/* Botões Rosa: Forçar SEMPRE cor branca com alta especificidade */
.btn-portal-primary,
a.btn-portal-primary,
.bt1#enviar,
button#enviar,
a.bt1:not(.bt2):not(.prev),
button.bt1:not(.bt2):not(.prev),
.como-enviar-arte a.btn-portal-primary,
.formatos-possiveis a.btn-portal-primary,
.enviar-novas-artes a.btn-portal-primary,
html.dark-theme .btn-portal-primary,
html.dark-theme a.btn-portal-primary,
html.dark-theme .main .conteudo a.btn-portal-primary,
html.dark-theme .main .conteudo a.bt1:not(.bt2):not(.prev),
html.dark-theme .bt1#enviar,
html.dark-theme button#enviar {
	background-color: #FF008F !important;
	background: #FF008F !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	fill: #FFFFFF !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.btn-portal-primary *,
a.btn-portal-primary *,
.bt1#enviar *,
button#enviar * {
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	stroke: #FFFFFF !important;
}

.btn-portal-primary:hover,
a.btn-portal-primary:hover,
.bt1#enviar:hover,
button#enviar:hover,
html.dark-theme .main .conteudo a.btn-portal-primary:hover {
	background-color: #D60078 !important;
	background: #D60078 !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
}

/* Links de Dúvidas / Fale Conosco / Perguntas Frequentes */
.pass-send-link-color,
.como-enviar-arte .pass-send-link-color,
.enviar-novas-artes .pass-send-link-color {
	color: var(--ua-text-secondary) !important;
	font-size: 14px !important;
}

.pass-send-link-color a,
.como-enviar-arte .pass-send-link-color a,
.enviar-novas-artes .pass-send-link-color a,
html.dark-theme .pass-send-link-color a,
html.dark-theme .main .conteudo .pass-send-link-color a {
	color: #FF008F !important;
	-webkit-text-fill-color: #FF008F !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
}

.pass-send-link-color a:hover,
html.dark-theme .pass-send-link-color a:hover {
	color: #FF66BA !important;
	-webkit-text-fill-color: #FF66BA !important;
}

/* Textos do Aviso do Remix e Caixas Informativas */
.gradient-box,
.box-orientacoes,
.box-infos,
html.dark-theme .gradient-box,
html.dark-theme .box-orientacoes,
html.dark-theme .box-infos {
	color: var(--ua-text) !important;
}

html.dark-theme .gradient-box div,
html.dark-theme .gradient-box p,
html.dark-theme .gradient-box span,
html.dark-theme .box-orientacoes li,
html.dark-theme .box-orientacoes strong {
	color: var(--ua-text) !important;
}

/* Formatos: Garantir que a parede clássica tenha dimensões e renderização perfeitas */
.formatos .parede {
	box-sizing: border-box !important;
}


/* ==========================================================================
   Correção de Contraste dos Botões de Passos (Próximo Passo / Voltar)
   ========================================================================== */

/* Botão Próximo Passo (Dark e Light Mode) */
.enviar-novas-artes .passos-envio button.bt1.next,
.enviar-novas-artes .passos-envio .bt1.next,
.enviar-novas-artes button.bt1.next,
html.dark-theme .enviar-novas-artes .passos-envio button.bt1.next,
html.dark-theme .enviar-novas-artes .passos-envio .bt1.next {
	background-color: #FFFFFF !important;
	background: #FFFFFF !important;
	color: #111111 !important;
	-webkit-text-fill-color: #111111 !important;
	border: 1px solid #FFFFFF !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	opacity: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

.enviar-novas-artes .passos-envio button.bt1.next svg,
.enviar-novas-artes .passos-envio .bt1.next svg,
html.dark-theme .enviar-novas-artes .passos-envio button.bt1.next svg,
html.dark-theme .enviar-novas-artes .passos-envio .bt1.next svg {
	stroke: #111111 !important;
	color: #111111 !important;
}

.enviar-novas-artes .passos-envio button.bt1.next:hover,
.enviar-novas-artes .passos-envio .bt1.next:hover,
html.dark-theme .enviar-novas-artes .passos-envio button.bt1.next:hover,
html.dark-theme .enviar-novas-artes .passos-envio .bt1.next:hover {
	background-color: #EAEAEA !important;
	background: #EAEAEA !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
	border-color: #EAEAEA !important;
	transform: translateY(-1px) !important;
}

/* Light Mode: quando html não tem .dark-theme */
html:not(.dark-theme) .enviar-novas-artes .passos-envio button.bt1.next,
html:not(.dark-theme) .enviar-novas-artes .passos-envio .bt1.next {
	background-color: #111111 !important;
	background: #111111 !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	border: 1px solid #111111 !important;
}

html:not(.dark-theme) .enviar-novas-artes .passos-envio button.bt1.next svg,
html:not(.dark-theme) .enviar-novas-artes .passos-envio .bt1.next svg {
	stroke: #FFFFFF !important;
	color: #FFFFFF !important;
}

html:not(.dark-theme) .enviar-novas-artes .passos-envio button.bt1.next:hover,
html:not(.dark-theme) .enviar-novas-artes .passos-envio .bt1.next:hover {
	background-color: #333333 !important;
	background: #333333 !important;
	border-color: #333333 !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
}

/* Botões de Voltar (.prev / .bt2) */
.enviar-novas-artes .passos-envio .bt1.bt2,
.enviar-novas-artes .passos-envio .prev,
html.dark-theme .enviar-novas-artes .passos-envio .bt1.bt2,
html.dark-theme .enviar-novas-artes .passos-envio .prev {
	background: transparent !important;
	border: 1px solid var(--ua-border-strong) !important;
	color: var(--ua-text) !important;
	-webkit-text-fill-color: var(--ua-text) !important;
	font-weight: 600 !important;
}

.enviar-novas-artes .passos-envio .bt1.bt2:hover,
.enviar-novas-artes .passos-envio .prev:hover,
html.dark-theme .enviar-novas-artes .passos-envio .bt1.bt2:hover,
html.dark-theme .enviar-novas-artes .passos-envio .prev:hover {
	background: var(--ua-surface-hover) !important;
	border-color: var(--ua-text-secondary) !important;
	color: var(--ua-text) !important;
	-webkit-text-fill-color: var(--ua-text) !important;
}


/* ==========================================================================
   Harmonização e Consistência Visual Completa dos Passos 1 a 5 (Dark & Light)
   ========================================================================== */

/* 1. Botão Escolher Arte dentro da Dropzone */
.enviar-novas-artes .btn-escolher-arte {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 10px 24px !important;
	height: 42px !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	background: #FF008F !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	border: 1px solid #FF008F !important;
	box-shadow: 0 4px 14px rgba(255, 0, 143, 0.3) !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
}

.enviar-novas-artes .area-upload-moderna:hover .btn-escolher-arte {
	background: #D60078 !important;
	box-shadow: 0 6px 18px rgba(255, 0, 143, 0.45) !important;
	transform: translateY(-1px) !important;
}

/* 2. Área de Preview da Imagem (Passo 2 e Passo 5) */
.enviar-novas-artes .passos-envio .img-preview,
.enviar-novas-artes .img-preview,
.enviar-novas-artes .img-preview-2 {
	border: 1.5px dashed var(--ua-border-strong) !important;
	border-radius: 12px !important;
	background: var(--ua-surface-subtle) !important;
	width: 100% !important;
	max-width: 320px !important;
	height: 320px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	position: relative !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 auto !important;
}

.enviar-novas-artes .passos-envio .img-preview .img,
.enviar-novas-artes .img-preview .img {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border: none !important;
	background-color: transparent !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.enviar-novas-artes .passos-envio .img-preview .replace,
.enviar-novas-artes .img-preview .replace {
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	line-height: normal !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--ua-muted) !important;
	transition: all 0.25s ease !important;
}

.enviar-novas-artes .passos-envio .img-preview .replace svg {
	stroke: var(--ua-muted) !important;
	opacity: 0.75 !important;
}

/* Quando upload finalizado, esconde o ícone placeholder */
.enviar-novas-artes .finalizado .img-preview .replace {
	display: none !important;
}

/* 3. Pills de Orientação Técnica no Upload */
.enviar-novas-artes .upload-pills {
	display: flex !important;
	justify-content: center !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-top: 16px !important;
}

.enviar-novas-artes .upload-pill {
	display: inline-flex !important;
	align-items: center !important;
	padding: 4px 12px !important;
	border-radius: 20px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	background: var(--ua-bg) !important;
	border: 1px solid var(--ua-border-strong) !important;
	color: var(--ua-text-secondary) !important;
}

/* 4. Barra e Steps do Topo (.abas-envio) */
.enviar-novas-artes .abas-envio {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 12px !important;
	margin-bottom: 24px !important;
	position: relative !important;
}

.enviar-novas-artes .abas-envio:after {
	display: none !important; /* Desativa linha estática legada que dessincronizava no layout moderno */
}

.enviar-novas-artes .abas-envio .aba {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 14px !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 8px !important;
	background: var(--ua-surface) !important;
	color: var(--ua-text-secondary) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	transition: all 0.2s ease !important;
}

/* Passo Ativo */
.enviar-novas-artes .passo1 .abas-envio .aba1,
.enviar-novas-artes .passo2 .abas-envio .aba2,
.enviar-novas-artes .passo3 .abas-envio .aba3,
.enviar-novas-artes .passo4 .abas-envio .aba4,
.enviar-novas-artes .passo5 .abas-envio .aba7 {
	border-color: #FF008F !important;
	background: rgba(255, 0, 143, 0.08) !important;
	color: var(--ua-text) !important;
	font-weight: 600 !important;
	box-shadow: 0 2px 12px rgba(255, 0, 143, 0.15) !important;
}

.enviar-novas-artes .passo1 .abas-envio .aba1 .aba-num,
.enviar-novas-artes .passo2 .abas-envio .aba2 .aba-num,
.enviar-novas-artes .passo3 .abas-envio .aba3 .aba-num,
.enviar-novas-artes .passo4 .abas-envio .aba4 .aba-num,
.enviar-novas-artes .passo5 .abas-envio .aba7 .aba-num {
	background: #FF008F !important;
	color: #FFFFFF !important;
	box-shadow: 0 2px 8px rgba(255, 0, 143, 0.4) !important;
}

/* Passos Concluídos com Sucesso */
.enviar-novas-artes .passo2 .abas-envio .aba1,
.enviar-novas-artes .passo3 .abas-envio .aba1,
.enviar-novas-artes .passo3 .abas-envio .aba2,
.enviar-novas-artes .passo4 .abas-envio .aba1,
.enviar-novas-artes .passo4 .abas-envio .aba2,
.enviar-novas-artes .passo4 .abas-envio .aba3,
.enviar-novas-artes .passo5 .abas-envio .aba1,
.enviar-novas-artes .passo5 .abas-envio .aba2,
.enviar-novas-artes .passo5 .abas-envio .aba3,
.enviar-novas-artes .passo5 .abas-envio .aba4 {
	border-color: rgba(16, 185, 129, 0.4) !important;
	color: var(--ua-text) !important;
}

.enviar-novas-artes .passo2 .abas-envio .aba1 .aba-num,
.enviar-novas-artes .passo3 .abas-envio .aba1 .aba-num,
.enviar-novas-artes .passo3 .abas-envio .aba2 .aba-num,
.enviar-novas-artes .passo4 .abas-envio .aba1 .aba-num,
.enviar-novas-artes .passo4 .abas-envio .aba2 .aba-num,
.enviar-novas-artes .passo4 .abas-envio .aba3 .aba-num,
.enviar-novas-artes .passo5 .abas-envio .aba1 .aba-num,
.enviar-novas-artes .passo5 .abas-envio .aba2 .aba-num,
.enviar-novas-artes .passo5 .abas-envio .aba3 .aba-num,
.enviar-novas-artes .passo5 .abas-envio .aba4 .aba-num {
	background: #10B981 !important;
	color: #FFFFFF !important;
}

/* 5. Inputs Desabilitados e Resumos no Passo 5 */
.enviar-novas-artes .resumo-item .form-control:disabled,
.enviar-novas-artes .resumo-item input:disabled,
.enviar-novas-artes .campo-disabled {
	background: var(--ua-bg) !important;
	border: 1px solid var(--ua-border-strong) !important;
	color: var(--ua-text) !important;
	-webkit-text-fill-color: var(--ua-text) !important;
	opacity: 1 !important;
	cursor: default !important;
	border-radius: 8px !important;
	height: 44px !important;
	font-weight: 500 !important;
}

.enviar-novas-artes #resumoFormatoTamanho {
	border: 1px solid var(--ua-border-strong) !important;
	border-radius: 8px !important;
	padding: 0 14px !important;
	font-size: 14px !important;
}


/* ==========================================================================
   Alinhamento Perfeito Entre a Área de Upload e o Preview (Passo 2)
   ========================================================================== */

.enviar-novas-artes .grid-passo-upload {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important; /* Estica ambas as colunas para mesma altura */
}

.enviar-novas-artes .grid-passo-upload > .col-md-7,
.enviar-novas-artes .grid-passo-upload > .col-md-5 {
	display: flex !important;
	flex-direction: column !important;
}

.enviar-novas-artes .grid-passo-upload .upload {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	width: 100% !important;
}

.enviar-novas-artes .grid-passo-upload .area-upload-moderna {
	height: 380px !important;
	min-height: 380px !important;
	max-height: 380px !important;
	margin-bottom: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	padding: 24px !important;
}

.enviar-novas-artes .grid-passo-upload .img-preview {
	height: 380px !important;
	min-height: 380px !important;
	max-height: 380px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}

.enviar-novas-artes .grid-passo-upload .img-preview .img {
	height: 100% !important;
	width: 100% !important;
	max-height: 100% !important;
}

@media (max-width: 991px) {
	.enviar-novas-artes .grid-passo-upload {
		align-items: flex-start !important;
		gap: 20px !important;
	}
	.enviar-novas-artes .grid-passo-upload .area-upload-moderna,
	.enviar-novas-artes .grid-passo-upload .img-preview {
		height: 320px !important;
		min-height: 320px !important;
		max-height: 320px !important;
	}
}


/* ==========================================================================
   Design Moderno e Padronizado para Todos os Modais (Dark e Light Mode)
   ========================================================================== */

/* 1. Modal Dialog & Conteúdo */
.modal-dialog {
	max-width: 620px;
	margin: 50px auto !important;
}

#modalErroUpload .modal-dialog {
	max-width: 580px !important;
	width: 92% !important;
}

.modal-content,
.portal-modal-content {
	background: var(--ua-surface) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 16px !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45) !important;
	overflow: hidden !important;
	position: relative !important;
}

html.dark-theme .modal-content,
html.dark-theme .portal-modal-content {
	background: #18181B !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.75) !important;
	color: #F4F4F6 !important;
}

/* 2. Header do Modal (Alinhamento Flexível e Botão Fechar no Canto Superior Direito) */
.modal-header,
.portal-modal-header {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 20px 24px !important;
	border-bottom: 1px solid var(--ua-border) !important;
	background: transparent !important;
	position: relative !important;
}

html.dark-theme .modal-header,
html.dark-theme .portal-modal-header {
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Título */
.modal-header .modal-title,
.portal-modal-header .modal-title {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--ua-text) !important;
	margin: 0 !important;
	line-height: 1.3 !important;
	flex: 1 !important;
	text-align: left !important;
	order: 1 !important;
}

html.dark-theme .modal-header .modal-title,
html.dark-theme .portal-modal-header .modal-title {
	color: #FFFFFF !important;
}

/* Botão Fechar "x" SEMPRE no Canto Superior Direito com alta prioridade */
.modal-header .close,
.modal-header button.close,
.portal-modal-header .close,
.portal-modal-close {
	order: 2 !important;
	margin: 0 0 0 auto !important;
	padding: 4px 8px !important;
	float: none !important;
	position: relative !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	background: transparent !important;
	border: none !important;
	font-size: 26px !important;
	line-height: 1 !important;
	font-weight: 300 !important;
	color: var(--ua-muted) !important;
	opacity: 0.7 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.modal-header .close:hover,
.modal-header button.close:hover,
.portal-modal-header .close:hover,
.portal-modal-close:hover {
	opacity: 1 !important;
	color: #FF008F !important;
	transform: scale(1.1) !important;
}

html.dark-theme .modal-header .close,
html.dark-theme .modal-header button.close,
html.dark-theme .portal-modal-header .close,
html.dark-theme .portal-modal-close {
	color: rgba(255, 255, 255, 0.65) !important;
}

html.dark-theme .modal-header .close:hover,
html.dark-theme .modal-header button.close:hover,
html.dark-theme .portal-modal-header .close:hover,
html.dark-theme .portal-modal-close:hover {
	color: #FFFFFF !important;
}

/* 3. Corpo do Modal (modal-body) */
.modal-body {
	padding: 24px !important;
	color: var(--ua-text) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
}

html.dark-theme .modal-body {
	color: #E4E4E7 !important;
}

/* Estilização da Lista de Mensagens / Erros do Upload */
.lista-erros {
	margin: 0 !important;
}

.lista-erros .msg {
	background: rgba(239, 68, 68, 0.08) !important;
	border: 1px solid rgba(239, 68, 68, 0.25) !important;
	border-radius: 10px !important;
	padding: 16px 20px !important;
	margin-bottom: 12px !important;
	color: var(--ua-text) !important;
	font-size: 13.5px !important;
	line-height: 1.6 !important;
}

html.dark-theme .lista-erros .msg {
	background: rgba(239, 68, 68, 0.12) !important;
	border-color: rgba(239, 68, 68, 0.35) !important;
	color: #F4F4F6 !important;
}

.lista-erros .msg:last-child {
	margin-bottom: 0 !important;
}

.lista-erros ul {
	margin: 10px 0 0 0 !important;
	padding-left: 20px !important;
}

.lista-erros li {
	margin-bottom: 4px !important;
}

.lista-erros font[color="red"],
.lista-erros .text-danger,
html.dark-theme .lista-erros font[color="red"] {
	color: #FF4D79 !important;
	font-weight: 700 !important;
}

/* 4. Rodapé do Modal (modal-footer) */
.modal-footer,
.portal-modal-footer {
	padding: 16px 24px !important;
	border-top: 1px solid var(--ua-border) !important;
	background: var(--ua-surface-subtle) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 12px !important;
}

html.dark-theme .modal-footer,
html.dark-theme .portal-modal-footer {
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	background: #121214 !important;
}

/* Botão de Confirmação "ENTENDI" / Ação nos Modais */
.modal-footer button.bt1,
.modal-footer .bt1,
#modalErroUpload .modal-footer .bt1 {
	background-color: #FF008F !important;
	background: #FF008F !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	padding: 10px 28px !important;
	height: 42px !important;
	border-radius: 8px !important;
	border: none !important;
	box-shadow: 0 4px 14px rgba(255, 0, 143, 0.35) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.modal-footer button.bt1:hover,
.modal-footer .bt1:hover,
#modalErroUpload .modal-footer .bt1:hover {
	background-color: #D60078 !important;
	background: #D60078 !important;
	box-shadow: 0 6px 18px rgba(255, 0, 143, 0.5) !important;
	transform: translateY(-1px) !important;
}


/* ==========================================================================
   Overlay e Barra de Progresso de Upload Moderna (Reset do .loading legado)
   ========================================================================== */

/* 1. Reset da caixa de carregamento */
.enviar-novas-artes .passo-envio-2 .upload .loading,
.enviar-novas-artes .area-upload-moderna .loading,
.enviar-novas-artes .loading {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: var(--ua-surface) !important;
	border-radius: 12px !important;
	z-index: 50 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 32px 24px !important;
	visibility: hidden !important;
	opacity: 0 !important;
	transition: opacity 0.25s ease, visibility 0.25s ease !important;
	box-shadow: none !important;
}

html.dark-theme .enviar-novas-artes .passo-envio-2 .upload .loading,
html.dark-theme .enviar-novas-artes .area-upload-moderna .loading {
	background: rgba(24, 24, 27, 0.96) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
}

/* Exibição quando a classe .upload-img é adicionada */
.enviar-novas-artes .passo-envio-2.upload-img .upload .loading,
.enviar-novas-artes .passo-envio-2.upload-img .area-upload-moderna .loading {
	visibility: visible !important;
	opacity: 1 !important;
}

/* 2. Texto de status do upload */
.enviar-novas-artes .upload .loading .loading-status-text {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--ua-text) !important;
	margin-bottom: 14px !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* 3. Trilho do Progresso (container da barra) */
.enviar-novas-artes .upload .loading .trilho-progresso {
	width: 100% !important;
	max-width: 320px !important;
	height: 10px !important;
	background: var(--ua-surface-hover) !important;
	border: 1px solid var(--ua-border) !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	position: relative !important;
	margin: 0 auto !important;
}

html.dark-theme .enviar-novas-artes .upload .loading .trilho-progresso {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
}

/* 4. Preenchimento da Barra (.cont) - Reset TOTAL das dimensões legadas */
.enviar-novas-artes .upload .loading .cont,
.passo-envio-2 .upload .loading .cont {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	height: 100% !important;
	max-height: 100% !important;
	line-height: normal !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 999px !important;
	background: #FF008F !important;
	background: linear-gradient(90deg, #FF008F 0%, #FF5EB8 100%) !important;
	box-shadow: 0 0 12px rgba(255, 0, 143, 0.5) !important;
	transition: width 0.15s ease-out !important;
}

/* 5. Ocultar o span legado absoluto dentro de .cont para evitar sobreposição gigante */
.enviar-novas-artes .upload .loading .cont span,
.passo-envio-2 .upload .loading .cont span {
	display: none !important;
}


/* ==========================================================================
   Remoção Definitiva da Seta Triângulo Duplicada (.select-seta:before)
   ========================================================================== */

/* Remove o pseudo-elemento :before legado (triângulo cinza escuro) de TODOS os .select-seta */
.select-seta:before,
.enviar-novas-artes .select-seta:before,
.passos-envio .select-seta:before,
.form-group .select-seta:before {
	display: none !important;
	content: none !important;
	border: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* Garante posicionamento e renderização limpa do select moderno com ícone SVG único */
.select-seta {
	position: relative !important;
	width: 100% !important;
}

.select-seta select,
.select-seta select.form-control,
.enviar-novas-artes .select-seta select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 14px 14px !important;
	padding-right: 38px !important;
	cursor: pointer !important;
}

html.dark-theme .select-seta select,
html.dark-theme .select-seta select.form-control,
html.dark-theme .enviar-novas-artes .select-seta select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23E4E4E7%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
}


/* ==========================================================================
   Alinhamento Absoluto (Topo e Base Idênticos) no Passo 2
   ========================================================================== */

.enviar-novas-artes .passo-envio-2 .grid-passo-upload {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	margin-top: 20px !important;
}

.enviar-novas-artes .passo-envio-2 .grid-passo-upload > .col-md-7,
.enviar-novas-artes .passo-envio-2 .grid-passo-upload > .col-md-5,
.enviar-novas-artes .passo-envio-2 .col-preview-wrapper {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.enviar-novas-artes .passo-envio-2 .upload {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
}

/* Área de Upload e Preview com Altura Fixa Rigorosa e Margin Zero */
.enviar-novas-artes .passo-envio-2 .area-upload-moderna,
.enviar-novas-artes .passo-envio-2 .img-preview,
.enviar-novas-artes .passo-envio-2 .col-preview-wrapper .img-preview {
	height: 380px !important;
	min-height: 380px !important;
	max-height: 380px !important;
	margin: 0 !important;
	padding: 24px !important;
	box-sizing: border-box !important;
	position: relative !important;
	border: 2px dashed var(--ua-border-strong) !important;
	border-radius: 12px !important;
	background: var(--ua-surface-subtle) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	width: 100% !important;
	max-width: 100% !important;
}

/* Anula qualquer margin-top herdado em .img dentro do preview */
.enviar-novas-artes .passo-envio-2 .img-preview .img,
.enviar-novas-artes .passos-envio .img-preview .img,
.passo-envio-2 .img-preview .img {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	border: none !important;
	background-color: transparent !important;
	width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Centralização do Ícone Placeholder */
.enviar-novas-artes .passo-envio-2 .img-preview .replace,
.passo-envio-2 .img-preview .replace {
	margin: 0 !important;
	padding: 0 !important;
	line-height: normal !important;
	background: transparent !important;
	height: 100% !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Mensagem de Erro do id_arquivo posicionada sem empurrar o container */
.enviar-novas-artes .passo-envio-2 .upload .form-group {
	position: absolute !important;
	bottom: -24px !important;
	left: 0 !important;
	width: 100% !important;
	margin: 0 !important;
}

.enviar-novas-artes .passo-envio-2 .upload .help-block.with-errors {
	margin: 4px 0 0 0 !important;
	font-size: 13px !important;
	color: #EF4444 !important;
}

/* ==========================================================================
   Estado de Upload Concluído com Sucesso (.passo-envio-2.finalizado)
   Elimina sobreposição, oculta a dropzone e exibe card elegante de confirmação
   ========================================================================== */

/* 1. Neutralização definitiva de caixas legadas de sucesso (.sucesso, .ico, etc) */
.passo-envio-2 .sucesso .ico,
.enviar-novas-artes .passo-envio-2 .sucesso .ico,
.passo-envio-2 .sucesso .ico:before,
.passo-envio-2 .sucesso .ico:after,
.passo-envio-2.finalizado .upload .loading,
.passo-envio-2.finalizado .upload .loading:before,
.passo-envio-2.finalizado .upload .loading:after {
	display: none !important;
	background: none !important;
	box-shadow: none !important;
	width: 0 !important;
	height: 0 !important;
	content: none !important;
}

/* 2. Alternância limpa: quando finalizado, oculta a dropzone interativa */
.enviar-novas-artes .passo-envio-2.finalizado .area-upload-moderna {
	display: none !important;
}

/* 3. Card de Sucesso Moderno com as mesmas dimensões exatas da dropzone (380px) */
.enviar-novas-artes .passo-envio-2 .card-sucesso-upload,
.enviar-novas-artes .passo-envio-2 .sucesso.card-sucesso-upload {
	display: none !important;
	height: 380px !important;
	min-height: 380px !important;
	max-height: 380px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 32px 24px !important;
	box-sizing: border-box !important;
	position: relative !important;
	top: 0 !important;
	left: 0 !important;
	border: 1.5px solid rgba(16, 185, 129, 0.4) !important;
	border-radius: 12px !important;
	background: rgba(16, 185, 129, 0.05) !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	z-index: 10 !important;
	opacity: 1 !important;
	visibility: visible !important;
	box-shadow: none !important;
}

html.dark-theme .enviar-novas-artes .passo-envio-2 .card-sucesso-upload,
html.dark-theme .enviar-novas-artes .passo-envio-2 .sucesso.card-sucesso-upload {
	background: rgba(16, 185, 129, 0.06) !important;
	border-color: rgba(16, 185, 129, 0.3) !important;
}

/* Exibe o card de sucesso apenas quando finalizado */
.enviar-novas-artes .passo-envio-2.finalizado .card-sucesso-upload,
.enviar-novas-artes .passo-envio-2.finalizado .sucesso.card-sucesso-upload,
.enviar-novas-artes .passo-envio-2.finalizado .sucesso.card-sucesso-upload.exibe {
	display: flex !important;
}

/* Ícone de Sucesso */
.enviar-novas-artes .passo-envio-2 .icone-sucesso-wrapper {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50% !important;
	background: rgba(16, 185, 129, 0.15) !important;
	color: #10B981 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 16px auto !important;
	box-shadow: 0 0 20px rgba(16, 185, 129, 0.25) !important;
}

.enviar-novas-artes .passo-envio-2 .icone-sucesso-wrapper svg {
	width: 32px !important;
	height: 32px !important;
	stroke: #10B981 !important;
}

/* Tipografia de Sucesso */
.enviar-novas-artes .passo-envio-2 .titulo-sucesso-upload {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--ua-text) !important;
	margin: 0 0 6px 0 !important;
	line-height: 1.3 !important;
}

.enviar-novas-artes .passo-envio-2 .nome-arquivo-enviado {
	font-size: 13px !important;
	color: var(--ua-muted) !important;
	font-family: monospace, monospace !important;
	background: var(--ua-surface-hover) !important;
	padding: 4px 12px !important;
	border-radius: 999px !important;
	margin: 0 0 14px 0 !important;
	max-width: 90% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	border: 1px solid var(--ua-border) !important;
}

.enviar-novas-artes .passo-envio-2 .descricao-sucesso-upload {
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--ua-muted) !important;
	margin: 0 0 20px 0 !important;
	max-width: 340px !important;
}

.enviar-novas-artes .passo-envio-2 .descricao-sucesso-upload a {
	color: var(--ua-primary) !important;
	text-decoration: underline !important;
	font-weight: 500 !important;
}

.enviar-novas-artes .passo-envio-2 .descricao-sucesso-upload a:hover {
	opacity: 0.85 !important;
}

/* Botão Moderno para Trocar Arquivo / Reenviar */
.enviar-novas-artes .passo-envio-2 .btn-trocar-arte-upload {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	background: transparent !important;
	border: 1.5px solid var(--ua-primary) !important;
	color: var(--ua-primary) !important;
	padding: 9px 20px !important;
	border-radius: 999px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.enviar-novas-artes .passo-envio-2 .btn-trocar-arte-upload:hover {
	background: var(--ua-primary) !important;
	color: #FFFFFF !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(255, 0, 143, 0.3) !important;
}

/* 4. Preview da Imagem no estado finalizado */
.enviar-novas-artes .passo-envio-2.finalizado .img-preview .replace,
.passo-envio-2.finalizado .img-preview .replace {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
}

.enviar-novas-artes .passo-envio-2.finalizado .img-preview .img,
.passo-envio-2.finalizado .img-preview .img {
	background-color: transparent !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	width: 100% !important;
	height: 100% !important;
}

.enviar-novas-artes .passo-envio-2 .img-preview .bt1 {
	display: none !important; /* Desativa botão redundante herdado abaixo da thumb */
}


/* ==========================================================================
   Refinamento e Alinhamento Preciso do Modal (Remoção do Ícone Laranja e Alinhamento do Botão)
   ========================================================================== */

/* 1. Remoção do Ícone Laranja (! no círculo laranja) em todas as mensagens de erro do modal */
.modal-body .msg:before,
.lista-erros .msg:before,
.modal .lista-erros .msg:before,
#modalErroUpload .msg:before {
	display: none !important;
	content: none !important;
	width: 0 !important;
	height: 0 !important;
}

.modal-body .msg,
.lista-erros .msg,
.modal .lista-erros .msg,
#modalErroUpload .msg {
	padding-left: 20px !important; /* Remove o recuo que reservava espaço para o círculo laranja */
	position: relative !important;
}

/* 2. Alinhamento Perfeito das Margens e Elementos do Modal */
/* Garante que header, body e footer compartilhem exatamente os mesmos 24px de padding horizontal */
.modal-header,
.portal-modal-header {
	padding: 20px 24px !important;
}

.modal-body,
.portal-modal-body {
	padding: 24px !important;
}

.modal-footer,
.portal-modal-footer {
	padding: 18px 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	margin: 0 !important;
}

/* 3. Botão Rosa Alinhado Perfeitamente à Direita com a Margem do Box e do 'x' */
.modal-footer button.bt1,
.modal-footer .bt1,
#modalErroUpload .modal-footer .bt1,
#modalErroUpload .modal-footer button {
	float: none !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 140px !important;
	padding: 10px 32px !important;
	height: 44px !important;
	border-radius: 8px !important;
	background-color: #FF008F !important;
	background: #FF008F !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	border: none !important;
	box-shadow: 0 4px 16px rgba(255, 0, 143, 0.35) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.modal-footer button.bt1:hover,
.modal-footer .bt1:hover,
#modalErroUpload .modal-footer .bt1:hover {
	background-color: #D60078 !important;
	background: #D60078 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 20px rgba(255, 0, 143, 0.45) !important;
}

/* 4. Alinhamento do Botão Fechar ("x") com o Padding de 24px */
.modal-header .close,
.modal-header button.close {
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	width: 28px !important;
	height: 28px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}


/* ==========================================================================
   Alinhamento Perfeito com a Header (1240px + 20px padding) — Novas Artes
   ========================================================================== */

.enviar-novas-artes .main .container,
.enviar-novas-artes .main > .container,
.main.enviar-novas-artes .container,
.main.como-enviar-arte .container,
.main.formatos-possiveis .container,
.main.termos-uso .container {
	max-width: 1240px !important;
	width: 100% !important;
	margin: 0 auto !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	padding-top: 28px !important;
	box-sizing: border-box !important;
}

@media (min-width: 1200px) {
	.enviar-novas-artes .main > .container,
	.main.enviar-novas-artes .container,
	.main.como-enviar-arte .container,
	.main.formatos-possiveis .container,
	.main.termos-uso .container {
		width: 1240px !important;
		max-width: 1240px !important;
	}
}


/* ==========================================================================
   Design Moderno de Listas e Itens de Seleção (Select Options e Dropdowns)
   ========================================================================== */

/* 1. Estilização dos Itens Internos de <select> e <option> em Todo o Portal */
select option,
select.form-control option,
select.portal-modern-input option,
select.portal-select option,
.select-seta select option {
	background-color: #FFFFFF !important;
	color: #111111 !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	padding: 12px 16px !important;
	min-height: 42px !important;
	line-height: 42px !important;
	border: none !important;
}

select option:hover,
select option:focus,
select option:checked,
select.form-control option:checked,
.select-seta select option:checked {
	background-color: rgba(255, 0, 143, 0.12) !important;
	color: #FF008F !important;
	font-weight: 700 !important;
}

/* Dark Mode para Select Options */
html.dark-theme select option,
html.dark-theme select.form-control option,
html.dark-theme select.portal-modern-input option,
html.dark-theme select.portal-select option,
html.dark-theme .select-seta select option {
	background-color: #18181B !important;
	color: #F4F4F6 !important;
}

html.dark-theme select option:hover,
html.dark-theme select option:focus,
html.dark-theme select option:checked,
html.dark-theme select.form-control option:checked,
html.dark-theme .select-seta select option:checked {
	background-color: rgba(255, 0, 143, 0.22) !important;
	color: #FF66BA !important;
	font-weight: 700 !important;
}

/* 2. Design Padronizado de Menus Dropdown (.dropdown-menu) em Todo o Portal */
.dropdown-menu {
	background: #FFFFFF !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 12px !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16) !important;
	padding: 8px !important;
	min-width: 200px !important;
	margin-top: 6px !important;
	z-index: 1050 !important;
	overflow: hidden !important;
}

html.dark-theme .dropdown-menu {
	background: #18181B !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7) !important;
}

/* Itens da Lista de Dropdown */
.dropdown-menu > li > a,
.dropdown-menu li a {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 14px !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	color: #111111 !important;
	-webkit-text-fill-color: #111111 !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: all 0.15s ease !important;
	margin: 2px 0 !important;
}

html.dark-theme .dropdown-menu > li > a,
html.dark-theme .dropdown-menu li a {
	color: #EDEDED !important;
	-webkit-text-fill-color: #EDEDED !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
	background: rgba(255, 0, 143, 0.08) !important;
	color: #FF008F !important;
	-webkit-text-fill-color: #FF008F !important;
	transform: translateX(2px) !important;
}

html.dark-theme .dropdown-menu > li > a:hover,
html.dark-theme .dropdown-menu > li > a:focus,
html.dark-theme .dropdown-menu li a:hover,
html.dark-theme .dropdown-menu li a:focus {
	background: rgba(255, 0, 143, 0.18) !important;
	color: #FF66BA !important;
	-webkit-text-fill-color: #FF66BA !important;
}

/* Item Ativo / Selecionado no Dropdown */
.dropdown-menu > li.active > a,
.dropdown-menu li.active a,
.dropdown-menu > li.selected > a,
.dropdown-menu li.selected a {
	background: #FF008F !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	font-weight: 600 !important;
}


/* ==========================================================================
   Alinhamento Milimétrico do Botão Rosa e Conteúdo do Modal (28px Padding)
   ========================================================================== */

#modalErroUpload .modal-dialog,
.modal-dialog {
	max-width: 600px !important;
	margin: 60px auto !important;
}

#modalErroUpload .modal-content,
.modal-content {
	border-radius: 16px !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	overflow: hidden !important;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8) !important;
	background: #18181B !important;
}

/* Header, Body e Footer com exatamente 28px de padding horizontal */
#modalErroUpload .modal-header,
.modal-header {
	padding: 22px 28px !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-sizing: border-box !important;
}

#modalErroUpload .modal-body,
.modal-body {
	padding: 24px 28px 16px 28px !important;
	box-sizing: border-box !important;
}

#modalErroUpload .modal-footer,
.modal-footer {
	padding: 16px 28px 24px 28px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	border-top: none !important;
	background: transparent !important;
	box-sizing: border-box !important;
	width: 100% !important;
}

/* Garante que o container de erros ocupe 100% da largura útil sem margens que vazem */
#modalErroUpload .lista-erros,
.lista-erros {
	width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

#modalErroUpload .lista-erros .msg,
.lista-erros .msg {
	width: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* Botão Fechar 'x' alinhado com o padding direito */
#modalErroUpload .modal-header .close,
.modal-header .close {
	margin: 0 !important;
	padding: 0 !important;
	width: 28px !important;
	height: 28px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: rgba(255, 255, 255, 0.7) !important;
	font-size: 24px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	opacity: 0.8 !important;
	border: none !important;
	background: transparent !important;
}

#modalErroUpload .modal-header .close:hover,
.modal-header .close:hover {
	opacity: 1 !important;
	color: #FFFFFF !important;
	transform: scale(1.1) !important;
}

/* Botão Rosa ENTENDI alinhado na mesma linha vertical do 'x' e do box */
#modalErroUpload .modal-footer button,
#modalErroUpload .modal-footer .bt1,
.modal-footer .btn-portal-modal-close {
	float: none !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 180px !important;
	height: 44px !important;
	padding: 0 32px !important;
	border-radius: 8px !important;
	background-color: #FF008F !important;
	background: #FF008F !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	border: none !important;
	box-shadow: 0 4px 16px rgba(255, 0, 143, 0.4) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

#modalErroUpload .modal-footer button:hover,
#modalErroUpload .modal-footer .bt1:hover,
.modal-footer .btn-portal-modal-close:hover {
	background-color: #D60078 !important;
	background: #D60078 !important;
	box-shadow: 0 6px 22px rgba(255, 0, 143, 0.55) !important;
	transform: translateY(-1px) !important;
}

/* ==========================================================================
   Ajustes Finos do Passo 5 (Revisão da Obra):
   - Alinhamento e espaçamento interno da ficha e dos inputs em relação à borda
   - Correção do botão Enviar Minha Arte / Aguarde sem quebras nem sobreposição
   ========================================================================== */

/* 1. Reset da margem esquerda herdada em .resumo-arte e garantia de espaçamento lateral */
.enviar-novas-artes .passo-envio-5 .ficha-obra {
	display: grid !important;
	grid-template-columns: 280px minmax(0, 1fr) !important;
	gap: 32px !important;
	align-items: flex-start !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.enviar-novas-artes .passo-envio-5 .resumo-arte {
	float: none !important;
	margin: 0 !important;
	padding: 0 4px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* 2. Container dos campos de revisão */
.enviar-novas-artes .passo-envio-5 .resumo-item {
	margin-bottom: 20px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.enviar-novas-artes .passo-envio-5 .resumo-item .row {
	margin-left: -10px !important;
	margin-right: -10px !important;
}

.enviar-novas-artes .passo-envio-5 .resumo-item .row > [class*="col-"] {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

.enviar-novas-artes .passo-envio-5 .resumo-label {
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	color: var(--ua-muted) !important;
	margin-bottom: 8px !important;
	display: block !important;
}

/* 3. Inputs e Caixas de Valor com espaçamento interno generoso (padding: 0 18px) */
.enviar-novas-artes .passo-envio-5 .resumo-item .form-control,
.enviar-novas-artes .passo-envio-5 .resumo-item input.form-control,
.enviar-novas-artes .passo-envio-5 .resumo-item div.form-control {
	height: 48px !important;
	line-height: 48px !important;
	padding: 0 18px !important;
	border-radius: 8px !important;
	background: var(--ua-bg) !important;
	border: 1px solid var(--ua-border-strong) !important;
	color: var(--ua-text) !important;
	-webkit-text-fill-color: var(--ua-text) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	box-shadow: none !important;
}

.enviar-novas-artes .passo-envio-5 .resumo-item input[data-ref="#inputNomeArte"] {
	font-weight: 700 !important;
	font-size: 15px !important;
}

.enviar-novas-artes .passo-envio-5 .resumo-item .campo-cor {
	gap: 10px !important;
}

.enviar-novas-artes .passo-envio-5 .resumo-item .campo-cor .box-cor {
	width: 18px !important;
	height: 18px !important;
	border-radius: 50% !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}

/* 4. Barra de Ações Inferior (Botão Anterior e Botão Enviar) */
.enviar-novas-artes .passos-envio .acoes-passo,
.enviar-novas-artes .passo-envio-5 .divisor + .prev,
.enviar-novas-artes .passos-envio .divisor {
	clear: both !important;
}

/* Botão Enviar Minha Arte: dimensões e layout impecáveis, sem quebras */
.enviar-novas-artes .passo-envio-5 #enviar,
.enviar-novas-artes .passos-envio #enviar {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	height: 48px !important;
	line-height: normal !important;
	min-width: 220px !important;
	width: auto !important;
	padding: 0 28px !important;
	border-radius: 8px !important;
	background: #FF008F !important;
	background-color: #FF008F !important;
	color: #FFFFFF !important;
	-webkit-text-fill-color: #FFFFFF !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	border: none !important;
	box-shadow: 0 4px 16px rgba(255, 0, 143, 0.35) !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	float: right !important;
	margin: 0 !important;
}

.enviar-novas-artes .passo-envio-5 #enviar svg,
.enviar-novas-artes .passos-envio #enviar svg {
	width: 18px !important;
	height: 18px !important;
	flex-shrink: 0 !important;
	stroke: #FFFFFF !important;
}

.enviar-novas-artes .passo-envio-5 #enviar:hover,
.enviar-novas-artes .passos-envio #enviar:hover {
	background: #D60078 !important;
	background-color: #D60078 !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 6px 22px rgba(255, 0, 143, 0.5) !important;
}

/* Estado de Carregamento (Aguarde...) */
.enviar-novas-artes .passo-envio-5 #mensagem,
.enviar-novas-artes .passos-envio #mensagem {
	display: none;
	align-items: center !important;
	justify-content: center !important;
	height: 48px !important;
	line-height: normal !important;
	min-width: 200px !important;
	width: auto !important;
	padding: 0 28px !important;
	border-radius: 8px !important;
	background: var(--ua-surface-hover) !important;
	border: 1px solid var(--ua-border-strong) !important;
	color: var(--ua-muted) !important;
	-webkit-text-fill-color: var(--ua-muted) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.03em !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	cursor: not-allowed !important;
	float: right !important;
	margin: 0 !important;
}

/* Botão Voltar (Passo Anterior) alinhado em altura */
.enviar-novas-artes .passo-envio-5 .prev,
.enviar-novas-artes .passos-envio .prev {
	height: 48px !important;
	line-height: normal !important;
	padding: 0 24px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	float: left !important;
	margin: 0 !important;
}


/* ==========================================================================
   Minhas Artes — ajustes mobile complementares
   ========================================================================== */

/* Touch: sem hover, o selo "Editar" fica sempre visível (canto da imagem) e sem "pulo" no toque */
@media (hover: none), (max-width: 991px) {
	.listagem-artes .arte:hover {
		transform: none !important;
		box-shadow: none !important;
	}
	.listagem-artes .arte:hover .img img {
		transform: none !important;
	}
	.listagem-artes .arte .arte-overlay {
		opacity: 1 !important;
		background: transparent !important;
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		align-items: flex-end !important;
		justify-content: flex-end !important;
		padding: 6px !important;
		pointer-events: none !important;
	}
	.listagem-artes .arte .arte-action-badge {
		padding: 5px 9px !important;
		font-size: 11px !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
	}
}

@media (max-width: 991px) {
	.suas-artes .main .container,
	.main.artes-aprovadas .container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

@media (max-width: 767px) {
	/* Modal de edição: botões reais do footer + campos sem margens laterais herdadas */
	.modal-editar-arte .btn-modal-confirm,
	.modal-editar-arte .btn-modal-cancel {
		width: 100% !important;
		margin: 0 !important;
		justify-content: center !important;
		text-align: center !important;
		padding: 11px !important;
	}
	.modal-editar-arte .img-preview,
	.modal-editar-arte .img-preview-2 {
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.modal-editar-arte .modal-body {
		max-height: calc(100vh - 190px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* Evita zoom automático do iOS ao focar campos */
	.modal-editar-arte .form-control,
	.artes-search-field,
	#buscaArte {
		font-size: 16px !important;
	}
	/* Itens do dropdown de ordenação com área de toque confortável */
	.filtro-dropdown .dropdown-menu > li > a {
		padding: 11px 16px !important;
	}
}

/* Minhas Artes mobile — card mais limpo: botão de editar só com ícone e moldura da imagem proporcional */
@media (hover: none), (max-width: 991px) {
	.listagem-artes .arte .arte-overlay {
		align-items: flex-start !important;
		justify-content: flex-end !important;
		padding: 8px !important;
	}
	.listagem-artes .arte .arte-action-badge {
		width: 30px !important;
		height: 30px !important;
		padding: 0 !important;
		gap: 0 !important;
		border-radius: 50% !important;
		justify-content: center !important;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
	}
	.listagem-artes .arte .arte-action-badge > span {
		display: none !important;
	}
	.listagem-artes .arte .arte-action-badge svg {
		width: 14px !important;
		height: 14px !important;
	}
}
@media (max-width: 640px) {
	.listagem-artes .arte .img {
		height: auto !important;
		aspect-ratio: 3 / 4 !important;
		padding: 6px !important;
		box-sizing: border-box !important;
	}
	.listagem-artes .arte .img img {
		max-width: 100% !important;
		max-height: 100% !important;
		border-radius: 4px !important;
	}
}

/* Minhas Artes mobile — colunas iguais, cards do mesmo tamanho e respiro lateral */
@media (max-width: 640px) {
	.listagem-artes {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 14px !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}
	.listagem-artes .arte {
		min-width: 0 !important;
		width: 100% !important;
		padding: 10px !important;
		height: 100% !important;
	}
	.listagem-artes .arte .img {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 3 / 4 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}
	.listagem-artes .arte .img img {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		object-fit: contain !important;
	}
	.listagem-artes .arte .arte-info {
		min-width: 0 !important;
		margin-top: 2px !important;
	}
	.listagem-artes .arte .nome {
		display: block !important;
		max-width: 100% !important;
	}
	.suas-artes .main .container,
	.main.artes-aprovadas .container {
		padding-left: 16px !important;
		padding-right: 16px !important;
		overflow-x: hidden !important;
	}
}

/* Subnavegação mobile — ícones centralizados nos círculos */
@media (max-width: 991px) {
	.main .aba-lateral .item .ico {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		line-height: 1 !important;
		padding: 0 !important;
		flex: 0 0 26px !important;
	}
	.main .aba-lateral .item .ico svg {
		display: block !important;
		width: 14px !important;
		height: 14px !important;
		margin: 0 !important;
	}
	.main .aba-lateral .item {
		display: inline-flex !important;
		align-items: center !important;
		gap: 8px !important;
	}
}


/* ==========================================================================
   Enviar Artes — ajustes mobile
   ========================================================================== */
@media (max-width: 991px) {
	.enviar-novas-artes .main .container,
	.main.enviar-novas-artes .container {
		padding-left: 16px !important;
		padding-right: 16px !important;
		overflow-x: hidden;
	}

	/* Colunas Bootstrap empilhadas em largura total (inclui o grid flex do upload) */
	.enviar-novas-artes .passos-envio [class*="col-md-"] {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		float: none !important;
		box-sizing: border-box;
	}
	.enviar-novas-artes .grid-passo-upload {
		display: block !important;
		margin-left: -15px;
		margin-right: -15px;
	}
	.enviar-novas-artes .grid-passo-upload .col-preview-wrapper {
		margin-top: 16px;
	}
	.enviar-novas-artes .grid-passo-upload .area-upload-moderna,
	.enviar-novas-artes .grid-passo-upload .img-preview {
		height: auto !important;
		min-height: 240px !important;
		max-height: none !important;
	}
	.enviar-novas-artes .grid-passo-upload .img-preview {
		min-height: 220px !important;
		max-width: 100% !important;
	}
}

@media (max-width: 767px) {
	.enviar-novas-artes .conteudo h1 { font-size: 22px; }
	.enviar-novas-artes .conteudo .subtitulo-envio { font-size: 13.5px; margin-bottom: 16px; }

	/* Stepper compacto: uma linha, só o passo atual mostra o texto */
	.enviar-novas-artes .abas-envio {
		display: flex !important;
		gap: 6px !important;
		margin-bottom: 16px !important;
	}
	.enviar-novas-artes .abas-envio .aba {
		flex: 0 0 auto !important;
		padding: 8px !important;
		gap: 0 !important;
		min-width: 0 !important;
	}
	.enviar-novas-artes .abas-envio .aba .aba-txt { display: none !important; }
	.enviar-novas-artes .passo1 .abas-envio .aba1,
	.enviar-novas-artes .passo2 .abas-envio .aba2,
	.enviar-novas-artes .passo3 .abas-envio .aba3,
	.enviar-novas-artes .passo4 .abas-envio .aba4,
	.enviar-novas-artes .passo5 .abas-envio .aba7 {
		flex: 1 1 auto !important;
		padding: 8px 12px !important;
		gap: 8px !important;
	}
	.enviar-novas-artes .passo1 .abas-envio .aba1 .aba-txt,
	.enviar-novas-artes .passo2 .abas-envio .aba2 .aba-txt,
	.enviar-novas-artes .passo3 .abas-envio .aba3 .aba-txt,
	.enviar-novas-artes .passo4 .abas-envio .aba4 .aba-txt,
	.enviar-novas-artes .passo5 .abas-envio .aba7 .aba-txt {
		display: inline !important;
		min-width: 0;
	}

	.enviar-novas-artes .passos-envio { padding: 18px 14px !important; }
	.enviar-novas-artes .passos-envio .tit2 { font-size: 16px !important; }
	.enviar-novas-artes .passos-envio .form-control,
	.enviar-novas-artes .passos-envio select.form-control {
		font-size: 16px !important; /* evita zoom do iOS */
	}

	/* Botões de navegação: largura total, Próximo em cima, Voltar embaixo */
	.passo1 .passo-envio-1,
	.passo2 .passo-envio-2,
	.passo3 .passo-envio-3,
	.passo4 .passo-envio-4,
	.passo5 .passo-envio-5 {
		display: flex !important;
		flex-direction: column;
	}
	.enviar-novas-artes .passos-envio .bt1.fl,
	.enviar-novas-artes .passos-envio .bt1.fr {
		float: none !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 100% !important;
		margin: 0 0 10px 0 !important;
		box-sizing: border-box !important;
		min-height: 46px;
	}
	.enviar-novas-artes .passos-envio .bt1.fr { order: 1; }
	.enviar-novas-artes .passos-envio .bt1.fl { order: 2; }
	.enviar-novas-artes .passos-envio .divisor { order: 0; }

	/* Upload */
	.enviar-novas-artes .area-upload-moderna { padding: 22px 14px !important; }
	.enviar-novas-artes .upload-pills { flex-wrap: wrap; justify-content: center; gap: 6px; }
	.enviar-novas-artes .box-infos { align-items: flex-start; }

	/* Modais de envio */
	.enviar-novas-artes .modal-dialog { margin: 16px auto !important; width: calc(100% - 24px) !important; }
}


/* ==========================================================================
   Modal "Editar arte" — correções de imagem, seletor de cor, seta e rodapé
   ========================================================================== */

/* Imagem inteira: remove margin-top/borda herdados de custom.css que empurravam a imagem para fora da moldura */
.modal-editar-arte .img-preview {
	box-sizing: border-box !important;
}
.modal-editar-arte .img-preview .img {
	margin: 0 !important;
	border: 0 !important;
	box-sizing: border-box !important;
	background-color: transparent !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	width: 100% !important;
	height: 100% !important;
}

/* Seletor de cor alinhado à esquerda, igual aos demais campos */
.modal-editar-arte .dropdown-cor {
	position: relative !important;
	width: 100% !important;
}
.modal-editar-arte .btn-cor-trigger {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	text-align: left !important;
	position: relative !important;
	padding: 0 36px 0 14px !important;
	box-sizing: border-box !important;
}
.modal-editar-arte .btn-cor-trigger .box-cor {
	margin: 0 !important;
}
/* Seta padrão (mesma do select de categoria) */
.modal-editar-arte .btn-cor-trigger .caret {
	display: none !important;
}
.modal-editar-arte .btn-cor-trigger:after {
	content: '' !important;
	position: absolute !important;
	right: 14px !important;
	top: 50% !important;
	width: 8px !important;
	height: 8px !important;
	border-right: 2px solid #8C919D !important;
	border-bottom: 2px solid #8C919D !important;
	transform: translateY(-50%) rotate(45deg) !important;
	margin: 0 !important;
	pointer-events: none !important;
}
.modal-editar-arte .select-seta:before {
	transform: translateY(-70%) rotate(45deg) !important;
	rotate: 0deg !important;
}
.modal-editar-arte .btn-cor-trigger:after {
	transform: translateY(-70%) rotate(45deg) !important;
}

/* Rodapé: botões alinhados à coluna dos campos (direita) */
@media (min-width: 768px) {
	.modal-editar-arte .modal-footer {
		display: flex !important;
		justify-content: flex-end !important;
		align-items: center !important;
		gap: 12px !important;
		padding: 18px 28px 24px calc(28px + 220px + 28px) !important;
		border-top: 0 !important;
	}
}

/* Rodapé do modal: remove o clearfix do Bootstrap, que virava item flex e deslocava o botão pelo gap */
.modal-editar-arte .modal-footer:before,
.modal-editar-arte .modal-footer:after {
	display: none !important;
	content: none !important;
}