/* Instructa · app.css
   Baseado no design do protótipo (styles.css) adaptado para PHP.
   ─────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --literis-red:        #D02335;
  --literis-red-warm:   #E62236;
  --literis-navy:       #09122A;
  --literis-blue:       #00329F;
  --white:              #FFFFFF;

  --ix-bg:              #FAFBFC;
  --ix-surface:         var(--white);
  --ix-surface-2:       #F4F5F8;
  --ix-ink:             #0B1124;
  --ix-ink-2:           #2A2F3D;
  --ix-muted:           #6B7280;
  --ix-faint:           #9CA3AF;
  --ix-border:          #E4E6EC;
  --ix-border-strong:   #CED2DB;

  --ix-accent:          var(--literis-blue);
  --ix-accent-hover:    #0029A8;
  --ix-accent-soft:     #EEF3FF;
  --ix-brand:           var(--literis-red);
  --ix-brand-hover:     #B81C2D;

  --ix-success:         #15803D;
  --ix-success-soft:    #DCFCE7;
  --ix-warn:            #B45309;
  --ix-warn-soft:       #FEF3C7;
  --ix-danger:          var(--literis-red);
  --ix-danger-soft:     #FEE2E2;

  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-pill:999px;

  --sh-1: 0 1px 2px rgba(11,17,36,.04), 0 1px 1px rgba(11,17,36,.03);
  --sh-2: 0 2px 6px rgba(11,17,36,.05), 0 1px 2px rgba(11,17,36,.04);
  --sh-3: 0 8px 24px rgba(11,17,36,.08), 0 2px 6px rgba(11,17,36,.04);
  --sh-4: 0 16px 48px rgba(11,17,36,.12), 0 4px 12px rgba(11,17,36,.06);
  --sh-focus: 0 0 0 3px rgba(0,50,159,.18);

  --content-max:    1320px;
  --content-narrow: 880px;
  --gutter:         32px;
}

/* ── RESET / BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ix-ink);
  background: var(--ix-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
button { font: inherit; cursor: pointer; }
a { color: var(--ix-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── APP LAYOUT ── */
.ix-app { min-height: 100vh; display: flex; flex-direction: column; }
.ix-app__main { flex: 1; padding: 32px var(--gutter) 80px; }
.ix-container { max-width: var(--content-max); margin: 0 auto; width: 100%; }
.ix-container--narrow { max-width: var(--content-narrow); }
.ix-container--wide   { max-width: 1320px; }

/* ── PAGE NAV ── */
.ix-page-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }

/* ── HEADER ── */
.ix-header {
  background: var(--literis-navy);
  color: var(--white);
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  position: sticky;
  top: 0;
  z-index: 50;
}
.ix-header__inner {
  width: 100%; max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
}
.ix-logo {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--white); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
}
.ix-logo:hover { text-decoration: none; }
.ix-logo__wordmark { display: inline-flex; align-items: baseline; gap: 6px; }
.ix-logo__by {
  font-size: 11px; font-weight: 500; letter-spacing: 1px;
  text-transform: uppercase; opacity: .65;
}
.ix-header__nav { display: flex; align-items: center; gap: 4px; margin-left: 24px; }
.ix-header__nav a {
  color: rgba(255,255,255,.78); font-size: 14px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--r-md);
  transition: color .15s, background .15s; letter-spacing: .2px;
}
.ix-header__nav a:hover { color: var(--white); background: rgba(255,255,255,.06); text-decoration: none; }
.ix-header__nav a.is-active { color: var(--white); background: rgba(255,255,255,.10); }
.ix-header__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.ix-credits {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-pill);
  font-size: 13px; font-weight: 600; color: var(--white);
}
.ix-credits__num { color: #FFD166; font-weight: 700; }
.ix-credits svg { color: rgba(255,255,255,.7); }

.ix-userchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px;
  background: transparent; color: var(--white);
  font-size: 13px; font-weight: 500;
  border-radius: var(--r-pill); border: 1px solid transparent;
  transition: background .15s; text-decoration: none;
}
.ix-userchip:hover { background: rgba(255,255,255,.06); text-decoration: none; }
.ix-userchip__avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--literis-red), #8a1822);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--white); letter-spacing: .5px;
}
.ix-icon-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--r-md);
  color: rgba(255,255,255,.7);
  transition: color .15s, background .15s; text-decoration: none;
}
.ix-icon-btn:hover { color: var(--white); background: rgba(255,255,255,.08); text-decoration: none; }
.ix-header__version {
  font-family: var(--font-mono); font-size: 11px;
  padding: 3px 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px; color: rgba(255,255,255,.55);
}

/* ── PAGE HEADERS ── */
.ix-page-title {
  font-family: var(--font-display); font-weight: 700; font-size: 32px;
  letter-spacing: -.2px; line-height: 1.15; margin: 0; color: var(--ix-ink);
}
.ix-page-sub  { margin: 8px 0 0; color: var(--ix-muted); font-size: 16px; line-height: 1.5; font-weight: 500; }
.ix-eyebrow   { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ix-accent); }
.ix-eyebrow--muted { color: var(--ix-muted); }

/* ── STEPPER ── */
.ix-stepper { display: flex; align-items: flex-start; margin: 32px auto 40px; width: 100%; max-width: 720px; }
.ix-stepper__item { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 92px; }
.ix-stepper__bubble {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  background: var(--ix-surface); border: 2px solid var(--ix-border-strong); color: var(--ix-muted);
  transition: all .25s cubic-bezier(.4,0,.2,1);
}
.ix-stepper__label { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ix-muted); }
.ix-stepper__sub   { font-size: 11px; color: var(--ix-faint); font-weight: 500; margin-top: -6px; }
.ix-stepper__line  { flex: 1 1 auto; height: 2px; background: var(--ix-border); margin-top: 17px; position: relative; overflow: hidden; border-radius: 2px; min-width: 24px; }
.ix-stepper__line-fill { position: absolute; inset: 0; background: var(--ix-accent); transform-origin: left; transform: scaleX(0); transition: transform .5s cubic-bezier(.4,0,.2,1); }
.ix-stepper__line.is-done .ix-stepper__line-fill { transform: scaleX(1); }
.ix-stepper__item.is-done .ix-stepper__bubble  { background: var(--ix-accent); border-color: var(--ix-accent); color: var(--white); }
.ix-stepper__item.is-active .ix-stepper__bubble { background: var(--white); border-color: var(--ix-accent); color: var(--ix-accent); box-shadow: 0 0 0 4px var(--ix-accent-soft); }
.ix-stepper__item.is-active .ix-stepper__label,
.ix-stepper__item.is-done   .ix-stepper__label { color: var(--ix-ink); }
.ix-stepper__item.is-clickable { cursor: pointer; }
.ix-stepper__item.is-clickable:hover .ix-stepper__bubble { border-color: var(--ix-accent); }

/* ── BUTTONS ── */
.ix-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; min-height: 44px;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  border-radius: var(--r-md); border: 1px solid transparent;
  background: var(--ix-surface); color: var(--ix-ink);
  transition: all .15s cubic-bezier(.4,0,.2,1);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-sizing: border-box; line-height: 1; -webkit-appearance: none; appearance: none; vertical-align: middle;
}
.ix-btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(0,0,0,.18), 0 3px 8px -2px rgba(0,0,0,.12);
}
.ix-btn--link:hover { transform: none; box-shadow: none; }
.ix-btn:active { transform: scale(.98); box-shadow: none; }
.ix-btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.ix-btn--primary { background: var(--ix-accent); color: var(--white); border-color: var(--ix-accent); }
.ix-btn--primary:hover { background: var(--ix-accent-hover); border-color: var(--ix-accent-hover); }
.ix-btn--brand   { background: var(--ix-brand); color: var(--white); border-color: var(--ix-brand); }
.ix-btn--brand:hover { background: var(--ix-brand-hover); border-color: var(--ix-brand-hover); }
.ix-btn--ghost   { background: transparent; color: var(--ix-ink); border-color: var(--ix-border); }
.ix-btn--ghost:hover { background: var(--ix-surface-2); border-color: var(--ix-border-strong); }
.ix-btn--danger  { background: var(--ix-danger); color: var(--white); border-color: var(--ix-danger); }
.ix-btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }
.ix-btn--link    { background: transparent; border-color: transparent; color: var(--ix-accent); padding: 8px 12px; }
.ix-btn--link:hover { background: var(--ix-accent-soft); }
.ix-btn--lg      { padding: 14px 28px; min-height: 52px; font-size: 15px; }
.ix-btn--sm      { padding: 7px 14px; min-height: 34px; font-size: 13px; border-radius: var(--r-sm); }
.ix-btn--block   { width: 100%; }
.ix-btn[disabled], .ix-btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.ix-btn .ix-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: ix-spin .8s linear infinite; }

/* ── CARD ── */
.ix-card { background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.bf-stack > .ix-card { border-color: #182338; }
.ix-card__pad     { padding: 28px; }
.ix-card__pad--lg { padding: 36px; }
.ix-card__pad--sm { padding: 20px; }
.ix-card__head    { padding: 22px 28px; border-bottom: 1px solid var(--ix-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Variante escura — estilo inspirado no seletor de modo da etapa 1 */
.ix-card__head--dark {
  background: #182338;
  position: relative;
  overflow: hidden;
  border-bottom-color: rgba(255,255,255,.08);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.ix-card__head--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.ix-card__head--dark > *           { position: relative; z-index: 1; }
.ix-card__head--dark .ix-card__title { color: #fff; }
.ix-card__head--dark .ix-card__sub   { color: #94A3B8; }
.ix-card__title   { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0; color: var(--ix-ink); }
.ix-card__sub     { font-size: 13.5px; color: var(--ix-muted); margin: 2px 0 0; }
.ix-card__body    { padding: 24px 28px 28px; }
.ix-card__foot    { padding: 18px 28px; border-top: 1px solid var(--ix-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--ix-surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* ── FORM CONTROLS ── */
.ix-field { display: flex; flex-direction: column; gap: 6px; }
.ix-label { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ix-ink-2); display: flex; align-items: center; gap: 6px; }
.ix-label__req { color: var(--literis-red); }
.ix-help  { font-size: 12.5px; color: var(--ix-muted); line-height: 1.4; margin-top: 0; }
.ix-input, .ix-textarea, .ix-select {
  width: 100%; padding: 12px 14px;
  background: var(--white); border: 1px solid var(--ix-border-strong);
  border-radius: var(--r-md); font-family: var(--font-body); font-size: 14.5px;
  color: var(--ix-ink); transition: border-color .15s, box-shadow .15s; font-weight: 500;
}
.ix-input::placeholder, .ix-textarea::placeholder { color: var(--ix-faint); }
.ix-input:focus, .ix-textarea:focus, .ix-select:focus { outline: none; border-color: var(--ix-accent); box-shadow: var(--sh-focus); }
.ix-input[disabled] { background: var(--ix-surface-2); color: var(--ix-muted); cursor: not-allowed; }
.ix-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.ix-textarea--lg { min-height: 140px; }
.ix-input--lg { padding: 14px 16px; font-size: 15px; }
.ix-select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 40px;
}
.ix-input--search {
  padding-left: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat: no-repeat; background-position: 14px center; background-size: 16px;
}

/* ── ALERT / FLASH ── */
.ix-alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 500; line-height: 1.45;
}
.ix-alert--success { background: var(--ix-success-soft); color: var(--ix-success); }
.ix-alert--danger  { background: var(--ix-danger-soft);  color: var(--ix-danger);  }
.ix-alert--warn    { background: var(--ix-warn-soft);    color: var(--ix-warn);    }
.ix-alert--info    { background: var(--ix-accent-soft);  color: var(--ix-accent);  }
.ix-alert svg      { flex: 0 0 auto; margin-top: 1px; }
.ix-container .ix-alert { margin-bottom: 28px; }

/* ── CHIPS / BADGES ── */
.ix-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
}
.ix-chip--success { background: var(--ix-success-soft); color: var(--ix-success); }
.ix-chip--danger  { background: var(--ix-danger-soft);  color: var(--ix-danger);  }
.ix-chip--warn    { background: var(--ix-warn-soft);    color: var(--ix-warn);    }
.ix-chip--info    { background: var(--ix-accent-soft);  color: var(--ix-accent);  }
.ix-chip--neutral { background: var(--ix-surface-2); color: var(--ix-ink-2); border-color: var(--ix-border); }
.ix-chip--brand   { background: #FFE9EC; color: var(--ix-brand); }
.ix-chip--ai      { background: linear-gradient(135deg, #EEF3FF, #FFE9F0); color: var(--ix-accent); border-color: rgba(0,50,159,.10); }
.ix-chip__dot     { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── TABLE ── */
.ix-table-wrap { background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--r-lg); overflow: hidden; }
.ix-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ix-table th { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--ix-muted); padding: 14px 20px; background: var(--ix-surface-2); border-bottom: 1px solid var(--ix-border); white-space: nowrap; }
.ix-table td { padding: 16px 20px; border-bottom: 1px solid var(--ix-border); color: var(--ix-ink); vertical-align: middle; }
.ix-table tr:last-child td { border-bottom: 0; }
.ix-table tr:hover td { background: rgba(0,50,159,.02); }
.ix-table .ix-num  { font-variant-numeric: tabular-nums; }
.ix-table .ix-mono { font-family: var(--font-mono); font-size: 13px; color: var(--ix-muted); }
.ix-table .ix-r    { text-align: right; }
.ix-muted { color: var(--ix-muted); }

/* ── STAT TILE ── */
.ix-stat { background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--r-lg); padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; }
.ix-stat__label { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ix-muted); }
.ix-stat__value { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 1; color: var(--ix-ink); letter-spacing: -.5px; margin-top: 6px; }
.ix-stat__delta { font-size: 12.5px; color: var(--ix-muted); margin-top: 6px; }
.ix-stat--accent { background: var(--ix-accent); border: none; }
.ix-stat--accent .ix-stat__label { color: rgba(255,255,255,.7); }
.ix-stat--accent .ix-stat__value,
.ix-stat--accent .ix-stat__delta { color: var(--white); }

/* ── DROP ZONE ── */
.ix-drop {
  border: 2px dashed var(--ix-border-strong); border-radius: var(--r-lg);
  background: var(--ix-surface-2); padding: 56px 32px; text-align: center;
  transition: border-color .2s, background .2s;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  cursor: pointer;
}
.ix-drop:hover, .ix-drop.is-drag { border-color: var(--ix-accent); background: var(--ix-accent-soft); }
.ix-drop__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--ix-accent-soft); display: inline-flex; align-items: center; justify-content: center; color: var(--ix-accent); }
.ix-drop__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ix-ink); margin: 0; }
.ix-drop__sub   { font-size: 13.5px; color: var(--ix-muted); margin: 0; }

.ix-filelist { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ix-filelist li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--white); border: 1px solid var(--ix-border); border-radius: var(--r-md); font-size: 13.5px; }
.ix-filelist__name { font-weight: 600; color: var(--ix-ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-filelist__size { color: var(--ix-faint); margin-left: auto; font-size: 12.5px; white-space: nowrap; }
.ix-filelist__icon { color: var(--literis-red); flex: 0 0 auto; }
.ix-filelist .ix-icon-btn { color: var(--ix-faint); width: 28px; height: 28px; }

/* ── PROCESSING STEPS ── */
.ix-proc { display: flex; flex-direction: column; gap: 10px; }
.ix-proc__row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--ix-surface-2); border: 1px solid transparent; border-radius: var(--r-md); transition: all .3s; }
.ix-proc__row.is-active { background: var(--ix-accent-soft); border-color: rgba(0,50,159,.18); }
.ix-proc__row.is-done   { background: var(--white); border-color: var(--ix-border); }
.ix-proc__bubble { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 2px solid var(--ix-border-strong); color: var(--ix-faint); flex: 0 0 auto; transition: all .25s; }
.ix-proc__row.is-done   .ix-proc__bubble { background: var(--ix-success); border-color: var(--ix-success); color: var(--white); }
.ix-proc__row.is-active .ix-proc__bubble { background: var(--white); border-color: var(--ix-accent); color: var(--ix-accent); }
.ix-proc__spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: ix-spin .8s linear infinite; }
@keyframes ix-spin { to { transform: rotate(360deg); } }
.ix-proc__title { font-weight: 600; font-size: 14px; color: var(--ix-ink); }
.ix-proc__sub   { font-size: 12.5px; color: var(--ix-muted); }
.ix-proc__row.is-active .ix-proc__title { color: var(--ix-accent); }

/* ── REPORT ── */
.ix-report { display: flex; flex-direction: column; gap: 32px; }
.ix-report__section { display: flex; flex-direction: column; gap: 14px; }
.ix-report__sec-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ix-border); }
.ix-report__sec-num   { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ix-accent); letter-spacing: 1px; }
.ix-report__sec-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ix-ink); margin: 0; }
.ix-report__item      { display: flex; flex-direction: column; gap: 4px; }
.ix-report__item-q    { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--ix-ink-2); }
.ix-report__item-a    { font-size: 14px; color: var(--ix-ink); line-height: 1.55; }
.ix-report__tag       { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; margin-right: 6px; }
.ix-report__tag--prov { background: #FEF3C7; color: #92400E; }
.ix-report__tag--conf { background: var(--ix-surface-2); color: var(--ix-muted); }
.ix-report__missing   { font-style: italic; color: var(--ix-muted); }

/* ── DOWNLOADS GRID ── */
.ix-downloads { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 640px) { .ix-downloads { grid-template-columns: 1fr; } }
.ix-download { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--white); border: 1px solid var(--ix-border); border-radius: var(--r-md); color: var(--ix-ink); font-family: var(--font-display); font-weight: 600; font-size: 14px; text-decoration: none; transition: all .15s; }
.ix-download:hover { border-color: var(--ix-accent); background: var(--ix-accent-soft); text-decoration: none; transform: translateY(-1px); }
.ix-download__icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--ix-surface-2); color: var(--ix-ink-2); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ix-download--primary { background: var(--ix-accent); color: var(--white); border-color: var(--ix-accent); }
.ix-download--primary:hover { background: var(--ix-accent-hover); color: var(--white); }
.ix-download--primary .ix-download__icon { background: rgba(255,255,255,.18); color: var(--white); }
.ix-download__meta { display: flex; flex-direction: column; gap: 1px; }
.ix-download__fmt  { font-size: 11px; font-weight: 600; opacity: .7; letter-spacing: .3px; }

/* ── OUTLINE (módulos do curso) ── */
.ix-outline { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; }
.ix-outline__item { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--ix-surface-2); border: 1px solid transparent; border-radius: var(--r-md); transition: all .15s; }
.ix-outline__item:hover { border-color: var(--ix-border); background: var(--white); }
.ix-outline__num   { width: 28px; height: 28px; border-radius: 50%; background: var(--white); border: 1px solid var(--ix-border); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--ix-accent); flex: 0 0 auto; }
.ix-outline__title { font-weight: 600; font-size: 14px; color: var(--ix-ink); flex: 1; }
.ix-outline__meta  { font-size: 12px; color: var(--ix-muted); display: flex; gap: 12px; }

/* ── SUMMARY NUMBERS ── */
.ix-summary { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--ix-surface-2); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--ix-border); }
.ix-summary__cell { padding: 18px 14px; text-align: center; border-right: 1px solid var(--ix-border); }
.ix-summary__cell:last-child { border-right: 0; }
.ix-summary__num  { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--ix-ink); letter-spacing: -.5px; line-height: 1; }
.ix-summary__lbl  { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--ix-muted); margin-top: 6px; }

/* ── AI FLAG ── */
.ix-ai-flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--ix-accent-soft); color: var(--ix-accent); font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; }
.ix-ai-flag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(0,50,159,.12); }

/* ── PILLS (seletor de tom) ── */
.ix-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ix-pill  { padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--ix-border-strong); background: var(--white); font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--ix-ink-2); transition: all .15s; }
.ix-pill:hover { border-color: var(--ix-accent); color: var(--ix-accent); }
.ix-pill.is-active { background: var(--ix-ink); border-color: var(--ix-ink); color: var(--white); }

/* ── STEPPER NUMÉRICO ── */
.ix-stepper-num { display: inline-flex; align-items: center; border: 1px solid var(--ix-border-strong); border-radius: var(--r-md); background: var(--white); overflow: hidden; }
.ix-stepper-num button { width: 40px; height: 44px; border: 0; background: transparent; font-size: 16px; font-weight: 600; color: var(--ix-ink-2); }
.ix-stepper-num button:hover { background: var(--ix-surface-2); color: var(--ix-accent); }
.ix-stepper-num input { border: 0; background: transparent; text-align: center; width: 56px; height: 44px; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ix-ink); }
.ix-stepper-num input:focus { outline: none; }

/* ── SWATCHES ── */
.ix-swatches { display: flex; gap: 10px; align-items: center; }
.ix-swatch { width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; transition: transform .15s; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.ix-swatch:hover { transform: scale(1.08); }
.ix-swatch.is-active { box-shadow: inset 0 0 0 2px var(--white), 0 0 0 2px currentColor; }
.ix-swatch-custom-wrap { position: relative; width: 32px; height: 32px; }
.ix-swatch--custom { width: 100%; height: 100%; background: conic-gradient(from 90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); }
.ix-swatch-custom-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }

/* ── TABS (admin nav) ── */
.ix-tabs { display: inline-flex; background: var(--ix-surface-2); border: 1px solid var(--ix-border); padding: 4px; border-radius: var(--r-pill); gap: 2px; }
.ix-tabs__btn { border: 0; background: transparent; padding: 8px 18px; border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--ix-muted); display: inline-flex; align-items: center; gap: 8px; transition: all .15s; cursor: pointer; }
.ix-tabs__btn:hover { color: var(--ix-ink); }
.ix-tabs__btn[aria-selected="true"] { background: var(--white); color: var(--ix-ink); box-shadow: var(--sh-1); }

/* ── MODAL ── */
.ix-modal-backdrop { position: fixed; inset: 0; background: rgba(11,17,36,.45); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 100; animation: ix-fade .2s ease-out; }
@keyframes ix-fade { from { opacity: 0; } to { opacity: 1; } }
.ix-modal { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh-4); max-width: 640px; width: 100%; max-height: calc(100vh - 48px); overflow: auto; animation: ix-pop .25s cubic-bezier(.34,1.56,.64,1); }
@keyframes ix-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── AUTH (login) ── */
.ix-auth { min-height: calc(100vh - 64px); display: flex; align-items: stretch; }
.ix-auth__left { flex: 1.1; background: var(--literis-navy); color: var(--white); padding: 80px 64px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.ix-auth__right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 60px 32px; background: var(--white); }
.ix-auth__form { width: 100%; max-width: 380px; }
@media (max-width: 880px) {
  .ix-auth { flex-direction: column; }
  .ix-auth__left { padding: 48px 32px; }
  .ix-auth__right { padding: 48px 24px; }
}
.ix-auth__tag   { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--literis-red-warm); }
.ix-auth__title { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1.05; letter-spacing: -.5px; margin: 16px 0 0; max-width: 460px; }
.ix-auth__title .red { color: var(--literis-red-warm); }
.ix-auth__sub   { font-size: 17px; line-height: 1.45; color: rgba(255,255,255,.78); margin-top: 18px; max-width: 440px; }
.ix-auth__perks { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ix-auth__perks li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,.85); }
.ix-auth__perks li::before { content: ""; width: 8px; height: 8px; background: var(--literis-red-warm); border-radius: 2px; }
.ix-auth__meta  { font-size: 12px; color: rgba(255,255,255,.55); }
.ix-auth__deco  { position: absolute; right: -120px; bottom: -120px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(208,35,53,.25), transparent 70%); border-radius: 50%; pointer-events: none; }

/* ── FOOTER ── */
.ix-footer { margin-top: auto; padding: 28px var(--gutter) 36px; text-align: center; font-size: 12.5px; color: var(--ix-faint); }
.ix-footer__brand { font-weight: 600; color: var(--ix-muted); }

/* ── SPLIT LAYOUTS ── */
.ix-split-side { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1024px) { .ix-split-side { grid-template-columns: 1fr; } }

/* ── UTILITY ── */
.ix-stack    > * + * { margin-top: 16px; }
.ix-stack-lg > * + * { margin-top: 24px; }
.ix-stack-sm > * + * { margin-top: 8px; }
.ix-row { display: flex; align-items: center; gap: 12px; }
.ix-spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ix-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ix-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ix-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .ix-grid-2, .ix-grid-3, .ix-grid-4 { grid-template-columns: 1fr; } }
.ix-mono { font-family: var(--font-mono); }