/* Arqbloco Core v0.1 — componentes do plugin. Usa as cores do tema quando ele está ativo. */
.arqb-account, .arqb-tool, .arqb-community {
	--_accent: var(--arqb-accent, #2458d8);
	--_accent-dark: var(--arqb-accent-dark, #163f9e);
	--_ink: var(--arqb-ink, rgba(0, 0, 0, .9));
	--_ink-2: var(--arqb-ink-2, rgba(0, 0, 0, .7));
	--_line: var(--arqb-line, #e4e8ef);
	--_surface: var(--arqb-surface, #fff);
	--_soft: var(--arqb-soft, #f3f6fb);
	--_radius: var(--arqb-radius, 12px);
	color: var(--_ink);
}

.arqb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 8px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.arqb-btn--primary { background: var(--arqb-accent, #2458d8); color: #fff; }
.arqb-btn--primary:hover { background: var(--arqb-accent-dark, #163f9e); color: #fff; }
.arqb-btn--ghost { background: transparent; border-color: var(--arqb-line, #d6dce6); color: var(--arqb-ink, #111); }
.arqb-btn--ghost:hover { border-color: var(--arqb-accent, #2458d8); color: var(--arqb-accent, #2458d8); }
.arqb-btn--lg { padding: 14px 26px; font-size: 16px; }
.arqb-btn--sm { padding: 7px 12px; font-size: 13px; }
.arqb-btn[disabled], .arqb-btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.arqb-card { background: var(--_surface); border: 1px solid var(--_line); border-radius: var(--_radius); padding: 24px; }
.arqb-muted { color: var(--_ink-2); font-size: 14px; }
.arqb-small { color: var(--_ink-2); font-size: 13px; margin: 0; }
.arqb-note { background: var(--_soft); border-left: 3px solid var(--_accent); padding: 10px 14px; border-radius: 6px; margin: 0 0 16px; }
.arqb-alert { background: #fff3f2; border-left: 3px solid #d64545; color: #8a1f1f; padding: 10px 14px; border-radius: 6px; margin: 0 0 16px; }
.arqb-empty { padding: 28px; text-align: center; background: var(--_soft); border-radius: var(--_radius); color: var(--_ink-2); }
.arqb-link { font-size: 14px; color: var(--_accent); }
.arqb-hp { position: absolute !important; left: -9999px !important; height: 1px; overflow: hidden; }

/* Formulários */
.arqb-form { display: flex; flex-direction: column; gap: 14px; }
.arqb-form h2 { margin: 0 0 4px; font-size: 22px; }
.arqb-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--_ink); }
.arqb-form input[type=text], .arqb-form input[type=email], .arqb-form input[type=password], .arqb-form select, .arqb-form textarea {
	font: inherit; font-weight: 400; font-size: 15px; padding: 11px 12px; border: 1px solid var(--_line); border-radius: 8px; background: #fff; color: var(--_ink); width: 100%; box-sizing: border-box;
}
.arqb-form input:focus, .arqb-form select:focus, .arqb-form textarea:focus { outline: 2px solid color-mix(in srgb, var(--_accent) 35%, transparent); border-color: var(--_accent); }
.arqb-form .arqb-check { flex-direction: row; align-items: center; font-weight: 400; }
.arqb-form button { align-self: flex-start; }

/* Login e cadastro */
.arqb-auth__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.arqb-auth[data-aba=cadastro] #cadastro { border-color: var(--_accent); }

/* Painel da conta */
.arqb-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.arqb-panel__head h2 { margin: 0; font-size: 26px; }
.arqb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--_line); margin-bottom: 20px; overflow-x: auto; }
.arqb-tabs a { padding: 10px 14px; text-decoration: none; color: var(--_ink-2); font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; white-space: nowrap; }
.arqb-tabs a.is-active, .arqb-tabs a:hover { color: var(--_accent); border-bottom-color: var(--_accent); }
.arqb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.arqb-list__item { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--_line); border-radius: var(--_radius); background: var(--_surface); }
.arqb-list__thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; background: var(--_soft); }
.arqb-list__info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arqb-list__info a { color: var(--_ink); text-decoration: none; }
.arqb-soon { margin-top: 28px; display: flex; flex-direction: column; gap: 4px; background: var(--_soft); border-style: dashed; }

/* Ferramentas de IA */
.arqb-tool { display: grid; gap: 24px; }
.arqb-tool__intro p { margin: 0 0 10px; color: var(--_ink-2); font-size: 16px; }
.arqb-tips { margin: 0; padding-left: 18px; color: var(--_ink-2); font-size: 14px; }
.arqb-drop { position: relative; display: flex !important; align-items: center; justify-content: center; min-height: 200px; border: 2px dashed var(--_line); border-radius: var(--_radius); background: var(--_soft); cursor: pointer; text-align: center; padding: 16px; overflow: hidden; }
.arqb-drop.is-over, .arqb-drop:hover { border-color: var(--_accent); }
.arqb-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.arqb-drop__txt { font-weight: 500; color: var(--_ink-2); position: relative; z-index: 1; background: rgba(255,255,255,.85); padding: 4px 10px; border-radius: 6px; }
.arqb-drop__prev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.arqb-drop.has-file .arqb-drop__txt { position: absolute; bottom: 10px; }
.arqb-chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.arqb-chips legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.arqb-chip { flex-direction: row !important; font-weight: 500 !important; }
.arqb-chip input { position: absolute; opacity: 0; }
.arqb-chip span { padding: 8px 14px; border: 1px solid var(--_line); border-radius: 999px; font-size: 14px; cursor: pointer; background: #fff; }
.arqb-chip input:checked + span { border-color: var(--_accent); background: color-mix(in srgb, var(--_accent) 10%, #fff); color: var(--_accent-dark); }
.arqb-chip input:focus-visible + span { outline: 2px solid var(--_accent); }

.arqb-progress__bar { height: 8px; background: var(--_soft); border-radius: 99px; overflow: hidden; }
.arqb-progress__bar span { display: block; height: 100%; width: 4%; background: var(--_accent); border-radius: 99px; transition: width .6s ease; }
.arqb-progress__bar.is-indeterminate span { width: 35% !important; animation: arqb-slide 1.4s ease-in-out infinite; }
@keyframes arqb-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.arqb-progress__txt { margin: 8px 0 0; font-size: 14px; color: var(--_ink-2); }
.arqb-result { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.arqb-result .arqb-ia-card { max-width: 320px; }

.arqb-ia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.arqb-ia-card { background: var(--_surface); border: 1px solid var(--_line); border-radius: var(--_radius); overflow: hidden; display: flex; flex-direction: column; }
.arqb-ia-card__img { position: relative; aspect-ratio: 1; background: var(--_soft); }
.arqb-ia-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arqb-ia-card[data-status=pendente] .arqb-ia-card__img img, .arqb-ia-card[data-status=processando] .arqb-ia-card__img img { opacity: .5; filter: grayscale(1); }
.arqb-ia-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.arqb-badge { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.92); font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 99px; color: var(--_accent-dark); letter-spacing: .02em; }
.arqb-login-box { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.arqb-login-box p { margin: 0; }
.arqb-community__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.arqb-community__head p { margin: 0; color: var(--_ink-2); max-width: 640px; }
.arqb-pager { display: flex; gap: 6px; margin-top: 24px; justify-content: center; }
.arqb-pager a { padding: 6px 12px; border: 1px solid var(--_line); border-radius: 6px; text-decoration: none; color: var(--_ink); }
.arqb-pager a.is-active { background: var(--_accent); color: #fff; border-color: var(--_accent); }

/* Lista de marcas / designers */
.arqb-terms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.arqb-terms a { display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px solid var(--arqb-line, #e4e8ef); border-radius: var(--arqb-radius, 12px); background: var(--arqb-surface, #fff); text-decoration: none; color: var(--arqb-ink, #111); transition: border-color .15s; }
.arqb-terms a:hover { border-color: var(--arqb-accent, #2458d8); }
.arqb-terms span { font-size: 13px; color: var(--arqb-ink-2, #555); }

/* Comparador antes/depois */
.arqb-compare { position: relative; width: 100%; max-width: 900px; border-radius: var(--_radius, 12px); overflow: hidden; background: #eee; }
.arqb-compare img { display: block; width: 100%; height: auto; }
.arqb-compare__before { position: absolute; inset: 0; height: 100% !important; object-fit: cover; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.arqb-compare::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); pointer-events: none; }
.arqb-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

@media (max-width: 600px) {
	.arqb-card { padding: 18px; }
	.arqb-list__item { flex-wrap: wrap; }
	.arqb-panel__head { flex-direction: column; }
}