/* =============================================================
   4utils — Components (v1.0)
   32 componentes do Design System §9, em ordem da spec.
   Convenção BEM: .block__element--modifier
   ============================================================= */


/* =============================================================
   GLASS surface canônica (§6.3)
   Base de toda L1 (translúcida sobre L0 background).
   ============================================================= */

.glass {
  background: var(--glass-bg-default);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
          backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-glass);
  position: relative;
  overflow: hidden;
}

.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-highlight);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}

.glass > * { position: relative; z-index: 1; }

.glass--strong { background: var(--glass-bg-strong); }
.glass--subtle { background: var(--glass-bg-subtle); }

.glass--blur-strong {
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
          backdrop-filter: blur(var(--glass-blur-strong)) saturate(180%);
}
.glass--blur-subtle {
  -webkit-backdrop-filter: blur(var(--glass-blur-subtle)) saturate(150%);
          backdrop-filter: blur(var(--glass-blur-subtle)) saturate(150%);
}

/* Fallbacks obrigatórios */
@supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .glass { background: rgba(255, 255, 255, 0.92); }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: var(--surface-elevated);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .glass::before { display: none; }
}


/* =============================================================
   §9.1 — BUTTON
   ============================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-body);
  font-weight: var(--weight-medium);
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-spring),
              box-shadow var(--duration-fast) var(--ease-default);
}

.btn:disabled,
.btn[aria-busy="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn:not(:disabled):active { transform: translateY(0); }

/* Sizes */
.btn--sm { height: 32px; padding: 0 var(--space-3); font-size: var(--font-small); gap: 6px; }
.btn--sm svg { width: 14px; height: 14px; }
.btn--md { height: 40px; padding: 0 var(--space-5); }
.btn--lg { height: 48px; padding: 0 var(--space-6); font-size: var(--font-body-lg); }

/* Variants */
.btn--primary {
  background: var(--brand-primary);
  color: var(--text-on-brand);
}
.btn--primary:hover:not(:disabled) {
  background: var(--brand-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
  color: var(--text-on-brand);
}
.btn--primary:active { background: var(--brand-primary-pressed); }

.btn--gradient {
  background: var(--brand-gradient);
  color: var(--text-on-brand);
}
.btn--gradient:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: var(--elev-2);
  color: var(--text-on-brand);
}

.btn--secondary {
  background: var(--surface-0);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn--secondary:hover:not(:disabled) {
  border-color: var(--border-strong);
  background: var(--surface-elevated);
  color: var(--text-primary);
}

.btn--tertiary {
  background: transparent;
  color: var(--brand-primary);
  padding-inline: 0;
  height: auto;
}
.btn--tertiary:hover { text-decoration: underline; color: var(--brand-primary-hover); }

.btn--ghost {
  background: transparent;
  color: var(--text-primary);
}
.btn--ghost:hover:not(:disabled) { background: rgba(15, 23, 42, 0.06); }

.btn--destructive {
  background: var(--color-error);
  color: var(--text-on-brand);
}
.btn--destructive:hover:not(:disabled) {
  filter: brightness(1.05);
  color: var(--text-on-brand);
}

.btn--full { width: 100%; }
.btn--icon { width: 40px; padding: 0; }
.btn--icon.btn--sm { width: 32px; }
.btn--icon.btn--lg { width: 48px; }

.btn__icon-leading,
.btn__icon-trailing {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  flex-shrink: 0;
}

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


/* =============================================================
   §9.2 — INPUT (text)
   ============================================================= */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--text-primary);
}

.field__control {
  position: relative;
  display: flex;
  align-items: center;
}

.field__icon {
  position: absolute;
  left: var(--space-3);
  width: 20px;
  height: 20px;
  color: var(--text-tertiary);
  pointer-events: none;
}

.input {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-4);
  background: var(--surface-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--font-body);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}

.field__icon ~ .input { padding-left: var(--space-7); }

.input::placeholder { color: var(--text-tertiary); }

.input:hover { border-color: var(--border-strong); }

.input:focus-visible {
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
  outline: none;
}

.input:disabled {
  background: var(--surface-sunken);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.field--error .input { border-color: var(--color-error); }
.field--error .input:focus-visible { box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.25); }

.field__helper {
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 0;
}

.field__error {
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  color: var(--color-error);
  margin: 0;
}


/* =============================================================
   §9.3 — TEXTAREA
   ============================================================= */

.input--textarea {
  height: auto;
  min-height: 120px;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  line-height: var(--leading-normal);
  resize: vertical;
}


/* =============================================================
   §9.4 — SELECT
   ============================================================= */

.select {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-7) 0 var(--space-4);
  background-color: var(--surface-0);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2394A3B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 6 8 10 12 6'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--font-body);
  color: var(--text-primary);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-default);
}

.select:hover { border-color: var(--border-strong); }
.select:focus-visible {
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
  outline: none;
}


/* =============================================================
   §9.5 — CHECKBOX
   ============================================================= */

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  min-height: 44px;
  position: relative;
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.checkbox__box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  display: grid;
  place-items: center;
  background: var(--surface-0);
  transition: all var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
}

.checkbox__check {
  width: 14px;
  height: 14px;
  color: var(--text-on-brand);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.checkbox__input:checked + .checkbox__box {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.checkbox__input:checked + .checkbox__box .checkbox__check { opacity: 1; }

.checkbox__input:focus-visible + .checkbox__box { box-shadow: var(--ring-focus); }

.checkbox__input:disabled + .checkbox__box {
  background: var(--surface-sunken);
  border-color: var(--border-default);
  cursor: not-allowed;
}

.checkbox__label {
  font-family: var(--font-sans);
  font-size: var(--font-body);
  color: var(--text-primary);
  user-select: none;
}


/* =============================================================
   §9.6 — RADIO
   ============================================================= */

.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  min-height: 44px;
  position: relative;
}

.radio__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.radio__box {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-0);
  transition: all var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
}

.radio__box::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-on-brand);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.radio__input:checked + .radio__box {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
.radio__input:checked + .radio__box::after { opacity: 1; }

.radio__input:focus-visible + .radio__box { box-shadow: var(--ring-focus); }

.radio__label {
  font-family: var(--font-sans);
  font-size: var(--font-body);
  color: var(--text-primary);
  user-select: none;
}


/* =============================================================
   §9.7 — SWITCH
   ============================================================= */

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  min-height: 44px;
  position: relative;
}

.switch__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.switch__track {
  width: 44px;
  height: 26px;
  background: var(--border-strong);
  border-radius: var(--radius-full);
  position: relative;
  transition: background var(--duration-fast) var(--ease-default);
  flex-shrink: 0;
}

.switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--surface-0);
  border-radius: 50%;
  box-shadow: var(--elev-1);
  transition: transform var(--duration-fast) var(--ease-spring);
}

.switch__input:checked + .switch__track { background: var(--brand-primary); }
.switch__input:checked + .switch__track .switch__thumb { transform: translateX(18px); }

.switch__input:focus-visible + .switch__track { box-shadow: var(--ring-focus); }

.switch__label {
  font-family: var(--font-sans);
  font-size: var(--font-body);
  color: var(--text-primary);
  user-select: none;
}


/* =============================================================
   §9.8 — SEARCH BAR (glass)
   Glass externo + solid layer interna pro input.
   ============================================================= */

.search {
  padding: var(--space-3);
  border-radius: var(--radius-2xl);
}

.search__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-0);
  border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}

.search__icon {
  width: 20px;
  height: 20px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.search__input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
  font-size: var(--font-body-lg);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  padding: var(--space-2) 0;
  min-width: 0;
}

.search__input::placeholder { color: var(--text-tertiary); }


/* =============================================================
   §9.9 — NAVBAR (sticky glass)
   ============================================================= */

.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Override glass overflow — dropdowns/menus precisam escapar do navbar */
.navbar.glass {
  overflow: visible;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
          backdrop-filter: blur(20px) saturate(180%);
}

/* Restaurar highlight glass — dá liveliness ao topo do navbar */
.navbar.glass::before {
  display: block;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.navbar__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--space-5);
}

.navbar__brand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-primary);
}

.navbar__brand:hover { color: var(--text-primary); }

.navbar__logo {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-extrabold);
}
.navbar__logo-word {
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  letter-spacing: var(--tracking-snug);
}

.navbar__nav {
  display: none;
  gap: var(--space-1);
  flex: 1;
  justify-content: center;
  align-items: center;
}

@media (min-width: 992px) { .navbar__nav { display: flex; } }

.navbar__link {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-body);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}

.navbar__link:hover {
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
}

.navbar__link[aria-current="page"] {
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  font-weight: var(--weight-semibold);
}

.navbar__menu-toggle {
  display: inline-flex;
}

@media (min-width: 992px) {
  .navbar__menu-toggle { display: none; }
}


/* =============================================================
   §9.10 — BREADCRUMB
   ============================================================= */

.breadcrumb {
  padding: var(--space-4) 0 var(--space-3);
  margin: 0;
  background: transparent;
  border-radius: 0;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__item {
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  letter-spacing: var(--tracking-snug);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: var(--text-tertiary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") center / contain no-repeat;
  opacity: 0.55;
  flex-shrink: 0;
}

.breadcrumb__item a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.breadcrumb__item a:hover { color: var(--brand-primary); }

.breadcrumb__item[aria-current="page"] {
  color: var(--brand-primary);
  font-weight: var(--weight-semibold);
}


/* =============================================================
   §9.11 — CARD (default solid)
   ============================================================= */

.card {
  background: var(--surface-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-default);
}

.card:hover {
  box-shadow: var(--elev-3);
  transform: translateY(-2px);
}

.card__body { padding: var(--space-5); }
.card__title { margin: 0 0 var(--space-2); }
.card__desc { color: var(--text-secondary); margin: 0 0 var(--space-4); }


/* =============================================================
   §9.12 — TOOL CARD (glass — homepage grid)
   Glass externo fino + solid inner pra texto/ícone.
   ============================================================= */

.tool-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  transition: transform var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}

.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--elev-glass-hover);
  color: inherit;
}

.tool-card__inner {
  position: relative;
  overflow: hidden;
  background: var(--surface-0);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}

/* Decorative corner blob (Stitch v1 redesign) */
.tool-card__inner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  border-radius: 0 0 0 100%;
  background: rgba(79, 70, 229, 0.05);
  z-index: 0;
  pointer-events: none;
  transition: transform 500ms var(--ease-default);
}
.tool-card:hover .tool-card__inner::after { transform: scale(1.5); }
.tool-card__inner > * { position: relative; z-index: 1; }

.tool-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--brand-primary-subtle);
  display: grid;
  place-items: center;
  color: var(--brand-primary);
}

.tool-card__title {
  color: var(--text-primary);
  margin: 0;
}

.tool-card__desc {
  color: var(--text-secondary);
  margin: 0;
}

.tool-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  color: var(--brand-primary);
  font-size: var(--font-small);
  font-weight: var(--weight-semibold);
}
.tool-card__cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-fast) var(--ease-default);
}
.tool-card:hover .tool-card__cta { color: var(--brand-primary-hover); }
.tool-card:hover .tool-card__cta svg { transform: translateX(3px); }


/* =============================================================
   §9.13 — TOOL UI CONTAINER (glass)
   ============================================================= */

.tool-ui {
  padding: var(--space-3);
  border-radius: var(--radius-2xl);
}

.tool-ui__inner {
  background: var(--surface-0);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .tool-ui__inner { padding: var(--space-5); }
}

.tool-ui__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}


/* =============================================================
   §9.14 — DROPZONE
   ============================================================= */

.dropzone {
  background: var(--surface-sunken);
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  text-align: center;
  transition: all var(--duration-fast) var(--ease-default);
  cursor: pointer;
}

.dropzone:hover,
.dropzone:focus-visible,
.dropzone.is-dragging {
  border-color: var(--brand-primary);
  background: var(--brand-primary-subtle);
  outline: none;
}

.dropzone__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  margin: 0;
}

.dropzone__icon {
  width: 48px;
  height: 48px;
  color: var(--text-tertiary);
}

.dropzone__hint {
  color: var(--text-tertiary);
}


/* =============================================================
   §9.15 — BADGE
   ============================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-micro);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-xs);
}

.badge--neutral {
  background: var(--surface-elevated);
  color: var(--text-secondary);
}
.badge--info {
  background: var(--color-info-subtle);
  color: var(--color-info);
}
.badge--success {
  background: var(--color-success-subtle);
  color: var(--color-success-strong);
}
.badge--warning {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}
.badge--error {
  background: var(--color-error-subtle);
  color: var(--color-error);
}


/* =============================================================
   §9.16 — PILL (filter)
   ============================================================= */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.pill {
  height: 36px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--surface-0);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-default);
}

.pill:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.pill.is-active,
.pill[aria-selected="true"] {
  background: var(--brand-primary-subtle);
  border-color: var(--brand-primary-border);
  color: var(--brand-primary);
}


/* =============================================================
   §9.17 — ALERT (inline)
   ============================================================= */

.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid;
  background: var(--surface-0);
}

.alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.alert__content { flex: 1; min-width: 0; }

.alert__title {
  display: block;
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-1);
}

.alert__msg {
  margin: 0;
  color: var(--text-secondary);
}

.alert--success {
  background: var(--color-success-subtle);
  border-color: var(--color-success-border);
  color: var(--color-success-strong);
}
.alert--warning {
  background: var(--color-warning-subtle);
  border-color: var(--color-warning-border);
  color: var(--color-warning);
}
.alert--error {
  background: var(--color-error-subtle);
  border-color: var(--color-error-border);
  color: var(--color-error);
}
.alert--info {
  background: var(--color-info-subtle);
  border-color: var(--color-info-border);
  color: var(--color-info);
}


/* =============================================================
   §9.18 — TOAST
   ============================================================= */

.toasts {
  position: fixed;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
  width: calc(100% - var(--space-8));
  max-width: 420px;
  pointer-events: none;
}

@media (min-width: 768px) {
  .toasts {
    left: auto;
    right: var(--space-5);
    transform: none;
  }
}

.toast {
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  pointer-events: auto;
}

.toast__inner {
  background: var(--surface-0);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}

.toast__icon { width: 20px; height: 20px; flex-shrink: 0; }
.toast__msg { flex: 1; color: var(--text-primary); }

.toast__close {
  background: transparent;
  border: 0;
  color: var(--text-tertiary);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  transition: background var(--duration-fast) var(--ease-default);
}
.toast__close:hover { background: rgba(15, 23, 42, 0.06); color: var(--text-primary); }


/* =============================================================
   §9.19 — MODAL
   ============================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}

.modal__panel {
  position: relative;
  max-width: 480px;
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-2xl);
}

.modal__inner {
  background: var(--surface-0);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.modal__body { color: var(--text-secondary); }

.modal__footer {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-5);
}


/* =============================================================
   §9.20 — DRAWER
   ============================================================= */

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 85vw;
  max-width: 360px;
  z-index: var(--z-drawer);
  border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-default);
}

.drawer:not([hidden]) { transform: translateX(0); }

.drawer__inner {
  background: var(--surface-0);
  border-radius: inherit;
  height: 100%;
  margin: 0;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.drawer__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.drawer__link {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-body);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-default);
}

.drawer__link:hover { background: rgba(15, 23, 42, 0.06); color: var(--text-primary); }

.drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  z-index: calc(var(--z-drawer) - 1);
}


/* =============================================================
   §9.21 — DROPDOWN
   ============================================================= */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 200px;
  padding: var(--space-2);
  list-style: none;
  margin: 0;
  z-index: calc(var(--z-sticky) + 10);
}

.dropdown__menu li { margin: 0; }

.dropdown__menu a,
.dropdown__menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default);
}
.dropdown__menu a:hover,
.dropdown__menu button:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--text-primary);
}


/* =============================================================
   §9.22 — TOOLTIP
   ============================================================= */

.tooltip {
  position: absolute;
  background: var(--text-primary);
  color: var(--text-on-brand);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--weight-regular);
  line-height: 1.4;
  max-width: 240px;
  box-shadow: var(--elev-3);
  z-index: var(--z-toast);
}


/* =============================================================
   §9.23 — PROGRESS BAR
   ============================================================= */

.progress {
  height: 8px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__fill {
  height: 100%;
  background: var(--brand-gradient);
  border-radius: var(--radius-full);
  transition: width var(--duration-normal) var(--ease-default);
}


/* =============================================================
   §9.24 — SPINNER
   ============================================================= */

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-default);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.spinner--lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}


/* =============================================================
   §9.25 — SKELETON LOADER
   ============================================================= */

.skeleton {
  background: linear-gradient(90deg,
    var(--surface-sunken),
    var(--surface-elevated),
    var(--surface-sunken));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: var(--radius-sm);
}

.skeleton--text {
  height: 1em;
  width: 80%;
  margin-block: 0.3em;
}

.skeleton--card {
  height: 180px;
  border-radius: var(--radius-lg);
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}


/* =============================================================
   §9.26 — TABS
   ============================================================= */

.tabs__list {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-default);
}

.tabs__tab {
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--font-body);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--duration-fast) var(--ease-default);
}

.tabs__tab:hover { color: var(--text-primary); }

.tabs__tab.is-active,
.tabs__tab[aria-selected="true"] {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

.tabs__panel { padding: var(--space-5) 0; }


/* =============================================================
   §9.27 — ACCORDION (FAQ)
   Usa <details>/<summary> nativo.
   ============================================================= */

.accordion__item { border-bottom: 1px solid var(--border-default); }

.accordion__trigger {
  padding: var(--space-4) 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
}

.accordion__trigger::-webkit-details-marker { display: none; }
.accordion__trigger::marker { display: none; content: ""; }

.accordion__chevron {
  width: 20px;
  height: 20px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform var(--duration-fast) var(--ease-default);
}

[open] > .accordion__trigger .accordion__chevron { transform: rotate(180deg); }

.accordion__content {
  padding-bottom: var(--space-4);
  color: var(--text-secondary);
}


/* =============================================================
   §9.28 — PAGINATION
   ============================================================= */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.pagination__link,
.pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-default);
}

.pagination__link:hover {
  background: var(--surface-elevated);
  color: var(--text-primary);
}

.pagination__link.is-active,
.pagination__link[aria-current="page"] {
  background: var(--brand-primary);
  color: var(--text-on-brand);
}


/* =============================================================
   §9.29 — ADSENSE SLOT (anti-glass)
   FUNDO BRANCO PURO. Sem backdrop-filter, sem gradient.
   ============================================================= */

.ad-slot {
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-block: var(--space-7);
  text-align: center;
}

.ad-slot__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--font-micro);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.ad-slot--responsive { min-height: 100px; }


/* =============================================================
   §9.30 — GLASS ORB (404 signature)
   ============================================================= */

.orb {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(circle at 70% 70%, var(--brand-primary-subtle), transparent 60%),
    var(--glass-bg-default);
  position: relative;
  display: grid;
  place-items: center;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
          backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--elev-glass);
  overflow: hidden;
}

.orb::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), transparent 50%);
  pointer-events: none;
}

.orb__inner {
  width: 80%;
  height: 80%;
  background: var(--surface-0);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

.orb__text {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: 4rem;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


/* =============================================================
   §9.31 — FOOTER (glass subtle)
   Glass sutil + solid layer interna pro texto.
   ============================================================= */

.footer {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-top: 1px solid var(--glass-border);
  margin-top: var(--space-8);
}

.footer__inner {
  background: var(--surface-0);
  border-radius: var(--radius-xl);
  padding: var(--space-7) var(--space-5);
  margin: var(--space-3);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.footer__heading {
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__list a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-small);
  transition: color var(--duration-fast) var(--ease-default);
}
.footer__list a:hover { color: var(--brand-primary); }

.footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
}


/* =============================================================
   §9.32 — EMPTY STATE
   ============================================================= */

.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
}

.empty-state__icon {
  width: 64px;
  height: 64px;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}

.empty-state h3,
.empty-state .t-h3 {
  margin: 0 0 var(--space-2);
}

.empty-state p {
  color: var(--text-secondary);
  margin: 0 0 var(--space-5);
}


/* =============================================================
   Section helpers — layout para seções da homepage
   (tools, categories, seo body). Não são componentes,
   só wrappers de spacing e alinhamento.
   ============================================================= */

.tools-section,
.categories-section,
.seo-section {
  padding-block: var(--space-7);
}

@media (min-width: 768px) {
  .tools-section,
  .categories-section,
  .seo-section {
    padding-block: var(--space-8);
  }
}

.seo-section { background: var(--surface-0); }

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-6);
}

.section-header > h2 { margin: 0 0 var(--space-2); }
.section-header > p { margin: 0; }

.tools-grid > [class*="col-"] {
  display: flex;
  margin-bottom: var(--space-4);
}

.tools-grid .tool-card { width: 100%; }

.categories-section .pills {
  justify-content: center;
}

/* Pills com scroll horizontal em mobile (não quebra linha) */
.pills--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--space-2);
  margin-inline: calc(var(--space-4) * -1);
  padding-inline: var(--space-4);
  scrollbar-width: none;
  gap: var(--space-3);
}
.pills--scroll::-webkit-scrollbar { display: none; }
.pills--scroll .pill { flex-shrink: 0; }

@media (min-width: 768px) {
  .pills--scroll {
    flex-wrap: wrap;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
    justify-content: center;
  }
}

/* Pill com ícone — variant glass com Lucide SVG em círculo tinted */
.pills--icons .pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-4) 0 6px;
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font-size: var(--font-small);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}
.pills--icons .pill:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(79, 70, 229, 0.25);
  color: var(--brand-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.10);
}

.pill__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  display: grid;
  place-items: center;
  transition: background var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
}
.pill__icon svg { width: 18px; height: 18px; }
.pills--icons .pill:hover .pill__icon {
  background: var(--brand-primary);
  color: var(--text-on-brand);
  transform: scale(1.05);
}

/* Numbered steps (homepage "Como funciona") */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
}
.steps__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.steps__num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--font-body);
}
.steps__title { margin: 0 0 var(--space-1); }
.steps__desc  { margin: 0; color: var(--text-secondary); }

/* Storytelling section (homepage micro-narrativa) */
.storytelling-section { padding-block: var(--space-7); }
@media (min-width: 768px) { .storytelling-section { padding-block: var(--space-8); } }

.storytelling {
  padding: var(--space-3);
  border-radius: var(--radius-2xl);
  max-width: 800px;
  margin: 0 auto;
}
.storytelling__inner {
  background: var(--surface-0);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.storytelling__inner h2 { margin: 0 0 var(--space-4); }
.storytelling__inner p  { margin: 0; }
.storytelling__cta {
  margin-top: var(--space-4) !important;
  font-weight: var(--weight-medium);
}

/* Footer extras */
.footer__projects {
  margin: 0 0 var(--space-2);
}
.footer__projects a { color: var(--text-secondary); text-decoration: underline; }
.footer__projects a:hover { color: var(--brand-primary); }

.footer__lgpd {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  border-radius: var(--radius-xs);
  font-weight: var(--weight-medium);
  font-size: var(--font-micro);
  letter-spacing: 0.03em;
}


/* =============================================================
   Stitch v1 redesign — homepage components
   ============================================================= */

/* Search bar with glow halo */
.search--glow {
  position: relative;
  isolation: isolate;
}
.search--glow::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.20), rgba(124, 58, 237, 0.20));
  filter: blur(12px);
  opacity: 0.6;
  z-index: -1;
  transition: opacity 800ms var(--ease-default);
}
.search--glow:hover::before,
.search--glow:focus-within::before { opacity: 1; transition-duration: 200ms; }

/* Trust signal pills */
.trust-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-full);
  font-size: var(--font-small);
  color: var(--text-primary);
}
.trust-pill svg {
  width: 16px;
  height: 16px;
  color: var(--brand-primary);
  flex-shrink: 0;
}

/* "Ver todas →" link in section headers */
.section-header--row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
  .section-header--row {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}
.section-header--row h2 { margin: 0; }
.section-header__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-small);
  font-weight: var(--weight-semibold);
  color: var(--brand-primary);
}
.section-header__link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease-default);
}
.section-header__link:hover svg { transform: translateX(3px); }

/* "Como funciona" — numbered steps in a 2-col layout */
.split-section {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 768px) {
  .split-section { grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
}
.split-section__panel {
  background: rgba(242, 243, 255, 0.5);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
}
.split-section__panel h2 { margin: 0 0 var(--space-5); }

.how-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.how-steps__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.how-steps__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  display: grid;
  place-items: center;
  font-weight: var(--weight-bold);
  font-size: var(--font-small);
  flex-shrink: 0;
}
.how-steps__title { margin: 0 0 4px; font-weight: var(--weight-bold); font-size: var(--font-small); }
.how-steps__desc  { margin: 0; color: var(--text-secondary); font-size: var(--font-small); }

/* Storytelling — pull-out quote + animated gradient orb */
.storytelling-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background:
    linear-gradient(135deg, rgba(79, 70, 229, 0.06), rgba(124, 58, 237, 0.04)),
    var(--surface-0);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
@media (min-width: 768px) {
  .storytelling-quote {
    flex-direction: row;
    align-items: center;
    padding: var(--space-7);
    gap: var(--space-7);
  }
}
.storytelling-quote__body { flex: 1; min-width: 0; }
.storytelling-quote__title { margin: 0 0 var(--space-3); }
.storytelling-quote__text {
  margin: 0;
  font-style: italic;
  font-size: var(--font-body-lg);
  line-height: 1.55;
  color: var(--text-primary);
  border-left: 4px solid var(--brand-primary);
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.storytelling-quote__attribution {
  margin: var(--space-3) 0 0;
  font-weight: var(--weight-bold);
  font-size: var(--font-small);
  color: var(--text-primary);
}
.storytelling-quote__icon-wrap {
  flex-shrink: 0;
  position: relative;
  width: 128px;
  height: 128px;
  background: rgba(79, 70, 229, 0.10);
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-self: center;
}
.storytelling-quote__icon-ring {
  position: absolute;
  inset: 8px;
  border: 2px dashed var(--brand-primary);
  border-radius: 50%;
  animation: spin-slow 12s linear infinite;
}
.storytelling-quote__icon {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  color: var(--brand-primary);
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .storytelling-quote__icon-ring { animation: none; }
}

/* Bottom nav (mobile shell-style — only on mobile) */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.80);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav__list {
  display: flex;
  height: 64px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bottom-nav__item { flex: 1; display: flex; }
.bottom-nav__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-top: 2px solid transparent;
  transition: color var(--duration-fast) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}
.bottom-nav__link svg { width: 24px; height: 24px; }
.bottom-nav__link:hover { color: var(--brand-primary); }
.bottom-nav__link[aria-current="page"] {
  color: var(--brand-primary);
  border-top-color: var(--brand-primary);
  font-weight: var(--weight-bold);
}
@media (min-width: 992px) { .bottom-nav { display: none; } }

/* Body padding compensation when bottom-nav present (mobile) */
@media (max-width: 991.98px) {
  body.has-bottom-nav { padding-bottom: 80px; }
}


/* =============================================================
   Desktop sidebar (Stitch v1) — appears at ≥992px alongside main
   ============================================================= */

.layout-shell {
  display: block;
}
@media (min-width: 992px) {
  .layout-shell {
    display: flex;
    align-items: flex-start;
    max-width: 1440px;
    margin: 0 auto;
  }
}

.sidebar {
  display: none;
}

@media (min-width: 992px) {
  .sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 280px;
    align-self: stretch;
    background: transparent;
    border-right: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.06));
    padding: var(--space-5) var(--space-3) var(--space-5);
  }

  .layout-shell > main { flex: 1; min-width: 0; width: 100%; }
}

.sidebar__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-5);
}

/* Filter input at top of sidebar */
.sidebar__filter-wrap {
  position: relative;
  margin-bottom: var(--space-3);
  padding: 0 var(--space-1);
}
.sidebar__filter {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-7) 0 var(--space-7);
  background: var(--surface-sunken);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--font-small);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
}
.sidebar__filter::placeholder { color: var(--text-tertiary); }
.sidebar__filter:focus {
  border-color: var(--brand-primary);
  box-shadow: var(--ring-focus);
  background: var(--surface-0);
}
.sidebar__filter-icon {
  position: absolute;
  left: calc(var(--space-1) + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.sidebar__filter-shortcut {
  position: absolute;
  right: calc(var(--space-1) + 8px);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
}
.sidebar__filter:focus ~ .sidebar__filter-shortcut { opacity: 0; transition: opacity var(--duration-fast); }

.sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(15, 23, 42, 0.04);
}
.sidebar__group:first-of-type { border-top: 0; padding-top: 0; }

/* Featured (pinned) group on top — subtle accent, not a competing card */
.sidebar__group--featured {
  padding: var(--space-3) var(--space-2);
  margin-bottom: var(--space-2);
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.04), rgba(124, 58, 237, 0.02));
  border-radius: var(--radius-md);
  border: 0;
}
.sidebar__group--featured + .sidebar__group { border-top: 0; }

/* Group title — link to category index with count + arrow */
.sidebar__group-link,
.sidebar__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-2);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-default);
}
.sidebar__group-link:hover { color: var(--brand-primary); }

.sidebar__group-meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.05em;
}
.sidebar__group-link svg {
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity var(--duration-fast), transform var(--duration-fast);
}
.sidebar__group-link:hover svg { opacity: 1; transform: translateX(2px); }

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px var(--space-2);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}
.sidebar__item:hover,
.sidebar__item:focus,
.sidebar__item:visited:hover {
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  text-decoration: none;
}

.sidebar__item:visited {
  color: var(--text-secondary);
  text-decoration: none;
}

/* Active state (current page) — Linear-style left bar accent */
.sidebar__item.is-active,
.sidebar__item[aria-current="page"] {
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  font-weight: var(--weight-semibold);
}
.sidebar__item.is-active::before,
.sidebar__item[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--brand-primary);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

/* "Em breve" coming-soon state */
.sidebar__item--coming-soon {
  opacity: 0.55;
}
.sidebar__item--coming-soon:hover { opacity: 0.85; }

/* Global search results layout */
.sidebar__group--results .sidebar__nav { max-height: 60vh; overflow-y: auto; }
.sidebar__group--results .sidebar__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px var(--space-3);
}
.sidebar__item-name {
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: inherit;
}
.sidebar__item-cat {
  font-size: var(--font-micro);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sidebar__pill {
  margin-left: auto;
  padding: 1px 6px;
  background: rgba(15, 23, 42, 0.05);
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.sidebar__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: currentColor;
  transition: transform var(--duration-fast) var(--ease-default);
}
.sidebar__item:hover .sidebar__icon { transform: scale(1.1); }
.sidebar__item.is-active .sidebar__icon,
.sidebar__item[aria-current="page"] .sidebar__icon {
  color: var(--brand-primary);
}

/* Empty state when filter matches nothing */
.sidebar__empty {
  display: none;
  padding: var(--space-5) var(--space-2);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-small);
}
.sidebar__empty.is-visible { display: block; }
.sidebar__empty a {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--brand-primary);
  font-weight: var(--weight-semibold);
}

.sidebar__bottom {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: var(--space-4) var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-top: 1px solid var(--glass-border);
  background: rgba(242, 243, 255, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.sidebar__cta {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  border: 0;
  border-radius: var(--radius-md);
  font-size: var(--font-small);
  font-weight: var(--weight-semibold);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default);
}
.sidebar__cta:hover {
  background: var(--brand-primary);
  color: var(--text-on-brand);
}

.sidebar__icons {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.sidebar__icons a {
  color: var(--text-tertiary);
  display: inline-flex;
  transition: color var(--duration-fast) var(--ease-default);
}
.sidebar__icons a:hover { color: var(--brand-primary); }
.sidebar__icons svg { width: 16px; height: 16px; }


/* =============================================================
   Tool page helpers — tool-hero (Surface 1), tool output,
   trust signals, validator status, related tools.
   ============================================================= */

.tool-hero {
  position: relative;
  padding-block: 0 var(--space-4);
  background: transparent;
}
@media (min-width: 768px) { .tool-hero { padding-block: 0 var(--space-5); } }
.tool-hero .breadcrumb {
  padding-top: var(--space-4);
  padding-left: 15px;
  max-width: none;
  margin-inline: 0;
}
/* Subtle brand glow at the top — never a hard band */
.tool-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 50% 0%,
              rgba(79, 70, 229, 0.05),
              transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.tool-hero > * { position: relative; z-index: 1; }

.tool-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  max-width: 680px;
  margin: 0 auto;
}

.tool-hero__title {
  margin: 0;
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
}
.tool-hero__lead {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--font-body);
  max-width: 520px;
}
.tool-hero .trust-pills { margin-top: var(--space-2); }

.tool-hero__trust {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: center;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-small);
  color: var(--text-secondary);
}
@media (min-width: 768px) {
  .tool-hero__trust {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-5);
  }
}
.tool-hero__trust li { margin: 0; }

/* Tool output (CPF, valor gerado) — mono, grande, centralizado */
.tool-ui__output {
  width: 100%;
  height: 64px;
  padding: 0 var(--space-4);
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  text-align: center;
  letter-spacing: 0.02em;
}
.tool-ui__output:focus-visible {
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
  outline: none;
}

.tool-ui__lote {
  width: 100%;
  min-height: 200px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-body);
  color: var(--text-primary);
  resize: vertical;
}

.tool-ui__hint {
  font-size: var(--font-small);
  color: var(--text-tertiary);
  text-align: center;
  margin: 0;
}
@media (hover: none) { .tool-ui__hint { display: none; } }

.tool-ui__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.tool-ui__buttons > .btn { flex: 1 1 auto; min-width: 140px; }

.tool-ui__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.tool-ui__row .field { flex: 1 1 160px; }

/* Validador embutido — status visual */
.validator-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
  min-height: 24px;
}
.validator-status[data-state="valid"]   { color: var(--color-success-strong); }
.validator-status[data-state="invalid"] { color: var(--color-error); }
.validator-status[data-state="partial"] { color: var(--text-tertiary); }
.validator-status[data-state="idle"]    { color: transparent; }
.validator-icon { width: 20px; height: 20px; flex-shrink: 0; }
.validator-icon svg { width: 100%; height: 100%; }

/* Related tools (footer-of-tool cross-linking) */
.related-tools-section { padding-block: var(--space-7); }
@media (min-width: 768px) { .related-tools-section { padding-block: var(--space-8); } }

/* Tool UI grid — gerador + validador lado a lado em desktop (legacy) */
.tool-ui-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 992px) {
  .tool-ui-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* =============================================================
   §9.11 — TOOL UI v2 (segmented + display + actions)
   ============================================================= */

/* Segmented control (tabs Gerar/Validar) */
.segmented {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  gap: 2px;
}
.segmented__btn {
  appearance: none;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.segmented__btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.segmented__btn:hover { color: var(--text-primary); }
.segmented__btn.is-active {
  background: var(--surface-elevated, #fff);
  color: var(--brand-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06),
              0 0 0 1px rgba(15, 23, 42, 0.04);
}
.segmented__btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

/* Tool panels wrapper — side-by-side at desktop */
.tool-panels {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
@media (min-width: 992px) {
  .tool-panels {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
  .tool-panels > .tool-panel[hidden] {
    display: flex !important;
  }
  /* Subtle vertical divider between panels */
  .tool-panels > .tool-panel + .tool-panel {
    border-left: 1px solid var(--border-default);
    padding-left: var(--space-5);
  }
}

/* Tool panel (tabpanel container) */
.tool-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Panel title — only visible on desktop (segmented buttons label on mobile) */
.tool-panel__title {
  display: none;
  margin: 0 0 var(--space-1);
  font-size: var(--font-small);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-items: center;
  gap: 6px;
}
.tool-panel__title svg {
  width: 14px;
  height: 14px;
  color: var(--brand-primary);
}
@media (min-width: 992px) {
  .tool-panel__title { display: inline-flex; }
  /* Segmented hidden on desktop — both panels visible */
  .segmented { display: none; }
}

/* Display: big read-only value with inline copy button */
.tool-display {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: var(--space-2) 52px var(--space-2) var(--space-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tool-display::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%,
              rgba(79, 70, 229, 0.06),
              transparent 60%);
  pointer-events: none;
}
.tool-display__value {
  position: relative;
  display: block;
  width: 100%;
  font-family: var(--font-mono);
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-align: center;
  user-select: all;
  word-break: break-all;
}
.tool-display__copy {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.tool-display__copy svg { width: 16px; height: 16px; }
.tool-display__copy:hover {
  color: var(--brand-primary);
  background: #fff;
  transform: translateY(-50%) scale(1.05);
}
.tool-display__copy:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}
.tool-display__copy.is-copied {
  color: var(--color-success-strong);
  background: var(--color-success-soft, rgba(16, 185, 129, 0.12));
}

/* Controls row (qty + switch) */
.tool-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}
.tool-controls__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 140px;
}
.tool-controls .switch {
  margin-bottom: 4px;
}

/* Compact select variant */
.select--sm {
  height: 40px;
  padding-block: 0;
  padding-inline: var(--space-3);
  font-size: var(--font-small);
}

/* Larger input variant (validador) */
.input--lg {
  height: 56px;
  padding-inline: var(--space-4);
  font-family: var(--font-mono);
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  text-align: center;
}

/* Block button (full-width primary CTA) */
.btn--block {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.btn--block svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Meta hint (shortcuts) */
.tool-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-size: var(--font-small);
  color: var(--text-tertiary);
}
.tool-meta__sep { opacity: 0.5; }
@media (hover: none) { .tool-meta { display: none; } }

/* Keyboard key */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 6px;
  background: var(--surface-elevated, #fff);
  border: 1px solid var(--border-default);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.2;
}

/* =============================================================
   §9.14 — BATCH LIST (multi-CPF/CNPJ output)
   ============================================================= */

.batch {
  display: flex;
  flex-direction: column;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.batch__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-default);
  background: var(--surface-0);
}
.batch__count {
  font-size: var(--font-small);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.batch__actions {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.batch__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 23, 42, 0.15) transparent;
}
.batch__list::-webkit-scrollbar { width: 6px; }
.batch__list::-webkit-scrollbar-track { background: transparent; }
.batch__list::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.10);
  border-radius: var(--radius-full);
}
@media (min-width: 992px) {
  .batch__list[data-cols="2"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-3);
  }
}

.batch__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px var(--space-3);
  border-bottom: 1px solid rgba(15, 23, 42, 0.04);
  transition: background-color var(--duration-fast) var(--ease-out);
}
.batch__item:last-child { border-bottom: 0; }
.batch__item:hover { background: rgba(79, 70, 229, 0.04); }

.batch__index {
  min-width: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: right;
}
.batch__value {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--font-body);
  color: var(--text-primary);
  user-select: all;
  letter-spacing: 0.02em;
  word-break: break-all;
}
.batch__copy {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.batch__copy svg { width: 14px; height: 14px; }
.batch__copy:hover {
  color: var(--brand-primary);
  background: #fff;
  border-color: var(--border-default);
}
.batch__copy.is-copied {
  color: var(--color-success-strong);
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.20);
}
.batch__copy:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

/* ----- Comprimir PDF — file preview / quality / result --- */
.file-preview {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.file-preview__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--brand-primary);
}
.file-preview__name {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  word-break: break-all;
}
.file-preview__size {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  font-size: var(--font-small);
}

.quality-slider {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.quality-slider__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.quality-slider__row span {
  font-size: var(--font-small);
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.quality-slider input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  outline: none;
}
.quality-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-primary);
  cursor: pointer;
  border: 3px solid var(--surface-0);
  box-shadow: var(--elev-1);
}
.quality-slider input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-primary);
  cursor: pointer;
  border: 3px solid var(--surface-0);
  box-shadow: var(--elev-1);
}
.quality-slider input[type="range"]:focus-visible {
  box-shadow: var(--ring-focus);
}
.quality-slider__hint {
  margin: 0;
  font-size: var(--font-small);
  color: var(--text-secondary);
  text-align: center;
}

.progress-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) 0;
}
.progress-block__label {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.progress-block__hint {
  margin: 0;
  font-size: var(--font-small);
  color: var(--text-tertiary);
}

.result-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-lg);
}
.result-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-success-strong);
}
.result-card__head svg { width: 28px; height: 28px; flex-shrink: 0; }
.result-card__head strong { font-size: var(--font-h3); font-weight: var(--weight-semibold); }
.result-card__filename {
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  word-break: break-all;
}
.result-card__metrics {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--surface-0);
  border-radius: var(--radius-md);
}
.result-card__metric {
  text-align: center;
}
.result-card__metric small {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--font-micro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}
.result-card__metric strong {
  font-family: var(--font-mono);
  font-size: var(--font-body-lg);
  color: var(--text-primary);
}
.result-card__arrow {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
}
.result-card__reduction {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: var(--font-h3);
  text-align: center;
}
.result-card__reduction[data-state="good"]  { color: var(--color-success-strong); }
.result-card__reduction[data-state="small"] { color: var(--text-secondary); }
.result-card__buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.result-card__buttons > .btn { flex: 1 1 auto; min-width: 200px; }
.result-card__note {
  margin: 0;
  font-size: var(--font-small);
  color: var(--text-secondary);
  text-align: center;
}


/* =============================================================
   HERO — section helper para o pattern de homepage hero.
   Não está nos 32 componentes, mas é o container que abriga
   mesh gradient + título + search bar.
   ============================================================= */

.hero {
  position: relative;
  padding: var(--space-7) 0 var(--space-8);
  overflow: hidden;
  background-color: #FAFAFA;
  background-image: var(--surface-2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .hero { padding: var(--space-9) 0 var(--space-10); }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  max-width: 720px;
  margin: 0 auto;
}

.hero__title { margin: 0; }
.hero__subtitle {
  margin: 0;
  color: var(--text-secondary);
  max-width: 520px;
}

.hero__search {
  width: 100%;
  max-width: 560px;
  margin-top: var(--space-3);
}


/* =============================================================
   §9.12 — TOOL UI v2.1 — Password helpers
   (display monospace + masked, slider with value, strength bar)
   ============================================================= */

/* Mono display variant — pra senhas/tokens longos */
.tool-display__value--mono {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  letter-spacing: 0.01em;
  word-break: break-all;
  white-space: pre-wrap;
}

/* Masked state — substitui visualmente por bullets sem alterar o texto */
.tool-display.is-masked .tool-display__value {
  -webkit-text-security: disc;
          text-security: disc;
  letter-spacing: 0.15em;
}
/* Fallback: se navegador não suporta -webkit-text-security */
@supports not (-webkit-text-security: disc) {
  .tool-display.is-masked .tool-display__value::after {
    content: "";
  }
  .tool-display.is-masked .tool-display__value {
    color: transparent;
    text-shadow: 0 0 8px rgba(15, 23, 42, 0.5);
  }
}

/* Reveal/refresh button alongside copy */
.tool-display__actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.tool-display__action {
  appearance: none;
  border: 0;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.tool-display__action:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}
.tool-display__action svg { width: 18px; height: 18px; }

/* Strength bar (5 segmentos horizontais) */
.strength {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.strength__bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  height: 6px;
}
.strength__seg {
  background: var(--border-default);
  border-radius: var(--radius-full);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.strength__bar[data-level="1"] .strength__seg:nth-child(-n+1),
.strength__bar[data-level="2"] .strength__seg:nth-child(-n+2),
.strength__bar[data-level="3"] .strength__seg:nth-child(-n+3),
.strength__bar[data-level="4"] .strength__seg:nth-child(-n+4),
.strength__bar[data-level="5"] .strength__seg:nth-child(-n+5) {
  background: currentColor;
}

.strength__bar[data-cor="critical"] { color: #DC2626; }
.strength__bar[data-cor="warning"]  { color: #EA580C; }
.strength__bar[data-cor="caution"]  { color: #CA8A04; }
.strength__bar[data-cor="good"]     { color: #16A34A; }
.strength__bar[data-cor="great"]    { color: #059669; }

.strength__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.strength__label {
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.strength__bar[data-cor="critical"] + .strength__row .strength__label { color: #DC2626; }
.strength__bar[data-cor="warning"]  + .strength__row .strength__label { color: #EA580C; }
.strength__bar[data-cor="caution"]  + .strength__row .strength__label { color: #CA8A04; }
.strength__bar[data-cor="good"]     + .strength__row .strength__label { color: #16A34A; }
.strength__bar[data-cor="great"]    + .strength__row .strength__label { color: #059669; }

.strength__meta {
  font-family: var(--font-sans);
  font-size: var(--font-small);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Slider row (label + range + value) */
.slider-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.slider-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.slider-row__label {
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}
.slider-row__value {
  font-family: var(--font-mono);
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
}

.slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-primary);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
  cursor: pointer;
}
.slider:focus-visible { box-shadow: var(--ring-focus); border-radius: var(--radius-full); }

/* Toggle group (4 charset checkboxes side-by-side) */
.toggle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .toggle-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.toggle-grid .switch {
  background: var(--surface-sunken);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.toggle-grid .switch:hover { background: var(--border-default); }

/* Sub-segmented (compact) — Senha / Passphrase dentro do panel */
.segmented--sub {
  align-self: stretch;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.segmented--sub .segmented__btn {
  justify-content: center;
}

/* Mono variant for batch values */
.batch__value--mono {
  font-family: var(--font-mono);
  font-size: var(--font-small);
  letter-spacing: 0.01em;
  word-break: break-all;
}

/* Problemas list (no avaliador) */
.problemas-list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--font-small);
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.problemas-list li::marker { color: #DC2626; }


/* =============================================================
   §9.14 — Contador de Caracteres (Variante B helpers)
   ============================================================= */

.contador-textarea {
  width: 100%;
  min-height: 200px;
  resize: vertical;
  padding: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--font-body-lg);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--surface-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.contador-textarea:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--ring-focus); }

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--space-2);
}
@media (min-width: 576px) { .metrics-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 992px) { .metrics-grid { grid-template-columns: repeat(8, minmax(0,1fr)); } }

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  gap: 2px;
}
.metric__value {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: var(--weight-semibold);
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.metric__label {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--weight-medium);
}

.limits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .limits { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .limits { grid-template-columns: 1fr 1fr 1fr; } }

.limit {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3);
  background: var(--surface-0);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.limit__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}
.limit__label {
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.limit__status {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.limit__bar {
  height: 4px;
  background: var(--surface-sunken);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}
.limit__bar > span {
  display: block;
  height: 100%;
  background: var(--text-tertiary);
  transition: width var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.limit[data-cor="good"]     .limit__bar > span { background: #16A34A; }
.limit[data-cor="caution"]  .limit__bar > span { background: #CA8A04; }
.limit[data-cor="critical"] .limit__bar > span { background: #DC2626; }
.limit[data-cor="good"]     .limit__status     { color: #16A34A; }
.limit[data-cor="caution"]  .limit__status     { color: #CA8A04; }
.limit[data-cor="critical"] .limit__status     { color: #DC2626; }
.limit__meta {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* AdSense slot reservado (CLS = 0) */
.ad-slot {
  display: block;
  margin: var(--space-5) auto;
  max-width: 100%;
  background: #fff;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  position: relative;
  text-align: center;
}
.ad-slot__label {
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ad-slot--responsive { min-height: 250px; }
.ad-slot--banner { min-height: 90px; }
.ad-slot--leaderboard { min-height: 90px; max-width: 728px; }


/* =============================================================
   §9.15 — Form-grid + QR display (Variante C: form → preview)
   ============================================================= */

.form-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 576px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid__full { grid-column: 1 / -1; }

.field-compact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field-compact__hint {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin: 0;
  font-family: var(--font-sans);
}
.field-compact__hint[data-state="ok"]   { color: #16A34A; }
.field-compact__hint[data-state="warn"] { color: #CA8A04; }

/* QR display preview */
.qr-result {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) {
  .qr-result { grid-template-columns: auto 1fr; }
}

.qr-canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  min-width: 220px;
  min-height: 220px;
}
.qr-canvas[data-empty="true"] {
  background: var(--surface-sunken);
  color: var(--text-tertiary);
  font-size: var(--font-small);
  text-align: center;
}
.qr-canvas svg { display: block; max-width: 100%; height: auto; }

.qr-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.qr-code-box {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--surface-sunken);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  word-break: break-all;
  white-space: pre-wrap;
  max-height: 180px;
  overflow-y: auto;
}
.qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}


/* =============================================================
   §9.16 — Calculator helpers (modos via tabs verticais)
   ============================================================= */
.calc-modes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
@media (min-width: 576px) { .calc-modes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .calc-modes { grid-template-columns: 1fr 1fr 1fr; } }
.calc-mode-tab {
  appearance: none;
  border: 1px solid var(--border-default);
  background: var(--surface-0);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--font-small);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  transition: all var(--duration-fast) var(--ease-out);
}
.calc-mode-tab:hover { border-color: var(--brand-primary); color: var(--text-primary); }
.calc-mode-tab.is-active {
  background: var(--brand-primary-subtle);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  font-weight: var(--weight-semibold);
}
.calc-mode-tab:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.calc-panel {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-top: var(--space-3);
}
@media (min-width: 576px) { .calc-panel { grid-template-columns: 1fr 1fr; } }

.calc-result-box {
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  margin-top: var(--space-3);
}
.calc-result-box__value {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: var(--weight-semibold);
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
  display: block;
  line-height: 1.1;
}
.calc-result-box__explain {
  font-size: var(--font-small);
  color: var(--text-secondary);
  margin: var(--space-2) 0 0;
}


/* =============================================================
   §9.17 — Image dropzone + before/after preview
   ============================================================= */

.img-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 180px;
  padding: var(--space-5);
  background: var(--surface-sunken);
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
  text-align: center;
  color: var(--text-secondary);
}
.img-dropzone:hover, .img-dropzone:focus-visible, .img-dropzone.is-dragover {
  border-color: var(--brand-primary);
  background: var(--brand-primary-subtle);
  outline: none;
  color: var(--brand-primary);
}
.img-dropzone svg { width: 32px; height: 32px; opacity: 0.6; }

.img-result {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-top: var(--space-4);
}
@media (min-width: 768px) { .img-result { grid-template-columns: 1fr 1fr; } }

.img-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-sunken);
  border-radius: var(--radius-md);
}
.img-card__title {
  font-size: var(--font-small);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}
.img-card img {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  background:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  border-radius: var(--radius-sm);
}
.img-card__meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

.img-reduction {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: var(--weight-semibold);
  background: var(--surface-sunken);
}
.img-reduction[data-state="great"]    { background: rgba(5, 150, 105, 0.15); color: #059669; }
.img-reduction[data-state="good"]     { background: rgba(22, 163, 74, 0.12); color: #16A34A; }
.img-reduction[data-state="caution"]  { background: rgba(202, 138, 4, 0.15); color: #CA8A04; }
.img-reduction[data-state="critical"] { background: rgba(220, 38, 38, 0.15); color: #DC2626; }


/* =============================================================
   §9.18 — PDF preview text (RTF output)
   ============================================================= */

.pdf-preview-box {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--surface-sunken);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  white-space: pre-wrap;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
}

.pdf-status {
  font-size: var(--font-small);
  color: var(--text-secondary);
  font-family: var(--font-sans);
}
.pdf-status[data-state="processing"] { color: var(--brand-primary); }
.pdf-status[data-state="error"]      { color: #DC2626; }
.pdf-status[data-state="warn"]       { color: #CA8A04; }
.pdf-status[data-state="success"]    { color: #16A34A; font-weight: var(--weight-semibold); }


/* =============================================================
   §9.13 — TOOL UI v2.2 — Compact variants (chip, slider inline,
   footer condensado, panel tight, strength inline)
   ============================================================= */

/* Tool panel tight — gap menor entre seções internas */
.tool-panel--tight { gap: var(--space-2); }

/* Sub-segmented compact — botões mais baixos */
.segmented--sub.segmented--compact .segmented__btn {
  padding: 6px 12px;
  font-size: 0.8125rem;
}

/* Chip group — toggles compactos como pills selecionáveis */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.chip-group__label {
  font-family: var(--font-sans);
  font-size: var(--font-small);
  color: var(--text-secondary);
  margin-right: 4px;
}
.chip {
  appearance: none;
  border: 1px solid var(--border-default);
  background: var(--surface-0);
  padding: 5px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}
.chip:hover {
  border-color: var(--brand-primary);
  color: var(--text-secondary);
}
.chip[aria-pressed="true"] {
  background: var(--brand-primary-subtle);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  font-weight: var(--weight-semibold);
}
.chip:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

/* Slider inline — label / slider / value em row única */
.slider-inline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
}
.slider-inline__label {
  font-family: var(--font-sans);
  font-size: var(--font-small);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  white-space: nowrap;
}
.slider-inline__value {
  font-family: var(--font-mono);
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
  min-width: 2.5ch;
  text-align: right;
}

/* Switch compacto (xs) — para inline em row de extras */
.switch--xs .switch__track {
  width: 28px;
  height: 16px;
}
.switch--xs .switch__thumb {
  width: 12px;
  height: 12px;
  top: 1px;
  left: 1px;
}
.switch--xs .switch__input:checked ~ .switch__track .switch__thumb {
  transform: translateX(12px);
}
.switch--xs .switch__label {
  font-size: 0.8125rem;
}

/* Inline toggles row — switches lado a lado, separados por divider */
.inline-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
}
.inline-toggles .switch {
  margin: 0;
}

/* Strength bar — variante inline mais fina (bar + label/meta na mesma altura) */
.strength--inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}
.strength--inline .strength__bar { height: 4px; }
.strength--inline .strength__row {
  flex-direction: row;
  gap: var(--space-2);
  align-items: baseline;
  flex-wrap: nowrap;
}
.strength--inline .strength__label { font-size: 0.8125rem; }
.strength--inline .strength__meta  { font-size: 0.75rem; }

/* Tool footer — botão de ação + meta numa única row */
.tool-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}
.tool-footer .tool-meta { margin: 0; }
.tool-footer .btn { flex: 0 0 auto; }
@media (max-width: 575.98px) {
  .tool-footer .btn { flex: 1 1 100%; order: -1; }
}

/* Tool ui inner mais compacto (override do default em telas pequenas) */
.tool-ui__inner--tight {
  padding: var(--space-3);
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .tool-ui__inner--tight { padding: var(--space-4); gap: var(--space-3); }
}

/* ===========================================================
   §9.19 — LANGUAGE SWITCHER (i18n)
   Dropdown na navbar pra trocar entre PT-BR / EN.
   Usa <details>/<summary> nativo (sem JS pra abrir/fechar).
   =========================================================== */
.lang-switcher {
  position: relative;
  display: inline-block;
  margin-left: var(--space-2, .5rem);
}
.lang-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: var(--text-primary, #0f172a);
  padding: .5rem .65rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  list-style: none;
  user-select: none;
  white-space: nowrap;
}

.lang-switcher__icon {
  flex-shrink: 0;
  display: block;
  color: currentColor;
}

.lang-switcher__code {
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  line-height: 1;
}

.lang-switcher__toggle:hover .lang-switcher__code,
.lang-switcher[open] .lang-switcher__code {
  color: var(--text-primary);
}
.lang-switcher__toggle::-webkit-details-marker { display: none; }
.lang-switcher__toggle::marker { display: none; content: ""; }
.lang-switcher__toggle::after {
  content: "▾";
  font-size: .65em;
  margin-left: .15rem;
  transition: transform .15s ease;
}
.lang-switcher[open] .lang-switcher__toggle::after { transform: rotate(180deg); }
.lang-switcher__toggle:hover,
.lang-switcher[open] .lang-switcher__toggle {
  border-color: rgba(15, 23, 42, 0.18);
  background: rgba(15, 23, 42, 0.04);
}
.lang-switcher__menu {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  min-width: 160px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
  padding: .25rem;
  margin: 0;
  list-style: none;
  z-index: calc(var(--z-sticky) + 10);
}
.lang-switcher__menu li { list-style: none; }
.lang-switcher__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  font-size: .875rem;
  cursor: pointer;
}
.lang-switcher__item:hover {
  background: rgba(15, 23, 42, 0.05);
  text-decoration: none;
  color: inherit;
}
.lang-switcher__item[aria-current="true"] {
  background: rgba(79,70,229,.18);
  color: var(--c-primary, #818cf8);
}
.lang-switcher__flag { font-size: 1.1em; line-height: 1; }
@media (max-width: 991.98px) {
  .lang-switcher { display: none; }
  .lang-switcher--mobile { display: inline-block; }
}

/* ===========================================================
   §9.20 — INSS / Calculadoras trabalhistas (extra display)
   Tabela de decomposição por faixa, info-boxes
   =========================================================== */
.calc-result-box__extra {
  margin-top: var(--space-3, 1rem);
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: var(--space-3, 1rem);
}
.calc-result-box__extra:empty {
  display: none;
}
.inss-faixas h3 { margin: 0 0 .75rem; font-size: .95rem; color: var(--c-tertiary, rgba(255,255,255,.65)); font-weight: 600; }
.inss-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.inss-table th,
.inss-table td {
  padding: .55rem .5rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.inss-table th {
  text-align: left;
  font-weight: 500;
  color: var(--c-tertiary, rgba(255,255,255,.55));
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.inss-table tr:last-child td { border-bottom: 0; }
.inss-table small { font-size: .7em; }
.inss-info { font-size: .85rem; line-height: 1.5; }
.inss-info p { margin: 0; }

/* ===========================================================
   §9.21 — Letras Estilizadas (display de variantes Unicode)
   =========================================================== */
.letras-output { display: flex; flex-direction: column; gap: .5rem; }
.letras-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .65rem .75rem;
  background: rgba(255,255,255,.025);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.05);
}
.letras-row__label {
  font-size: .8rem;
  color: var(--c-tertiary, rgba(255,255,255,.6));
  font-weight: 500;
}
.letras-row__output {
  font-size: 1.1rem;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
}
.letras-copy { padding: .25rem .65rem; font-size: .75rem; }
@media (max-width: 575.98px) {
  .letras-row { grid-template-columns: 1fr; }
  .letras-row__label { font-size: .7rem; }
}
.btn--success { background: rgba(34,197,94,.2) !important; border-color: rgba(34,197,94,.4) !important; color: #4ade80 !important; }
.btn--sm { padding: .25rem .65rem; font-size: .75rem; }

/* §10 Cookie consent banner + modal (LGPD/GDPR) */
.cc-banner {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 9998;
  background: rgba(15, 23, 42, .96);
  color: #f1f5f9;
  border-top: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateY(100%);
  transition: transform .25s ease-out;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .35);
}
.cc-banner.is-open { transform: translateY(0); }
.cc-banner__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  align-items: center; justify-content: space-between;
}
.cc-banner__text { flex: 1 1 360px; min-width: 0; }
.cc-banner__title { font-size: .95rem; font-weight: 600; margin: 0 0 .35rem; color: #fff; }
.cc-banner__body { font-size: .85rem; line-height: 1.5; margin: 0; color: #cbd5e1; }
.cc-banner__body a { color: #a5b4fc; text-decoration: underline; }
.cc-banner__body a:hover { color: #c7d2fe; }
.cc-banner__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.cc-btn {
  font-family: inherit; font-size: .85rem; font-weight: 500;
  padding: .55rem 1rem; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.cc-btn--primary {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  color: #fff; border-color: transparent;
}
.cc-btn--primary:hover { filter: brightness(1.08); }
.cc-btn--secondary {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .15);
}
.cc-btn--secondary:hover { background: rgba(255, 255, 255, .14); }
.cc-btn--ghost {
  background: transparent; color: #cbd5e1; border-color: transparent;
}
.cc-btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, .06); }

/* Modal de configuração */
.cc-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.cc-modal.is-open { opacity: 1; pointer-events: auto; }
.cc-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cc-modal__panel {
  position: relative;
  background: #1e293b;
  color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  width: min(540px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  transform: translateY(20px);
  transition: transform .25s;
}
.cc-modal.is-open .cc-modal__panel { transform: translateY(0); }
.cc-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cc-modal__title { font-size: 1.1rem; font-weight: 600; margin: 0; }
.cc-modal__close {
  background: transparent; border: 0; color: #94a3b8;
  font-size: 1.5rem; cursor: pointer; padding: 0; width: 32px; height: 32px;
  border-radius: 6px; line-height: 1;
}
.cc-modal__close:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.cc-modal__body {
  padding: 1.25rem 1.5rem; overflow-y: auto; flex: 1;
  font-size: .9rem; line-height: 1.5; color: #cbd5e1;
}
.cc-modal__body p { margin: 0 0 1rem; }
.cc-categories { list-style: none; padding: 0; margin: 1rem 0; }
.cc-cat { padding: 1rem; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; margin-bottom: .65rem; }
.cc-cat__label { display: flex; align-items: center; gap: .65rem; cursor: pointer; }
.cc-cat__label input[type="checkbox"] { width: 18px; height: 18px; accent-color: #7C3AED; cursor: pointer; }
.cc-cat__label input[disabled] { opacity: .6; cursor: not-allowed; }
.cc-cat__name { font-weight: 600; color: #fff; flex: 1; }
.cc-cat__badge {
  font-size: .7rem; padding: .15rem .5rem;
  background: rgba(34, 197, 94, .15); color: #4ade80; border-radius: 4px;
}
.cc-cat__desc { font-size: .8rem; color: #94a3b8; margin: .5rem 0 0 1.65rem; }
.cc-modal__legal { font-size: .8rem; color: #94a3b8; margin-top: 1rem; }
.cc-modal__legal a { color: #a5b4fc; }
.cc-modal__footer {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(15, 23, 42, .6);
}

@media (max-width: 575.98px) {
  .cc-banner__inner { padding: 1rem; }
  .cc-banner__actions { width: 100%; }
  .cc-btn { flex: 1 1 auto; }
}

/* ===========================================================
   §9.30 — Data Fields (liquid glass com copy por campo)
   Usado em: gerador-pessoa, gerador-empresa.
   =========================================================== */
.data-result { display: flex; flex-direction: column; gap: var(--space-5); }

.data-group { display: flex; flex-direction: column; gap: var(--space-3); }

.data-group__title {
  font-size: var(--font-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 0 var(--space-1);
  margin: 0;
}

.data-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
@media (min-width: 576px) {
  .data-grid { grid-template-columns: repeat(2, 1fr); }
  .data-grid > .data-field--wide { grid-column: 1 / -1; }
}

.data-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4);
  background: var(--glass-bg-subtle);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  backdrop-filter: blur(var(--glass-blur-subtle)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur-subtle)) saturate(160%);
  transition: border-color var(--duration-fast) var(--ease-default),
              background var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default),
              box-shadow var(--duration-fast) var(--ease-default);
  overflow: hidden;
  cursor: pointer;
}

.data-field::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-highlight);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
  pointer-events: none;
}

.data-field:hover {
  background: var(--glass-bg-default);
  border-color: var(--brand-primary-border);
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.08);
}
.data-field:hover::before { opacity: 1; }
.data-field:active { transform: scale(0.995); }

.data-field:focus-within {
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
}

.data-field__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.data-field__label {
  font-size: var(--font-micro);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

.data-field__value {
  font-size: var(--font-body);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--leading-snug);
}

.data-field__value--text {
  font-family: var(--font-sans);
  font-variant-numeric: normal;
}

.data-field__copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-default),
              color var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-spring);
  position: relative;
  z-index: 1;
}
.data-field__copy:hover {
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
}
.data-field__copy:active { transform: scale(0.9); }
.data-field__copy svg { width: 18px; height: 18px; }

.data-field__copy .icon-check { display: none; }
.data-field.is-copied .data-field__copy {
  background: var(--color-success-subtle);
  color: var(--color-success-strong);
}
.data-field.is-copied .data-field__copy .icon-copy { display: none; }
.data-field.is-copied .data-field__copy .icon-check { display: block; }
.data-field.is-copied {
  border-color: var(--color-success-border);
  background: var(--color-success-subtle);
}

.data-result__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
  .data-field,
  .data-field__copy,
  .data-field::before { transition: none; }
  .data-field:active,
  .data-field__copy:active { transform: none; }
}