/* ═══════════════════════════════════════════════════════════════════════
   Diff: compara texto e JSON lado a lado. Visual de terminal limpo: verde escuro com o verde e o vermelho do próprio diff.
   A cor do projeto vem de --accent / --accent-2 (o <body> as recebe do catálogo, src/data/projects.js).
   As cores com função fixa são --add (entrou) e --del (saiu): nunca só a cor diz o que mudou, há também o sinal + / − e os números.
   Movimento: juice.js põe data-motion="reduced" no <html> (opção Animações ou sistema pedindo menos movimento).
   Não depende de tokens.css nem de Bootstrap.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
	color-scheme: dark;
	--accent: #4ade80;
	--accent-2: #f87171;
	--bg: #08100b;
	--bg-2: #0e1812;
	--panel: rgb(255 255 255 / .045);
	--ink: #e9f3ec;
	--ink-2: #bccbc1;
	--ink-3: #8fa196;
	--line: rgb(255 255 255 / .11);
	--add: #4ade80;
	--del: #f87171;
	--mod: #7dd3fc;
	--add-bg: rgb(74 222 128 / .13);
	--add-strong: rgb(74 222 128 / .36);
	--del-bg: rgb(248 113 113 / .13);
	--del-strong: rgb(248 113 113 / .38);
	--ease: cubic-bezier(.2, .8, .2, 1);
	--font: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
	--radius: 16px;
	--lh: 21px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	background: var(--bg);
	color: var(--ink);
	font: 400 1rem/1.5 var(--font);
	-webkit-tap-highlight-color: transparent;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd { margin: 0; }
.i { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flip { transform: scaleX(-1); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
kbd { display: inline-block; min-width: 1.6em; padding: .05em .45em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: rgb(255 255 255 / .06); font: 600 .78em/1.5 var(--mono); text-align: center; }
code { font: 500 .9em/1.4 var(--mono); }

/* ───────── Fundo ───────── */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, #12261a 0%, var(--bg) 60%); }
.bg i { position: absolute; width: 56vmax; height: 56vmax; border-radius: 50%; filter: blur(120px); opacity: .13; }
.bg i:nth-child(1) { left: -22vmax; top: -28vmax; background: var(--accent); animation: drift 30s ease-in-out infinite alternate; }
.bg i:nth-child(2) { right: -28vmax; bottom: -32vmax; background: var(--accent-2); opacity: .1; animation: drift 36s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(7vmax, 5vmax) scale(1.12); } }
.grid { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, transparent) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(70% 55% at 50% 0%, #000, transparent); }

/* ───────── Esqueleto de carregamento ───────── */
.sk { display: block; border-radius: 8px; background: linear-gradient(100deg, rgb(255 255 255 / .06) 30%, rgb(255 255 255 / .14) 50%, rgb(255 255 255 / .06) 70%) 0 0 / 220% 100%; animation: shimmer 1.4s linear infinite; }
.sk--line { height: 1.2em; margin: .7em 0; }
.sk--short { width: 55%; }
@keyframes shimmer { to { background-position: -220% 0; } }

/* ───────── Topo ───────── */
.top { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: max(.8rem, env(safe-area-inset-top)) clamp(.9rem, 3vw, 1.6rem) .8rem; }
.pill { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .35rem .95rem .35rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: .88rem; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s; }
.pill:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink); }
.brand { display: flex; align-items: center; gap: .55rem; font: 700 1.3rem/1 var(--font); letter-spacing: -.01em; }
.brand__logo { width: 1.9rem; height: 1.9rem; stroke: none; }
.top__tools { display: flex; gap: .4rem; }
.tool { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink-2); transition: border-color .2s, color .2s, background .2s; }
.tool:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--ink); }
.tool[aria-pressed="false"] { color: var(--ink-3); background: transparent; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--del) 70%, transparent); }
.tool[aria-pressed="false"] .i { opacity: .55; }

/* ───────── Corpo ───────── */
.app { width: min(1500px, 100%); margin: 0 auto; padding: .4rem clamp(.9rem, 3vw, 1.6rem) 2rem; display: grid; gap: 1rem; }
.nojs { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.lead__title { font: 700 clamp(1.5rem, 3.4vw, 2.2rem)/1.15 var(--font); letter-spacing: -.02em; }
.lead__text { max-width: 62ch; margin-top: .4rem; color: var(--ink-2); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 42px; padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); font-weight: 600; font-size: .92rem; transition: transform .15s var(--ease), border-color .2s, background .2s; }
.btn:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn--primary { border-color: transparent; background: var(--accent); color: #06130a; }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 85%, white); }
.btn--ghost { background: transparent; }
.btn--sm { min-height: 36px; padding: .25rem .8rem; font-size: .85rem; }

.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; }
.tabs { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.tab { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: .3rem 1.1rem; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); font-weight: 700; }
.tab[aria-selected="true"] { background: var(--accent); color: #06130a; box-shadow: 0 6px 20px -8px var(--accent); }
.tab__braces { font: 700 .95em/1 var(--mono); }
.bar__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.opts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }
.chk, .sel { display: inline-flex; align-items: center; gap: .5rem; min-height: 38px; padding: .2rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink-2); font-size: .88rem; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; }
.chk:hover, .sel:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.chk input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.chk:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--ink); }
.sel select { padding: .15rem .3rem; border: 0; border-radius: 8px; background: rgb(255 255 255 / .06); color: var(--ink); font-weight: 600; }
.sel select option { background: #101a14; color: var(--ink); }
.chk--tight, .sel--tight { min-height: 36px; font-size: .82rem; }
body[data-mode="json"] [data-only="text"], body[data-mode="text"] [data-only="json"] { display: none; }

/* ───────── Editores ───────── */
.editors { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .6rem; align-items: stretch; }
.ed { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); transition: border-color .2s, box-shadow .2s; }
.ed:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.ed.has-error { border-color: color-mix(in srgb, var(--del) 70%, transparent); }
.ed.is-drop { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.ed__head { display: flex; align-items: center; gap: .55rem; min-height: 46px; padding: .35rem .6rem .35rem .85rem; border-bottom: 1px solid var(--line); }
.ed__label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; white-space: nowrap; }
.ed__badge { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 8px; background: var(--del-strong); color: #ffe9e9; font: 700 .8rem/1 var(--mono); }
.ed__badge--b { background: var(--add-strong); color: #e6ffee; }
.ed__file { min-width: 0; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .1rem .55rem; border-radius: 999px; background: rgb(255 255 255 / .07); color: var(--ink-2); font: 500 .76rem/1.6 var(--mono); }
.ed__meta { margin-left: auto; color: var(--ink-3); font: 500 .76rem/1.2 var(--mono); white-space: nowrap; }
.ed__tools { display: flex; gap: .2rem; }
.mini { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-2); transition: background .15s, color .15s, transform .15s var(--ease); }
.mini:hover { background: rgb(255 255 255 / .09); color: var(--ink); }
.mini:active { transform: scale(.9); }
.mini:disabled { opacity: .35; cursor: default; }
.mini--lg { width: 40px; height: 40px; border: 1px solid var(--line); background: var(--panel); }

.ed__body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); height: 260px; min-height: 140px; max-height: 70vh; overflow: hidden; resize: vertical; border-radius: 0 0 var(--radius) var(--radius); font: 400 13px/var(--lh) var(--mono); }
.ed__gutter { margin: 0; min-width: 3.1em; padding: 10px 8px 34px 10px; overflow: hidden; border-right: 1px solid var(--line); background: rgb(255 255 255 / .025); color: var(--ink-3); font: inherit; text-align: right; user-select: none; }
.ed__area { position: relative; z-index: 1; display: block; width: 100%; height: 100%; margin: 0; padding: 10px; overflow: auto; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); font: inherit; white-space: pre; tab-size: 4; }
.ed__area::placeholder { color: var(--ink-3); white-space: normal; }
.ed__mark { position: absolute; z-index: 0; left: 0; right: 0; height: var(--lh); top: calc(10px + (var(--mark-line, 1) - 1) * var(--lh) - var(--scroll, 0) * 1px); border-left: 3px solid var(--del); background: rgb(248 113 113 / .2); pointer-events: none; }
.ed__drop { position: absolute; inset: 0; z-index: 2; display: none; place-items: center; align-content: center; gap: .4rem; background: color-mix(in srgb, var(--bg) 82%, var(--accent)); color: var(--accent); font-weight: 700; pointer-events: none; }
.ed.is-drop .ed__drop { display: grid; }
.ed__err { display: grid; gap: .45rem; justify-items: start; padding: .7rem .9rem; border-top: 1px solid color-mix(in srgb, var(--del) 40%, transparent); background: rgb(248 113 113 / .09); color: #ffd5d5; font-size: .88rem; border-radius: 0 0 var(--radius) var(--radius); }
.ed__err-hint { color: var(--ink-2); }

.mid { display: grid; place-items: center; }
.mid__btn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg-2); color: var(--ink-2); transition: transform .25s var(--ease), border-color .2s, color .2s; }
.mid__btn:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); transform: rotate(180deg); }

.banner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; padding: .7rem .9rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--ink-2); font-size: .92rem; }
.banner > .i { color: var(--accent); }
.banner > span { flex: 1 1 22rem; }

/* ───────── Resultado ───────── */
.result { display: grid; gap: .8rem; scroll-margin-top: 1rem; }
.toolbar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .9rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.toolbar__left { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.sum { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: baseline; gap: .35rem; padding: .25rem .75rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); font-size: .85rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.chip b { font: 700 1rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.chip--add b { color: var(--add); }
.chip--del b { color: var(--del); }
.chip--add::before { content: '+'; color: var(--add); font-weight: 700; }
.chip--del::before { content: '−'; color: var(--del); font-weight: 700; }
.chip--blk b { color: var(--ink); }
.nav { display: inline-flex; align-items: center; gap: .35rem; }
.nav__pos { min-width: 4.8rem; text-align: center; color: var(--ink-2); font: 600 .85rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.toolbar__right { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.seg button { display: inline-flex; align-items: center; gap: .4rem; min-height: 34px; padding: .2rem .8rem; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font-size: .85rem; font-weight: 600; }
.seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.seg button:disabled { opacity: .4; cursor: default; }

.state__box { display: grid; justify-items: center; gap: .55rem; padding: clamp(1.6rem, 5vw, 3rem) 1rem; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--panel); text-align: center; }
.state__box h3 { font: 700 1.25rem/1.2 var(--font); }
.state__box p { max-width: 48ch; color: var(--ink-2); }
.state__icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font: 700 1.7rem/1 var(--mono); }
.state__icon--ok { background: var(--add-bg); color: var(--add); }
.state__icon--bad { background: var(--del-bg); color: var(--del); }
.state__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-top: .4rem; }
.state__busy { display: block; justify-items: stretch; text-align: left; border-style: solid; }

.changes { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.changes > summary { display: flex; align-items: center; gap: .6rem; min-height: 46px; padding: .4rem .9rem; font-weight: 700; cursor: pointer; list-style: none; }
.changes > summary::-webkit-details-marker { display: none; }
.changes > summary::before { content: '▸'; color: var(--ink-3); transition: transform .2s; }
.changes[open] > summary::before { transform: rotate(90deg); }
.changes > summary b { padding: .05rem .6rem; border-radius: 999px; background: rgb(255 255 255 / .09); font: 700 .8rem/1.6 var(--mono); }
.changes__note { padding: 0 .9rem .8rem; color: var(--ink-2); font-size: .9rem; }
.changes__list { display: grid; max-height: 15rem; overflow: auto; padding: 0 .5rem .5rem; }
.change { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; width: 100%; padding: .45rem .55rem; border: 0; border-radius: 10px; background: transparent; text-align: left; transition: background .15s; }
.change:hover { background: rgb(255 255 255 / .06); }
.change__path { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.change__text { color: var(--ink-2); font: 400 .82rem/1.4 var(--mono); overflow-wrap: anywhere; }
.badge { padding: .05rem .55rem; border-radius: 999px; font: 700 .72rem/1.7 var(--font); letter-spacing: .02em; white-space: nowrap; }
.badge--add { background: var(--add-strong); color: #eafff1; }
.badge--del { background: var(--del-strong); color: #ffecec; }
.badge--mod { background: rgb(125 211 252 / .26); color: #e7f7ff; }
.changes > .btn { margin: 0 .9rem .8rem; }

.notice { padding: .6rem .9rem; border: 1px solid color-mix(in srgb, var(--mod) 40%, transparent); border-radius: 12px; background: rgb(125 211 252 / .08); color: var(--ink-2); font-size: .9rem; }

/* ───────── As linhas ───────── */
.rows { display: grid; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: rgb(0 0 0 / .26); font: 400 13px/1.55 var(--mono); }
.rows:empty { display: none; }
.rows--split { grid-template-columns: 3.7em minmax(0, 1fr) 3.7em minmax(0, 1fr); }
.rows--unified { grid-template-columns: 3.7em 3.7em minmax(0, 1fr); }
.rows--nowrap.rows--split { grid-template-columns: 3.7em minmax(max-content, 1fr) 3.7em minmax(max-content, 1fr); }
.rows--nowrap.rows--unified { grid-template-columns: 3.7em 3.7em minmax(max-content, 1fr); }
.r { display: contents; }
.n { padding: 0 .7em 0 .3em; border-right: 1px solid var(--line); color: var(--ink-3); text-align: right; user-select: none; font-variant-numeric: tabular-nums; }
.n::before { content: attr(data-n); }
.c { position: relative; min-height: 1.55em; padding: 0 .9em 0 1.6em; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.rows--nowrap .c { white-space: pre; overflow-wrap: normal; }
.rows--split .c + .n { border-left: 1px solid var(--line); }
.c--add { background: var(--add-bg); }
.c--del { background: var(--del-bg); }
.c--add::before, .c--del::before { position: absolute; left: .5em; font-weight: 700; user-select: none; }
.c--add::before { content: '+'; color: var(--add); }
.c--del::before { content: '−'; color: var(--del); }
.c--empty { background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(255 255 255 / .04) 6px 12px); }
.c--ignored { color: var(--ink-3); }
mark.w { padding: 0 1px; border-radius: 3px; color: inherit; }
.c--del mark.w { background: var(--del-strong); }
.c--add mark.w { background: var(--add-strong); }
.r--change > .n:nth-child(1), .r--delete > .n:nth-child(1), .rows--unified .r--delete > .n { background: var(--del-bg); }
.r--change > .n:nth-child(3), .r--insert > .n:nth-child(3), .rows--unified .r--insert > .n { background: var(--add-bg); }
.rows--unified .r--insert > .n:nth-child(1) { background: transparent; }
.r.is-current > .n:first-child + .c, .rows--unified .r.is-current > .n + .n + .c { box-shadow: inset 3px 0 0 var(--accent); }
.r.is-flash > .c, .r.is-current > .c { animation: rowflash 1.4s ease-out; }
@keyframes rowflash { 0% { filter: brightness(2.1) saturate(1.4); } 100% { filter: none; } }
.rows.is-new .r:nth-child(-n+16) > .c, .rows.is-new .r:nth-child(-n+16) > .n { animation: rowin .45s var(--ease) both; }
.rows.is-new .r:nth-child(2) > * { animation-delay: 30ms; }
.rows.is-new .r:nth-child(3) > * { animation-delay: 60ms; }
.rows.is-new .r:nth-child(4) > * { animation-delay: 90ms; }
.rows.is-new .r:nth-child(5) > * { animation-delay: 120ms; }
.rows.is-new .r:nth-child(6) > * { animation-delay: 150ms; }
.rows.is-new .r:nth-child(7) > * { animation-delay: 180ms; }
.rows.is-new .r:nth-child(n+8) > * { animation-delay: 210ms; }
@keyframes rowin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.fold, .more { grid-column: 1 / -1; display: flex; align-items: center; gap: .8em; width: 100%; min-height: 2.3em; padding: .2em 1em; border: 0; border-block: 1px solid var(--line); background: rgb(125 211 252 / .06); color: var(--ink-2); font: 600 12px/1.4 var(--font); text-align: left; transition: background .15s, color .15s; }
.fold:hover, .more:hover { background: rgb(125 211 252 / .14); color: var(--ink); }
.fold__dots { color: var(--mod); font-family: var(--mono); letter-spacing: .1em; }
.fold__go { margin-left: auto; color: var(--mod); }
.more { justify-content: center; }

/* ───────── Números abertos (partial usage.eta): só na tela inicial, enquanto não há resultado ───────── */
.usage-wrap { color: var(--ink); font-size: 1rem; }
.result:not([data-state="start"]) + .usage-wrap { display: none; }
.usage-wrap .usage { background: var(--panel); border-color: var(--line); }

/* ───────── Rodapé, avisos, diálogos ───────── */
.foot { margin-top: auto; padding: 1.4rem clamp(.9rem, 3vw, 1.6rem) max(1.4rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--ink-3); font-size: .85rem; text-align: center; }
.foot p + p { margin-top: .35rem; }
.foot a { color: var(--ink-2); }

.toasts { position: fixed; z-index: 60; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); display: grid; gap: .5rem; width: min(30rem, calc(100vw - 1.6rem)); transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: center; gap: .8rem; padding: .65rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: #101c15; box-shadow: 0 14px 40px -12px rgb(0 0 0 / .8); font-size: .92rem; pointer-events: auto; animation: toastin .3s var(--ease) both; }
.toast--bad { border-color: color-mix(in srgb, var(--del) 60%, transparent); }
.toast.is-out { animation: toastout .2s ease-in both; }
.toast__text { flex: 1; }
.toast__btn { padding: .25rem .8rem; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 10px; background: transparent; color: var(--accent); font-weight: 700; }
@keyframes toastin { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toastout { to { opacity: 0; transform: translateY(8px); } }

.dlg { width: min(34rem, calc(100vw - 1.6rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: 20px; background: #0f1a13; color: var(--ink); box-shadow: 0 30px 80px -20px #000; }
.dlg--wide { width: min(42rem, calc(100vw - 1.6rem)); }
.dlg::backdrop { background: rgb(0 0 0 / .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dlg[open] { animation: dlgin .28s var(--ease) both; }
@keyframes dlgin { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.dlg__box { display: grid; gap: .9rem; padding: 1.2rem 1.3rem 1.1rem; }
.dlg__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dlg__head h2 { font: 700 1.25rem/1.2 var(--font); }
.dlg__lead { color: var(--ink-2); }
.dlg__area { width: 100%; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; background: rgb(0 0 0 / .35); color: var(--ink); font: 400 12px/1.5 var(--mono); resize: vertical; }
.dlg__foot { display: flex; justify-content: flex-end; gap: .6rem; }
.dlg__sub { font: 700 1rem/1.2 var(--font); }
.dlg__fine { color: var(--ink-3); font-size: .86rem; }
.steps { display: grid; gap: .7rem; padding-left: 1.2rem; list-style: decimal; color: var(--ink-2); }
.steps b { color: var(--ink); }
.keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem .9rem; }
.keys > div { display: flex; align-items: center; gap: .6rem; }
.keys dt { min-width: 2.4rem; }
.keys dd { color: var(--ink-2); font-size: .9rem; }

/* ───────── Telas menores ───────── */
@media (max-width: 1000px) {
	.editors { grid-template-columns: minmax(0, 1fr); }
	.mid { margin: -.15rem 0; }
	.mid__btn .i { transform: rotate(90deg); }
	.mid__btn:hover { transform: rotate(180deg); }
}
@media (max-width: 760px) {
	.pill span { display: none; }
	.pill { padding: .35rem .75rem; }
	.bar__actions .btn { padding: .4rem .8rem; font-size: .85rem; }
	.opts .chk, .opts .sel { padding: .15rem .65rem; font-size: .8rem; }
	.ed__body { height: 190px; }
	.ed__file { max-width: 8rem; }
	/* o cabeçalho do quadro (rótulo, arquivo, contador e botões) não cabe numa linha só: o contador desce e ocupa a segunda */
	.ed__head { flex-wrap: wrap; row-gap: 0; padding-right: .4rem; }
	.ed__tools { margin-left: auto; }
	.ed__meta { order: 5; flex: 1 0 100%; margin: -.2rem 0 .35rem; padding-left: 2.15rem; }
	/* o backdrop-filter da barra viraria o bloco de contenção do .nav fixo (o botão sairia junto com a barra): no celular a barra é estática e sem ele */
	.toolbar { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--panel); }
	.toolbar__right { width: 100%; }
	.seg button span { display: none; }
	.sum { width: 100%; }
	/* a navegação entre diferenças flutua no canto enquanto o resultado está na tela (o JS liga .is-floating) */
	.nav { position: fixed; z-index: 30; right: .7rem; bottom: max(.7rem, env(safe-area-inset-bottom)); padding: .25rem .4rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 30px -10px #000; opacity: 0; transform: translateY(160%); pointer-events: none; transition: opacity .25s, transform .3s var(--ease); }
	.nav.is-floating { opacity: 1; transform: none; pointer-events: auto; }
	.rows { font-size: 12.5px; }
}
@media (pointer: coarse) {
	.mini { width: 44px; height: 44px; }
	.chk, .sel, .btn, .tab, .seg button { min-height: 44px; }
	.chk--tight, .sel--tight { min-height: 44px; }
	.sel select { min-height: 34px; }
	.chk input { width: 1.3rem; height: 1.3rem; }
	.fold, .more { min-height: 44px; }
	.change { min-height: 44px; }
}

/* ───────── Menos movimento ───────── */
html[data-motion="reduced"] .bg i, html[data-motion="reduced"] .sk { animation: none; }
html[data-motion="reduced"] .rows.is-new .r > *, html[data-motion="reduced"] .r.is-flash > .c, html[data-motion="reduced"] .r.is-current > .c, html[data-motion="reduced"] .toast, html[data-motion="reduced"] .dlg[open] { animation: none; }
html[data-motion="reduced"] .mid__btn:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.bg i, .sk, .rows.is-new .r > *, .r.is-flash > .c, .r.is-current > .c, .toast, .dlg[open] { animation: none; }
	.mid__btn:hover, .btn:active, .mini:active { transform: none; }
}