/* ==========================================================================
   Veolog UI — Tema Claro
   Fonte: DM Sans (self-hosted)
   ========================================================================== */

/* ---------- Fontes ---------- */
@font-face{
	font-family:"DM Sans";
	src:url("/assets/fonts/dmsans/DMSans-Regular.woff2") format("woff2"),
		url("/assets/fonts/dmsans/DMSans-Regular.ttf") format("truetype");
	font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"DM Sans";
	src:url("/assets/fonts/dmsans/DMSans-Medium.woff2") format("woff2"),
		url("/assets/fonts/dmsans/DMSans-Medium.ttf") format("truetype");
	font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"DM Sans";
	src:url("/assets/fonts/dmsans/DMSans-SemiBold.woff2") format("woff2"),
		url("/assets/fonts/dmsans/DMSans-SemiBold.ttf") format("truetype");
	font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
	font-family:"DM Sans";
	src:url("/assets/fonts/dmsans/DMSans-Bold.woff2") format("woff2"),
		url("/assets/fonts/dmsans/DMSans-Bold.ttf") format("truetype");
	font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- Tokens base ---------- */
:root{
	color-scheme:light;
	--bg:#F2F3F6;
	--fg:#0e1116;
	--muted:#5b6472;
	--card:#ffffff;
	--accent:#3d63ff;
	--accent-2:#1fbf75;
	--accent-3:#3352d0;
	--border:#d8dae0;
	--border-strong:#d5dde7;
	--elev-shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
	--hover:#f1f5fb;
	--input-bg:#ffffff;
	--input-border:#d8e0eb;
	--topbar-bg:#ffffff;
	--sidebar-bg:#ffffff;
	--app-page-bg:
		radial-gradient(circle at 18% 0%, rgba(128,170,255,.12), transparent 30%),
		radial-gradient(circle at 94% 84%, rgba(128,170,255,.14), transparent 28%),
		linear-gradient(rgba(248,251,255,.46), rgba(248,251,255,.46)),
		url("/assets/img/dashboard/hero-routes.svg") right bottom / min(640px, 44vw) auto no-repeat,
		linear-gradient(180deg, #f8fbff 0%, #f7faff 45%, #f6f8fc 100%);
	--dashboard-page-bg:
		radial-gradient(circle at 18% 0%, rgba(128,170,255,.18), transparent 32%),
		linear-gradient(180deg, #eef5ff 0%, #f8fbff 56%, #f6f9ff 100%);

	--topbar-h:78px;
	--sidebar-w:300px;

	--font-sans:"DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
	--font:14px/1.5 var(--font-sans);
	--platform-announcements-offset:0px;

	/* Faixa de impersonação */
	--impersonation-h:44px;
	--impersonation-offset:0px; /* calculado por .has-impersonation ou :has() */
}
@media (max-width:640px){
	:root{ --impersonation-h:52px; }
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
	margin:0;
	font:var(--font);
	background:var(--bg);
	color:var(--fg);
}

/* ==========================================================================
   Faixa de impersonação (fixa no topo) + cálculo de offset
   ========================================================================== */

/* Fallback para browsers sem :has() */
.has-impersonation{ --impersonation-offset:var(--impersonation-h); }

/* Offset automático quando a faixa existir no DOM */
@supports(selector(body:has(.impersonation-bar))){
	body:has(.impersonation-bar){ --impersonation-offset:var(--impersonation-h); }
}

.impersonation-bar{
	position:fixed !important;
	top:0 !important; left:0; right:0;
	z-index:300 !important;
	height:var(--impersonation-h);
	background:linear-gradient(90deg, #ffb703, #fb8500);
	color:#0e1116;
	border-bottom:1px solid rgba(0,0,0,.08);
	box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.impersonation-wrap{
	height:inherit;
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	max-width:1200px; margin:0 auto; padding-inline:16px;
}
.impersonation-info{
	display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-weight:600;
}
.impersonation-pill{
	display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px;
	background:rgba(255,255,255,.6); color:#0e1116; font-size:12px; font-weight:700;
	text-transform:uppercase; letter-spacing:.02em;
}
.impersonation-name{ color:rgba(14,17,22,.9); }
.btn-impersonation-exit{
	display:inline-flex; align-items:center; justify-content:center;
	padding:8px 12px; border-radius:10px; background:#0e1116; color:#fff;
	text-decoration:none; font-weight:700; border:1px solid rgba(255,255,255,.25);
	box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.btn-impersonation-exit:hover{ filter:brightness(1.05); }
.btn-impersonation-exit:focus{
	outline:2px solid rgba(255,255,255,.9); outline-offset:2px;
}

@media (max-width:640px){
	.impersonation-info{
		gap:3px;
	}
}

/* ==========================================================================
   Topbar fixa (abaixo da faixa quando ativa)
   ========================================================================== */
.topbar{
	height:var(--topbar-h);
	display:grid; grid-template-columns:auto 1fr auto; align-items:center;
	padding:0 18px 0 24px; border-bottom:1px solid #dce6f6;
	background:var(--topbar-bg); box-shadow:0 8px 26px rgba(40,72,128,.12);

	position:fixed !important;
	top:var(--impersonation-offset) !important;
	left:0 !important; right:0 !important;
	z-index:200 !important;

	transform:none !important; opacity:1 !important; visibility:visible !important;
	will-change:auto;
}

/* Brand / logo */
.brand{
	display:flex; align-items:center; gap:8px;
	color:inherit;
	text-decoration:none;
}
.logo-veolog{
	display:inline-block; vertical-align:middle; width:auto; height:42px; padding-left:0;
}
.logo-dot{
	width:10px; height:10px; border-radius:50%;
	background:linear-gradient(135deg, var(--accent), #00c2ff);
}
.brand-text{ font-weight:700; }

/* Ações à direita */
.top-actions{
	display:flex; align-items:center; gap:12px; justify-self:end;
}

/* Métricas no topo */
.top-metrics {
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 10px;
    justify-self: right;
    overflow: visible;
    margin-right: 14px;
}
.top-metrics::-webkit-scrollbar{ display:none; }
.top-metric {
    display: flex;
    flex-direction: column;
    min-width:120px;
    min-height:50px;
    justify-content:center;
    padding:7px 14px;
    border:1px solid #dce6f6;
    border-radius:12px;
    flex: 0 0 auto;
    background:#f7f9ff;
    box-shadow:none;
    transition:background .2s ease, border-color .2s ease;
}
.top-metric:hover,
.top-menu:focus-within{
	border-color:#ccd6ff;
	background:#f3f6ff;
}
.top-metric-label{
	font-size:11px;
	line-height:1.2;
	color:#68708a;
}
.top-metric-value{
	font-size:16px;
	line-height:1.2;
	font-weight:700;
	color:#111936;
}
.top-metric-value-compact{ display:none; }

.top-metric-btn{
	all:unset;
	cursor:pointer;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:2px;
	width:100%;
}
.top-metric-btn:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:2px;
	border-radius:8px;
}

.top-menu{
	position:relative;
	display:inline-flex;
	align-items:center;
}
.top-menu-dropdown{
	font-family:var(--font-sans);
	position:absolute;
	top:calc(100% + 8px);
	right:0;
	min-width:240px;
	max-width:320px;
	background:var(--card);
	border:1px solid var(--border);
	border-radius:14px;
	padding:12px;
	box-shadow:0 12px 30px rgba(0,0,0,.18);
	z-index:350;
}
.top-menu.align-left .top-menu-dropdown{
	font-family:var(--font-sans);
	left:0;
	right:auto;
}
.top-menu-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:4px 2px;
	font-size:14px;
}
.top-menu-label{ color:var(--muted); }
.top-menu-value{ font-weight:700; color:var(--fg); }
.top-menu-cta{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:10px 12px;
	margin:10px 0 6px;
	border-radius:10px;
	border:0;
	appearance:none;
	background:#545cff;
	color:#fff;
	text-decoration:none;
	font-weight:700;
	font-family:var(--font-sans);
	cursor:pointer;
}
.top-menu-cta:hover{ background:#3945e6; }
.top-menu-cta:focus-visible{
	outline:2px solid color-mix(in srgb, var(--accent) 45%, transparent);
	outline-offset:2px;
}
.top-menu-link{
	display:block;
	text-align:center;
	padding:6px 4px;
	color:var(--accent);
	text-decoration:none;
	font-weight:600;
}
.top-menu-link:hover{ text-decoration:underline; }

/* Botões do topo */
.btn-outline{
	border:1px solid var(--border);
	padding:8px 10px;
	border-radius:8px;
	color:var(--fg);
	text-decoration:none;
	background:transparent;
	font-family:var(--font-sans);
}
.btn-outline:hover{ background:var(--hover); }
.btn-menu{
	all:unset; cursor:pointer; width:44px; height:44px; padding:0; line-height:1;
	border:none; display:inline-flex; align-items:center; justify-content:center;
	border-radius:10px;
}
.btn-menu:hover{ background:var(--hover); }
.btn-menu:focus{
	outline:2px solid color-mix(in srgb, var(--accent) 45%, transparent);
	outline-offset:2px;
}

/* Badges / botões pequenos */
.badge{
	display:inline-flex; align-items:center; gap:6px;
	padding:4px 8px; border-radius:999px; font-size:12px;
	background:color-mix(in srgb, var(--accent) 12%, transparent);
	border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
	color:var(--fg);
}
.badge-default{
	background:rgba(15,23,42,0.08);
	border-color:rgba(15,23,42,0.12);
	color:#0f172a;
}
.badge-muted{
	background:rgba(100,116,139,0.12);
	border-color:rgba(100,116,139,0.2);
	color:#475569;
}
.badge-success{
	background:rgba(22,163,74,0.12);
	border-color:rgba(22,163,74,0.3);
	color:#16a34a;
}
.badge-warning{
	background:rgba(234,179,8,0.14);
	border-color:rgba(234,179,8,0.3);
	color:#ca8a04;
}
.badge-danger{
	background:rgba(239,68,68,0.14);
	border-color:rgba(239,68,68,0.3);
	color:#dc2626;
}
.badge-outline{
	background:transparent;
	border-color:rgba(100,116,139,0.4);
	color:#475569;
}
.btn-small{
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	padding:6px 8px; border-radius:8px; border:1px solid var(--border);
	background:var(--card); color:var(--fg); text-decoration:none;
	font-size:12px; font-weight:600;
}
.btn-small:hover{ background:var(--hover); }

/* ==========================================================================
   Página 404
   ========================================================================== */
.page-404{
	max-width:980px;
	margin:0 auto;
	padding:20px;
	min-height:calc(100vh - var(--topbar-h) - var(--impersonation-offset));
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:6px;
	text-align:center;
}
.page-404__image{
	width:min(820px, 100%);
	max-width:100%;
	height:auto;
	max-height:min(60vh, 520px);
	object-fit:contain;
	display:block;
	margin:0 auto 16px;
}
.page-404 h1{
	margin:8px 0 8px;
	font-size:clamp(20px, 3vw, 28px);
}
.page-404 p{
	margin:0 0 16px;
	color:var(--muted);
}
.page-404__actions{
	display:flex;
	justify-content:center;
}
.page-404__link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:10px 14px;
	border-radius:10px;
	border:1px solid var(--border);
	background:var(--card);
	color:var(--fg);
	text-decoration:none;
	font-weight:600;
	box-shadow:var(--elev-shadow);
}
.page-404__link:hover{ background:var(--hover); }
.page-404__link:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:2px;
}

/* Remove padding do container quando a tela 404 estiver ativa */
@supports(selector(.content:has(.page-404))){
	.content:has(.page-404){
		padding:0;
		min-height:calc(100vh - var(--topbar-h) - var(--impersonation-offset));
	}
}

/* Responsividade topbar */
@media (max-width:959.98px){
	.brand{ justify-self:center; }
	.btn-menu{ display:inline-flex; }
	.top-metrics{
		justify-self:stretch;
	}
}
@media (min-width:960px){
	.topbar{
		left:var(--sidebar-w) !important;
		grid-template-columns:1fr auto;
	}
	.brand{ justify-self:start; }
	.topbar .brand{ display:none; }
	.topbar .top-metrics{
		grid-column:1;
		justify-self:start;
		justify-content:flex-start;
		margin-right:0;
	}
	.topbar .top-actions{
		grid-column:2;
	}
	body .sidebar{
		top:var(--impersonation-offset) !important;
	}
	body .sidebar-brand{ display:flex; }
	.btn-menu{ display:none !important; }
	.brand .logo-dot,
	.brand .brand-text{ display:none; }
}

@media (max-width:960px){
	:root{
		--topbar-h:64px;
		--sidebar-w:280px;
	}
	.top-metrics{ display:none; }
}
@media (max-width:1180px) and (min-width:961px){
	:root{
		--sidebar-w:280px;
	}
	.topbar{
		padding-inline:18px;
	}
	.top-metrics{
		gap:8px;
		margin-right:10px;
	}
	.top-metric{
		min-width:104px;
		padding-inline:12px;
	}
	.icon-btn{
		width:44px;
		height:44px;
	}
	.nav{
		padding:16px 12px 10px;
	}
	.nav-item.has-icon,
	.nav-collapsible > summary{
		min-height:50px;
		padding:11px 13px;
	}
}
@media (max-height:820px) and (min-width:961px){
	.nav{
		padding-top:12px;
	}
	.nav-item.has-icon,
	.nav-collapsible > summary{
		min-height:48px;
		margin:4px 0;
		padding-block:10px;
	}
}

/* ==========================================================================
   Layout lateral + conteúdo
   ========================================================================== */
/* Sidebar */
.sidebar{
	position:fixed;
	left:0;
	bottom:0;
	width:var(--sidebar-w);
	top:calc(var(--impersonation-offset) + var(--topbar-h) + var(--platform-announcements-offset)) !important;
	background-color:#fff;
	border-right:1px solid #dce6f6;
	display:flex;
	flex-direction:column;
	transform:translateX(0);
	transition:transform .2s ease;
	z-index:220;

	/* impede scroll no container todo */
	overflow:hidden;
}
.sidebar::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	pointer-events:none;
	background-image:url("/assets/img/dashboard/sidebar-bg.webp");
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:125% auto;
	opacity:.45;
}

/* Navegação */
.sidebar-brand{
	position:relative;
	z-index:1;
	display:none;
	align-items:center;
	flex:0 0 var(--topbar-h);
	min-height:var(--topbar-h);
	padding:0 24px;
	color:inherit;
	text-decoration:none;
}
.sidebar-brand-logo{
	display:block;
	height:42px;
	width:auto;
}
.nav{
	position:relative;
	z-index:1;
	padding:18px 18px 10px;

	/* faz o nav ocupar o espaço "flexível" da sidebar */
	flex:1 1 auto;

	/* aqui entra o scroll vertical */
	overflow-y:auto;
	overflow-x:hidden;

	/* importante para o scroll funcionar corretamente dentro de flex */
	min-height:0;
}

.sidebar-header{
	padding:12px 16px;
	color:var(--muted);
	border-bottom:1px solid var(--border);
}

.nav-group{
	padding:8px 12px;
	color:var(--muted);
	text-transform:uppercase;
	font-size:12px;
}
.nav-item{
	display:block;
	padding:12px 15px;
	margin:5px 0;
	border-radius:10px;
	color:#111936;
	text-decoration:none;
	font-family:var(--font-sans);
}
.nav-item.has-icon,
.nav-collapsible > summary{
	display:flex;
	align-items:center;
	gap:10px;
	min-height:52px;
	margin:5px 0;
	padding:12px 15px;
	border-radius:10px;
	color:#111936;
}
.nav-item:hover{
	background:#f1f4ff;
	color:#545cff;
}
.nav-item.disabled{
	opacity:.5;
	pointer-events:none;
}

.nav-item-text{
	padding-left:2px;
	font-size:14px;
	font-weight:700;
}

/* Ativo (página atual) */
.nav .nav-item.active{
	background:#eef1ff;
	color:#545cff;
	font-weight:700;
	box-shadow:inset 0 0 0 1px rgba(84,92,255,.03);
}
.nav-collapsible > summary:hover{
	background:#f1f4ff;
	color:#545cff;
}
.nav-collapsible > summary.active-parent{
	background:#eef1ff;
	color:#545cff;
	box-shadow:inset 0 0 0 1px rgba(84,92,255,.03);
}

/* Conteúdo principal */
.content{
	margin-left:var(--sidebar-w);
	padding:16px 32px 16px 32px;
	box-sizing:border-box;
	width:calc(100% - var(--sidebar-w));
	min-height:calc(100vh - var(--topbar-h));
	font-family:var(--font-sans);
	background:var(--app-page-bg);
}

/* Sidebar responsiva */
@media (max-width:960px){
	.sidebar{ transform:translateX(-100%); }
	.sidebar.open{ transform:translateX(0); }
	.content{ margin-left:0; padding:16px; width:100%;}
}

.billing-status-banner{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:16px;
	margin:0 0 16px 0;
	padding:12px 14px;
	border:1px solid var(--border);
	border-radius:8px;
	background:var(--card);
	box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.billing-status-banner.is-warning{
	border-color:#f0c36d;
	background:#fff8e7;
	color:#624108;
}
.billing-status-banner.is-danger{
	border-color:#f2a0a0;
	background:#fff0f0;
	color:#6f1616;
}
.billing-status-banner-copy{
	display:grid;
	gap:2px;
	min-width:0;
}
.billing-status-banner-copy strong{
	font-size:14px;
	line-height:1.35;
	color:inherit;
}
.billing-status-banner-copy span{
	font-size:13px;
	line-height:1.45;
	color:inherit;
	overflow-wrap:anywhere;
}
.billing-status-banner-action{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:34px;
	padding:7px 12px;
	border-radius:8px;
	background:#0f172a;
	color:#fff;
	font-size:13px;
	font-weight:700;
	text-decoration:none;
	white-space:nowrap;
}
.billing-status-banner-action:hover{
	color:#fff;
	filter:brightness(1.08);
}
.billing-status-modal .veo-modal-description{
	margin:0;
	line-height:1.5;
	color:var(--muted);
}

@media (max-width:640px){
	.billing-status-banner{
		flex-direction:column;
		align-items:stretch;
	}
	.billing-status-banner-action{
		width:100%;
	}
}

/* ==========================================================================
   Componentes
   ========================================================================== */
.card{
	background:var(--card);
	border:1px solid var(--border);
	border-radius:12px;
	overflow:hidden;
	box-shadow:var(--elev-shadow);
}
.card-header{
	padding:12px 16px;
	border-bottom:1px solid var(--border);
	background:linear-gradient(var(--card), color-mix(in srgb, var(--card) 92%, var(--bg) 8%));
}
.card-body{ padding:16px; }

/* Dashboard */
.dashboard{
	display:flex;
	flex-direction:column;
	gap:24px;
	font-family:var(--font-sans);
}
.dashboard-hero h1{
	margin:0;
	font-size:24px;
	font-weight:700;
	color:var(--fg);
}
.dashboard-hero p{
	margin:6px 0 0;
	color:var(--muted);
}
.dashboard-cards{
	grid-auto-rows:1fr;
	align-items:stretch;
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
	gap:16px;
}
.dash-card{
	display:flex;
	align-items:center;
	gap:14px;
	padding:16px 18px;
	border-radius:14px;
	background:var(--card);
	border:1px solid var(--border);
	box-shadow:var(--elev-shadow);
	text-decoration:none;
	color:var(--fg);
}
.dash-card:hover{
	border-color:color-mix(in srgb, var(--accent) 35%, var(--border));
}
.dash-card--wide{
	grid-column:span 2;
}
.dash-card-icon{
	width:44px;
	height:44px;
	border-radius:12px;
	background:var(--hover);
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--accent);
}
.dash-card-body{
	display:flex;
	flex-direction:column;
	gap:2px;
}
.dash-card-label{
	font-size:12px;
	color:var(--muted);
}
.dash-card-value{
	font-size:16px;
	font-weight:700;
}
.dash-card-chevron{
	margin-left:auto;
	color:var(--accent);
}
.dash-card-cta{
	margin-left:auto;
	background:var(--accent);
	color:#fff;
	font-weight:700;
	font-size:12px;
	padding:8px 12px;
	border-radius:10px;
}
.dash-summary-card{
	height:100%;
	display:flex;
	flex-direction:column;
	gap:12px;
	padding:16px 18px;
	border-radius:14px;
	background:var(--card);
	border:1px solid var(--border);
	box-shadow:var(--elev-shadow);
}
.dash-summary-header{
	display:flex;
	align-items:center;
	gap:12px;
}
.dash-summary-icon{
	width:40px;
	height:40px;
	border-radius:10px;
	background:var(--hover);
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--accent);
}
.dash-summary-title{
	font-size:12px;
	color:var(--muted);
}
.dash-summary-value{
	font-size:16px;
	font-weight:700;
}
.dash-summary-divider{
	height:1px;
	background:color-mix(in srgb, var(--border) 70%, transparent);
}
.dash-summary-rows{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.dash-summary-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	color:var(--fg);
	font-size:14px;
}
.dash-summary-row span{
	color:var(--muted);
}
.dash-summary-row strong{
	font-weight:700;
	color:var(--fg);
}
.dash-summary-cta{
	margin-top:12px;
	text-align:center;
	padding:10px 12px;
	border-radius:10px;
	border:0;
	appearance:none;
	background:color-mix(in srgb, var(--accent) 10%, var(--card));
	color:var(--accent);
	font-weight:700;
	text-decoration:none;
	font-family:var(--font-sans);
	cursor:pointer;
}
.dash-summary-cta:hover{
	background:color-mix(in srgb, var(--accent) 18%, var(--card));
}
.dash-summary-cta:focus-visible{
	outline:2px solid color-mix(in srgb, var(--accent) 45%, transparent);
	outline-offset:2px;
}
.dash-summary-link{
	margin-top:8px;
	border:none;
	background:none;
	padding:0;
	font:inherit;
	color:var(--accent);
	text-decoration:underline;
	cursor:pointer;
	text-align:center;
}
.dash-summary-link:hover{
	color:var(--accent-3);
}
.dash-plan-card{
	height:100%;
	display:flex;
	flex-direction:column;
	gap:12px;
	padding:16px 18px;
	border-radius:14px;
	background:var(--card);
	border:1px solid var(--border);
	box-shadow:var(--elev-shadow);
}
.dash-plan-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}
.dash-plan-title{
	font-size:12px;
	color:var(--muted);
}
.dash-plan-name{
	font-size:16px;
	font-weight:700;
}
.dash-plan-rows{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.dash-plan-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	font-size:14px;
}
.dash-plan-row span{
	color:var(--muted);
}
.dash-plan-row strong{
	font-weight:700;
	color:var(--fg);
}
.dash-plan-cta{
	margin-top:12px;
	text-align:center;
	padding:10px 12px;
	border-radius:10px;
	border:1px solid var(--border);
	color:var(--accent);
	text-decoration:none;
	font-weight:700;
}
.dash-plan-cta:hover{
	background:var(--hover);
}
.dash-plan-divider{
	height:1px;
	background:color-mix(in srgb, var(--border) 70%, transparent);
}
.dash-plan-invoice{
	margin-top:8px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}
.dash-plan-invoice-col{
	display:flex;
	flex-direction:column;
	gap:2px;
	align-items:center;
	text-align:center;
}
.dash-plan-invoice-status-col{
	align-items:center;
	text-align:center;
	min-width:84px;
}
.dash-plan-invoice-label{
	font-size:12px;
	color:var(--muted);
	text-align:center;
	width:100%;
}
.dash-plan-invoice-amount{
	font-weight:700;
	margin-top:2px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
}
.dash-plan-invoice-value{
	font-size:14px;
}
.dash-plan-invoice-status{
	font-weight:700;
	color:var(--muted);
}
.dash-plan-pay{
	background:var(--accent);
	color:#fff;
	text-decoration:none;
	font-weight:700;
	padding:8px 12px;
	border-radius:10px;
}
.dash-plan-pay:hover{
	background:var(--accent-3);
}
.dash-summary-info{
	margin-left:6px;
	color:var(--muted);
	vertical-align:middle;
}
.dashboard-section-title{
	margin:8px 0 0;
	font-size:16px;
	font-weight:700;
}
.dashboard-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(380px, 1fr));
	gap:16px;
}
.dash-feature{
	display:flex;
	align-items:flex-start;
	gap:12px;
	padding:20px 22px;
	border-radius:14px;
	border:1px solid var(--border);
	background:var(--card);
	box-shadow:var(--elev-shadow);
	text-decoration:none;
	color:var(--fg);
}
.dash-feature-icon{
	width:40px;
	height:40px;
	min-width: 40px;
	border-radius:12px;
	background:var(--hover);
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--accent);
}
.dash-feature-title{
	font-weight:700;
	margin-bottom:4px;
}
.dash-feature-desc{
	font-size:13px;
	color:var(--muted);
}
@media (max-width:900px){
	.dash-card--wide{
		grid-column:span 1;
	}
}
@media (max-width:1280px){
	.dash-plan-invoice{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:12px 16px;
		align-items:start;
	}
	.dash-plan-invoice-col{
		align-items:center;
		text-align:center;
	}
	.dash-plan-invoice-status-col{
		align-items:center;
		text-align:center;
		min-width:0;
	}
	.dash-plan-invoice-label,
	.dash-plan-invoice-amount{
		align-items:center;
		text-align:center;
	}
	.dash-plan-pay{
		width:100%;
		text-align:center;
		grid-column:1 / -1;
	}
}

/* Dashboard reference layout */
body[data-is-dashboard-route="1"]{
	--topbar-h:78px;
	--sidebar-w:300px;
	--dashboard-gutter:clamp(16px, 2.3vw, 42px);
	--bg:#eef5ff;
	--fg:#0b1234;
	--muted:#626b86;
	--card:#ffffff;
	--accent:#545cff;
	--accent-2:#23b79c;
	--accent-3:#3945e6;
	--border:#dfe7f5;
	--hover:#f0f3ff;
	--elev-shadow:0 12px 28px rgba(35,62,118,.075), 0 1px 6px rgba(35,62,118,.045);
}
body[data-is-dashboard-route="1"] .topbar{
	padding:0 18px 0 24px;
	border-bottom:1px solid #dce6f6;
	box-shadow:0 8px 26px rgba(40,72,128,.12);
}
body[data-is-dashboard-route="1"] .logo-veolog{
	width:auto;
	height:42px;
	padding-left:0;
}
body[data-is-dashboard-route="1"] .top-metrics{
	gap:10px;
	margin-right:14px;
}
body[data-is-dashboard-route="1"] .top-metric{
	min-width:120px;
	min-height:50px;
	justify-content:center;
	padding:7px 14px;
	border:1px solid #dce6f6;
	border-radius:12px;
	background:#f7f9ff;
	box-shadow:none;
}
body[data-is-dashboard-route="1"] .top-metric:hover,
body[data-is-dashboard-route="1"] .top-menu:focus-within{
	border-color:#ccd6ff;
	background:#f3f6ff;
}
body[data-is-dashboard-route="1"] .top-metric-label{
	font-size:11px;
	line-height:1.2;
	color:#68708a;
}
body[data-is-dashboard-route="1"] .top-metric-value{
	font-size:16px;
	line-height:1.2;
	color:#111936;
}
body[data-is-dashboard-route="1"] .top-icons{
	gap:12px;
}
body[data-is-dashboard-route="1"] .icon-btn{
	width:46px;
	height:46px;
	border:1px solid #dce6f6;
	border-radius:13px;
	background:#f8faff;
	box-shadow:none;
}
body[data-is-dashboard-route="1"] .icon-btn:hover,
body[data-is-dashboard-route="1"] .icon-btn.active{
	border-color:#ccd6ff;
}
body[data-is-dashboard-route="1"] .cart-count-badge{
	top:0;
	right:0;
	background:#5564ff;
}
body[data-is-dashboard-route="1"] .sidebar{
	position:fixed;
	background-color:#fff;
	border-right:1px solid #dce6f6;
}
body[data-is-dashboard-route="1"] .sidebar::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	pointer-events:none;
	background-image:url("/assets/img/dashboard/sidebar-bg.webp");
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:125% auto;
	opacity:.45;
}
body[data-is-dashboard-route="1"] .nav{
	position:relative;
	z-index:1;
	padding:18px 18px 10px;
}
body[data-is-dashboard-route="1"] .nav-item.has-icon,
body[data-is-dashboard-route="1"] .nav-collapsible > summary{
	display:flex;
	align-items:center;
	gap:10px;
	min-height:52px;
	margin:5px 0;
	padding:12px 15px;
	border-radius:10px;
	color:#111936;
}
body[data-is-dashboard-route="1"] .nav-item-text,
body[data-is-dashboard-route="1"] .nav-collapsible > summary .nav-item-text{
	padding-left:2px;
	font-size:14px;
	font-weight:700;
}
body[data-is-dashboard-route="1"] .nav .nav-item.active,
body[data-is-dashboard-route="1"] .nav-collapsible > summary.active-parent{
	background:#eef1ff;
	color:#545cff;
	box-shadow:inset 0 0 0 1px rgba(84,92,255,.03);
}
body[data-is-dashboard-route="1"] .nav-item:hover,
body[data-is-dashboard-route="1"] .nav-collapsible > summary:hover{
	background:#f1f4ff;
	color:#545cff;
}
.sidebar-promo{
	position:relative;
	z-index:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	flex:0 0 auto;
	gap:7px;
	margin:18px 0 12px;
	padding:16px 16px 18px;
	border:1px solid #dfe7f5;
	border-radius:14px;
	background:rgba(255,255,255,.84);
	box-shadow:0 18px 38px rgba(36,59,112,.12);
	text-align:center;
}
.sidebar-promo-art{
	width:92px;
	height:68px;
	object-fit:contain;
	margin:-6px 0 4px;
	transform:scale(1.18);
	transform-origin:center;
}
.sidebar-promo strong{
	font-size:14px;
	line-height:1.25;
	color:#111936;
}
.sidebar-promo span{
	max-width:190px;
	font-size:12px;
	line-height:1.45;
	color:#626b86;
}
.sidebar-promo a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:100%;
	min-height:44px;
	margin-top:7px;
	border-radius:9px;
	background:#545cff;
	color:#fff;
	font-weight:700;
	text-decoration:none;
}
.sidebar-promo a:hover,
.sidebar-promo a:focus-visible{
	background:#3945e6;
}
body[data-is-dashboard-route="1"] .content{
	padding:0 var(--dashboard-gutter) 18px;
	background:var(--dashboard-page-bg);
}
body[data-is-dashboard-route="1"] .dashboard{
	gap:14px;
	max-width:1480px;
	margin:0 auto;
}
body[data-is-dashboard-route="1"] .dashboard-hero{
	position:relative;
	overflow:hidden;
	min-height:124px;
	margin:0 calc(var(--dashboard-gutter) * -1) -8px;
	padding:32px var(--dashboard-gutter) 16px;
	background:transparent;
}
body[data-is-dashboard-route="1"] .dashboard-hero::before{
	content:"";
	position:absolute;
	right:16px;
	top:4px;
	width:min(560px, 39vw);
	height:128px;
	pointer-events:none;
	background:url("/assets/img/dashboard/hero-routes.svg") no-repeat right top / contain;
	opacity:.32;
}
body[data-is-dashboard-route="1"] .dashboard-hero::after{
	content:"";
	position:absolute;
	right:72px;
	top:auto;
	bottom:4px;
	width:146px;
	aspect-ratio:5 / 2;
	pointer-events:none;
	background:
		radial-gradient(ellipse at center, rgba(44,72,130,.22) 0%, rgba(44,72,130,.12) 34%, rgba(44,72,130,0) 68%) 50% 92% / 74% 18% no-repeat,
		url("/assets/img/dashboard/truck-veolog.webp") no-repeat center / contain;
	filter:drop-shadow(0 8px 12px rgba(54,88,160,.11));
}
body[data-is-dashboard-route="1"] .dashboard-hero h1,
body[data-is-dashboard-route="1"] .dashboard-hero p{
	position:relative;
	z-index:1;
}
body[data-is-dashboard-route="1"] .dashboard-hero h1{
	font-size:clamp(24px, 1.55vw, 29px);
	line-height:1.15;
	letter-spacing:0;
	color:#0b1234;
}
body[data-is-dashboard-route="1"] .dashboard-hero p{
	margin-top:8px;
	font-size:14px;
	color:#626b86;
}
.dashboard-overview-card{
	display:grid;
	grid-template-columns:calc(33.333333% - 28px) calc(33.333333% - 160px) 132px calc(33.333333% - 16px);
	align-items:center;
	column-gap:24px;
	row-gap:16px;
	min-height:148px;
	padding:16px 24px;
	border:1px solid #dfe7f5;
	border-radius:18px;
	background:rgba(255,255,255,.94);
	box-shadow:var(--elev-shadow);
}
.dashboard-overview-quota,
.dashboard-overview-plan,
.dashboard-overview-upgrade{
	min-width:0;
}
.dashboard-overview-quota{
	display:grid;
	grid-template-columns:60px 1fr;
	align-items:center;
	gap:0 12px;
}
.dashboard-overview-icon{
	width:50px;
	height:50px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#eaedff;
	color:#545cff;
}
.dashboard-overview-icon .icon{
	width:26px;
	height:26px;
}
.dashboard-overview-eyebrow{
	font-size:12px;
	line-height:1.3;
	font-weight:600;
	color:#626b86;
}
.dashboard-overview-title{
	margin-top:4px;
	font-size:clamp(20px, 1.35vw, 23px);
	line-height:1.2;
	font-weight:800;
	color:#101735;
}
.dashboard-overview-title strong{
	color:#545cff;
	font-size:clamp(25px, 1.8vw, 29px);
	line-height:1;
}
.dashboard-limit-progress{
	grid-column:1 / -1;
	width:100%;
	max-width:380px;
	height:6px;
	margin-top:14px;
	overflow:hidden;
	border-radius:999px;
	background:#e8edff;
}
.dashboard-limit-progress span{
	display:block;
	height:100%;
	border-radius:inherit;
	background:#545cff;
}
.dashboard-limit-row{
	grid-column:1 / -1;
	width:100%;
	max-width:380px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-top:10px;
	font-size:13px;
	color:#626b86;
}
.dashboard-limit-row strong{
	min-width:54px;
	padding:3px 8px;
	border-radius:9px;
	background:#eef1ff;
	color:#101735;
	text-align:center;
}
.dashboard-overview-plan{
	min-height:112px;
	padding:12px 18px 12px 26px;
	border-left:1px solid #dfe7f5;
	display:grid;
	align-content:center;
	gap:12px;
}
.dashboard-overview-plan-name{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-top:4px;
	font-size:20px;
	line-height:1.15;
	font-weight:800;
	color:#111936;
}
.dashboard-plan-name-icon{
	width:18px;
	height:18px;
	color:#23b79c;
}
.dashboard-overview-plan-limit{
	margin-top:5px;
	font-size:13px;
	line-height:1.2;
	font-weight:800;
	color:#111936;
}
.dashboard-overview-art{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:112px;
}
.dashboard-overview-art img{
	width:min(120px, 100%);
	height:auto;
	display:block;
	filter:drop-shadow(0 18px 24px rgba(63,92,170,.16));
}
.dashboard-overview-upgrade{
	min-height:112px;
	padding:12px 0 12px 28px;
	border-left:1px solid #dfe7f5;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
}
.dashboard-overview-upgrade h2{
	margin:0;
	font-size:18px;
	line-height:1.2;
	letter-spacing:0;
	color:#111936;
	overflow-wrap:anywhere;
}
.dashboard-overview-upgrade p{
	margin:8px 0 14px;
	max-width:230px;
	font-size:13px;
	line-height:1.38;
	color:#626b86;
	overflow-wrap:anywhere;
}
.dashboard-upgrade-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-width:156px;
	max-width:100%;
	min-height:44px;
	padding:0 16px;
	border-radius:9px;
	background:#545cff;
	color:#fff;
	text-decoration:none;
	font-size:13px;
	font-weight:800;
	box-shadow:0 14px 28px rgba(84,92,255,.22);
}
.dashboard-upgrade-btn:hover,
.dashboard-upgrade-btn:focus-visible{
	background:#3945e6;
}
body[data-is-dashboard-route="1"] .dashboard-cards{
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:12px;
}
body[data-is-dashboard-route="1"] .dash-summary-card,
body[data-is-dashboard-route="1"] .dash-plan-card{
	min-height:204px;
	padding:16px 18px;
	border-color:#dfe7f5;
	border-radius:14px;
	background:rgba(255,255,255,.94);
	box-shadow:var(--elev-shadow);
}
body[data-is-dashboard-route="1"] .dash-summary-header,
body[data-is-dashboard-route="1"] .dash-plan-header{
	align-items:center;
	gap:10px;
	min-height:38px;
	justify-content:flex-start;
}
body[data-is-dashboard-route="1"] .dash-summary-icon{
	width:40px;
	height:40px;
	border-radius:10px;
	background:#eef1ff;
	color:#545cff;
	flex:0 0 auto;
}
body[data-is-dashboard-route="1"] .dash-summary-icon--success{
	background:#e6f8f4;
	color:#16a38e;
}
body[data-is-dashboard-route="1"] .dash-summary-title,
body[data-is-dashboard-route="1"] .dash-plan-title{
	font-size:12px;
	font-weight:600;
	color:#626b86;
}
body[data-is-dashboard-route="1"] .dash-summary-value,
body[data-is-dashboard-route="1"] .dash-plan-name{
	font-size:19px;
	line-height:1.18;
	font-weight:800;
	color:#111936;
}
body[data-is-dashboard-route="1"] .dash-summary-divider,
body[data-is-dashboard-route="1"] .dash-plan-divider{
	background:#dfe7f5;
}
body[data-is-dashboard-route="1"] .dash-summary-rows,
body[data-is-dashboard-route="1"] .dash-plan-rows{
	gap:8px;
}
body[data-is-dashboard-route="1"] .dash-summary-row,
body[data-is-dashboard-route="1"] .dash-plan-row{
	font-size:13px;
}
body[data-is-dashboard-route="1"] .dash-summary-cta{
	min-height:44px;
	margin-top:auto;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:9px;
	background:#eef3ff;
}
body[data-is-dashboard-route="1"] .dash-summary-link{
	min-height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:12px;
	font-weight:600;
}
body[data-is-dashboard-route="1"] .dash-plan-invoice{
	margin-top:auto;
	padding-top:4px;
}
body[data-is-dashboard-route="1"] .dashboard-section-title{
	margin:2px 0 -4px;
	font-size:15px;
	color:#111936;
}
body[data-is-dashboard-route="1"] .dashboard-grid{
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:12px;
}
body[data-is-dashboard-route="1"] .dash-feature{
	position:relative;
	align-items:center;
	min-height:84px;
	padding:16px 54px 16px 18px;
	border-color:#dfe7f5;
	border-radius:14px;
	background:rgba(255,255,255,.94);
	box-shadow:var(--elev-shadow);
}
body[data-is-dashboard-route="1"] .dash-feature-icon{
	width:44px;
	height:44px;
	min-width:44px;
	border-radius:11px;
	background:#eef1ff;
	color:#545cff;
}
body[data-is-dashboard-route="1"] .dash-feature-title{
	font-size:14px;
	line-height:1.25;
	color:#111936;
}
body[data-is-dashboard-route="1"] .dash-feature-desc{
	margin-top:3px;
	font-size:12px;
	line-height:1.4;
	color:#626b86;
}
.dash-feature-action{
	position:absolute;
	right:16px;
	top:50%;
	transform:translateY(-50%);
	width:30px;
	height:30px;
	border:1px solid #dfe7f5;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#111936;
	background:#f8faff;
}
.dash-feature-action .icon{
	width:17px;
	height:17px;
}

@media (max-width:1440px){
	body[data-is-dashboard-route="1"]{
		--dashboard-gutter:clamp(16px, 2vw, 34px);
	}
	body[data-is-dashboard-route="1"] .top-metric{
		min-width:112px;
	}
	.dashboard-overview-card{
		grid-template-columns:calc(33.333333% - 28px) calc(33.333333% - 140px) 112px calc(33.333333% - 16px);
	}
	.dashboard-overview-art img{
		width:min(108px, 100%);
	}
}
@media (max-width:1280px){
	.dashboard-overview-card{
		grid-template-columns:minmax(300px, .92fr) minmax(160px, .48fr) minmax(240px, .86fr);
	}
	.dashboard-overview-art{
		display:none;
	}
	body[data-is-dashboard-route="1"] .dashboard-cards,
	body[data-is-dashboard-route="1"] .dashboard-grid{
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}
	body[data-is-dashboard-route="1"] .dash-plan-card{
		grid-column:1 / -1;
		min-height:196px;
	}
}
@media (max-width:1180px) and (min-width:961px){
	body[data-is-dashboard-route="1"]{
		--sidebar-w:280px;
		--dashboard-gutter:clamp(14px, 1.8vw, 20px);
	}
	body[data-is-dashboard-route="1"] .content{
		overflow-x:hidden;
	}
	body[data-is-dashboard-route="1"] .nav{
		padding:16px 12px 10px;
	}
	body[data-is-dashboard-route="1"] .nav-item.has-icon,
	body[data-is-dashboard-route="1"] .nav-collapsible > summary{
		min-height:50px;
		padding:11px 13px;
	}
	.sidebar-promo{
		margin:14px 0 10px;
		padding:14px 14px 16px;
	}
	.dashboard-overview-card{
		grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
		gap:14px;
		padding:16px 20px;
	}
	.dashboard-overview-quota{
		grid-template-columns:58px 1fr;
	}
	.dashboard-overview-icon{
		width:50px;
		height:50px;
	}
	.dashboard-overview-plan{
		min-height:116px;
		padding:12px 0 12px 18px;
	}
	.dashboard-overview-upgrade{
		grid-column:1 / -1;
		min-height:0;
		padding:14px 0 0;
		border-left:0;
		border-top:1px solid #dfe7f5;
	}
	.dashboard-overview-upgrade p{
		max-width:520px;
	}
}
@media (max-width:1100px) and (min-width:961px){
	body[data-is-dashboard-route="1"] .topbar{
		padding-inline:18px;
	}
	body[data-is-dashboard-route="1"] .top-metrics{
		gap:8px;
		margin-right:10px;
	}
	body[data-is-dashboard-route="1"] .top-metric{
		min-width:104px;
		padding-inline:12px;
	}
	body[data-is-dashboard-route="1"] .icon-btn{
		width:44px;
		height:44px;
	}
}
@media (max-width:960px){
	body[data-is-dashboard-route="1"]{
		--topbar-h:64px;
		--sidebar-w:280px;
		--dashboard-gutter:18px;
	}
	body[data-is-dashboard-route="1"] .content{
		padding:0 var(--dashboard-gutter) 20px;
	}
	body[data-is-dashboard-route="1"] .dashboard{
		gap:12px;
	}
	body[data-is-dashboard-route="1"] .dashboard-hero{
		min-height:116px;
		margin:0 calc(var(--dashboard-gutter) * -1) -6px;
		padding:26px var(--dashboard-gutter) 20px;
	}
	body[data-is-dashboard-route="1"] .dashboard-hero::before{
		right:-120px;
		top:4px;
		width:500px;
		height:116px;
		opacity:.22;
	}
	body[data-is-dashboard-route="1"] .dashboard-hero::after{
		right:16px;
		bottom:8px;
		width:112px;
		opacity:.9;
	}
	.sidebar-promo{
		margin:14px 0 10px;
	}
}
@media (max-height:820px) and (min-width:961px){
	body[data-is-dashboard-route="1"] .nav{
		padding-top:12px;
	}
	body[data-is-dashboard-route="1"] .nav-item.has-icon,
	body[data-is-dashboard-route="1"] .nav-collapsible > summary{
		min-height:48px;
		margin:4px 0;
		padding-block:10px;
	}
	.sidebar-promo{
		margin:12px 0 10px;
		padding-block:14px 16px;
	}
}
@media (max-width:820px){
	.dashboard-overview-card{
		grid-template-columns:1.15fr .85fr;
	}
	.dashboard-overview-upgrade{
		grid-column:1 / -1;
		padding:16px 0 0;
		border-left:0;
		border-top:1px solid #dfe7f5;
	}
	.dashboard-overview-upgrade p{
		max-width:420px;
	}
}
@media (max-width:700px){
	.dashboard-overview-card{
		grid-template-columns:1fr;
		gap:16px;
		padding:18px 18px;
	}
	.dashboard-overview-quota{
		grid-template-columns:56px 1fr;
	}
	.dashboard-overview-icon{
		width:48px;
		height:48px;
	}
	.dashboard-overview-title{
		font-size:20px;
	}
	.dashboard-overview-title strong{
		font-size:25px;
	}
	.dashboard-overview-plan,
	.dashboard-overview-upgrade{
		min-height:0;
		padding:16px 0 0;
		border-left:0;
		border-top:1px solid #dfe7f5;
	}
	body[data-is-dashboard-route="1"] .dashboard-cards,
	body[data-is-dashboard-route="1"] .dashboard-grid{
		grid-template-columns:1fr;
	}
	body[data-is-dashboard-route="1"] .dash-plan-card{
		grid-column:auto;
	}
	body[data-is-dashboard-route="1"] .dashboard-hero h1{
		font-size:24px;
	}
	body[data-is-dashboard-route="1"] .dashboard-hero p{
		font-size:13px;
	}
}
@media (max-width:520px){
	body[data-is-dashboard-route="1"]{
		--dashboard-gutter:12px;
	}
	body[data-is-dashboard-route="1"] .dashboard-hero{
		min-height:106px;
		padding-top:22px;
	}
	body[data-is-dashboard-route="1"] .dashboard-hero::before{
		right:-190px;
		opacity:.16;
	}
	body[data-is-dashboard-route="1"] .dashboard-hero::after{
		right:8px;
		bottom:8px;
		width:92px;
		opacity:.72;
	}
	.dashboard-overview-quota{
		grid-template-columns:1fr;
		gap:10px;
	}
	.dashboard-overview-icon{
		width:42px;
		height:42px;
	}
	.dashboard-overview-icon .icon{
		width:23px;
		height:23px;
	}
	.dashboard-overview-title{
		font-size:18px;
	}
	.dashboard-overview-title strong{
		font-size:23px;
	}
	.dashboard-limit-row{
		align-items:flex-start;
		flex-direction:column;
		gap:8px;
	}
	body[data-is-dashboard-route="1"] .dash-summary-card,
	body[data-is-dashboard-route="1"] .dash-plan-card{
		min-height:0;
		padding:14px 14px;
	}
	body[data-is-dashboard-route="1"] .dash-feature{
		min-height:78px;
		padding:14px 48px 14px 14px;
	}
	body[data-is-dashboard-route="1"] .dash-feature-icon{
		width:40px;
		height:40px;
		min-width:40px;
	}
}

.table{
	width:100%;
	border-collapse:collapse;
	background:var(--card);
	border:1px solid var(--border);
	border-radius:12px;
	overflow:hidden;
}
.table th,
.table td{
	padding:10px 8px;
	border-bottom:1px solid var(--border);
	text-align:left;
	font-family:var(--font-sans);
}
.table tr:hover td{
	background:var(--hover);
}

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.kpi{ padding:16px; }
.kpi-title{
	color:var(--muted);
	font-size:12px;
	text-transform:uppercase;
}
.kpi-value{
	font-size:28px;
	font-weight:700;
	margin-top:6px;
}
.mt{ margin-top:16px; }

.input{
	width:100%;
	padding:10px 12px;
	border-radius:8px;
	border:1px solid var(--input-border);
	background:var(--input-bg);
	color:var(--fg);
	box-shadow:inset 0 1px 0 rgba(16,24,40,.04);
	font-family:var(--font-sans);
}
.input:focus{
	outline:2px solid color-mix(in srgb, var(--accent) 45%, transparent);
	border-color:var(--accent);
}
.wallet-topup-input-error{
	display:block;
	min-height:16px;
	margin-top:6px;
	font-size:12px;
	line-height:1.25;
	color:#d92d20;
}

.btn{
	all:unset;
	cursor:pointer;
	padding:8px 12px;
	border-radius:8px;
	border:1px solid var(--border);
	background:var(--card);
	color:var(--fg);
	display:inline-block;
	text-align:center;
	font-family:var(--font-sans);
	font-weight:bold;
}
.btn:hover{ background:var(--hover); }
.btn.primary{
	background:var(--accent);
	border-color:transparent;
	color:#ffffff;
}
.btn.primary:hover{ background:var(--accent-3); }

.btn.secondary{
	background:var(--card);
	font-weight:600;
	border:1px solid var(--border);
	color:var(--accent);
}
.btn.secondary:hover{
	background:var(--hover);
}

.btn svg{
	width:18px;
	height:18px;
}

/* Paginação */
.pagination{
	display:flex;
	gap:8px;
	margin-top:12px;
	align-items:center;
}
.page{
	padding:6px 10px;
	border:1px solid var(--border);
	border-radius:8px;
	color:var(--fg);
	text-decoration:none;
	background:var(--card);
	font-family:var(--font-sans);
}
.page:hover{ background:var(--hover); }
.page.active{
	background:var(--accent);
	border-color:transparent;
	color:#fff;
}

/* ==========================================================================
   Login
   ========================================================================== */
.login-body{
	display:grid;
	place-items:center;
	min-height:100vh;
}
.login-card{
	width:100%;
	max-width:380px;
	background:var(--card);
	border:1px solid var(--border);
	border-radius:12px;
	padding:20px;
	box-shadow:var(--elev-shadow);
}
.login-brand{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:12px;
}
.form{
	display:flex;
	flex-direction:column;
	gap:10px;
}
.label{
	color:var(--muted);
	font-size:12px;
	font-family:var(--font-sans);
}
.alert{
	margin-top:8px;
	color:#b42318;
	font-family:var(--font-sans);
}

body.login-body{
	--login-background:
		linear-gradient(90deg, #1A73E8 0%, #3DB7F2 45%, #20C997 100%);
	--login-font:"DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	padding-top:0 !important;
	display:block;
	place-items:normal;
	min-height:100vh;
	min-height:max(100vh, 100dvh);
	background:linear-gradient(90deg, #1A73E8 0%, #3DB7F2 45%, #20C997 100%);
	color:#081438;
	overflow-x:hidden;
	overflow-y:hidden;
	position:relative;
	font-family:var(--login-font);
	font-synthesis-weight:none;
}
@supports(selector(html:has(body.login-body))){
	html:has(body.login-body){
		background:linear-gradient(90deg, #1A73E8 0%, #3DB7F2 45%, #20C997 100%);
	}
}
html.login-page{
	background:linear-gradient(90deg, #1A73E8 0%, #3DB7F2 45%, #20C997 100%);
}
body.login-body::before{
	content:"";
	display:block;
	position:fixed;
	inset:0;
	z-index:0;
	min-height:100vh;
	min-height:max(100vh, 100dvh);
	background:var(--login-background);
	pointer-events:none;
}
.login-shell{
	position:relative;
	z-index:1;
	display:grid;
	grid-template-columns:minmax(360px, 1fr) clamp(420px, 26vw, 480px);
	align-items:stretch;
	gap:clamp(44px, 8vw, 150px);
	width:100%;
	min-height:100vh;
	min-height:max(100vh, 100dvh);
	padding:clamp(30px, 6vh, 64px) clamp(24px, 3.4vw, 64px) clamp(28px, 4.5vh, 48px) clamp(34px, 5.2vw, 92px);
}
.login-hero{
	position:relative;
	min-height:0;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-self:stretch;
	padding:clamp(128px, 18vh, 190px) 0 clamp(42px, 6vh, 70px);
	transform:none;
}
.login-hero-copy{
	position:relative;
	z-index:2;
	max-width:none;
}
.login-hero h1{
	margin:0;
	color:#ffffff;
	font-size:clamp(52px, 4.1vw, 76px);
	line-height:1.04;
	font-weight:700;
	letter-spacing:0;
	white-space:nowrap;
}
.login-hero p{
	max-width:640px;
	margin:clamp(18px, 3vh, 28px) 0 0;
	color:#ffffff;
	font-size:clamp(16px, 1.2vw, 20px);
	line-height:1.34;
	font-weight:500;
}
.login-route-art{
	display:none;
	position:absolute;
	left:22%;
	right:-38%;
	bottom:17%;
	height:360px;
	pointer-events:none;
}
.login-route{
	position:absolute;
	display:block;
}
.login-route--wide{
	right:0;
	bottom:24px;
	width:58%;
	height:330px;
	border:2px solid rgba(43, 217, 172, .28);
	border-left:0;
	border-bottom:0;
	border-radius:0 320px 0 0;
	transform:skewX(-18deg);
}
.login-route--dash{
	left:7%;
	right:12%;
	bottom:55px;
	height:145px;
	border-bottom:3px dashed rgba(62, 219, 169, .52);
	border-right:3px dashed rgba(62, 219, 169, .52);
	border-radius:0 0 210px 0;
	transform:rotate(-3deg);
}
.login-route-dot{
	position:absolute;
	left:38%;
	bottom:75px;
	width:20px;
	height:20px;
	border-radius:50%;
	background:#45e1a7;
	box-shadow:0 0 0 22px rgba(69, 225, 167, .12), 0 0 34px rgba(69, 225, 167, .88);
}
.login-tracking{
	position:relative;
	z-index:2;
	display:flex;
	align-items:center;
	gap:14px;
	margin-top:48px;
	transform:none;
}
.login-icon{
	width:22px;
	height:22px;
	stroke:currentColor;
}
.login-tracking-content{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:14px;
}
.login-tracking-content strong{
	color:#ffffff;
	font-size:13px;
	line-height:1.2;
	font-weight:700;
}
.login-tracking-button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:44px;
	padding:0 14px;
	border-radius:8px;
	background:#ffffff;
	color:#1A73E8;
	text-decoration:none;
	font-size:13px;
	font-weight:700;
	box-shadow:0 16px 34px rgba(0, 50, 150, .18);
}
.login-tracking-button:hover{
	background:#f8fbff;
}
.login-button-icon,
.login-button-arrow{
	width:16px;
	height:16px;
	stroke:currentColor;
	flex:0 0 auto;
}
.login-panel{
	display:flex;
	justify-content:flex-end;
	align-items:flex-start;
	align-self:stretch;
	padding-top:clamp(16px, 3.6vh, 32px);
	transform:none;
	min-width:0;
}
.login-card{
	width:100%;
	max-width:480px;
	min-width:0;
	min-height:0;
	display:flex;
	flex-direction:column;
	overflow:visible;
	background:#ffffff;
	border:1px solid rgba(255, 255, 255, .72);
	border-radius:16px;
	padding:40px;
	color:#111827;
	box-shadow:0 20px 50px rgba(15, 23, 42, .08);
}
.login-card-logo{
	display:block;
	width:180px;
	height:auto;
	margin:0 auto 30px;
}
.login-heading{
	margin-bottom:24px;
}
.login-heading h2{
	margin:0;
	color:#081225;
	font-size:24px;
	line-height:1.12;
	font-weight:700;
	letter-spacing:0;
}
.login-heading p{
	margin:8px 0 0;
	color:#475569;
	font-size:15px;
	line-height:1.42;
	font-weight:500;
}
.login-form{
	display:flex;
	flex-direction:column;
	gap:16px;
}
.login-field{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.login-field label{
	color:#111827;
	font-size:13px;
	line-height:1.15;
	font-weight:700;
}
.login-input-wrap{
	position:relative;
	display:flex;
	align-items:center;
}
.login-input{
	width:100%;
	height:48px;
	border:1px solid #E2E8F0;
	border-radius:8px;
	background:#ffffff;
	color:#0B1220;
	padding:0 52px 0 46px;
	font:600 15px/1.3 var(--login-font);
	box-shadow:none;
}
.login-input::placeholder{
	color:#5E6B80;
	font-weight:500;
}
.login-input:focus{
	outline:3px solid rgba(0, 101, 255, .16);
	border-color:#1A73E8;
}
.login-input.is-invalid,
.login-input.has-error{
	border-color:#ef4444;
	background:#fff7f7;
}
.login-input.is-invalid:focus,
.login-input.has-error:focus{
	outline-color:rgba(239, 68, 68, .18);
	border-color:#dc2626;
}
.login-input-icon{
	position:absolute;
	left:16px;
	top:50%;
	transform:translateY(-50%);
	color:#52617A;
	display:grid;
	place-items:center;
	pointer-events:none;
}
.login-input-icon .login-icon{
	width:20px;
	height:20px;
}
.login-password-toggle{
	all:unset;
	position:absolute;
	right:4px;
	top:50%;
	transform:translateY(-50%);
	width:44px;
	height:44px;
	display:grid;
	place-items:center;
	border-radius:50%;
	color:#52617A;
	cursor:pointer;
}
.login-password-toggle:hover,
.login-password-toggle:focus-visible{
	color:#1A73E8;
	background:#eef4ff;
}
.login-password-toggle .login-icon{
	width:20px;
	height:20px;
}
.login-forgot{
	align-self:flex-end;
	margin-top:1px;
	min-height:44px;
	display:inline-flex;
	align-items:center;
	color:#1D5FE8;
	font-size:13px;
	line-height:1.2;
	font-weight:700;
	text-decoration:none;
}
.login-forgot:hover,
.login-terms a:hover,
.login-register a:hover{
	text-decoration:underline;
}
.login-recaptcha{
	width:304px;
	max-width:100%;
	min-height:78px;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	margin-top:2px;
	overflow:hidden;
}
.login-recaptcha .g-recaptcha{
	transform-origin:left top;
}
.login-terms{
	margin:-2px 0 0;
	color:#334155;
	font-size:13px;
	line-height:1.42;
	font-weight:500;
}
.login-terms a,
.login-register a{
	color:#1D5FE8;
	font-weight:700;
	text-decoration:none;
}
.login-register a{
	display:inline-flex;
	align-items:center;
	padding-inline:6px;
	min-height:44px;
}
.login-submit{
	all:unset;
	box-sizing:border-box;
	width:100%;
	height:48px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:8px;
	background:#1A73E8;
	color:#ffffff;
	font-size:16px;
	line-height:1;
	font-weight:700;
	text-align:center;
	cursor:pointer;
	box-shadow:0 16px 30px rgba(0, 103, 255, .2);
}
.login-submit:hover,
.login-submit:focus-visible{
	background:#1668d2;
}
.login-alert{
	margin:-12px 0 22px;
	padding:12px 14px;
	border:1px solid #fecaca;
	border-radius:8px;
	background:#fff1f2;
	color:#b42318;
	font-size:14px;
	line-height:1.35;
	font-weight:600;
}
.login-alert-info{
	border-color:#b6cffd;
	background:#f9fbff;
	color:#25345f;
	font-weight:500;
}
.login-alert-success{
	border-color:#a7f3d0;
	background:#ecfdf5;
	color:#047857;
	font-weight:500;
}
.password-forgot-confirm-shell{
	grid-template-columns:1fr;
	place-items:center;
	justify-items:center;
}
.password-forgot-confirm-shell .login-hero.is-hidden{
	display:none;
}
.password-forgot-confirm-shell .login-panel{
	width:100%;
	justify-content:center;
	align-items:center;
	padding-top:0;
}
.password-forgot-confirm-card{
	max-width:520px;
	padding:40px;
	border-radius:16px;
	text-align:center;
	box-shadow:0 24px 70px rgba(15, 23, 42, .13);
}
.password-forgot-confirm-card .login-card-logo{
	width:180px;
	max-width:100%;
	margin-bottom:30px;
}
.password-forgot-confirm-card .login-heading{
	margin-bottom:24px;
}
.password-forgot-confirm-card .login-heading h2{
	font-size:28px;
	line-height:1.12;
}
.password-forgot-confirm{
	display:flex;
	flex-direction:column;
	gap:20px;
}
.password-forgot-info{
	display:flex;
	align-items:center;
	gap:16px;
	padding:18px 16px;
	border:1px solid #b6cffd;
	border-radius:10px;
	background:#f9fbff;
	color:#111827;
	text-align:left;
}
.password-forgot-info-icon{
	width:32px;
	height:32px;
	display:grid;
	place-items:center;
	flex:0 0 auto;
	color:#5b8dff;
	line-height:1;
}
.password-forgot-info-svg{
	width:26px;
	height:26px;
	stroke:currentColor;
}
.password-forgot-info p{
	flex:1;
	margin:0;
	font-size:16px;
	line-height:1.45;
}
.password-forgot-login-button{
	height:56px;
	border-radius:8px;
	font-size:18px;
	text-decoration:none;
	box-shadow:0 12px 24px rgba(47, 82, 235, .24);
}
.login-field-error{
	display:none;
	margin:-2px 0 0;
	color:#b42318;
	font-size:13px;
	line-height:1.3;
}
.login-field-error.is-visible,
.login-field-error:not(:empty){
	display:block;
}
.login-field-error a{
	color:#1A73E8;
	font-weight:700;
	text-decoration:none;
}
.login-field-error a:hover,
.login-field-error a:focus-visible{
	text-decoration:underline;
}
.register-password-strength{
	display:flex;
	flex-direction:column;
	gap:6px;
	margin-top:-2px;
}
.register-password-strength-track{
	width:100%;
	height:6px;
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:5px;
}
.register-password-strength-segment{
	display:block;
	height:100%;
	border-radius:999px;
	background:#e2e8f0;
	transition:background .18s ease;
}
.register-password-strength-text{
	color:#64748b;
	font-size:12px;
	line-height:1.2;
}
.register-password-strength.is-weak .register-password-strength-segment:first-child{
	background:#f87171;
}
.register-password-strength.is-weak .register-password-strength-text{
	color:#b42318;
}
.register-password-strength.is-regular .register-password-strength-segment:nth-child(-n+2){
	background:#facc15;
}
.register-password-strength.is-regular .register-password-strength-text{
	color:#a16207;
}
.register-password-strength.is-good .register-password-strength-segment{
	background:#16a34a;
}
.register-password-strength.is-good .register-password-strength-text{
	color:#15803d;
}
.login-register{
	margin:24px 0 0;
	color:#334155;
	font-size:14px;
	line-height:1.35;
	font-weight:500;
	text-align:center;
}
body.login-body.register-body{
	overflow:hidden;
}
.register-body .login-shell{
	grid-template-columns:minmax(360px, 1fr) clamp(460px, 30vw, 520px);
	place-items:stretch;
	align-items:stretch;
	justify-items:stretch;
	gap:clamp(44px, 8vw, 150px);
	height:100vh;
	height:100dvh;
	min-height:0;
	overflow-x:hidden;
	overflow-y:auto;
	padding:clamp(12px, 2.5vh, 24px) clamp(24px, 3.4vw, 64px) clamp(12px, 2.5vh, 24px) clamp(34px, 5.2vw, 92px);
}
.register-body .login-hero{
	display:flex;
	padding:clamp(96px, 14vh, 150px) 0 clamp(36px, 5vh, 60px);
}
.register-body .login-panel{
	width:auto;
	justify-content:flex-end;
	align-items:center;
	align-self:stretch;
	min-height:0;
	padding-top:0;
	padding-bottom:0;
}
.register-body .login-card{
	width:100%;
	max-width:520px;
	min-height:min(760px, calc(100vh - clamp(24px, 5vh, 48px)));
	min-height:min(760px, calc(100dvh - clamp(24px, 5vh, 48px)));
	max-height:calc(100vh - clamp(24px, 5vh, 48px));
	max-height:calc(100dvh - clamp(24px, 5vh, 48px));
	overflow-x:hidden;
	overflow-y:auto;
	padding:34px 42px 28px;
}
.register-body .login-card-logo{
	width:150px;
	margin-bottom:12px;
}
.register-body .login-heading{
	margin-bottom:12px;
}
.register-body .login-form{
	gap:8px;
}
.register-body .login-field{
	gap:5px;
}
.register-body .login-input{
	height:44px;
}
.register-body .login-terms{
	margin-top:0;
	font-size:12px;
}
.register-body .login-register{
	margin-top:10px;
	font-size:14px;
}

@media (max-width:1280px){
	.login-shell{
		grid-template-columns:minmax(300px, 1fr) minmax(400px, 460px);
		gap:clamp(28px, 5vw, 70px);
		padding-inline:clamp(22px, 5vw, 64px);
	}
	.login-card{
		max-width:460px;
		padding:36px;
	}
	.login-hero{
		padding-top:clamp(104px, 17vh, 150px);
	}
	.login-hero h1{
		font-size:clamp(44px, 4.5vw, 60px);
	}
	.login-hero p{
		font-size:clamp(15px, 1.55vw, 18px);
	}
}

@media (max-width:1024px){
	body.login-body{
		overflow:auto;
		overflow-x:hidden;
		background-position:45% center;
	}
	.login-shell{
		grid-template-columns:1fr;
		place-items:center;
		min-height:100vh;
		min-height:max(100vh, 100dvh);
		height:auto;
		width:100%;
		padding:clamp(18px, 4vh, 28px) 18px;
	}
	.login-hero{
		display:none;
		transform:none;
	}
	.login-panel{
		width:100%;
		max-width:100%;
		justify-content:center;
		align-items:center;
		align-self:auto;
		padding-top:0;
		transform:none;
	}
	.login-card{
		width:100%;
		max-width:480px;
		min-height:0;
		display:block;
		max-height:none;
		padding:clamp(28px, 6vw, 40px);
	}
	.register-body .login-shell{
		grid-template-columns:1fr;
		place-items:center;
		justify-items:center;
		align-items:safe center;
		gap:0;
		padding:clamp(18px, 4vh, 28px) 18px;
	}
	.register-body .login-hero{
		display:none;
	}
	.register-body .login-panel{
		width:100%;
		justify-content:center;
		align-items:center;
		align-self:auto;
	}
	.register-body .login-card{
		min-height:0;
		max-height:none;
		overflow:visible;
	}
}

@media (max-width:560px){
	html.login-page,
	body.login-body{
		width:100%;
		max-width:100%;
		overflow-x:hidden;
	}
	.login-shell{
		width:100%;
		max-width:100%;
		place-items:center;
		min-height:100vh;
		padding:12px;
	}
	.login-panel,
	.login-form,
	.login-field,
	.login-input-wrap{
		width:100%;
		min-width:0;
		max-width:100%;
	}
	.login-panel{
		justify-content:center;
	}
	.login-card{
		width:min(calc(100vw - 24px), 360px);
		max-width:100%;
		min-width:0;
		padding:26px 18px 22px;
		border-radius:16px;
		overflow-x:hidden;
	}
	.login-card-logo{
		width:min(180px, 100%);
		margin-bottom:24px;
	}
	.password-forgot-confirm-card{
		max-width:100%;
		padding:34px 18px 24px;
	}
	.password-forgot-confirm-card .login-card-logo{
		width:min(180px, 86%);
		margin-bottom:28px;
	}
	.password-forgot-confirm-card .login-heading{
		margin-bottom:22px;
	}
	.password-forgot-confirm-card .login-heading h2{
		font-size:28px;
	}
	.password-forgot-info{
		gap:14px;
		padding:18px 14px;
	}
	.password-forgot-info-icon{
		width:42px;
		height:42px;
		font-size:26px;
	}
	.password-forgot-info p{
		font-size:15px;
		line-height:1.42;
	}
	.password-forgot-login-button{
		height:56px;
		font-size:18px;
	}
	.login-heading h2{
		font-size:24px;
	}
	.login-heading p{
		font-size:15px;
	}
	.login-input{
		height:48px;
		font-size:15px;
		min-width:0;
		padding:0 44px;
	}
	.login-recaptcha{
		width:100%;
		min-width:0;
		max-width:304px;
		min-height:76px;
	}
	.login-forgot,
	.login-terms,
	.login-register{
		overflow-wrap:anywhere;
	}
	.login-submit{
		height:48px;
	}
	.register-body .login-shell{
		place-items:center;
		justify-items:center;
		align-items:safe center;
		height:100vh;
		height:100dvh;
		min-height:0;
		padding:14px;
	}
	.register-body .login-card{
		width:min(calc(100vw - 28px), 420px);
		padding:22px 18px 18px;
	}
	.register-body .login-card-logo{
		width:min(154px, 100%);
		margin-bottom:16px;
	}
	.register-body .login-heading{
		margin-bottom:14px;
	}
	.register-body .login-heading h2{
		font-size:20px;
	}
	.register-body .login-heading p{
		font-size:13px;
	}
	.register-body .login-form{
		gap:10px;
	}
	.register-body .login-field{
		gap:6px;
	}
	.register-body .login-input{
		height:44px;
		padding:0 42px;
	}
	.register-body .login-submit{
		height:44px;
	}
	.register-body .login-terms{
		font-size:12px;
	}
	.register-body .login-register{
		margin-top:12px;
		font-size:12px;
	}
}

@media (max-width:380px){
	.login-recaptcha .g-recaptcha{
		transform:scale(.96);
	}
}

@media (max-width:340px){
	.login-recaptcha .g-recaptcha{
		transform:scale(.86);
	}
}

@media (max-height:820px) and (min-width:1025px){
	.login-shell{
		padding-top:clamp(24px, 5vh, 40px);
		padding-bottom:clamp(20px, 4vh, 32px);
	}
	.login-hero{
		min-height:0;
		padding-top:clamp(88px, 15vh, 118px);
	}
	.login-hero h1{
		font-size:clamp(44px, 4.2vw, 68px);
	}
	.login-hero p{
		font-size:clamp(14px, 1.2vw, 18px);
	}
	.login-card{
		min-height:0;
		padding-top:32px;
		padding-bottom:26px;
	}
	.login-card-logo{
		width:164px;
		margin-bottom:18px;
	}
	.login-heading{
		margin-bottom:14px;
	}
	.login-heading h2{
		font-size:22px;
	}
	.login-heading p{
		font-size:14px;
	}
	.login-form{
		gap:10px;
	}
	.login-field{
		gap:8px;
	}
	.login-input{
		height:44px;
	}
	.login-recaptcha{
		min-height:74px;
		margin-top:0;
	}
	.login-terms{
		font-size:12px;
	}
	.login-submit{
		height:46px;
	}
	.login-register{
		margin-top:12px;
		font-size:14px;
	}
	.register-body .login-form{
		gap:7px;
	}
	.register-body .login-field{
		gap:5px;
	}
	.register-body .login-card{
		min-height:0;
		padding-top:22px;
		padding-bottom:20px;
	}
	.register-body .login-card-logo{
		width:136px;
		margin-bottom:10px;
	}
	.register-body .login-heading{
		margin-bottom:10px;
	}
	.register-body .login-input{
		height:40px;
	}
	.register-body .login-submit{
		height:42px;
	}
	.register-body .login-register{
		margin-top:8px;
	}
}

/* ==========================================================================
   Container padrão
   ========================================================================== */
.container{
	width:100%;
	margin-inline:auto;
	border-radius:16px;
	padding:12px 0 12px 0;
	font-family:var(--font-sans);
}

/* ==========================================================================
   Padrão global de páginas administrativas
   --------------------------------------------------------------------------
   Mantém o mesmo alinhamento entre sidebar, topbar, título e conteúdo.
   Use junto do container raiz da tela:
   <div class="container admin-page-shell ...">
   ========================================================================== */
.admin-page-shell,
.container.admin-page-shell{
	width:100%;
	max-width:none;
	margin:0 auto;
	padding:20px;
	display:flex;
	flex-direction:column;
	gap:24px;
	background:transparent;
	border:0;
	border-radius:0;
	box-shadow:none;
	font-family:var(--font-sans);
}

.tasks-page.admin-page-shell,
.platform-settings-page.admin-page-shell{
	width:100%;
	max-width:none;
	margin:0 auto;
	padding:20px;
	display:flex;
	flex-direction:column;
	gap:24px;
	background:transparent;
	border:0;
	box-shadow:none;
}

.admin-page-heading{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	flex-wrap:wrap;
	width:100%;
	margin:0;
	padding:0;
}

.admin-page-shell > header.admin-page-heading{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	flex-wrap:wrap;
	margin:0;
	padding:0;
}

.admin-page-heading .title-content{
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
	flex:1 1 auto;
	width:auto;
	min-width:0;
	margin:0;
	padding:0;
}

.admin-page-shell > header.admin-page-heading .title-content{
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:12px;
	flex-wrap:wrap;
	flex:1 1 auto;
	width:auto;
	margin:0;
	padding:0;
}

.admin-page-heading .title-main{
	min-width:0;
}

.admin-page-heading .title-main-label{
	min-width:0;
	overflow-wrap:anywhere;
}

.admin-page-heading p{
	width:100%;
	margin:4px 0 0;
	color:var(--muted);
	font-size:13px;
	line-height:1.35;
	font-weight:500;
}

.admin-page-heading-actions{
	display:inline-flex;
	align-items:center;
	justify-content:flex-end;
	gap:10px;
	flex-wrap:wrap;
	margin-left:auto;
}

.admin-page-heading .title-back-link{
	min-height:36px;
	padding:0 10px;
	gap:6px;
	border:1px solid var(--border);
	border-radius:8px;
	background:var(--card);
	color:var(--fg);
	text-decoration:none;
	white-space:nowrap;
}

.admin-page-heading .title-back-link:hover,
.admin-page-heading .title-back-link:focus-visible{
	background:var(--hover);
	color:var(--accent);
	outline:none;
}

.admin-page-heading .title-content:has(.title-back-link){
	display:grid !important;
	grid-template-columns:1fr !important;
	align-items:start !important;
	justify-items:start !important;
	gap:20px !important;
}

.admin-page-heading .title-content:has(.title-back-link) .title-back-link{
	width:auto !important;
	min-height:auto !important;
	padding:0 !important;
	border:0 !important;
	border-radius:0 !important;
	background:transparent !important;
	color:var(--fg) !important;
	justify-content:flex-start !important;
}

.admin-page-heading .title-content:has(.title-back-link) .title-back-link:hover,
.admin-page-heading .title-content:has(.title-back-link) .title-back-link:focus-visible{
	background:transparent !important;
	color:var(--fg) !important;
}

.admin-page-heading .title-content:has(.title-back-link) .title-back-link:hover span,
.admin-page-heading .title-content:has(.title-back-link) .title-back-link:focus-visible span{
	text-decoration:underline;
	text-underline-offset:3px;
}

.admin-page-shell > .heading:first-child,
.admin-page-shell > .title-content:first-child,
.admin-page-shell .tasks-heading,
.admin-page-shell .platform-heading{
	margin-top:0;
	margin-bottom:0;
}

@media (max-width:960px){
	.admin-page-shell,
	.container.admin-page-shell,
	.tasks-page.admin-page-shell,
	.platform-settings-page.admin-page-shell{
		padding:16px;
		gap:18px;
	}
}

@media (max-width:560px){
	.admin-page-shell,
	.container.admin-page-shell,
	.tasks-page.admin-page-shell,
	.platform-settings-page.admin-page-shell{
		padding:12px;
		gap:16px;
	}

	.admin-page-heading{
		align-items:stretch;
	}

	.admin-page-heading .title-content,
	.admin-page-heading-actions{
		width:100%;
	}

	.admin-page-heading .title-back-link{
		width:100%;
		justify-content:center;
	}
}
.title-content{
	width:100%;
	margin-inline:auto;
	padding:0;
	font-family:var(--font-sans);
	font-size:20px;
	font-weight:bold;
}
.link-title{
	text-decoration:underline;
	cursor:pointer;
	color:var(--fg);
}

@media (min-width:640px){
	.title-content{ padding:0; }
}
@media (min-width:1024px){
	.container{ padding:20px; }
	.title-content{ padding:0; }
}
/* ==========================================================================
   Utilitários
   ========================================================================== */
.hidden{ display:none !important; }
.center{ display:grid; place-items:center; }
.text-muted{ color:var(--muted); }
.w-100{ width:100%; }

/* ==========================================================================
   Fixes estruturais (offsets, scroll e contextos)
   ========================================================================== */
html{
	scroll-padding-top:calc(var(--impersonation-offset) + var(--topbar-h));
}
body{
	padding-top:calc(var(--impersonation-offset) + var(--topbar-h)) !important;
}

/* Neutraliza classes legadas de auto-hide do header */
.topbar--hidden,
.topbar.is-hidden,
.topbar.hide-on-scroll,
.topbar.hidden{
	display:grid !important;
	transform:none !important;
	opacity:1 !important;
	visibility:visible !important;
}

/* Evita que ancestrais criem novo contexto ou scroll container */
:where(.app,.app-shell,.layout,.page,.page-wrap,.main,.content,.container){
	transform:none !important;
	will-change:auto !important;
}
:where(.app,.app-shell,.layout,.page,.page-wrap){
	overflow:visible !important;
}

/* Z-index coerentes */
.impersonation-bar{ z-index:300 !important; }
.topbar{ z-index:200 !important; }
.sidebar{ z-index:220 !important; }

@media (min-width:960px){
	body .topbar .top-metrics{
		justify-self:start;
		justify-content:flex-start;
		margin-right:0;
		margin-left:0;
	}
}

/* Forçar “sem faixa” em páginas específicas (opcional) */
.no-impersonation{
	--impersonation-offset:0px !important;
}

/* ==========================================================================
   Topbar — Ícones + Tooltips + Dropdown
   ========================================================================== */

/* Não force fill aqui — deixe o SVG controlar */
.icon{
	width:24px;
	height:24px;
	display:inline-block;
	vertical-align:middle;
}

/* Tamanhos alternativos */
.icon-sm{ width:16px; height:16px; }
.icon-lg{ width:22px; height:22px; }

/* Linha de ícones à direita */
.top-icons{
	display:flex;
	align-items:center;
	gap:12px;
	color:var(--fg);
}
.top-icons svg{
	width:24px;
	height:24px;
	stroke:currentColor;
}

/* Botão de ícone */
.icon-btn{
	position:relative;
	display:inline-flex; align-items:center; justify-content:center;
	width:46px; height:46px;
	background:#f8faff;
	color:var(--fg);
	border:1px solid #dce6f6;
	border-radius:13px;
	box-shadow:none;
	cursor:pointer;
	text-decoration:none;
	outline:none;
	transition:transform .06s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.cart-count-badge{
	position:absolute;
	top:0;
	right:0;
	min-width:16px;
	height:16px;
	padding:0 4px;
	border-radius:999px;
	background:#5564ff;
	color:#fff;
	font-size:10px;
	line-height:16px;
	font-weight:700;
	text-align:center;
	box-shadow:0 0 0 2px var(--topbar-bg);
}
.icon-btn:hover{
	background:#f1f4ff;
	border-color:#ccd6ff;
	transform:translateY(-1px);
	color:#545cff;
}
.icon-btn.active{
	background:#f1f4ff;
	border-color:#ccd6ff;
	transform:translateY(-1px);
	color:#545cff;
}
.icon-btn:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:2px;
}

/* Tooltip universal */
[data-tooltip] {
	position: relative; /* necessário para posicionamento */
	font-family: var(--font-sans);
}

/* Garantir que o tooltip fique acima de elementos vizinhos empilhados */
[data-tooltip]:hover,
[data-tooltip]:focus-visible{
	z-index: 400;
}

/* Caixa do tooltip */
[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 12px;
	line-height: 1;
	background: rgba(0,0,0,.9);
	color: #fff;
	padding: 8px 10px;
	border-radius: 8px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
	box-shadow: 0 6px 18px rgba(0,0,0,.25);
	z-index: 350;
	font-weight: bold;
}

/* Seta do tooltip */
[data-tooltip]::before {
	content: "";
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid rgba(0,0,0,.9);
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
	z-index: 350;
}

/* Mostrar tooltip */
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
	opacity: 1;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
	opacity: 1;
}


/* Dropdown do usuário */
.user-btn{
	position:relative;
	border:1px solid #dce6f6;
}
.dropdown-menu{
	position:absolute;
	right:12px;
	top:calc(100% + 8px);
	min-width:220px;
	max-width:280px;
	background:var(--card);
	border:1px solid var(--border);
	border-radius:14px;
	padding:8px;
	box-shadow:0 12px 30px rgba(0,0,0,.35);
	z-index:340;
}
.dropdown-header{
	padding:8px 10px 10px;
	border-bottom:1px solid var(--border);
	margin-bottom:8px;
}
.dropdown-header .user-name{
	font-weight:700;
	color:var(--fg);
	margin-bottom:2px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.dropdown-header .user-email{
	font-size:12px;
	color:var(--muted);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.dropdown-sep{
	height:1px;
	background:var(--border);
	margin:4px 6px;
}
.dropdown-item{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px;
	border-radius:10px;
	text-decoration:none;
	color:var(--fg);
	transition:background .2s ease, color .2s ease;
}
.dropdown-item .icon{
	flex-shrink:0;
	opacity:.9;
}
.dropdown-item:hover{
	background:var(--hover);
	color:var(--accent);
}
.dropdown-item:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:2px;
}
.dropdown-item.danger{
	color:#ff6b6b;
}
.dropdown-item.danger:hover{
	background:color-mix(in srgb, #ff6b6b 12%, transparent);
}

/* ==========================================================================
   Acessibilidade / Motion
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
	.sidebar,
	.icon-btn,
	.btn,
	.btn-outline,
	.page{
		transition:none;
	}
}
@media (max-width:959.98px){
	.top-user{ display:none; }
}

/* ==========================================================================
   Títulos / Breadcrumb
   ========================================================================== */
.title-content{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:24px;
	margin:8px 0 24px;
	font-size:14px;
}
.container > .title-content:first-child{
	margin-top:-12px;
}
.container > .heading:first-child{
	margin-top:-12px;
}
.content > .heading:first-child{
	margin-top:8px;
}
.heading > .title-content{
	margin-top:0;
	margin-bottom:0;
}
.title-main{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-size:20px;
	font-weight:bold;
	line-height:1;
}
.title-content .divider{
	width:1px;
	height:18px;
	background:var(--border);
	margin:0 4px;
}
.title-sub{
	display:inline-flex;
	align-items:center;
	gap:4px;
	line-height:1;
	font-weight:normal;
}
.title-sub svg{
	width:16px;
	height:16px;
	stroke-width:2;
	display:block;
}
.title-link{
	display:inline-flex;
	align-items:center;
	color:inherit;
	text-decoration:none;
}
.title-back-link{
	display:inline-flex;
	align-items:center;
	gap:3px;
	min-height:32px;
	padding:4px 0;
	color:var(--fg);
	text-decoration:none;
	font-size:13px;
	font-weight:600;
	line-height:1;
}
.title-back-link .icon{
	width:16px;
	height:16px;
}
.title-back-link:hover{
	color:var(--fg);
}
.title-back-link:hover span{
	text-decoration:underline;
	text-underline-offset:3px;
}
.title-main-label{
	display:inline-flex;
	align-items:center;
}
.title-link:hover svg{
	color:var(--fg);
	transition:color .2s ease;
}

/* Responsivo breadcrumb */
@media (max-width:960px){
	.title-content{
		display:flex;
	}
	.title-content .divider,
	.title-sub{
		display:none;
	}
}

/* =========================
   Sidebar — submenus
   ========================= */
.nav-collapsible{
	border-radius:10px;
	margin:4px 0;
}
.nav-collapsible > summary{
	list-style:none;
	cursor:pointer;
	display:flex;
	align-items:center;
	gap:10px;
	min-height:52px;
	padding:12px 15px;
	border-radius:10px;
	color:#111936;
}
.nav-collapsible > summary::-webkit-details-marker{
	display:none;
}
.nav-collapsible > summary:hover{
	background:#f1f4ff;
	color:#545cff;
}
.nav-collapsible > summary .nav-item-text{
	font-weight:700;
	font-size:14px;
	padding-left:2px;
}
.nav-collapsible > summary .chevron{
	margin-left:auto;
	inline-size:10px;
	block-size:10px;
	border-right:2px solid currentColor;
	border-bottom:2px solid currentColor;
	transform:rotate(-45deg);
	opacity:.7;
	transition:transform .15s ease, opacity .15s ease;
}
.nav-collapsible[open] > summary .chevron{
	transform:rotate(45deg);
	opacity:1;
}
.nav-collapsible > summary.active-parent{
	background:#eef1ff;
	color:#545cff;
	font-weight:700;
	box-shadow:inset 0 0 0 1px rgba(84,92,255,.03);
}

/* Container dos subitens */
.nav-sub{
	display:grid;
	gap:2px;
	padding:4px 0 6px 0;
}

/* Subitens */
.nav-subitem{
	display:flex;
	align-items:center;
	min-height:44px;
	margin:0 0 0 8px;
	padding:8px 12px 8px 32px;
	border-radius:8px;
	color:#111936;
	text-decoration:none;
	font-family:var(--font-sans);
	position:relative;
}
.nav-subitem::before{
	content:"";
	position:absolute;
	left:18px;
	top:50%;
	transform:translateY(-50%);
	inline-size:6px;
	block-size:6px;
	border-radius:999px;
	background:rgba(84,92,255,.18);
	opacity:.7;
}
.nav-subitem:hover{
	background:#f1f4ff;
	color:#545cff;
}
.nav-subitem.active{
	background:#eef1ff;
	color:#545cff;
	font-weight:700;
}

/* Responsivo: mantém sidebar mobile */
@media (max-width:960px){
	.nav-collapsible{ margin-left:0; }
	.nav-subitem{ padding-left:28px; }
}
@media (max-width:1180px) and (min-width:961px){
	.topbar{
		padding-inline:18px;
	}
	.top-metrics{
		gap:8px;
		margin-right:10px;
	}
	.top-metric{
		min-width:104px;
		padding-inline:12px;
	}
	.icon-btn{
		width:44px;
		height:44px;
	}
	.nav{
		padding:16px 12px 10px;
	}
	.nav-item.has-icon,
	.nav-collapsible > summary{
		min-height:50px;
		padding:11px 13px;
	}
	.sidebar-promo{
		margin:14px 0 10px;
		padding:14px 14px 16px;
	}
}
@media (max-height:820px) and (min-width:961px){
	.nav{
		padding-top:12px;
	}
	.nav-item.has-icon,
	.nav-collapsible > summary{
		min-height:48px;
		margin:4px 0;
		padding-block:10px;
	}
	.sidebar-promo{
		margin:12px 0 10px;
		padding-block:14px 16px;
	}
}

/* ==========================================================
   Veolog Modal
   ========================================================== */

body.has-modal-open{
	overflow: hidden;
}

.wallet-topup-amount{
	margin-bottom: 4px;
}

#wallet-topup-modal .input{
	min-height:40px;
}

#wallet-topup-modal .finance-topup-actions .btn{
	min-height:40px;
	padding:0 16px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
}

@media (max-width:420px){
	#wallet-topup-modal .finance-topup-actions{
		align-items:stretch !important;
		flex-direction:column-reverse;
		justify-content:stretch !important;
	}
	#wallet-topup-modal .finance-topup-actions .btn{
		width:100%;
	}
}

.veo-modal{
	position:fixed;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:1100;
	opacity:0;
	pointer-events:none;
	transition:opacity .25s ease;
}
.veo-modal[aria-hidden="false"]{
	opacity:1;
	pointer-events:all;
}
.veo-modal-backdrop{
	position:absolute;
	inset:0;
	z-index:0;
	cursor:pointer;
	background:rgba(0,0,0,0.35);
	backdrop-filter:blur(1px);
}
.veo-modal-dialog{
	position:relative;
	z-index:1;
	width:90%;
	max-width:540px;
	border-radius:16px;
	background:var(--card);
	border:1px solid var(--border);
	box-shadow:0 8px 24px rgba(0,0,0,0.12);
	transform:translateY(10px) scale(.98);
	transition:transform .25s ease, opacity .25s ease;
	opacity:0;
	max-height: 90vh; /* impede ultrapassar a tela */
	overflow-y: auto; /* ativa scroll interno */
}

.veo-modal[aria-hidden="false"] .veo-modal-dialog{
	transform:translateY(0) scale(1);
	opacity:1;
	animation:veoModalOpen .25s ease;
}
@keyframes veoModalOpen{
	from{ transform:scale(.95); opacity:0; }
	to{ transform:scale(1); opacity:1; }
}
.veo-modal-body{
	padding:1.5rem;
	display:flex;
	flex-direction:column;
	gap:1rem;
}
.veo-modal-figure{
	margin:0;
}
.veo-modal-figure img{
	width:100%;
	height:auto;
	display:block;
	border: none;
}
.veo-modal-figure.no-border img{
	border:none;
}
.balance-modal-figure img{
	max-width:460px;
	margin:0 auto;
}
.limit-modal-figure img{
	max-width:460px;
	margin:0 auto;
}
.veo-modal-title{
	font-size:1.25rem;
	font-weight:600;
	margin-bottom:.25rem;
	color:var(--fg);
}
.veo-modal-footer{
	display:flex;
	justify-content:flex-end;
	gap:.5rem;
	padding:1rem 1.5rem 1.5rem;
	border-bottom-left-radius:16px;
	border-bottom-right-radius:16px;
	background:var(--card);
}
.veo-modal .form-field{
	display:flex;
	flex-direction:column;
	gap:.25rem;
}
.veo-modal .form-field span{
	font-weight:500;
	font-size:.9rem;
	color:var(--fg);
}
.veo-modal-dialog.is-sm{ max-width:420px; }
.veo-modal-dialog.is-md{ max-width:540px; }
.veo-modal-dialog.is-lg{ max-width:800px; }

.api-credentials-modal .veo-modal-dialog{
	max-width:620px;
}
.api-credentials-modal-body{
	gap:16px;
}
.api-credentials-modal-head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:16px;
}
.api-credentials-modal-head .veo-modal-title{
	margin:0;
}
.api-credentials-modal-head .veo-modal-description{
	margin:4px 0 0;
	color:var(--muted);
	line-height:1.45;
}
.api-credentials-key-list{
	display:grid;
	gap:14px;
}
.api-credentials-key-group{
	display:flex;
	flex-direction:column;
	gap:8px;
	min-width:0;
}
.api-credentials-key-list label{
	display:flex;
	flex-direction:column;
	gap:8px;
	min-width:0;
	color:var(--fg);
	font-size:13px;
	font-weight:700;
}
.api-credentials-key-input{
	display:grid;
	grid-template-columns:minmax(0, 1fr) 42px;
	gap:8px;
	align-items:center;
}
.api-credentials-key-input input{
	font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size:13px;
}
.api-credentials-key-input button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:38px;
	border:1px solid var(--border);
	border-radius:8px;
	background:var(--card);
	color:var(--accent);
	cursor:pointer;
	transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.api-credentials-key-input button:hover:not(:disabled){
	background:var(--hover);
	border-color:var(--accent);
}
.api-credentials-key-input button[data-tooltip]::after{
	left:auto;
	right:0;
	transform:none;
}
.api-credentials-key-input button[data-tooltip]::before{
	left:auto;
	right:13px;
	transform:none;
}
.api-credentials-key-input button.is-copied{
	background:#DCFCE7;
	border-color:#86EFAC;
	color:#166534;
}
.api-credentials-key-input button:disabled{
	cursor:not-allowed;
	opacity:.45;
}
.api-credentials-token-form{
	margin:0;
}
.api-credentials-token-link{
	all:unset;
	display:inline-flex;
	align-items:center;
	gap:7px;
	width:max-content;
	max-width:100%;
	margin-top:2px;
	color:#B42318;
	cursor:pointer;
	font-size:13px;
	font-weight:700;
	line-height:1.35;
	text-decoration:none;
	transition:color .16s ease;
}
.api-credentials-token-link:hover:not(:disabled){
	color:#7A271A;
	text-decoration:underline;
}
.api-credentials-token-link:focus-visible{
	outline:2px solid color-mix(in srgb, #B42318 45%, transparent);
	outline-offset:3px;
	border-radius:6px;
}
.api-credentials-token-link .icon{
	flex:0 0 auto;
	width:16px;
	height:16px;
}
.api-credentials-token-link:disabled{
	cursor:not-allowed;
	opacity:.45;
}
.api-credentials-modal-footer form{
	margin:0;
}

@media (max-width: 640px){
	.api-credentials-modal .veo-modal-dialog{
		width:calc(100% - 20px);
		max-height:calc(100vh - 20px);
	}
	.api-credentials-modal-head{
		flex-direction:column;
	}
	.api-credentials-modal-footer{
		align-items:stretch;
		flex-direction:column-reverse;
	}
	.api-credentials-modal-footer .btn,
	.api-credentials-modal-footer form{
		width:100%;
	}
}

/* Checkbox */
.checkbox{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:14px;
	color:var(--fg);
	cursor:pointer;
}
.checkbox input[type="checkbox"]{
	width:16px;
	height:16px;
	accent-color:var(--accent);
	cursor:pointer;
}

.req{
	color:#dc2626;
	font-size:14px;
}

/* ============================================================
   Pagination (Global)
   Tudo alinhado à direita (desktop e mobile)
   ============================================================ */

.pagination {
	display: flex;
	align-items: center;
	justify-content: flex-end; /* tudo à direita */
	gap: 16px;
	padding: 12px 0;
	font-size: 14px;
	color: var(--fg);
	user-select: none;
	/* largura total garante alinhamento perfeito */
	width: 100%;
}

/* --- bloco "itens por página" --- */
.pagination .pagi-limit {
	display: flex;
	align-items: center;
	justify-content: flex-end; /* direita */
	gap: 8px;
	white-space: nowrap;
	text-align: right;
	width: auto;
}

.pagination .pagi-limit select {
	min-height: 38px;
	padding: 6px 30px 6px 10px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 14px;
	color: var(--fg);
	cursor: pointer;
	appearance: none;
	background-image: var(--select-arrow, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23888'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"));
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 14px;
}
/* --- range + nav juntos --- */
.pagination .pagi-bottom {
	display: flex;
	align-items: center;
	justify-content: flex-end; /* direita */
	gap: 16px;
	text-align: right;
}

/* Range */
.pagination .pagi-range {
	white-space: nowrap;
	color: var(--muted);
}

/* Navegação */
.pagination .pagi-nav {
	display: flex;
	align-items: center;
	gap: 6px;
}

.pagination .pagi-btn {
	width: 38px;
	height: 38px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--accent);
	transition: background .15s ease;
	font-size: 16px;
	font-weight: 700;
}

.pagination .pagi-btn svg {
	width: 20px;
	height: 20px;
	pointer-events: none;
}

.pagination .pagi-btn:hover {
	background: var(--hover);
}

.pagination .pagi-btn[disabled],
.pagination .pagi-btn.disabled {
	opacity: .35;
	cursor: default;
	background: transparent !important;
}

/* ============================
   Mobile: <= 600px
   Continua tudo à direita
   ============================ */
@media (max-width: 600px) {
	.pagination {
		flex-direction: column;
		align-items: flex-end; /* mantém tudo à direita */
		gap: 10px;
		padding: 8px 0;
		font-size: 13px;
	}

	.pagination .pagi-limit {
		width: 100%;
		justify-content: flex-end;
	}

	.pagination .pagi-bottom {
		width: 100%;
		justify-content: flex-end;
	}

	.pagination .pagi-range {
		font-size: 12px;
	}
}

/* <= 400px: remove somente o label */
@media (max-width: 400px) {
	.pagination {
		font-size: 12px;
	}

	.pagination .pagi-limit-label {
		display: none;
	}
}

/* ===========================
   GLOBAL LOADER – Veolog
   =========================== */

.veolog-loader {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
}

.veolog-loader.is-visible {
	display: flex;
}

.veolog-loader-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: none;
}

.veolog-loader-box {
	position: relative;
	z-index: 10;
	background: transparent;
	border-radius: 0;
	padding: 24px;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	box-sizing: border-box;
	width: min(100%, 560px);
	min-width: 0;
	max-width: 560px;
	text-align: center;
}

.veolog-loader-animation {
	display: block;
	width: min(410px, 78vw);
	height: 16px;
	overflow: visible;
	border-radius: 0;
	background: transparent;
}

.veolog-loader-animation svg {
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
}

.veolog-loader-spinner {
	display: none;
	width: 50px;
	height: 50px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #5db2eb;
	border-radius: 50%;
	animation: veologCheckoutLoaderSpin 1s linear infinite;
}

.veolog-loader-title {
	display: block;
	margin: 2px 0 0;
	font-size: 36px;
	font-weight: 700;
	color: #24324b;
	text-align: center;
}

.veolog-loader-text {
	font-size: 18px;
	font-weight: 600;
	color: #344054;
	white-space: nowrap;
	max-width: calc(100vw - 32px);
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}

.veolog-loader.is-checkout-mode .veolog-loader-backdrop {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: none;
}

.veolog-loader.is-checkout-mode .veolog-loader-box {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	min-width: 320px;
	max-width: 560px;
	padding: 24px;
	gap: 14px;
}

.veolog-loader.is-checkout-mode .veolog-loader-animation {
	display: block;
	width: min(410px, 78vw);
	height: 16px;
	border-radius: 0;
	background: transparent;
	overflow: visible;
}

.veolog-loader.is-checkout-mode .veolog-loader-animation svg {
	display: block;
	width: 100%;
	height: 100%;
	background: transparent;
}

.veolog-loader.is-checkout-mode .veolog-loader-spinner {
	display: none;
}

.veolog-loader.is-checkout-mode .veolog-loader-title {
	display: block;
}

.veolog-loader.is-checkout-mode .veolog-loader-text {
	font-size: 18px;
	font-weight: 600;
	color: #344054;
	max-width: 560px;
	text-align: center;
}

.veolog-loader.is-label-print-mode:not(.is-checkout-mode) .veolog-loader-animation {
	width: min(180px, 44vw);
	height: min(180px, 44vw);
}

@keyframes veologCheckoutLoaderSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.dashboard-onboarding-banner {
	display: grid;
	gap: 12px;
	padding: 14px 16px;
	margin-bottom: 14px;
	border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--elev-shadow);

}

.dashboard-onboarding-banner-content {
	display: grid;
	gap: 4px;
}

.dashboard-onboarding-banner-content strong {
	font-size: 15px;
}

.dashboard-onboarding-banner-content span {
	font-size: 14px;
}

.dashboard-onboarding-banner-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
}

.dashboard-onboarding-btn {
	width: auto;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	min-height: 50px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	padding: 10px 14px;
	background: #f7f1f2;
	border: 1px solid #eee2e4;
	border-radius: 12px;
	color: #2b3240;
	text-align: left;
	line-height: 1.25;
	font-size: 14px;
	font-weight: 600;
}

.dashboard-onboarding-btn-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	color: #c86433;
	display: block;
}

.dashboard-onboarding-btn:hover,
.dashboard-onboarding-btn:focus-visible {
	background: #f3ebed;
	border-color: #e7d7db;
	color: #222b38;
}

.onboarding-modal .veo-modal-dialog {
	max-width: 560px;
}

#onboarding-phone-modal .veo-modal-dialog,
#onboarding-email-modal .veo-modal-dialog {
	max-width: 420px;
}

.onboarding-modal [hidden] {
	display: none !important;
}

.onboarding-modal .veo-modal-body {
	gap: 12px;
}

#onboarding-phone-modal .veo-modal-body,
#onboarding-email-modal .veo-modal-body {
	text-align: center;
}

.onboarding-modal .veo-modal-description {
	margin: 0;
	color: #64748b;
	font-size: 14px;
	line-height: 1.4;
}

.onboarding-modal .veo-modal-footer .btn {
	box-sizing: border-box;
	min-width: 124px;
	max-width: 100%;
	min-height: 44px;
	height: auto;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border-radius: 10px;
	font-weight: 600;
}

.onboarding-modal .btn.is-submitting {
	opacity: .9;
	cursor: wait;
	pointer-events: none;
}

.onboarding-modal .btn.is-submitting::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 8px;
	border-radius: 999px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: rgba(255, 255, 255, 1);
	animation: onboarding-modal-spin .7s linear infinite;
	vertical-align: -2px;
}

.onboarding-modal .btn.secondary.is-submitting::after {
	border-color: rgba(99, 102, 241, 0.35);
	border-top-color: rgba(79, 70, 229, 1);
}

@keyframes onboarding-modal-spin {
	to { transform: rotate(360deg); }
}

.onboarding-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 10px;
	text-align: left;
	align-items: start;
}

.onboarding-form-grid label {
	display: grid;
	gap: 5px;
	align-content: start;
}

.onboarding-form-grid label span {
	font-size: 14px;
	color: #475569;
	font-weight: 500;
}

.onboarding-form-grid input {
	width: 100%;
	min-height: 44px;
	padding: 10px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-size: 14px;
}

.onboarding-form-grid input::placeholder {
	color: #94a3b8;
}

.onboarding-field-error {
	display: block;
	min-height: 10px;
	margin-top: 1px;
	font-size: 11px;
	color: #dc2626;
	line-height: 1.1;
	visibility: hidden;
}

.onboarding-field-error:not(:empty) {
	visibility: visible;
}

.onboarding-form-grid input.is-invalid {
	border-color: #dc2626;
	box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
}

.onboarding-form-grid input[data-cep-autofill-field][readonly] {
	background: #f1f5f9;
	color: #64748b;
	cursor: not-allowed;
	pointer-events: none;
}

.onboarding-cep-row {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr) 72px;
	gap: 10px;
	align-items: start;
}

.onboarding-address-row {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

.onboarding-cep-row label {
	min-width: 0;
	align-content: start;
}

.onboarding-address-row label {
	min-width: 0;
	align-content: start;
}

.onboarding-cep-wrap {
	position: relative;
}

.onboarding-cep-wrap input[name="cep"] {
	padding-right: 108px;
}

.onboarding-cep-wrap .cep-help-link {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	font-size: 12px;
	font-weight: 500;
	color: #4f46e5;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1;
}

.onboarding-cep-wrap .cep-help-link:hover {
	text-decoration: underline;
}

.onboarding-grid-full {
	grid-column: 1 / -1;
}

.onboarding-channel-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 2px;
	width: 100%;
}

.onboarding-channel-options label {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 14px;
	font-weight: 500;
	color: #334155;
	padding: 9px 12px;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	width: 100%;
	min-width: 0;
	justify-content: flex-start;
}

.onboarding-channel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.onboarding-channel-icon .icon {
	display: block;
}

.onboarding-channel-options input[type="radio"] {
	accent-color: #4f46e5;
	width: 16px;
	height: 16px;
	margin: 0;
	flex: 0 0 auto;
}

.onboarding-channel-options label:has(input[type="radio"]:checked) {
	border-color: #6366f1;
	background: #eef2ff;
	color: #1e293b;
}

#onboarding-phone-modal [data-onboarding-phone-step="channel"] form {
	display: grid;
	gap: 12px;
	text-align: left;
}

#onboarding-phone-modal [data-onboarding-phone-step="channel"] form > label {
	display: grid;
	gap: 6px;
}

#onboarding-phone-modal [data-onboarding-phone-step="channel"] form > label span {
	font-size: 14px;
	font-weight: 600;
	color: #475569;
}

#onboarding-phone-modal input[name="celular"] {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	font-size: 14px;
	color: #0f172a;
	background: #fff;
}

#onboarding-phone-modal input[name="celular"]:focus {
	outline: none;
	border-color: #818cf8;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

.onboarding-code-group {
	display: grid;
	grid-template-columns: repeat(6, minmax(40px, 1fr));
	gap: 8px;
	margin-top: 0;
	padding: 18px 0 18px 0;
}

.onboarding-code-group input {
	width: 100%;
	height: 48px;
	text-align: center;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	padding: 0 6px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}

.onboarding-form-error {
	display: none;
	color: #d92d20;
	font-size: 12px;
	line-height: 1.25;
	margin-top: 4px;
	min-height: 0;
	text-align: left;
}

.onboarding-form-error:not(:empty) {
	display: block;
}

.onboarding-resend-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 2px;
	font-size: 15px;
	color: #64748b;
}

.onboarding-resend-link {
	border: 0;
	padding: 0;
	background: transparent;
	color: #4f46e5;
	cursor: pointer;
	text-decoration: underline;
	font-size: 15px;
	font-weight: 600;
}

.onboarding-resend-link[disabled] {
	color: #94a3b8;
	cursor: default;
	text-decoration: none;
}

.onboarding-resend-row [data-onboarding-phone-resend-timer],
.onboarding-resend-row [data-onboarding-email-resend-timer] {
	color: #64748b;
	font-size: 13px;
}

.onboarding-modal [data-onboarding-phone-footer="code"] .btn.primary,
.onboarding-modal [data-onboarding-email-footer="code"] .btn.primary {
	min-width: 180px;
}

@media (max-width: 760px) {
	.dashboard-onboarding-banner-actions .btn {
		flex: 1 1 100%;
	}

	.onboarding-modal .veo-modal-dialog {
		width: calc(100% - 16px);
		max-width: none;
		max-height: calc(100vh - 16px);
		border-radius: 14px;
	}

	.onboarding-modal .veo-modal-body {
		padding: 14px;
		gap: 10px;
	}

	.onboarding-modal .veo-modal-title {
		font-size: 1.05rem;
		line-height: 1.25;
	}

	.onboarding-modal .veo-modal-description {
		font-size: 14px;
		line-height: 1.4;
	}

	.onboarding-modal .veo-modal-footer {
		flex-direction: row;
		padding: 10px 14px 14px;
		gap: 8px;
	}

	#onboarding-phone-modal .veo-modal-footer,
	#onboarding-email-modal .veo-modal-footer {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.onboarding-modal .veo-modal-footer .btn {
		width: auto;
		flex: 1 1 0;
		min-width: 0;
	}

	#onboarding-phone-modal .veo-modal-footer .btn,
	#onboarding-email-modal .veo-modal-footer .btn {
		width: 100%;
		flex: none;
	}

	.onboarding-form-grid {
		grid-template-columns: 1fr;
	}

	.onboarding-cep-row {
		grid-template-columns: 1fr;
	}

	.onboarding-cep-wrap input[name="cep"] {
		padding-right: 10px;
	}

	.onboarding-cep-wrap .cep-help-link {
		position: static;
		transform: none;
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin-top: 4px;
		line-height: 1.2;
	}

	.onboarding-address-row {
		grid-template-columns: 1fr;
	}

	.onboarding-code-group {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 6px;
		margin-top: 0;
	}

	.onboarding-code-group input {
		height: 44px;
		font-size: 22px;
	}

	.onboarding-modal [data-onboarding-phone-footer="code"] .btn.primary,
	.onboarding-modal [data-onboarding-email-footer="code"] .btn.primary {
		min-width: 0;
	}

	#onboarding-phone-modal .onboarding-channel-options {
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
	}

	#onboarding-phone-modal .onboarding-channel-options label {
		width: 100%;
		min-width: 0;
		padding: 10px;
	}

	#onboarding-phone-modal .onboarding-channel-text {
		white-space: normal;
		line-height: 1.2;
	}

	.onboarding-resend-row {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.onboarding-modal [data-onboarding-email-current] {
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

@media (max-width: 420px) {
	.onboarding-modal .veo-modal-dialog {
		width: calc(100% - 10px);
		max-height: calc(100vh - 10px);
		border-radius: 12px;
	}

	.onboarding-modal .veo-modal-body {
		padding: 12px;
		gap: 9px;
	}

	.onboarding-modal .veo-modal-footer {
		flex-direction: column-reverse;
		padding: 8px 12px 12px;
	}

	#onboarding-phone-modal .veo-modal-footer,
	#onboarding-email-modal .veo-modal-footer {
		grid-template-columns: 1fr;
	}

	.onboarding-modal .veo-modal-footer .btn {
		width: 100%;
		flex: 1 1 auto;
	}

	.onboarding-form-grid input,
	#onboarding-phone-modal input[name="celular"] {
		padding: 9px 10px;
	}

	.onboarding-code-group {
		gap: 5px;
	}

	.onboarding-code-group input {
		height: 40px;
		font-size: 20px;
	}
}