/* Estúdio de Mapas · visor, caneta, comparador, aprovar, pacotes, tempo, ideias · agente E */
.ev, .vz { --g: #1fd1a0; --g1: #5bf0b0; --g2: #0f9f8f; --bg: #0b0f1a; --vidro: rgba(255,255,255,.045); --linha: rgba(255,255,255,.09);
  --txt: #e9eef7; --mute: #9db0c9; --am: #ffb02e; --verm: #ff6b6b; --azul: #4da3ff; --lil: #b58cff;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--txt); box-sizing: border-box; }
.ev *, .vz *, .ev *::before, .vz *::before { box-sizing: border-box; }
:where(.ev, .vz) :where(button, textarea, input) { font: inherit; color: inherit; }
:where(.ev, .vz) button { cursor: pointer; -webkit-tap-highlight-color: transparent; border: 0; background: none; }
:where(.ev, .vz) button:active:not(:disabled) { transform: scale(.96); }
:where(.ev, .vz) button:disabled { opacity: .45; cursor: default; }
@keyframes ev-entra { from { opacity: 0; transform: translate3d(0,14px,0); } to { opacity: 1; transform: none; } }
.ev-entra { animation: ev-entra .42s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ev-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes ev-abana { 0%,100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* toast próprio (só se não houver App.toast) */
.ev-toast { position: fixed; left: 50%; top: 38%; transform: translateX(-50%); z-index: 10000; max-width: min(92vw, 460px);
  background: rgba(20,28,46,.94); border: 1px solid rgba(31,209,160,.45); color: #e9eef7; padding: 12px 18px; border-radius: 16px; font: 600 14px/1.35 Inter, system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(0,0,0,.45); animation: ev-entra .3s cubic-bezier(.2,.8,.2,1) both; text-align: center; }
.ev-toast.sai { opacity: 0; transition: opacity .4s; }

/* estados com cor */
.ev-estado { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font: 700 12px/1 Inter, system-ui, sans-serif; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.ev-estado.rever { --c: #ffb02e; } .ev-estado.aprovar { --c: #ffd23f; } .ev-estado.ajuste { --c: #ff6b6b; }
.ev-estado.aprovado { --c: #1fd1a0; } .ev-estado.jogo { --c: #b58cff; } .ev-estado.grande { font-size: 15px; padding: 11px 18px; }

.ev-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 16px; font-weight: 700;
  background: var(--vidro); border: 1px solid var(--linha); }
.ev-btn.verde { background: linear-gradient(135deg, var(--g1), var(--g2)); color: #05241c; border: 0; }
.ev-btn.azul { background: linear-gradient(135deg, #7cc0ff, #3b7fe0); color: #04142c; border: 0; }
.ev-btn.grande { min-height: 54px; font-size: 16px; flex: 1 1 200px; border-radius: 18px; }
.ev-btn i { font-style: normal; font-size: 1.15em; }
.ev-btn.conf { outline: 3px solid rgba(255,255,255,.55); animation: ev-pulse 1s infinite; }
.ev-sk { display: grid; gap: 12px; } .ev-sk i { height: 84px; border-radius: 22px; background: var(--vidro); animation: ev-pulse 1.2s infinite; }
.ev-erro { padding: 28px; text-align: center; display: grid; gap: 12px; justify-items: center; }

/* ======================= VISOR ======================= */
html.vz-aberto, html.vz-aberto body { overscroll-behavior: none; }
.vz { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: #070a13;
  background-image: radial-gradient(900px 380px at 50% -120px, rgba(31,209,160,.16), transparent 70%);
  animation: ev-entra .3s cubic-bezier(.2,.8,.2,1) both; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.vz.sai { opacity: 0; transform: scale(.985); transition: opacity .24s, transform .24s; pointer-events: none; }
.vz-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; background: rgba(11,15,26,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha); position: relative; z-index: 5; }
.vz-x { width: 44px; height: 44px; border-radius: 15px; background: var(--vidro); border: 1px solid var(--linha); font-size: 18px; flex: none; }
.vz-tit { flex: 1 1 120px; min-width: 0; display: grid; }
.vz-tit b { font: 600 17px/1.15 Fredoka, Inter, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-tit small { color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-zoom { display: flex; align-items: center; gap: 2px; background: var(--vidro); border: 1px solid var(--linha); border-radius: 15px; padding: 2px; flex: none; }
.vz-ib { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; font-weight: 700; display: grid; place-items: center; }
.vz-ib:hover { background: rgba(255,255,255,.08); }
.vz-zl { min-width: 42px; text-align: center; font: 700 12px Inter, sans-serif; color: var(--mute); }
.vz-pill { height: 44px; padding: 0 14px; border-radius: 15px; background: var(--vidro); border: 1px solid var(--linha); display: inline-flex; gap: 7px; align-items: center; font-weight: 700; flex: none; }
.vz-pill.on { background: rgba(31,209,160,.2); border-color: var(--g); color: var(--g1); }
.vz-tabs { order: 9; flex: 1 1 100%; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 1px 0; touch-action: pan-x; }
.vz-tabs::-webkit-scrollbar { display: none; }
.vz-tab { flex: none; height: 40px; padding: 0 14px; border-radius: 13px; display: inline-flex; gap: 7px; align-items: center; font-weight: 700; font-size: 14px; color: var(--mute);
  background: transparent; border: 1px solid transparent; }
.vz-tab i { font-style: normal; } .vz-tab.on { color: #05241c; background: linear-gradient(135deg, var(--g1), var(--g2)); }
@media (min-width: 760px), (max-height: 480px) { .vz-tabs { order: 0; flex: 0 1 auto; margin-left: 4px; } .vz-tit { flex: 1 1 80px; } }
@media (max-height: 480px) { .vz-zoom .vz-ib:not(:last-child) { display: none; } .vz-tab:not(.on) span { display: none; } .vz-tab { padding: 0 11px; } .vz-top { padding-top: 5px; padding-bottom: 5px; } .vz-tit small { display: none; } .vz-pill b { display: none; } }

.vz-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; cursor: grab; }
.vz.desenhar .vz-stage { cursor: crosshair; } .vz-stage:active { cursor: grabbing; }
.vz-pan { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; background: #0e1424; box-shadow: 0 10px 50px rgba(0,0,0,.6); }
.vz-pan img { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.vz-pan.px img { image-rendering: pixelated; }
.vz-cam { opacity: 0; transition: opacity .25s; } .vz-cam.on { opacity: .88; }
.vz-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--mute); font-weight: 600; pointer-events: none; }
.vz-load i { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--g); animation: ev-giro .8s linear infinite; }
@keyframes ev-giro { to { transform: rotate(360deg); } }
.vz-load[hidden], .vz-vazio[hidden] { display: none; }
.vz-vazio { position: absolute; inset: 0; display: grid; place-content: center; color: var(--mute); text-align: center; padding: 20px; }

/* dock flutuante */
.vz-dock { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 10px calc(10px + env(safe-area-inset-bottom));
  pointer-events: none; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s; z-index: 4; touch-action: pan-x; }
.vz-dock > * { pointer-events: auto; max-width: 100%; }
.vz-dock.off { transform: translate3d(0, 110%, 0); opacity: 0; pointer-events: none; } .vz-dock.off > * { pointer-events: none; }
.vz-dock [hidden] { display: none !important; }
.vz-mini { font-size: 12px; font-weight: 700; color: var(--mute); padding: 6px 10px; border-radius: 10px; background: var(--vidro); margin-left: auto; margin-right: 6px; }
.vz.sheet-on .vz-row.sub, .vz.sheet-on .vz-row.cam, .vz.sheet-on .vz-row.acoes { display: none; }
@media (max-width: 520px) { .vz-zoom .vz-ib:not(:last-child) { display: none; } .vz-zoom { order: 0; } .vz-pill.pen b { display: none; } .vz-pill.pen { padding: 0 12px; } }
.vz-fold { position: absolute; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: 34px; height: 34px; border-radius: 50%; z-index: 6; background: rgba(11,15,26,.85); border: 1px solid var(--linha);
  font-size: 15px; transition: transform .3s; opacity: 0; }
.vz-dock.off ~ .vz-fold { opacity: 1; transform: rotate(180deg); }
.vz-dock:not(.off) ~ .vz-fold { right: 10px; bottom: auto; top: 50%; margin-top: -17px; opacity: .85; }
.vz-row { display: flex; gap: 6px; align-items: center; overflow-x: auto; scrollbar-width: none; padding: 6px; border-radius: 20px; background: rgba(11,15,26,.8); backdrop-filter: blur(14px); border: 1px solid var(--linha); }
.vz-row::-webkit-scrollbar { display: none; }
.vz-row.acoes { background: none; border: 0; backdrop-filter: none; padding: 0; overflow: visible; width: min(100%, 520px); }
.vz-lab { flex: none; font: 700 11px Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 0 6px 0 8px; }
.vz-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 13px; border-radius: 14px; font-weight: 700; font-size: 13.5px; white-space: nowrap;
  background: var(--vidro); border: 1px solid var(--linha); color: var(--mute); transition: background .2s, border-color .2s, color .2s, transform .12s; --c: #9db0c9; }
.vz-chip i { font-style: normal; font-size: 16px; filter: grayscale(.6); }
.vz-chip.on { color: #fff; background: color-mix(in srgb, var(--c) 26%, transparent); border-color: var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 35%, transparent); }
.vz-chip.on i { filter: none; }
.vz-big { flex: 1; height: 54px; border-radius: 18px; font-weight: 800; font-size: 16px; display: inline-flex; gap: 9px; align-items: center; justify-content: center; border: 1px solid var(--linha); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.vz-big i { font-style: normal; font-size: 20px; }
.vz-big.ok { background: linear-gradient(135deg, var(--g1), var(--g2)); color: #05241c; border: 0; }
.vz-big.ok.conf { outline: 3px solid rgba(255,255,255,.6); animation: ev-pulse 1s infinite; }
.vz-big.aj { background: linear-gradient(135deg, #ff9a8b, #e5484d); color: #2a0508; border: 0; }
.vz-big.fraco { filter: saturate(.55) brightness(.85); }
.vz-big.abana { animation: ev-abana .35s; }
.vz-film { display: flex; gap: 8px; overflow-x: auto; padding: 8px; border-radius: 20px; background: rgba(11,15,26,.82); backdrop-filter: blur(14px); border: 1px solid var(--linha); scrollbar-width: thin; touch-action: pan-x; }
.vz-th { flex: none; width: 96px; display: grid; gap: 3px; text-align: left; padding: 4px; border-radius: 14px; border: 2px solid transparent; background: var(--vidro); transition: border-color .2s, transform .15s; }
.vz-th img { width: 100%; height: 58px; object-fit: cover; border-radius: 9px; background: #0e1424; display: block; image-rendering: pixelated; }
.vz-th b { font-size: 12.5px; } .vz-th small { font-size: 11px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vz-th.on { border-color: var(--g); background: rgba(31,209,160,.14); }

/* folha de ajuste */
.vz-sheetbox { width: min(100%, 560px); }
.vz-sheet { display: grid; gap: 10px; padding: 12px; border-radius: 22px; background: rgba(14,20,36,.94); backdrop-filter: blur(16px); border: 1px solid rgba(255,107,107,.45);
  box-shadow: 0 14px 40px rgba(0,0,0,.5); max-height: 52vh; overflow-y: auto; animation: ev-entra .3s cubic-bezier(.2,.8,.2,1) both; touch-action: pan-y; user-select: text; -webkit-user-select: text; }
.vz-sh-h { display: flex; justify-content: space-between; align-items: center; font: 600 16px Fredoka, Inter, sans-serif; color: #ff9a8b; }
.vz-nota { width: 100%; resize: none; min-height: 58px; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid var(--linha); font-size: 15px; line-height: 1.4; outline: none; }
.vz-nota:focus { border-color: #ff9a8b; }
@media (max-height: 480px) {
  .vz-sheetbox { position: fixed; right: 10px; top: 62px; bottom: 8px; width: 330px; }
  .vz-dock > .vz-sheetbox { pointer-events: none; } .vz-sheetbox > .vz-sheet { pointer-events: auto; } /* a caixa vazia não tapa «Pedir ajuste» (844×390) */
  .vz-sheet { max-height: none; height: 100%; align-content: start; overflow-y: auto; }
  .vz.sheet-on .vz-dock { padding-right: 350px; }
  .vz-nota { min-height: 54px; }
}

/* ======================= CANETA ======================= */
.cn-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cn-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; padding: 8px; border-radius: 22px; background: rgba(11,15,26,.88); backdrop-filter: blur(14px); border: 1px solid var(--linha); }
.cn-row { display: flex; gap: 4px; align-items: center; }
.cn-b { min-width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; font-size: 20px; font-weight: 700; background: var(--vidro); border: 1px solid transparent; }
.cn-b .cn-t { display: none; font-size: 12px; } .cn-b.on { background: rgba(31,209,160,.22); border-color: var(--g); color: var(--g1); }
@media (min-width: 900px) { .cn-b:not(.mini) .cn-t { display: inline; } }
.cn-b.mini { min-width: 42px; } .cn-b.apagar.perigo { background: #e5484d; font-size: 13px; padding: 0 12px; animation: ev-pulse 1s infinite; }
.cn-cor { width: 34px; height: 34px; border-radius: 50%; margin: 0 3px; background: var(--c); border: 3px solid rgba(255,255,255,.2); box-shadow: 0 0 0 0 var(--c); transition: transform .15s, box-shadow .2s, border-color .2s; }
.cn-cor.on { border-color: #fff; transform: scale(1.18); box-shadow: 0 0 12px var(--c); }
.cn-sep { width: 1px; height: 26px; background: var(--linha); margin: 0 4px; }
.cn-input { position: absolute; z-index: 7; transform: translate(0, -50%); min-width: 150px; height: 40px; padding: 0 12px; border-radius: 12px; background: rgba(11,15,26,.92); border: 2px solid; font-weight: 700; outline: none; user-select: text; -webkit-user-select: text; }
@media (max-height: 480px) { .cn-bar { flex-wrap: nowrap; padding: 4px 6px; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .cn-b, .cn-b.mini { height: 34px; min-width: 33px; padding: 0 2px; font-size: 17px; } .cn-cor { width: 22px; height: 22px; margin: 0 1px; border-width: 2px; } .cn-row { gap: 2px; } .cn-sep { margin: 0 1px; } }

/* ======================= COMPARADOR ======================= */
.cp-img { }
.cp-ov { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.cp-lbl { position: absolute; top: 10px; padding: 5px 11px; border-radius: 99px; font: 800 12px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); }
.cp-lbl.a { left: 10px; background: rgba(255,176,46,.85); color: #2b1a00; } .cp-lbl.d { right: 12px; background: rgba(31,209,160,.88); color: #04241b; }
.cp-ov.v .cp-lbl.a { top: 10px; left: 10px; } .cp-ov.v .cp-lbl.d { top: auto; bottom: 10px; right: auto; left: 10px; }
.vz-dock ~ .cp-ov .cp-lbl { }
.cp-pega { position: absolute; left: 0; top: 0; width: 44px; height: 100%; pointer-events: none; touch-action: none; cursor: ew-resize; outline: none; will-change: transform; }
.cp-ov.v .cp-pega { cursor: ns-resize; width: 100%; height: 44px; }
.cp-linha { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgba(31,209,160,.9), 0 0 2px rgba(0,0,0,.6); border-radius: 2px; }
.cp-ov.v .cp-linha { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 3px; margin: -1.5px 0 0; }
.cp-linha, .cp-knob { pointer-events: auto; }
.cp-linha::before { content: ''; position: absolute; inset: -14px; }
.vz.desenhar .cp-linha { pointer-events: none; }
.cp-knob { position: absolute; left: 50%; top: 42%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 2px;
  background: linear-gradient(135deg, var(--g1), var(--g2)); border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 18px rgba(31,209,160,.6); transition: transform .15s; }
.cp-knob b { font-size: 10px; color: #04241b; }
.cp-ov.v .cp-knob { left: 42%; top: 50%; transform: rotate(90deg); }
.cp-pega.arr .cp-knob { transform: scale(1.15); } .cp-ov.v .cp-pega.arr .cp-knob { transform: rotate(90deg) scale(1.15); }
.cp-pega:focus-visible .cp-knob { outline: 3px solid #fff; }
.vz-chip.vert { --c: #9db0c9; }

/* ======================= ÁUDIO ======================= */
.au { display: grid; gap: 8px; }
.au-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.au-b { height: 44px; padding: 0 14px; border-radius: 14px; font-weight: 700; background: var(--vidro); border: 1px solid var(--linha); display: inline-flex; gap: 8px; align-items: center; }
.au-b.rec { background: rgba(229,72,77,.18); border-color: #e5484d; color: #ffb4b4; }
.au-dot { width: 12px; height: 12px; border-radius: 50%; background: #e5484d; }
.au.gravando .au-b.rec { background: #e5484d; color: #fff; } .au.gravando .au-dot { background: #fff; animation: ev-pulse .8s infinite; }
.au-tempo { margin-left: auto; font: 700 14px Inter, sans-serif; font-variant-numeric: tabular-nums; color: var(--mute); }
.au-estado { font-size: 12.5px; color: var(--mute); } .au-live { font-size: 13px; color: #8be9d0; background: rgba(31,209,160,.1); padding: 8px 10px; border-radius: 12px; }

/* ======================= APROVAR ======================= */
.ap-card { position: relative; display: grid; grid-template-columns: minmax(120px, 42%) 1fr; gap: 14px; padding: 12px; border-radius: 26px; background: var(--vidro); border: 1px solid var(--linha); overflow: hidden; }
@media (max-width: 480px) { .ap-card { grid-template-columns: 1fr; } }
.ap-img { position: relative; border-radius: 18px; overflow: hidden; background: #0e1424; aspect-ratio: 4/3; display: block; padding: 0; }
.ap-img img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; transition: transform .4s; }
.ap-img:hover img { transform: scale(1.05); }
.ap-zoom { position: absolute; left: 8px; bottom: 8px; padding: 6px 10px; border-radius: 99px; background: rgba(11,15,26,.8); font: 700 12px Inter, sans-serif; backdrop-filter: blur(8px); }
.ap-corpo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ap-tit { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; } .ap-tit b { font: 600 18px Fredoka, Inter, sans-serif; }
.ap-txt { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.45; }
.ap-acoes { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.ap-b { height: 48px; padding: 0 16px; border-radius: 16px; font-weight: 800; display: inline-flex; gap: 8px; align-items: center; justify-content: center; border: 1px solid var(--linha); background: var(--vidro); flex: 0 0 auto; }
.ap-b i { font-style: normal; } .ap-b.ok { flex: 1 1 120px; background: linear-gradient(135deg, var(--g1), var(--g2)); color: #05241c; border: 0; }
.ap-b.ok.conf { outline: 3px solid rgba(255,255,255,.55); animation: ev-pulse 1s infinite; }
.ap-b.aj { flex: 1 1 130px; background: rgba(255,107,107,.14); border-color: rgba(255,107,107,.55); color: #ffb4ac; }
.ap-brilho { animation: ap-brilho 1.3s ease-out; }
@keyframes ap-brilho { 0% { box-shadow: 0 0 0 0 rgba(31,209,160,.0); } 25% { box-shadow: 0 0 0 3px rgba(31,209,160,.9), 0 0 50px 10px rgba(31,209,160,.45); } 100% { box-shadow: 0 0 0 0 rgba(31,209,160,0); } }
.ap-fx { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 6; }
.ap-ring, .ap-sp { opacity: 0; } /* só se veem durante a animação (fill both) */
.ap-b.ap-lupa { width: 48px; padding: 0; flex: 0 0 48px; }
.ap-ring { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--g1); animation: ap-ring .9s ease-out both; }
@keyframes ap-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(4.5); opacity: 0; } }
.ap-sp { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--g1); box-shadow: 0 0 8px var(--g1); animation: ap-sp .9s ease-out both; }
.ap-sp:nth-child(3n) { background: #ffd23f; box-shadow: 0 0 8px #ffd23f; }
@keyframes ap-sp { from { transform: translate3d(0,0,0) scale(1); opacity: 1; } to { transform: translate3d(var(--dx), var(--dy), 0) scale(.2); opacity: 0; } }

/* ======================= PACOTES ======================= */
.pk, .tp, .vid { max-width: 880px; margin: 0 auto; padding: 4px 2px 40px; display: grid; gap: 16px; }
.pk h2, .tp h2, .vid h2 { margin: 0; font: 600 24px Fredoka, Inter, sans-serif; } .pk h3 { margin: 4px 0 0; font: 600 18px Fredoka, Inter, sans-serif; }
.pk-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pk-n { padding: 6px 14px; border-radius: 99px; font-weight: 800; background: rgba(31,209,160,.18); color: var(--g1); border: 1px solid rgba(31,209,160,.5); } .pk-n.zero { background: var(--vidro); color: var(--mute); border-color: var(--linha); }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pk-card { border-radius: 20px; overflow: hidden; background: var(--vidro); border: 1px solid var(--linha); animation: ev-entra .42s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.pk-th { position: relative; aspect-ratio: 4/3; background: #0e1424; display: grid; place-items: center; font-size: 30px; } .pk-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.pk-th em { position: absolute; right: 7px; top: 7px; font-style: normal; font-size: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(31,209,160,.9); box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.pk-card.aj .pk-th em { background: rgba(255,107,107,.92); } .pk-card.aj { border-color: rgba(255,107,107,.4); }
.pk-ct { padding: 9px 11px 11px; display: grid; gap: 2px; } .pk-ct b { font-size: 14px; } .pk-ct small { color: var(--mute); font-size: 12px; }
.pk-vazio { grid-column: 1/-1; display: grid; justify-items: center; gap: 6px; padding: 34px 16px; border-radius: 24px; border: 1px dashed var(--linha); text-align: center; color: var(--mute); }
.pk-vazio i { font-style: normal; font-size: 36px; } .pk-vazio b { color: var(--txt); font-size: 16px; } .pk-vazio.pequeno { padding: 18px; }
.pk-ult { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 22px; background: linear-gradient(135deg, rgba(77,163,255,.16), rgba(77,163,255,.05)); border: 1px solid rgba(77,163,255,.4); }
.pk-ult.nada { background: var(--vidro); border-color: var(--linha); } .pk-ult i { font-style: normal; font-size: 30px; } .pk-ult small { display: block; color: var(--mute); font-size: 12px; } .pk-ult b { font-size: 16px; }
.pk-nota { padding: 11px 14px; border-radius: 16px; background: rgba(255,176,46,.12); border: 1px solid rgba(255,176,46,.4); font-size: 13.5px; line-height: 1.4; }
.pk-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.pk-prompt { display: grid; gap: 8px; animation: ev-entra .4s both; } .pk-prompt[hidden] { display: none; }
.pk-ph { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; } .pk-fb { font-size: 13px; font-weight: 700; color: var(--g1); }
.pk-bloco { position: relative; display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 20px; background: #05080f; border: 2px dashed rgba(31,209,160,.55); max-height: 320px; overflow: auto; transition: border-color .2s, background .2s; }
.pk-bloco pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 13px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #cfe9e0; }
.pk-bloco:hover { background: #07101a; } .pk-bloco.copiado { border-style: solid; border-color: var(--g1); box-shadow: 0 0 22px rgba(31,209,160,.4); }
.pk-bloco.copiado::after { content: 'copiado!'; position: sticky; float: right; bottom: 0; background: var(--g); color: #04241b; font: 800 13px Inter, sans-serif; padding: 6px 14px; border-radius: 99px; }
.pk-hist { display: grid; gap: 8px; }
.pk-h { display: flex; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 18px; background: var(--vidro); border: 1px solid var(--linha); }
.pk-h > i { font-style: normal; font-size: 22px; } .pk-h > div { flex: 1; display: grid; } .pk-h small { color: var(--mute); font-size: 12.5px; }
.pk-h.pend { border-color: rgba(255,210,63,.4); }

/* ======================= LINHA DO TEMPO ======================= */
.tp-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; align-items: center; padding: 2px; } .tp-chips::-webkit-scrollbar { display: none; }
.tp-dia { margin: 10px 0 2px; font: 600 15px Fredoka, Inter, sans-serif; color: var(--g1); text-transform: capitalize; position: sticky; top: 0; padding: 6px 0; background: linear-gradient(var(--bg) 70%, transparent); z-index: 2; }
.tp-col { display: grid; gap: 8px; position: relative; padding-left: 4px; }
.tp-ev { display: flex; gap: 12px; padding: 12px 14px; border-radius: 20px; background: var(--vidro); border: 1px solid var(--linha); border-left: 4px solid var(--c);
  animation: ev-entra .42s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.tp-ic { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; background: color-mix(in srgb, var(--c) 22%, transparent); }
.tp-tx { min-width: 0; flex: 1; display: grid; gap: 4px; } .tp-l1 { display: flex; justify-content: space-between; gap: 8px; } .tp-l1 b { font-size: 15px; } .tp-l1 time { color: var(--mute); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tp-l2 { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--mute); align-items: center; } .tp-tag { padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); font-weight: 800; }
.tp-ev p { margin: 0; font-size: 13.5px; color: #c4d0e4; line-height: 1.4; word-break: break-word; } .tp-fe { color: #ffb4d6; font-weight: 700; }

/* ======================= IDEIAS ======================= */
.id-novo { display: grid; gap: 10px; padding: 14px; border-radius: 24px; background: var(--vidro); border: 1px solid var(--linha); }
.id-txt { width: 100%; resize: none; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid var(--linha); font-size: 15px; outline: none; } .id-txt:focus { border-color: var(--g); }
.id-quadro { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.id-col { display: grid; gap: 8px; padding: 10px; border-radius: 24px; background: color-mix(in srgb, var(--c) 7%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.id-col header { display: flex; gap: 8px; align-items: center; padding: 4px 6px; } .id-col header i { font-style: normal; font-size: 20px; } .id-col header b { flex: 1; font: 600 16px Fredoka, Inter, sans-serif; color: var(--c); }
.id-col header span { min-width: 26px; text-align: center; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c) 25%, transparent); font-weight: 800; font-size: 12px; }
.id-it { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border-radius: 18px; background: rgba(11,15,26,.7); border: 1px solid var(--linha); animation: ev-entra .4s both; animation-delay: calc(var(--i, 0) * 40ms); }
.id-it p { margin: 0; font-size: 14.5px; line-height: 1.4; word-break: break-word; } .id-it small { color: var(--mute); font-size: 11.5px; }
.id-ok { flex: none; width: 30px; height: 30px; border-radius: 10px; border: 2px solid var(--c); display: grid; place-items: center; font-weight: 900; color: #04241b; }
.id-it.feito { opacity: .6; } .id-it.feito p { text-decoration: line-through; } .id-it.feito .id-ok { background: var(--g); border-color: var(--g); }
.id-vazio { text-align: center; color: var(--mute); font-size: 13px; padding: 14px; }

@media (prefers-reduced-motion: reduce) { .ev-entra, .vz, .pk-card, .tp-ev, .id-it { animation: none !important; } }

.vz.sheet-on .vz-fold { display: none; }

/* dentro da entrada (.emb) o rostinho da Fê fica no canto inferior direito: os botões principais e a caneta afastam-se dele */
@media (max-width: 900px) and (min-height: 481px) { html.emb .vz-row.acoes, html.emb .cn-bar { width: min(calc(100% - 78px), 520px); margin-right: 78px; } }
@media (max-height: 480px) { html.emb .vz-sheetbox { right: 86px; } html.emb .vz.sheet-on .vz-dock { padding-right: 426px; } }