/* ==========================================================================
   Nexos — Ajustes (#/ajustes/:secao)
   Prefixo de classe: .aj-   ·   Só variáveis de tokens.css.
   ========================================================================== */

/* ---------- Cabeçalho ---------- */
.aj { max-width: 1120px; }
.aj-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.aj-head-icon {
  width: 48px; height: 48px; border-radius: var(--r-lg); flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.aj-head-icon svg.lucide { width: 22px; height: 22px; }
.aj-title { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.aj-head-sub { font-size: 13.8px; margin-top: 4px; }
.aj-saved {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 12px; font-weight: 560; color: var(--text-3);
  padding: 6px 12px; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border);
}

/* ---------- Layout: submenu + conteúdo ---------- */
.aj-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 32px; align-items: start; }
.aj-main { min-width: 0; }

.aj-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; z-index: 5; }
.aj-nav-item {
  display: flex; align-items: center; gap: 11px; min-height: 48px;
  padding: 7px 10px; border-radius: var(--r);
  color: var(--text-2);
  transition: background var(--dur), color var(--dur), box-shadow var(--dur);
}
.aj-nav-item:hover { background: var(--hover); color: var(--text); }
.aj-nav-item.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.aj-nav-icon {
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2);
  transition: background var(--dur), color var(--dur), transform .25s var(--spring);
}
.aj-nav-item:hover .aj-nav-icon { transform: scale(1.06); }
.aj-nav-item.on .aj-nav-icon { background: var(--accent); color: var(--on-accent); }
.aj-nav-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.aj-nav-label { font-weight: 620; font-size: 13.8px; }
.aj-nav-desc { font-size: 11.8px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aj-nav-sub { margin-left: 18px; min-height: 40px; padding-top: 5px; padding-bottom: 5px; position: relative; }
.aj-nav-sub::before { content: ""; position: absolute; left: -6px; top: -4px; bottom: 50%; width: 9px; border-left: 1.5px solid var(--border-2); border-bottom: 1.5px solid var(--border-2); border-bottom-left-radius: 8px; }
.aj-nav-sub .aj-nav-icon { width: 26px; height: 26px; border-radius: 8px; }
.aj-nav-sub .aj-nav-icon svg.lucide { width: 15px; height: 15px; }
.aj-nav-card {
  margin-top: 16px; padding: 12px 14px; border-radius: var(--r-lg);
  border: 1.5px dashed var(--border-2);
  display: flex; flex-direction: column; gap: 6px;
}
.aj-nav-card-title { font-weight: 680; font-size: 14px; }
.aj-nav-card-tip { margin-top: 2px; }

.aj-sec.aj-in { animation: viewIn .28s var(--ease); }

/* ---------- Títulos e cartões ---------- */
.aj-sec-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 16px; }
.aj-sub-head { margin-top: 34px; scroll-margin-top: 16px; }
.aj-sec-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.aj-h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.aj-h3 { font-size: var(--fs-md); font-weight: 680; line-height: 1.3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aj-lead { color: var(--text-2); font-size: 13.8px; margin-top: 4px; max-width: 600px; }

.aj-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
  padding: calc(var(--pad) + 4px);
  margin-bottom: var(--gap);
}
.aj-card-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.aj-card-icon {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2);
}
.aj-card-desc { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.aj-card-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.aj-card-actions { margin-top: 14px; gap: 10px; }

/* Linha com interruptor */
.aj-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); }
.aj-row:first-child { border-top: 0; padding-top: 2px; }
.aj-row[data-aj-row] { cursor: pointer; }
.aj-row-flat { border-top: 0; padding: 0; align-items: flex-start; }
.aj-row-title { font-weight: 600; font-size: 14px; line-height: 1.35; }
.aj-row-desc { font-size: 12.8px; color: var(--text-2); margin-top: 2px; }
.aj-subtitle { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin: 18px 0 2px; }

/* Alvo de toque maior para os interruptores (o ::after é o botão branco) */
.aj .switch::before { content: ""; position: absolute; inset: -9px -6px; }


/* Status (conectado / online) */

.aj-note {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
  padding: 10px 12px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 12.8px; color: var(--text-2);
}
.aj-note svg.lucide { margin-top: 2px; color: var(--text-3); }
.aj-warn {
  display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 6px;
  padding: 10px 12px; border-radius: var(--r);
  background: color-mix(in srgb, var(--warning) 12%, transparent); color: var(--warning);
  font-size: 12.8px; font-weight: 550; animation: pop .2s var(--ease);
}
.aj-warn svg.lucide { margin-top: 1px; }

/* Selos de nível */
.aj-lv {
  display: inline-flex; align-items: center; margin-left: 7px; vertical-align: 1px;
  font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; line-height: 1.6;
  padding: 0 7px; border-radius: var(--r-full);
}
.aj-lv-plus { background: var(--c-sky); color: var(--c-sky-ink); }
.aj-lv-pro { background: var(--c-lilac); color: var(--c-lilac-ink); }
.aj-card-right .aj-lv { margin-left: 0; }

/* ==========================================================================
   Interface e módulos
   ========================================================================== */
.aj-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.level-card.aj-level { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 10px 10px 14px; position: relative; }
.aj-level .lc-desc { padding: 0 4px; }
.aj-level-top { display: flex; align-items: center; gap: 8px; padding: 4px 4px 0; }
.aj-level-top .lc-emoji { font-size: 22px; }
.aj-level-check {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--on-accent);
  transform: scale(0); transition: transform .28s var(--spring);
}
.aj-level-check svg.lucide { width: 13px; height: 13px; stroke-width: 2.6; }
.aj-level.on .aj-level-check { transform: scale(1); }
.aj-level-meta { padding: 0 4px; margin-top: 2px; font-size: 11.5px; font-weight: 650; color: var(--accent-ink); }
.aj-level:not(.on) .aj-level-meta { color: var(--text-3); }

/* Mini ilustração do que aparece em cada nível */
.aj-ill {
  display: flex; gap: 6px; width: 100%; height: 88px; padding: 7px;
  border-radius: var(--r); background: var(--bg); border: 1px solid var(--border);
  overflow: hidden; transition: border-color var(--dur);
}
.aj-level:hover .aj-ill, .aj-level.on .aj-ill { border-color: var(--border-2); }
.aj-ill-side { width: 26%; display: flex; flex-direction: column; gap: 4px; padding: 5px 4px; border-radius: 6px; background: var(--bg-sub); }
.aj-ill-side > span { height: 4px; border-radius: 2px; background: var(--border-2); flex-shrink: 0; }
.aj-ill-side > span:first-child { width: 60%; background: var(--accent); }
.aj-ill-side > span.x { background: color-mix(in srgb, var(--c-sky-s) 62%, var(--surface)); }
.aj-ill-side > span.y { background: color-mix(in srgb, var(--c-lilac-s) 72%, var(--surface)); }
.aj-ill-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.aj-ill-bar { height: 6px; width: 50%; border-radius: 3px; background: var(--border-2); flex-shrink: 0; }
.aj-ill-card { flex: 1; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); }
.aj-ill-card.c-yellow { background: var(--c-bg); border-color: transparent; }
.aj-ill-cols { flex: 1; display: flex; gap: 4px; min-height: 0; }
.aj-ill-cols > span { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 3px; border-radius: 5px; background: var(--surface-3); }
.aj-ill-cols b { display: block; height: 11px; border-radius: 3px; background: var(--surface); box-shadow: var(--shadow-sm); flex-shrink: 0; }
.aj-ill-cols b[class^="c-"] { background: var(--c-bg); }
.aj-ill-graph { flex: 1; width: 100%; min-height: 0; }
.aj-ill-graph line { stroke: var(--border-2); stroke-width: 1.4; }
.aj-ill-graph circle { fill: var(--surface); stroke: var(--text-3); stroke-width: 1.2; }
.aj-ill-graph circle.a { fill: var(--accent); stroke: none; }
.aj-ill-graph circle.b { fill: var(--c-lilac-s); stroke: none; }
.aj-ill-graph circle.c { fill: var(--c-mint-s); stroke: none; }

.aj-custom { margin-top: 12px; animation: pop .2s var(--ease); }

/* Grade de módulos */
.aj-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.aj-mod {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; user-select: none;
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur), transform .15s var(--ease);
}
.aj-mod:hover { border-color: var(--border-2); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.aj-mod.on { border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); }
.aj-mod .switch { margin-top: 2px; }
.aj-mod-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-3);
  transition: background .25s var(--ease), color .25s var(--ease), transform .3s var(--spring);
}
.aj-mod.on .aj-mod-icon { background: var(--c-bg); color: var(--c-ink); transform: rotate(-4deg); }
.aj-mod-name { font-weight: 650; font-size: 14px; line-height: 1.3; }
.aj-mod-desc { font-size: 12.8px; color: var(--text-2); margin-top: 3px; line-height: 1.45; }
.aj-mod-where { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 11.5px; color: var(--text-3); font-weight: 550; }
.aj-mod-where svg.lucide { width: 12px; height: 12px; }
.aj-mod:not(.on) .aj-mod-name { color: var(--text-2); }

.aj-flash { animation: ajFlash .9s var(--ease); }

/* Respirar + sementes */
.aj-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.aj-tile {
  display: flex; gap: 16px; padding: calc(var(--pad) + 2px);
  border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.aj-seeds { flex-direction: column; gap: 14px; }
.aj-tile-text { font-size: 13px; color: var(--text-2); margin: 4px 0 12px; line-height: 1.5; }
.aj-seeds .aj-tile-text { margin-bottom: 0; }
.aj-orb {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; margin-top: 4px;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--c-sky-s) 55%, var(--surface)), color-mix(in srgb, var(--c-mint-s) 50%, var(--surface)));
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--c-sky-s) 10%, transparent);
  animation: ajBreathe 6s var(--ease) infinite;
}

/* Cartão-fantasma (sugestão do Nexos/Claude) */
.aj-ghost {
  display: flex; gap: 12px; padding: 12px 14px;
  border-radius: var(--r-lg); border: 1.5px dashed var(--accent);
  background: var(--accent-soft);
  transition: opacity .25s, filter .25s;
}
.aj-ghost.off { opacity: .5; filter: grayscale(1); }
.aj-ghost-done { align-items: center; border-color: var(--border-2); background: var(--surface-2); }
.aj-ghost-seed { font-size: 20px; line-height: 1.2; }
.aj-ghost-label { font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); }
.aj-ghost-text { font-size: 13.2px; line-height: 1.45; margin-top: 2px; }
.aj-ghost-done .aj-ghost-text { color: var(--text-2); margin: 0; }
.aj-ghost-actions { margin-top: 10px; gap: 6px; }

/* ==========================================================================
   Aparência
   ========================================================================== */
.aj-appear { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.aj-appear-main .aj-card-head { margin-bottom: 12px; }
.aj-preview-wrap { position: sticky; top: 16px; }
.aj-preview-note { display: flex; align-items: center; gap: 6px; margin-top: 10px; justify-content: center; }

.aj-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aj-opts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aj-opt {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 7px 7px 9px; border-radius: var(--r-lg); text-align: left;
  border: 1.5px solid var(--border); background: var(--surface-2);
  transition: border-color var(--dur), box-shadow var(--dur), transform .15s var(--ease), background var(--dur);
}
.aj-opt:hover { border-color: var(--border-2); transform: translateY(-1px); }
.aj-opt:active { transform: scale(.98); }
.aj-opt.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--surface); }
.aj-opt-label { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 13px; font-weight: 620; }
.aj-opt-label svg.lucide { width: 14px; height: 14px; color: var(--text-3); }
.aj-opt-check { display: inline-flex; color: var(--accent); opacity: 0; transform: scale(.5); transition: opacity .2s, transform .28s var(--spring); }
.aj-opt-check svg.lucide { color: var(--accent); width: 15px; height: 15px; }
.aj-opt.on .aj-opt-check { opacity: 1; transform: none; }
.aj-opt-sub { padding: 0 4px; margin-top: -6px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Prévias de tema: o tema "oposto" é desenhado invertendo texto e fundo */
.aj-pv { display: block; position: relative; }
.aj-thpv {
  --pv-bg: var(--bg); --pv-side: var(--bg-sub); --pv-card: var(--surface); --pv-line: var(--border-2);
  display: flex; gap: 4px; height: 66px; padding: 5px;
  border-radius: calc(var(--r) - 2px); background: var(--pv-bg);
  border: 1px solid var(--border); overflow: hidden;
}
:root[data-theme="dark"] .aj-pv-light {
  --pv-bg: color-mix(in srgb, var(--text) 93%, var(--bg));
  --pv-side: color-mix(in srgb, var(--text) 86%, var(--bg));
  --pv-card: var(--text);
  --pv-line: color-mix(in srgb, var(--text) 70%, var(--bg));
}
:root:not([data-theme="dark"]) .aj-pv-dark {
  --pv-bg: var(--text);
  --pv-side: color-mix(in srgb, var(--text) 92%, var(--bg));
  --pv-card: color-mix(in srgb, var(--text) 85%, var(--bg));
  --pv-line: color-mix(in srgb, var(--text) 66%, var(--bg));
}
.aj-thpv-side { width: 22%; border-radius: 4px; background: var(--pv-side); }
.aj-thpv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 2px; }
.aj-thpv-bar { height: 6px; width: 55%; border-radius: 3px; background: var(--pv-line); flex-shrink: 0; }
.aj-thpv-card { flex: 1; display: flex; align-items: center; gap: 5px; padding: 0 6px; border-radius: 5px; background: var(--pv-card); }
.aj-thpv-card::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.aj-thpv-card::after { content: ""; flex: 1; height: 4px; border-radius: 2px; background: var(--pv-line); }
.aj-pv-auto > .aj-thpv + .aj-thpv { position: absolute; inset: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

/* Cor de destaque */
.aj-swatches { display: flex; flex-wrap: wrap; gap: 12px 6px; }
.aj-sw { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 62px; padding: 4px 0; border-radius: var(--r); }
.aj-sw-dot {
  width: 38px; height: 38px; border-radius: 50%; background: var(--sw);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
  transition: transform .25s var(--spring), box-shadow .2s;
}
.aj-sw:hover .aj-sw-dot { transform: scale(1.08); }
.aj-sw.on .aj-sw-dot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5.5px var(--sw); transform: scale(.94); }
.aj-sw-name { font-size: 11.8px; font-weight: 560; color: var(--text-2); }
.aj-sw.on .aj-sw-name { color: var(--text); font-weight: 680; }

/* Papéis de parede (usados nas opções e na prévia) */
.aj-pat-liso { background-color: var(--bg); }
.aj-pat-pontos { background-color: var(--bg); background-image: radial-gradient(var(--dot) 1.1px, transparent 1.3px); background-size: 12px 12px; }
.aj-pat-grade {
  background-color: var(--bg);
  background-image: linear-gradient(var(--dot) 1px, transparent 1px), linear-gradient(90deg, var(--dot) 1px, transparent 1px);
  background-size: 14px 14px;
}
.aj-pat-aurora {
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(100% 80% at 100% 0%, color-mix(in srgb, var(--c-sky-s) 20%, transparent), transparent 70%),
    radial-gradient(120% 90% at 60% 120%, color-mix(in srgb, var(--c-mint-s) 18%, transparent), transparent 70%),
    var(--bg);
}
.aj-wp { display: block; position: relative; height: 66px; border-radius: calc(var(--r) - 2px); border: 1px solid var(--border); overflow: hidden; }
.aj-wp > span { position: absolute; left: 24%; right: 24%; top: 32%; bottom: -8px; border-radius: 6px 6px 0 0; background: var(--surface); box-shadow: var(--shadow-sm); }

/* Cantos */
.aj-cn { display: block; position: relative; height: 66px; border-radius: calc(var(--r) - 2px); background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.aj-cn > span { position: absolute; left: 24%; top: 26%; right: -12px; bottom: -12px; background: var(--surface); border: 2px solid var(--border-2); box-shadow: var(--shadow-sm); transition: border-color var(--dur); }
.aj-cn-retos > span { border-top-left-radius: 3px; }
.aj-cn-suave > span { border-top-left-radius: 12px; }
.aj-cn-redondos > span { border-top-left-radius: 26px; }
.aj-opt.on .aj-cn > span { border-color: var(--accent); }

/* Densidade */
.aj-dn { display: flex; flex-direction: column; justify-content: center; height: 66px; padding: 0 12px; border-radius: calc(var(--r) - 2px); background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.aj-dn > span { height: 6px; border-radius: 3px; background: var(--border-2); flex-shrink: 0; }
.aj-dn > span:nth-child(1) { width: 70%; background: color-mix(in srgb, var(--accent) 60%, var(--border-2)); }
.aj-dn > span:nth-child(3) { width: 85%; }
.aj-dn > span:nth-child(4) { width: 55%; }
.aj-dn-compacto { gap: 3px; }
.aj-dn-confortavel { gap: 6px; }
.aj-dn-espacoso { gap: 10px; }

/* Fonte */
.aj-ft { display: grid; place-items: center; height: 66px; border-radius: calc(var(--r) - 2px); background: var(--bg); border: 1px solid var(--border); font-size: 28px; line-height: 1; color: var(--text); }
.aj-ft-inter { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-weight: 650; letter-spacing: -.02em; }
.aj-ft-nunito { font-family: "Nunito", ui-rounded, system-ui, sans-serif; font-weight: 800; }
.aj-ft-serifa { font-family: "Fraunces", ui-serif, Georgia, serif; font-weight: 600; }

/* Prévia ao vivo */
.aj-preview { border-radius: var(--r-xl); border: 1px solid var(--border); background: var(--bg); box-shadow: var(--shadow); overflow: hidden; }
.aj-preview-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); font-size: 12px; font-weight: 650; color: var(--text-2); }
.aj-pv-dots { display: inline-flex; gap: 4px; }
.aj-pv-dots > span { width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); }
.aj-pv-dots > span:first-child { background: var(--accent); }
.aj-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-ink); }
.aj-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ajPulse 1.8s var(--ease) infinite; }
.aj-preview-body { display: flex; flex-direction: column; gap: var(--gap); padding: var(--pad); }
.aj-pv-hello { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.aj-pv-tasks { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 2px; }
.aj-preview .item-card, .aj-preview .task-row .tr-main { cursor: default; }

/* ==========================================================================
   Pessoas
   ========================================================================== */
.aj-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.aj-person {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 14px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface-2); text-align: left;
}
.aj-person .grow { min-width: 0; }
.aj-person-name { font-weight: 650; font-size: 14.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aj-person-add { border-style: dashed; border-width: 1.5px; color: var(--text-2); transition: border-color var(--dur), background var(--dur), color var(--dur); }
.aj-person-add:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.aj-add-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1.5px dashed var(--border-2); flex-shrink: 0; }
.aj-person-add:hover .aj-add-icon { border-color: var(--accent); color: var(--accent); }

.aj-access-list { display: flex; flex-direction: column; }
.aj-access { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.aj-access:first-child { border-top: 0; padding-top: 0; }
.aj-access-name { font-weight: 620; font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aj-access-compras { border-top-style: dashed; }
.aj-sp-emoji { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 19px; background: var(--c-bg); }
.aj-sp-emoji.sm { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.aj-seg { flex-shrink: 0; }
.aj-seg button[data-v="none"].on { color: var(--text-2); }
.aj-seg button[data-v="leitor"].on { color: var(--c-sky-ink); background: var(--c-sky); box-shadow: none; }
.aj-seg button[data-v="editor"].on { color: var(--c-mint-ink); background: var(--c-mint); box-shadow: none; }

.aj-checks { list-style: none; margin: 14px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.aj-checks li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.2px; color: var(--text-2); }
.aj-checks svg.lucide { color: var(--success); margin-top: 2px; width: 15px; height: 15px; stroke-width: 2.5; }

/* ==========================================================================
   Claude
   ========================================================================== */

.aj-routines { display: flex; flex-direction: column; gap: 8px; }
.aj-routine {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color var(--dur), background var(--dur);
}
.aj-routine:hover { border-color: var(--border-2); }
.aj-r-emoji { width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center; font-size: 20px; background: var(--surface); box-shadow: var(--shadow-sm); transition: filter .25s, opacity .25s; }
.aj-r-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 2px 4px; border-radius: var(--r-sm); transition: opacity .25s; }
.aj-r-body[data-aj]:hover .aj-r-name { color: var(--accent-ink); }
.aj-r-name { font-weight: 650; font-size: 14px; transition: color var(--dur); }
.aj-r-prompt { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aj-r-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.aj-routine.off .aj-r-emoji { filter: grayscale(1); opacity: .55; }
.aj-routine.off .aj-r-body { opacity: .55; }

.aj-lock { position: relative; min-height: 240px; }
.aj-lock-preview { display: flex; flex-direction: column; gap: 8px; filter: blur(1.5px) saturate(.6); opacity: .5; pointer-events: none; user-select: none; }
.aj-lock-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(400px, calc(100% - 24px));
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 20px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.aj-lock-card .btn { margin-top: 6px; }
.aj-lock-icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }

.aj-hist-list { display: flex; flex-direction: column; }
.aj-hist { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.aj-hist:first-child { border-top: 0; padding-top: 0; }
.aj-hist-text { font-size: 13.5px; line-height: 1.4; }
.aj-hist.undone .aj-hist-text { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--border-2); }
.aj-hist.undone .avatar { filter: grayscale(1); opacity: .5; }

/* Editor de rotina (modal) */
.aj-form { display: flex; flex-direction: column; gap: 14px; }
.aj-form-top { display: flex; align-items: flex-end; gap: 12px; }
.aj-emoji-btn {
  width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 25px;
  background: var(--surface-2); border: 1.5px dashed var(--border-2);
  transition: border-color var(--dur), transform .2s var(--spring);
}
.aj-emoji-btn:hover { border-color: var(--accent); transform: scale(1.04); }
.aj-ideas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.aj-ideas .chip { cursor: pointer; }
.aj-ideas .chip:hover { background: var(--accent-soft); color: var(--accent-ink); }
.aj-freq { display: flex; flex-wrap: wrap; width: 100%; }
.aj-freq button { flex: 1; }
.aj-when { display: flex; gap: 8px; flex-wrap: wrap; }
.aj-when .input { width: auto; flex: 1; min-width: 130px; }
.aj-when-preview { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.aj-shake { animation: ajShake .35s var(--ease); border-color: var(--danger) !important; }

/* ==========================================================================
   Dados
   ========================================================================== */
.aj-exports { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.aj-export {
  display: flex; align-items: center; gap: 14px; text-align: left; min-width: 0;
  padding: 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2);
  transition: border-color var(--dur), transform .15s var(--ease), box-shadow var(--dur);
}
.aj-export:hover { border-color: var(--border-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); color: var(--text); }
.aj-export-icon { width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center; background: var(--c-bg); color: var(--c-ink); }
.aj-export-icon svg.lucide { width: 22px; height: 22px; }
.aj-export .grow { display: flex; flex-direction: column; gap: 3px; }
.aj-export-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 650; font-size: 14px; color: var(--text); }
.aj-export-desc { font-size: 12.5px; color: var(--text-2); }

.aj-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.aj-danger { border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); }
.aj-danger .aj-card-icon { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.aj-md-note { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 13px; color: var(--text-2); }
.aj-md-note svg.lucide { margin-top: 2px; color: var(--text-3); }
.aj-md-note code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-3); padding: 1px 5px; border-radius: 5px; }
.aj-md {
  margin: 0; max-height: 46vh; overflow: auto;
  padding: 14px 16px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
}

/* ==========================================================================
   Atalhos
   ========================================================================== */
.aj-kb-list { display: flex; flex-direction: column; }
.aj-kb { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 12px; border-radius: var(--r); font-size: 13.8px; transition: background .25s var(--ease); }
.aj-kb + .aj-kb { box-shadow: 0 -1px 0 var(--border); }
.aj-keys { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.aj-keys .kbd { font-size: 12px; padding: 5px 8px; min-width: 28px; text-align: center; color: var(--text-2); transition: transform .12s, border-color .2s, color .2s, background .2s; }
.aj-plus { font-size: 11px; color: var(--text-3); }
.aj-kb.aj-hit { background: var(--accent-soft); }
.aj-kb.aj-hit .kbd { border-color: var(--accent); color: var(--accent-ink); background: var(--surface); transform: translateY(1px); border-bottom-width: 1px; }
.aj-lock .aj-kb { background: var(--surface-2); }

/* ==========================================================================
   Animações
   ========================================================================== */
.aj-spin { animation: ajSpin .9s linear infinite; }
@keyframes ajSpin { to { transform: rotate(360deg); } }
@keyframes ajPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes ajBreathe { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1); } }
@keyframes ajFlash { 0% { box-shadow: 0 0 0 0 var(--accent-ring); } 35% { box-shadow: 0 0 0 7px var(--accent-ring); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes ajShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1180px) {
  .aj-appear { grid-template-columns: minmax(0, 1fr); }
  .aj-preview-wrap { position: static; order: -1; }
  .aj-preview-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .aj-preview-body > .aj-pv-hello { grid-column: 1 / -1; }
  .aj-preview-note { display: none; }
}

/* Submenu vira abas roláveis fixas no topo */
@media (max-width: 1000px) {
  .aj-layout { display: block; }
  .aj-nav {
    position: sticky; top: 0; z-index: 6;
    flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -32px 18px; padding: 10px 32px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, box-shadow .2s;
  }
  .aj-nav::-webkit-scrollbar { display: none; }
  .aj-nav.aj-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
  .aj-nav-item, .aj-nav-sub {
    flex: 0 0 auto; min-height: 42px; margin-left: 0; padding: 0 15px 0 6px; gap: 6px;
    border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border);
  }
  .aj-nav-sub::before { display: none; }
  .aj-nav-item.on { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: 0 4px 12px var(--accent-ring); }
  .aj-nav-icon, .aj-nav-sub .aj-nav-icon { width: 30px; height: 30px; border-radius: 50%; background: transparent; }
  .aj-nav-item.on .aj-nav-icon { background: transparent; color: var(--on-accent); }
  .aj-nav-label { font-size: 13.5px; white-space: nowrap; }
  .aj-nav-desc, .aj-nav-card { display: none; }
  
  
}

@media (max-width: 760px) {
  .aj-head { margin-bottom: 14px; gap: 12px; }
  .aj-head-icon { width: 42px; height: 42px; }
  .aj-title { font-size: 26px; }
  .aj-head-sub { font-size: 13px; }
  .aj-nav { margin: 0 -16px 16px; padding: 8px 16px; }

  .aj-sec-head { flex-wrap: wrap; align-items: flex-start; }
  .aj-h2 { font-size: 20px; }
  .aj-card { padding: var(--pad); border-radius: var(--r-lg); }
  .aj-card-head { flex-wrap: wrap; }
  .aj-card-right { width: 100%; padding-left: 46px; }

  /* alvos de toque >= 40px */
  .aj .btn-sm { height: 38px; padding: 0 12px; font-size: 13px; }
  .aj .btn-sm.btn-icon { width: 40px; height: 40px; padding: 0; }
  .aj .seg button { height: 38px; }

  .aj-levels { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .level-card.aj-level { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 10px; }
  .aj-level .aj-ill { grid-row: 1 / span 3; height: 74px; padding: 5px; gap: 4px; }
  .aj-level .lc-desc { font-size: 12.3px; }

  .aj-mods { grid-template-columns: minmax(0, 1fr); }
  .aj-tiles { grid-template-columns: minmax(0, 1fr); }
  .aj-tile { padding: var(--pad); }
  .aj-orb { width: 44px; height: 44px; }

  .aj-opts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aj-opts { gap: 8px; }
  .aj-opt-sub { display: none; }
  .aj-opt-label { font-size: 12.5px; padding: 0 2px; }
  .aj-swatches { justify-content: space-between; gap: 10px 0; }
  .aj-sw { width: 25%; }
  .aj-preview-body { grid-template-columns: minmax(0, 1fr); }

  .aj-access { flex-wrap: wrap; }
  .aj-access > .grow { min-width: calc(100% - 60px); }
  .aj-access .aj-seg, .aj-access > .btn { width: 100%; }
  .aj-seg button { flex: 1; padding: 0 6px; }
  

  
  
  
  
  
  
  
  .aj-routine { padding: 10px; gap: 10px; }
  .aj-r-emoji { width: 38px; height: 38px; font-size: 18px; }
  .aj-r-run { display: none; }
  .aj-hist { flex-wrap: wrap; }
  .aj-hist > .btn { margin-left: 40px; }
  .aj-exports { grid-template-columns: minmax(0, 1fr); }
  .aj-danger .aj-row { flex-wrap: wrap; }
  .aj-danger .aj-row > .btn { width: 100%; }
  .aj-freq button { flex: 1 1 45%; }
  .aj-when .input { min-width: 0; }
}

/* ==========================================================================
   Dados reais: sincronização, pessoas, IA
   ========================================================================== */
.aj-saved.warn { color: var(--warning); }
.aj-saved .status-dot.off { background: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 22%, transparent); }
.aj-mono { font-family: var(--font-mono); font-size: 13px; }
.aj-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.aj-card-actions { margin-top: 14px; gap: 8px; }
.aj-step-n { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 750; font-size: 13px; background: var(--accent); color: var(--on-accent); }

/* pílula de status */
.aj-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 640; line-height: 1; padding: 5px 10px; border-radius: var(--r-full);
  color: var(--text-2); background: var(--surface-3);
}
.aj-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.aj-pill svg.lucide { width: 12px; height: 12px; }
.aj-pill:has(svg)::before { display: none; }
.aj-pill-ok { color: var(--success); background: color-mix(in srgb, var(--success) 13%, transparent); }
.aj-pill-warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.aj-pill-off { color: var(--text-3); }

/* pessoas */
.aj-person-main { min-width: 0; }
.aj-person > .btn { flex-shrink: 0; }
.aj-people { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.aj-people .aj-person { padding: 12px 14px; }
.aj-invite { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto; gap: 12px; align-items: end; }
.aj-invite .seg { height: 40px; align-items: stretch; }
.aj-invite .seg button:disabled { opacity: .45; cursor: not-allowed; }
.aj-invite-go { height: 40px; }
.aj-who-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.aj-who-tab {
  display: inline-flex; align-items: center; gap: 7px; max-width: 180px;
  padding: 5px 12px 5px 6px; border-radius: var(--r-full); border: 1px solid var(--border);
  background: var(--surface-2); font-weight: 600; font-size: 13px; color: var(--text-2);
  transition: border-color var(--dur), background var(--dur), color var(--dur);
}
.aj-who-tab:hover { border-color: var(--border-2); color: var(--text); }
.aj-who-tab.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.aj-access-main { min-width: 0; }

/* IA */
.aj-ai-now {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface-2); font-size: 13.5px;
}
.aj-ai-now code, .aj-secret-now code { font-family: var(--font-mono); font-size: 12px; }
.aj-model-pick { display: flex; flex-direction: column; gap: 8px; }
.aj-provs { display: flex; flex-direction: column; gap: 10px; }
.aj-prov {
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; background: var(--surface);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.aj-prov.ok { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.aj-prov.off { background: var(--surface-2); }
.aj-prov.off .aj-prov-icon, .aj-prov.off .aj-prov-blurb { opacity: .55; }
.aj-prov.open { box-shadow: var(--shadow-sm); }
.aj-prov-head { display: flex; align-items: flex-start; gap: 12px; }
.aj-prov-main { min-width: 0; }
.aj-prov-icon { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; background: var(--c-bg); color: var(--c-ink); }
.aj-prov-icon.sm { width: 28px; height: 28px; border-radius: 8px; }
.aj-prov-name { font-weight: 680; font-size: 14.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aj-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 2px 7px; border-radius: var(--r-full); border: 1px solid var(--border); }
.aj-prov-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.aj-prov-status .tiny { line-height: 1.4; }
.aj-prov-blurb { font-size: 13px; color: var(--text-2); margin: 10px 0 0 50px; }
.aj-prov-acts { margin: 10px 0 0 50px; gap: 8px; }
.aj-prov-body { margin: 14px 0 0 50px; padding-top: 14px; border-top: 1px dashed var(--border-2); display: flex; flex-direction: column; gap: 14px; animation: pop .18s var(--ease); }
.aj-prov-body .aj-subtitle { margin-top: 0; }
.aj-test { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; padding: 8px 11px; border-radius: var(--r); font-size: 13px; font-weight: 550; }
.aj-prov .aj-test { margin-left: 50px; }
.aj-test.ok { color: var(--success); background: color-mix(in srgb, var(--success) 11%, transparent); }
.aj-test.err { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.aj-test.busy { color: var(--text-2); background: var(--surface-2); }
.aj-test span { min-width: 0; overflow-wrap: anywhere; }
.aj-test .btn { margin-left: auto; }
.aj-howto { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13.3px; color: var(--text-2); }
.aj-howto code, .aj-warn code, .aj-note code { font-family: var(--font-mono); font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--surface-3); color: var(--text); }
.aj-secret { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; }
.aj-secret-acts { display: flex; gap: 6px; padding-bottom: 2px; }
.aj-secret-acts .btn { height: 40px; }
.aj-secret-now { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.aj-models { display: flex; flex-direction: column; gap: 8px; }
.aj-model-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aj-model-chip { padding-right: 4px; }
.aj-model-chip code { font-family: var(--font-mono); font-size: 12px; }
.aj-chip-x { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); }
.aj-chip-x:hover { background: var(--hover); color: var(--danger); }
.aj-inline-form { display: flex; gap: 8px; }
.aj-inline-form .input { flex: 1; min-width: 0; }
.aj-presets { gap: 6px; }
.aj-presets .chip { cursor: pointer; }
.aj-presets .chip:hover { background: var(--accent-soft); color: var(--accent-ink); }
.aj-codex-start { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aj-codex { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--border); }
.aj-codex-step { display: flex; align-items: flex-start; gap: 12px; }
.aj-codex-step .grow { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aj-codex-url { font-family: var(--font-mono); font-size: 13px; color: var(--accent); display: block; }
.aj-codex-code {
  font-family: var(--font-mono); font-size: 30px; font-weight: 700; letter-spacing: .14em;
  padding: 8px 14px; border-radius: var(--r); background: var(--surface); border: 1.5px dashed var(--accent);
  color: var(--text); width: fit-content; max-width: 100%; overflow-wrap: anywhere; user-select: all;
}
.aj-codex-wait { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); border-top: 1px solid var(--border); padding-top: 10px; }
.aj-seg-wide { display: flex; width: fit-content; max-width: 100%; }
.aj-r-result { display: block; font-size: 12.2px; color: var(--text-2); margin-top: 4px; padding: 6px 9px; border-radius: 8px; background: var(--surface-2); white-space: normal; }
.aj-r-result.err { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.aj-skel { display: flex; flex-direction: column; gap: 12px; }
.aj-skel span { height: 120px; border-radius: var(--r-xl); background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: ajSkel 1.3s linear infinite; }
@keyframes ajSkel { to { background-position: -200% 0; } }

@media (max-width: 1000px) {
  .aj-invite { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .aj-invite-email { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .aj-grid2 { grid-template-columns: minmax(0, 1fr); }
  .aj-invite { grid-template-columns: minmax(0, 1fr); }
  .aj-invite .seg { width: 100%; }
  .aj-people { grid-template-columns: minmax(0, 1fr); }
  .aj-person { flex-wrap: wrap; }
  .aj-person .aj-person-main { flex: 1 1 calc(100% - 60px); }
  .aj-person > .btn { margin-left: 56px; }
  .aj-prov-blurb, .aj-prov-acts, .aj-prov-body, .aj-prov .aj-test { margin-left: 0; }
  .aj-secret { grid-template-columns: minmax(0, 1fr); }
  .aj-secret-acts { flex-wrap: wrap; }
  .aj-codex-code { font-size: 24px; }
  .aj-codex-step > .btn { display: none; }
  .aj-seg-wide { width: 100%; }
  .aj-seg-wide button { flex: 1; }
}