/* ============================================================ PROMPTADORES — folha única. Tokens do global.css do 9barra7 (PromptHub / cora-site). REGRA HERDADA: nenhum literal de cor fora deste :root. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400..700&family=Space+Mono:wght@400;700&display=swap'); :root{ --ink:#111111; --ink2:#5b5b57; --ink3:#8e8e88; --paper:#ffffff; --wash:#f6f6f4; --wash2:#efefeb; --line:#e4e4df; --line2:#d2d2cb; /* Roxo do IA Studio (decisao do dono, 04/09/2026). O --roxo-esc e o mesmo tom a 80%: ele carrega TEXTO em varios lugares (numeracao das etapas em 11px, links dos passos, aviso) e o antigo #8582e8 dava so 3,05:1 sobre o wash, o que reprovava. A 80% da 6,04:1. */ --roxo:#944cf6; --roxo-esc:#763cc4; --sobre-roxo:#ffffff; /* A lima é o fundo da padronagem do IA Studio. Estava só dentro dos PNG; a tela de entrar desenha as peças, e precisa dela como cor. */ --lima:#ddfe6f; --preto:#000000; /* Vidro escuro da assinatura. Nao e preto puro: 18,12,28 e um quase-preto puxado para o nosso roxo, que e a mesma ideia da referencia do William sobre nunca usar #000 chapado -- so que afinada na nossa cor em vez de emprestada. A 78% o texto branco fica em 9,3:1 sobre o pior caso, que e o lima passando por tras. */ --vidro-preto:rgba(18,12,28,.78); --alerta:#c4443a; --ok:#4a9c5e; --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:100px; --fonte:'DM Sans',system-ui,-apple-system,sans-serif; --mono:'Space Mono',ui-monospace,monospace; --altura-cabecalho:68px; --gutter:20px; /* 24px >=768 - 32px >=1024, como no global.css */ /* Padronagem do cabecalho. Trocar esta linha e a unica coisa que muda quando a pessoa for do PromptHub: faixa-cab-prompthub.png. */ --faixa-cab:url('faixa-cab-ia-studio.png'); /* O painel de inicio usa a ESTEIRA, que e outro ladrilho: o antigo tem circulos inteiros dentro, e rolando eles apareciam como bolas. Esta e uma cascata: sempre a mesma meia-lua, reta colada na borda de cima e barriga para baixo, uma atras da outra sem folga. Nunca vira bola porque nunca ha uma cupula para fechar o par, nunca sobra faixa de lima entre elas, e curva nenhuma encosta em curva -- cada barriga se apoia na reta da seguinte. */ --faixa-inicio:url('esteira-ia-studio.png'); /* Vidro branco. 82% e nao 72%: sobre o roxo da padronagem, a 72% o valor em roxo do medidor caia para 4,36:1, abaixo do minimo. A 82% da 4,93:1, e a padronagem continua aparecendo por baixo. */ --vidro:rgba(255,255,255,.82); --vidro-forte:rgba(255,255,255,.93); --vidro-linha:rgba(17,17,17,.10); /* Vidro do cabecalho rolado. Baixo de proposito: quem esconde a padronagem e o blur, nao a tinta. Com 88% virava fumaca branca. */ --veu:rgba(246,246,244,.40); /* Bolha da pessoa. Roxo a 10% sobre o wash: o suficiente para separar quem falou sem virar bloco de cor no meio da leitura. */ --bolha:rgba(148,76,246,.10); /* Fita de validade sobre o roxo. O --roxo puro da 4,54:1 com texto branco, que passa raspando no titulo e reprova na linha de baixo; o --roxo-esc da 6,53:1 e sobra para as duas. Estes tres sao os acessorios dela. */ --sobre-roxo-fraco:rgba(255,255,255,.9); --vidro-roxo:rgba(255,255,255,.18); --linha-roxo:rgba(0,0,0,.2); } *,*::before,*::after{box-sizing:border-box} /* Qualquer `display` de componente vence o atributo `hidden` — foi o que fez o botão Reiniciar aparecer sem conversa. Esta linha devolve a última palavra ao atributo, que é quem o JavaScript usa. */ [hidden]{display:none!important} body{ margin:0;background:var(--wash);color:var(--ink); font-family:var(--fonte);font-optical-sizing:auto; font-size:16px;line-height:1.55; /* Duas colunas: a lista fixa à esquerda, a conversa à direita. A altura é a janela inteira para o compositor morar no rodapé da tela, não no fim do conteúdo. */ height:100dvh; display:grid;grid-template-columns:auto minmax(0,1fr); } .coluna{ min-width:0;height:100dvh;display:flex;position:relative; /* Coluna flexivel, e nao grade de faixas fixas. A grade errava sempre pelo mesmo motivo: filho com `hidden` sai da grade, os que sobram sobem uma faixa, e a faixa 1fr acaba na mao de quem nao deveria. Foi assim que a gaveta do medidor esticou ate o pe da tela, e de novo quando o rodape legal chegou e a conversa empurrou ele para fora. No flex nao existe faixa numerada: quem tem `flex:1` e a conversa, sempre, e quem some some sem mexer em ninguem. */ flex-direction:column; } /* ─── barra lateral ─── */ .lateral{ width:264px;flex:none;border-right:1px solid var(--line); background:var(--wash2);height:100dvh; /* Coluna flexível pelo mesmo motivo da .coluna: com faixas numeradas, um filho a mais (foi o atalho de Início) empurra todo mundo uma faixa e a faixa elástica cai na mão errada. Aqui isso fez o campo de busca esticar por cima da lista. No flex quem estica é a lista, sempre. */ display:flex;flex-direction:column; } .lateral__topo,.ir-inicio,.trilho,.busca,.eu{flex:none} .lista{flex:1;min-height:0} .lateral__topo{ display:flex;align-items:center;gap:var(--e-2); padding:0 var(--e-3) 0 var(--e-4);min-height:var(--altura-cabecalho); border-bottom:1px solid var(--line); } /* O mesmo emblema da capa do promptador, em miniatura: icone 3D preto sobre quadro branco. Preto porque serve tanto ao laranja do PromptHub quanto ao roxo do IA Studio sem competir com nenhum dos dois. */ .lateral__marca{width:34px;height:34px;flex:none} .lateral__titulo{ font-size:13px;font-weight:600;letter-spacing:-.01em;line-height:1.2; flex:1;min-width:0; } .lateral__titulo em{ display:block;font-style:normal;font-size:11px;font-weight:500;color:var(--ink3); } .recolher{ width:30px;height:30px;flex:none;border:0;border-radius:var(--r-sm); background:none;color:var(--ink3);cursor:pointer;display:grid;place-items:center; } .recolher:hover{background:var(--paper);color:var(--ink)} .recolher svg{width:17px;height:17px} /* busca */ /* O campo é irmão dos itens da lista, não um formulário à parte: mesma altura, mesmo canto e mesmo recuo que eles ganham no hover. */ .busca{padding:var(--e-1) var(--e-2) var(--e-2);position:relative} .busca svg{ position:absolute;left:22px;top:50%;transform:translateY(-50%); width:15px;height:15px;color:var(--ink3);pointer-events:none; } .busca input{ width:100%;font-family:var(--fonte);font-size:13.5px;line-height:1.55; color:var(--ink); /* Parado, um cinza claro sobre o cinza da barra: ele se anuncia sem gritar. Clicado, branco de verdade, que é o que separa o campo em uso do resto. */ background:var(--wash);border:1px solid transparent;border-radius:var(--r-sm); padding:8px var(--e-3) 8px 32px; transition:background .16s ease, border-color .16s ease; } .busca input::placeholder{color:var(--ink3)} .busca input:focus{ outline:none;background:var(--paper);border-color:var(--line); } .lista{ overflow-y:auto;padding:var(--e-1) var(--e-2) var(--e-4); display:flex;flex-direction:column;gap:1px; } .vazio{padding:var(--e-4) var(--e-3);font-size:13px;color:var(--ink3)} /* rodapé: a pessoa */ /* `margin-top:auto` e não a ordem dos filhos: com a barra fechada a lista some, e sem isto a foto subia e encostava nos ícones do trilho. */ .eu{ margin-top:auto;border-top:1px solid var(--line);padding:var(--e-2); } .eu__botao{ display:flex;align-items:center;gap:var(--e-3);width:100%;text-align:left; font-family:var(--fonte);background:none;border:0;border-radius:var(--r-sm); padding:8px var(--e-2);cursor:pointer;color:var(--ink); /* No admin este mesmo bloco e um , e ancora vem sublinhada de fabrica: as duas linhas apareciam riscadas. */ text-decoration:none; } .eu__botao:hover{background:var(--paper)} .eu__foto{ width:32px;height:32px;flex:none;border-radius:9px;background:var(--preto); color:#fff;display:grid;place-items:center; font-size:12px;font-weight:600;letter-spacing:.02em; /* Sem cobrir o quadro, a foto de 320px aparecia pelo canto de cima e o circulo virava um borrao cinza. O `.foto` do perfil ja tinha isto; estes dois nao, e por isso a troca de foto parecia nao pegar aqui. */ background-size:cover;background-position:center; } .eu__txt{min-width:0;flex:1} .eu__nome{ display:block;font-size:13px;font-weight:600;letter-spacing:-.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .eu__area{display:block;font-size:11px;color:var(--ink3)} /* ─── recolhida: vira um trilho de icones na borda ─── Ela nao some. Some a largura: marca, lupa, alfinete e a foto continuam ao alcance, e clicar em qualquer um devolve a barra inteira. */ .trilho{display:none} body.lateral-fechada .lateral{width:56px} body.lateral-fechada .lateral__topo{padding:0;justify-content:center} body.lateral-fechada .ir-inicio, body.lateral-fechada .lateral__titulo, body.lateral-fechada .recolher, body.lateral-fechada .busca, body.lateral-fechada .lista, body.lateral-fechada .eu__txt{display:none} body.lateral-fechada .trilho{ display:flex;flex-direction:column;align-items:center;gap:2px; padding:var(--e-3) 0; } body.lateral-fechada .eu__botao{justify-content:center;padding:8px 0} .trilho button{ width:36px;height:36px;border:0;border-radius:var(--r-sm);background:none; color:var(--ink2);cursor:pointer;display:grid;place-items:center;padding:0; } .trilho button:hover{background:var(--paper);color:var(--ink)} .trilho svg{width:18px;height:18px} .marca-bt{border:0;background:none;padding:0;cursor:pointer;display:block} .grupo{ font-size:9px;font-weight:600;letter-spacing:.09em;text-transform:uppercase; color:var(--ink3);padding:var(--e-4) var(--e-3) var(--e-2); } .item{ display:flex;align-items:center;gap:var(--e-2);width:100%;text-align:left; font-family:var(--fonte);font-size:13.5px;color:var(--ink2); background:none;border:0;border-radius:var(--r-sm); padding:8px var(--e-3);cursor:pointer; } .item:hover{background:var(--paper);color:var(--ink)} .item[aria-current="true"]{background:var(--paper);color:var(--ink);font-weight:600} /* Duas linhas em vez de uma linha cortada. O que separa promptadores irmãos mora no fim do nome, e era exatamente o pedaço que as reticências comiam: os dois "Planta baixa humanizada" ficavam idênticos na barra. Seis dos vinte e quatro passam a ocupar duas linhas, e nenhum esconde o que importa. */ .item__nome{ flex:1;min-width:0;line-height:1.3; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden; } /* Fixar: o alfinete so aparece quando o mouse passa, ou quando ja esta fixado. Sem isso a lista de 24 vira uma coluna de icones. */ .item__pin{ flex:none;width:24px;height:24px;border:0;border-radius:6px;background:none; color:var(--ink3);cursor:pointer;display:grid;place-items:center;padding:0; opacity:0;transition:opacity .12s; } .item__pin svg{width:14px;height:14px} .item:hover .item__pin,.item__pin:focus-visible{opacity:1} .item__pin:hover{background:var(--wash2);color:var(--ink)} .item--fixo .item__pin{opacity:1;color:var(--roxo-esc)} .item--fixo .item__pin:hover{color:var(--ink)} /* arraste dos fixados */ .item--arrastavel{cursor:grab} .item--arrastavel:active{cursor:grabbing} .item--voando{opacity:.35} .item--alvo{box-shadow:inset 0 2px 0 var(--roxo-esc)} .item--alvo-fim{box-shadow:inset 0 -2px 0 var(--roxo-esc)} .item--inativo{color:var(--ink3);cursor:default} .item--inativo:hover{background:none;color:var(--ink3)} .item__breve{ font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase; color:var(--ink3);border:1px solid var(--line2);border-radius:var(--r-pill); padding:0 6px;flex:none; } /* `.icone` também declara display e vem depois nesta folha; sem as duas classes juntas ele ganhava, e o botão de menu aparecia no desktop. */ .icone.abrir-lista{display:none} /* 900px: onde o cabecalho do PromptHub troca de forma. Abaixo disso a lista vira gaveta por cima da conversa, em vez de comer metade da tela. */ @media(max-width:900px){ body{grid-template-columns:minmax(0,1fr)} .lateral{ position:fixed;inset:0 auto 0 0;z-index:60;transform:translateX(-100%); transition:transform 200ms ease;box-shadow:0 0 40px rgba(0,0,0,.12); } body.lista-aberta .lateral{transform:none} body.lista-aberta::after{ content:'';position:fixed;inset:0;z-index:59;background:rgba(0,0,0,.28); } .icone.abrir-lista{display:grid} } @media(min-width:768px){ :root{ --gutter:24px } } @media(min-width:1024px){ :root{ --gutter:32px; --altura-cabecalho:72px } } img,svg{max-width:100%;display:block} /* ─── cabeçalho ─── */ /* A padronagem corre atras da barra inteira: uma fila so, diametro igual a altura, pecas encostadas, e so a borda da direita corta. O PNG e um ladrilho que fecha em si mesmo, por isso repeat-x nao deixa emenda. Sobre ela nada de texto solto: cada comando vira pastilha de vidro, que e o que garante contraste tanto sobre a lima quanto sobre o roxo. O backdrop-filter saiu daqui e foi para as pastilhas: com a faixa opaca por baixo, borrar o cabecalho inteiro nao borrava mais nada. */ /* A altura mora aqui, e não no filho. Com `box-sizing:border-box` o fio de baixo entra dentro dos 72px, exatamente como acontece no topo da barra lateral: é o que faz as duas linhas do alto pararem na mesma altura. */ .cab{ flex:none;position:relative;display:flex; min-height:var(--altura-cabecalho); border-bottom:1px solid var(--vidro-linha); } /* Duas camadas, e a ordem entre elas e o truque. ::before e a padronagem. ::after e o vidro. Parada no topo, a padronagem esta inteira e o vidro nao existe. Rolando, a padronagem sai de cena e o vidro entra: quem borra o que passa por baixo e o blur, nao tinta branca por cima. Com o veu opaco de antes, o cabecalho virava fumaca e a conversa sumia atras dele. As duas sao absolutas, e absoluto pinta depois do conteudo em fluxo: e por isso que .cab__faixa leva position e z-index, senao o vidro cobriria as proprias pastilhas. */ .cab::before,.cab::after{ content:'';position:absolute;inset:0;pointer-events:none; transition:opacity .45s ease; } .cab::before{ background:var(--faixa-cab) repeat-x left center;background-size:auto 100%; } .cab::after{ background:var(--veu); backdrop-filter:blur(22px) saturate(130%); -webkit-backdrop-filter:blur(22px) saturate(130%); opacity:0; } .cab.rolou::before{opacity:0} .cab.rolou::after{opacity:1} /* No início a padronagem já está no painel do herói. Duas na mesma tela competem, entao aqui o cabecalho fica liso e as pastilhas ganham contorno, que e o que as separa do fundo sem a faixa por tras. */ .cab--liso::before{opacity:0} .cab--liso{background:var(--wash);border-bottom-color:var(--line)} .cab--liso .cab__aqui,.cab--liso .pilula,.cab--liso .icone{ background:var(--paper);box-shadow:inset 0 0 0 1px var(--line); } /* Sobre o veu quase branco, pastilha branca some. Um fio por dentro, que nao mexe na largura como uma borda mexeria. */ .cab.rolou{border-bottom-color:var(--line)} .cab.rolou .cab__nome,.cab.rolou .med-bt,.cab.rolou .pilula,.cab.rolou .icone{ box-shadow:inset 0 0 0 1px var(--line); } /* Sem max-width: o nome do promptador encosta na margem esquerda, como no chat. Centrado num container de 1180px ele parecia solto no meio da tela. */ .cab__faixa{ position:relative;z-index:1; /* acima das duas camadas; ver .cab::before */ flex:1;padding:12px var(--gutter); display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap; } .cab__nome{ display:inline-flex;align-items:center;gap:7px; font-family:var(--fonte);font-size:15px;font-weight:600;letter-spacing:-.01em; color:var(--ink);border:0;border-radius:var(--r-pill); padding:8px 15px;cursor:pointer; background:var(--vidro); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); } .cab__nome:hover{background:var(--vidro-forte)} /* Sobre a padronagem o cinza claro das setinhas cai para 2,5:1, abaixo do minimo de 3:1 que vale para desenho de interface. Um tom mais escuro. */ .cab__nome svg{width:14px;height:14px;color:var(--ink2);flex:none;transition:transform .18s ease} .cab__nome[aria-expanded="true"] svg{transform:rotate(180deg)} .cab__dir{margin-left:auto;display:flex;align-items:center;gap:var(--e-4);flex-wrap:wrap} /* Fora de um promptador o cabecalho ainda precisa dizer onde a pessoa esta. Mesma pastilha do nome, sem a setinha, porque nao abre nada. */ .cab__aqui{ display:inline-flex;align-items:center;border-radius:var(--r-pill); font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink); padding:8px 15px;background:var(--vidro); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); } .ir-inicio{ display:flex;align-items:center;gap:10px;width:calc(100% - 16px); margin:var(--e-3) var(--e-2) 0;padding:8px var(--e-3);border:0; border-radius:var(--r-sm);background:none;color:var(--ink2); font-family:var(--fonte);font-size:13.5px;line-height:1.55;font-weight:500; cursor:pointer;text-align:left; } .ir-inicio:hover{background:var(--paper);color:var(--ink)} .ir-inicio[aria-current="true"]{background:var(--paper);color:var(--ink);font-weight:600} .ir-inicio svg{width:17px;height:17px;flex:none} /* ─── Medição (opção C) ─── Fechada e uma pilula com o custo. Aberta, os tokens descem para uma faixa propria embaixo do cabecalho. Quem nao liga para token nunca ve; quem esta medindo abre uma vez e deixa aberto. */ .med-bt{ display:inline-flex;align-items:center;gap:8px;font-family:var(--fonte); background:var(--vidro);border:0;border-radius:var(--r-pill); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); padding:8px 13px 8px 15px;cursor:pointer;color:var(--ink2);font-size:12px; } .med-bt:hover{color:var(--ink);background:var(--vidro-forte)} .med-bt b{ font-size:13.5px;font-weight:600;color:var(--roxo-esc); font-variant-numeric:tabular-nums; } .med-bt svg{width:13px;height:13px;color:var(--ink2);transition:transform .18s} .med-bt[aria-expanded="true"] svg{transform:rotate(180deg)} .gaveta-med{flex:none;border-bottom:1px solid var(--line);background:var(--paper)} .gaveta-med > dl{ padding:7px var(--gutter); /* Folga larga porque os numeros crescem: "1.234.567" encostaria no rotulo seguinte com o espacamento de antes. */ display:flex;gap:var(--e-7);flex-wrap:wrap; } .gaveta-med > dl > div{display:flex;align-items:baseline;gap:7px} .gaveta-med dt{ font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--ink3);margin:0; } .gaveta-med dd{ margin:0;font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums; } .pilula{ display:inline-flex;align-items:center;gap:6px; font-family:var(--fonte);font-size:12px;font-weight:500;color:var(--ink2); background:var(--wash2);border:0;border-radius:var(--r-pill); padding:6px 14px;cursor:pointer; } .pilula:hover{color:var(--ink)} /* As mesmas pilulas, quando moram no cabecalho, sobre a padronagem. */ .cab .pilula,.cab .icone{ background:var(--vidro);color:var(--ink2); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); } .cab .pilula{padding:8px 15px} .cab .pilula:hover,.cab .icone:hover:not(:disabled){background:var(--vidro-forte);color:var(--ink)} .pilula--chave::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ok)} .pilula--chave.falta{color:var(--ink)} .pilula--chave.falta::before{background:var(--alerta)} /* Troca de tela. A curva é de saída rápida e chegada macia, e não o `ease` de fábrica: o movimento arranca e desacelera, que é o que faz parecer suave em vez de apressado. Ir para um promptador é mais lento que voltar ao início de propósito. Voltar ao início é reconhecer um lugar já conhecido; entrar num promptador é trocar de assunto, e o olho precisa de mais tempo para acompanhar. */ @keyframes entrar{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} } .inicio:not([hidden]),.conta:not([hidden]){ animation:entrar .46s cubic-bezier(.22,.61,.36,1) both; } .centro:not([hidden]),.thread:not([hidden]){ animation:entrar .68s cubic-bezier(.22,.61,.36,1) both; } /* O que fazia a entrada parecer apressada não era só a duração: o cabeçalho trocava de cara num corte seco enquanto o miolo deslizava. Aqui as duas coisas passam a andar no mesmo compasso. */ .cab{transition:background-color .5s ease, border-color .5s ease} .cab__nome,.med-bt,.pilula,.icone,.cab__aqui{ transition:background .5s ease, box-shadow .5s ease, color .5s ease; } .cab__aqui:not([hidden]),.menu-wrap:not([hidden]),.med-bt:not([hidden]){ animation:entrar .5s cubic-bezier(.22,.61,.36,1) both; } /* ─── tela de início ─── O painel da padronagem à esquerda repete o corte da tela de login: quem entra reconhece de onde veio. `background-size:100% auto` e não `cover` porque numa coluna quem manda é a largura; com cover o desenho cortaria pelos lados, que é o único corte que a padronagem não aceita. */ .inicio{max-width:1180px;margin-inline:auto;padding:var(--e-5) var(--gutter) var(--e-7)} .inicio[hidden]{display:none} .heroi{ display:grid;grid-template-columns:var(--pad-heroi) minmax(0,1fr); border:1px solid var(--line);border-radius:22px;overflow:hidden; background:var(--paper);min-height:360px; } /* ── A esteira ── O ladrilho da esteira e 440x1980, ou seja, exatamente 4,5 vezes mais alto que largo. Com `background-size:100% auto` a altura na tela e sempre `largura * 6`, e essa e a distancia de uma volta inteira: andar exatamente isso faz a emenda cair em cima de si mesma e nunca aparecer. Por isso a largura mora numa variavel e o keyframe faz a conta a partir dela. Escrever 1920px na mao funcionaria hoje e quebraria no dia em que a coluna mudasse de largura -- com um salto visivel a cada volta, que e o tipo de defeito que ninguem liga ao commit que o causou. O 6 tambem mora aqui: trocar o ladrilho por um de outra proporcao pede trocar os dois. 90s para uma volta: da uns 28px por segundo. E movimento que se percebe quando se olha e que some quando se esta lendo o titulo ao lado. */ :root{ --pad-heroi:320px } .heroi__pad{ background:var(--faixa-inicio) repeat-y center; background-size:100% auto; animation:esteira 52s linear infinite; } @keyframes esteira{ from{ background-position:center 0 } to { background-position:center calc(var(--pad-heroi) * 4.5) } } .heroi__txt{padding:44px 48px;display:flex;flex-direction:column;justify-content:center} .heroi__txt h1{ margin:0;font-size:clamp(26px,3vw,38px);font-weight:500; letter-spacing:-.032em;line-height:1.1;text-wrap:balance; } .heroi__sub{margin:14px 0 0;color:var(--ink2);font-size:15px;max-width:52ch;text-wrap:pretty} .heroi__campo{ margin-top:26px;display:flex;align-items:center;gap:var(--e-2); background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill); padding:7px 8px 7px 20px;box-shadow:0 1px 2px rgba(17,17,17,.04); } .heroi__campo:focus-within{border-color:var(--line2)} .heroi__campo input{ flex:1;min-width:0;border:0;background:none;outline:none; font-family:var(--fonte);font-size:15px;color:var(--ink);padding:8px 0; } .heroi__campo input::placeholder{color:var(--ink3)} .heroi__campo button{ width:38px;height:38px;flex:none;border:0;border-radius:50%;cursor:pointer; background:var(--ink);color:var(--paper);display:grid;place-items:center; } .heroi__campo button svg{width:18px;height:18px} /* Especificidade de dois níveis porque `.eyebrow` vem depois nesta folha e zerava a margem: o rótulo colava no painel do herói. */ .inicio .inicio__rotulo{margin:34px 0 14px} .inicio__pe{margin:18px 0 0} .grade-prom{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-3)} .cartao-prom{ text-align:left;font-family:var(--fonte);cursor:pointer; background:var(--paper);border:1px solid var(--line);border-radius:16px; padding:16px 18px;display:block;width:100%; } .cartao-prom:hover{border-color:var(--line2)} .cartao-prom b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} .cartao-prom i{ font-style:normal;display:block;font-size:12.5px;color:var(--ink3); margin-top:4px;line-height:1.45; /* Duas linhas e para: descrição comprida faz o cartão do meio esticar e a grade inteira ficar torta. */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .cartao-prom--breve{opacity:.55} .cartao-prom__breve{ display:inline-block;margin-top:8px;font-size:10.5px;font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--ink3); } @media(max-width:900px){ .heroi{grid-template-columns:1fr;min-height:0} .heroi__pad{height:120px;background-size:auto 100%;animation:none} .heroi__txt{padding:30px 26px} .grade-prom{grid-template-columns:1fr} } /* ─── miolo ─── */ .miolo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain} /* Rolagem discreta: o trilho e transparente, entao ele mostra o fundo da area que rola em vez de uma faixa branca por cima do cinza. */ .lista,.miolo{scrollbar-width:thin;scrollbar-color:var(--line2) transparent} .lista::-webkit-scrollbar,.miolo::-webkit-scrollbar{width:10px} .lista::-webkit-scrollbar-track,.miolo::-webkit-scrollbar-track{background:transparent} .lista::-webkit-scrollbar-thumb,.miolo::-webkit-scrollbar-thumb{ background:var(--line2);border-radius:100px; border:3px solid transparent;background-clip:content-box; } .lista::-webkit-scrollbar-thumb:hover,.miolo::-webkit-scrollbar-thumb:hover{background:var(--ink3);background-clip:content-box} /* apresentação: no alto, compacta — sai da frente sozinha */ .centro{ max-width:720px;margin-inline:auto;padding:var(--e-7) var(--gutter) 0; display:flex;flex-direction:column;align-items:center;text-align:center; } .centro[hidden]{display:none} /* quadrado, não círculo: a marca chega perto dos cantos do PNG */ /* Icone 3D preto sobre quadro branco: acromatico, para servir tanto ao laranja do PromptHub quanto ao roxo do IA Studio sem competir. */ .avatar{ width:60px;height:60px;display:block;margin-bottom:var(--e-3); background:var(--paper);border:1px solid var(--line); border-radius:18px;padding:7px; } .centro h1{ margin:0 0 var(--e-1);font-size:clamp(22px,2.4vw,26px);font-weight:500; letter-spacing:-.024em;line-height:1.15;text-wrap:balance; } .autoria{margin:0 0 var(--e-3);font-size:13px;color:var(--ink3);display:flex;align-items:center;gap:5px} .descricao{margin:0;color:var(--ink2);font-size:14px;max-width:46ch;text-wrap:pretty} .partidas{display:flex;gap:var(--e-2);flex-wrap:wrap;justify-content:center;margin-top:var(--e-5)} .partida{ font-family:var(--fonte);font-size:13px;font-weight:500;color:var(--ink2); background:var(--paper);border:1px solid var(--line); border-radius:var(--r-pill);padding:8px 16px;cursor:pointer; } .partida:hover{border-color:var(--line2);color:var(--ink)} .partida[aria-expanded="true"]{background:var(--wash2);color:var(--ink);border-color:var(--line2)} /* painéis embutidos (Como funciona · Chave) — sem modal, sem custo */ .painel{ margin:var(--e-5) auto 0;max-width:520px;text-align:left; background:var(--paper);border:1px solid var(--line); border-radius:var(--r-lg);padding:var(--e-5); } .painel[hidden]{display:none} .etapas{margin:0;padding:0;list-style:none;display:grid;gap:var(--e-4)} .etapas li{display:grid;grid-template-columns:auto 1fr;gap:var(--e-3);align-items:baseline} .etapas b{font-size:11.5px;font-weight:700;color:var(--roxo-esc);font-variant-numeric:tabular-nums} .etapas strong{display:block;font-size:14px;font-weight:600;margin-bottom:1px} .etapas span{font-size:14px;color:var(--ink2)} .painel__pe{margin:var(--e-4) 0 0;padding-top:var(--e-4);border-top:1px solid var(--line);font-size:13px;color:var(--ink2)} .painel h2{margin:0 0 var(--e-2);font-size:16px;font-weight:600;letter-spacing:-.012em} /* ─── conta ─── */ /* Ocupa a página, como o resto do app. Em 560px a coluna ficava uma tirinha no meio de uma tela larga. */ .conta{max-width:900px;margin-inline:auto;padding:var(--e-7) var(--gutter) var(--e-6)} .conta[hidden]{display:none} .conta__voltar{ font-family:var(--fonte);font-size:13px;color:var(--ink2);background:none; border:0;padding:0;cursor:pointer;display:flex;align-items:center;gap:6px; margin-bottom:var(--e-5); } .conta__voltar:hover{color:var(--ink)} .conta__voltar svg{width:15px;height:15px} .conta__cabeca{display:flex;align-items:center;gap:var(--e-4);margin-bottom:var(--e-6)} .conta__foto{ width:52px;height:52px;flex:none;border-radius:14px;background:var(--preto);color:#fff; display:grid;place-items:center;font-size:17px;font-weight:600; background-size:cover;background-position:center; } .conta__nome{margin:5px 0 0;font-size:28px;font-weight:500;letter-spacing:-.03em;line-height:1.08} .conta__email{margin:7px 0 0;font-size:14px;color:var(--ink2);line-height:1.5;max-width:46ch} /* Caixa alta existe num lugar so no sistema: o eyebrow. */ .eyebrow{ margin:0;font-size:11px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--ink3); } .bloco{ background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--e-6);margin-bottom:var(--e-4); } .bloco h3{ margin:0 0 var(--e-3);font-size:11px;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:var(--ink3); } .linha{ display:flex;justify-content:space-between;align-items:baseline;gap:var(--e-4); padding:7px 0;border-bottom:1px solid var(--line);font-size:14px; } .linha:last-of-type{border-bottom:0;padding-bottom:0} .linha dt{color:var(--ink2);margin:0} .linha dd{margin:0;font-weight:500;text-align:right} /* Numero na mesma fonte das palavras. O monoespacado servia para alinhar a virgula, e `tabular-nums` da o mesmo alinhamento sem trocar de familia. */ .linha dd.num{font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:0} .linha dd.fraco{font-weight:400;color:var(--ink3)} /* Estado se diz uma vez: ponto mais palavra. A pilula colorida dizia a mesma coisa duas vezes e puxava o olho para o canto errado da tela. */ .sit{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500} .sit i{width:7px;height:7px;border-radius:50%;flex:none} .sit--ok{color:#2f6b3d} .sit--ok i{background:var(--ok)} .sit--falta{color:var(--alerta)} .sit--falta i{background:var(--alerta)} .acoes{display:flex;gap:var(--e-2);flex-wrap:wrap;margin-top:var(--e-4)} .btn{ font-family:var(--fonte);font-size:13px;font-weight:500; border:1px solid var(--line2);background:var(--paper);color:var(--ink); border-radius:var(--r-pill);padding:8px 16px;cursor:pointer; /* Inline-flex e nowrap para o rotulo nunca quebrar: duas linhas destroem a forma da pilula e mudam a altura do botao. */ display:inline-flex;align-items:center;justify-content:center;white-space:nowrap; } .btn:hover{background:var(--wash2)} a.btn{text-decoration:none} .btn--roxo{background:var(--roxo);border-color:var(--roxo);color:var(--sobre-roxo);font-weight:600} .btn--roxo:hover{background:var(--roxo-esc);border-color:var(--roxo-esc)} /* Destrutivo nao grita parado na tela: fica neutro e assume o vermelho quando a mao chega nele. */ .btn--perigo{color:var(--ink2);border-color:var(--line2)} .btn--perigo:hover{color:var(--alerta);border-color:var(--alerta);background:var(--paper)} /* Era uma caixa cinza. Caixa dentro de caixa achata a hierarquia — e uma nota explicativa nao e um alerta. Agora e texto quieto com um fio. */ .pendente{ font-size:13px;color:var(--ink2);line-height:1.55; border-left:1px solid var(--line2);padding:1px 0 1px var(--e-4); margin:var(--e-4) 0 0; } .btn--fraco{color:var(--ink2);border-color:var(--line)} /* ─── perfil: as medidas do perfil do cora-site ─── */ .linha-p{display:flex;align-items:center;gap:16px;margin-bottom:16px} .linha-p:last-child{margin-bottom:0} /* 14px, um degrau ABAIXO do valor que ele rotula (o input e 15px). Estava em 15 e empatava com o campo — rotulo do mesmo tamanho do conteudo inverte a hierarquia. Agora bate com as linhas de dado, que tambem sao 14. */ .lbl-p{width:110px;flex-shrink:0;font-size:14px;color:var(--ink2);font-weight:500} .input-p{ flex:1;min-width:0;padding:11px 18px;border:1.5px solid var(--line); border-radius:var(--r-pill);font-size:15px;background:var(--paper); color:var(--ink);font-family:var(--fonte); } .input-p:focus{outline:none;border-color:var(--roxo)} .input-p:disabled{background:var(--wash);color:var(--ink3);cursor:not-allowed} .input-p.mono{font-family:var(--mono);font-size:13.5px;letter-spacing:.01em} /* avatar: quadrado arredondado como o ícone do promptador, com a interação do cora-site — lápis por cima ao passar o mouse, x para remover. */ .foto-box{position:relative;width:72px;height:72px;flex-shrink:0} .foto{ width:72px;height:72px;border-radius:20px;background:var(--preto);color:#fff; display:flex;align-items:center;justify-content:center; font-weight:600;font-size:24px;background-size:cover;background-position:center; } .foto-editar{ position:absolute;inset:0;border-radius:20px;border:0;cursor:pointer; background:rgba(0,0,0,.45);color:#fff; display:flex;align-items:center;justify-content:center; opacity:0;transition:opacity .15s; } .foto-editar svg{width:22px;height:22px} .foto-box:hover .foto-editar,.foto-editar:focus-visible{opacity:1} .foto-x{ position:absolute;top:-5px;right:-5px;width:22px;height:22px;border-radius:50%; background:var(--preto);color:#fff;border:2px solid var(--paper);cursor:pointer; font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center; padding:0;opacity:0;transition:opacity .15s; } .foto-box:hover .foto-x,.foto-x:focus-visible{opacity:1} .foto-x:hover{background:#333} /* ─── passo a passo em dropdown ─── */ .campo-olho{position:relative;min-width:0;display:flex;flex:1} /* No bloco da chave o campo vem solto embaixo do cartao de conexao. */ #blocoChave .campo-olho{margin:var(--e-4) 0 0} .campo-olho .input-p{padding-right:46px;width:100%} .olho{ position:absolute;right:6px;top:50%;transform:translateY(-50%); width:32px;height:32px;border:0;border-radius:50%;background:none; color:var(--ink3);cursor:pointer;display:grid;place-items:center; } .olho:hover{background:var(--wash2);color:var(--ink)} .olho svg{width:18px;height:18px} .painel ol{margin:0 0 var(--e-4);padding-left:20px;color:var(--ink2);font-size:14px} .painel ol li{margin-bottom:4px} .painel a{color:var(--roxo-esc)} .campo-chave{ width:100%;font-family:var(--mono);font-size:13px;padding:10px 12px; border:1px solid var(--line2);border-radius:var(--r-sm); background:var(--wash);color:var(--ink); } .campo-chave:focus{outline:2px solid var(--roxo-esc);outline-offset:1px} /* ─── conversa ─── */ .thread{ max-width:720px;margin-inline:auto;padding:var(--e-6) var(--gutter) var(--e-2); display:flex;flex-direction:column;gap:var(--e-6); } /* Lados opostos, como em qualquer conversa: o promptador à esquerda, a pessoa à direita. O rótulo acompanha o lado do próprio bloco, senão ele aponta para o lugar errado. */ .msg{display:flex;flex-direction:column;gap:var(--e-2)} .msg--eu{align-items:flex-end;text-align:right} .quem{ font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase; color:var(--ink3);display:flex;align-items:center;gap:10px;flex-wrap:wrap; } .copiar{ font-family:var(--fonte);font-size:11px;font-weight:500;letter-spacing:0; text-transform:none;background:none;border:1px solid var(--line); color:var(--ink3);border-radius:var(--r-pill);padding:2px 10px;cursor:pointer; } .copiar:hover{color:var(--ink);border-color:var(--line2)} .msg--eu .corpo{ background:var(--bolha);border-radius:var(--r-md);padding:14px 18px; max-width:82%;text-align:left; } /* O promptador não ganha bolha nem barra: a resposta dele é longa, e caixa em volta de texto longo só estreita a linha. Quem diz de quem é o texto é o rótulo em cima. O filete roxo que existia aqui competia com a bolha nova. */ .msg--ele .corpo{padding:0} .corpo{font-size:16px;white-space:pre-wrap;overflow-wrap:anywhere} .corpo strong{font-weight:600} .print{width:150px;border-radius:var(--r-sm);border:1px solid var(--line2)} .pisca::after{ content:'';display:inline-block;width:7px;height:1.05em;background:var(--roxo-esc); vertical-align:-.16em;margin-left:3px;animation:pisca 1.1s steps(2,start) infinite; } @keyframes pisca{to{visibility:hidden}} .aviso{ border:1px solid var(--line);border-left:2px solid var(--alerta); border-radius:var(--r-md);padding:14px 18px;background:var(--paper); color:var(--ink2);font-size:14px; } .aviso b{color:var(--alerta);font-weight:600} .aviso.info{border-left-color:var(--roxo-esc)} .aviso.info b{color:var(--roxo-esc)} .aviso a{color:var(--ink);font-weight:600;text-underline-offset:3px} /* Marca de sistema na conversa. Ela conta o que aconteceu naquele ponto e fica no histórico; quem pede ação é a barra do compositor. */ .linha-sist{ display:flex;align-items:center;gap:var(--e-3); color:var(--ink3);font-size:12.5px; } .linha-sist::before,.linha-sist::after{content:'';flex:1;height:1px;background:var(--line)} .linha-sist .pt{width:6px;height:6px;border-radius:50%;background:var(--alerta);flex:none} .linha-sist a{color:var(--ink2);font-weight:600;text-underline-offset:3px} /* A barra do compositor. Mora onde a ação acontece, porque sem crédito não há ação nenhuma. Fica de pé enquanto o problema durar. */ .barra-saldo{ display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap; margin-bottom:var(--e-3); background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md); padding:12px 14px 12px 16px;font-size:13.5px;color:var(--ink2); } .barra-saldo b{color:var(--ink);font-weight:600} .barra-saldo .pt{width:7px;height:7px;border-radius:50%;background:var(--alerta);flex:none} .barra-saldo a{ margin-left:auto;background:var(--ink);color:var(--paper);text-decoration:none; font-size:13px;font-weight:600;padding:9px 16px;border-radius:var(--r-pill); } /* Escrever ainda funciona, enviar não. O campo apagado diz isso antes de a pessoa tentar. */ .caixa.travada{opacity:.55} /* O mesmo aviso, morando dentro de um bloco da conta. Ele nao e um alarme de um momento: fica de pe enquanto a OpenAI estiver recusando, e so sai quando uma resposta passa. Por isso repete o recado que ja apareceu na conversa, para quem chegou aqui dias depois sem ter visto aquele. */ .aviso-saldo{ margin-top:var(--e-4); border:1px solid var(--line);border-left:2px solid var(--alerta); border-radius:var(--r-md);padding:14px 18px;background:var(--wash); color:var(--ink2);font-size:13.5px;line-height:1.6; } .aviso-saldo b{display:block;color:var(--alerta);font-weight:600;margin-bottom:2px} .aviso-saldo a{color:var(--ink);font-weight:600;text-underline-offset:3px} /* ─── compositor ─── */ /* O compositor flutua por cima da conversa, e não numa faixa própria: assim o texto passa por trás dele em vez de parar numa borda. Ele sai do fluxo, e quem devolve o espaço é o `padding-bottom` do miolo, medido no JS porque a caixa cresce conforme a pessoa escreve. O degradê apaga o texto que passa, e o `pointer-events` deixa clicar no que está atrás da área vazia. */ /* O compositor flutua, e o texto passa por TRAS dele — como no ChatGPT. Aqui havia um degrade apagando a conversa antes do compositor, e o efeito era o contrario do pretendido: em vez de a linha sumir por baixo da pastilha, ela sumia no ar alguns pixels acima, e a conversa parecia terminar sem terminar. Sem fundo nenhum, a unica coisa opaca e a propria pastilha. O texto corre nas laterais dela e some no corte da tela, que e onde some no ChatGPT. */ .pe{ position:absolute;left:0;right:0;bottom:var(--h-pe-fixo,40px); padding:var(--e-6) var(--gutter) var(--e-5); pointer-events:none; } .pe > *{pointer-events:auto} .miolo{padding-bottom:var(--h-comp,0px)} .comp{max-width:720px;margin-inline:auto} .anexos{display:flex;gap:var(--e-2);align-items:center;margin-bottom:var(--e-2)} .anexo{position:relative;display:block} .anexo img{height:64px;border-radius:var(--r-sm);border:1px solid var(--line2);display:block} .anexo button{ position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%; border:1px solid var(--line2);background:var(--paper);color:var(--ink); font-size:13px;line-height:1;cursor:pointer;padding:0;display:grid;place-items:center; } /* `flex-end` e não `center`: com a caixa crescida até 40vh, botão centralizado fica boiando no meio de um retângulo alto. Encostados no pé eles seguem a última linha digitada. */ .caixa{ background:var(--paper);border:1px solid var(--line);border-radius:26px; padding:6px 6px 6px 8px;display:flex;align-items:flex-end;gap:var(--e-2); box-shadow:0 1px 2px rgba(0,0,0,.03); } /* Quem mostra o foco é a caixa inteira, não o textarea: um retângulo de contorno dentro de um campo arredondado fica torto. Sem halo colorido — só a borda escurece, discreto como o resto do sistema. */ .caixa:focus-within{border-color:var(--line2)} .campo:focus-visible{outline:none} .caixa.solta{border-color:var(--roxo-esc);border-style:dashed} .icone{ width:38px;height:38px;flex:none;border:0;border-radius:50%;background:none; color:var(--ink2);cursor:pointer;display:grid;place-items:center; } .icone:hover:not(:disabled){background:var(--wash2);color:var(--ink)} .icone:disabled{opacity:.4;cursor:not-allowed} /* Gravando: o botao fica preto e pulsa devagar. Vermelho aqui seria alarme, e nao e alarme nenhum, e so a fala entrando. */ .icone.gravando{background:var(--ink);color:var(--paper);animation:pulso 1.6s ease-in-out infinite} .icone.gravando:hover{background:var(--ink);color:var(--paper)} @keyframes pulso{0%,100%{opacity:1}50%{opacity:.62}} .icone svg{width:20px;height:20px} .campo{ flex:1;min-width:0;border:0;background:none;outline:none;resize:none; font-family:var(--fonte);font-size:15px;line-height:1.5;color:var(--ink); padding:10px 2px;max-height:40vh; } .campo::placeholder{color:var(--ink3)} .enviar{ width:38px;height:38px;flex:none;border:0;border-radius:50%; background:var(--roxo);color:var(--sobre-roxo);cursor:pointer; display:grid;place-items:center; } .enviar:disabled{opacity:.35;cursor:not-allowed} .enviar svg{width:19px;height:19px} /* A dica ganhou fundo proprio: sem o degrade, o texto da conversa passava por baixo dela e as duas leituras se misturavam. */ .rodape{ margin:var(--e-3) 0 0;text-align:center;font-size:12px;color:var(--ink3); background:var(--wash);border-radius:var(--r-pill); padding:3px 12px;width:fit-content;margin-inline:auto; } /* Rodape legal. Ocupa a quinta faixa da .coluna: quieto, sempre no mesmo lugar, sem rolar junto com a conversa. */ .pe-fixo{ flex:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:var(--e-1) var(--e-4);padding:10px var(--gutter) 12px; background:var(--wash);position:relative; font-size:11.5px;color:var(--ink3);line-height:1.4; } /* O fio de cima não atravessa a coluna inteira: ele para na mesma medida do compositor, 720px, que é a coluna de leitura desta tela. Correndo de ponta a ponta ele encostava na linha da barra lateral e as duas quase na mesma altura liam como erro. Recuado, ele fecha o rodapé sem competir com nada. */ .pe-fixo::before{ content:'';position:absolute;top:0;left:50%;transform:translateX(-50%); width:min(720px, calc(100% - var(--gutter) * 2)); height:1px;background:var(--line); } .pe-fixo a{color:var(--ink3);text-decoration:none} .pe-fixo a:hover{color:var(--ink2);text-decoration:underline;text-underline-offset:3px} .rodape b{font-weight:600;color:var(--ink2)} :where(button,select,textarea,input,a):focus-visible{outline:2px solid var(--roxo-esc);outline-offset:2px} @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}} /* Abaixo de 768 o cabecalho nao cabe com cinco numeros mais duas pilulas. Some o detalhamento; ficam mensagens e o custo, que e o que a pessoa olha. */ @media(max-width:768px){ .gaveta-med > dl{gap:var(--e-4)} .med-bt{padding:6px 10px 6px 12px} .cab__nome{font-size:14px;flex:1;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .cab__dir{gap:var(--e-3)} .lateral{width:min(300px,86vw)} .linha-p{flex-wrap:wrap;gap:var(--e-2)} .lbl-p{width:100%} .bloco{padding:var(--e-4) var(--e-4)} .conta__cabeca{gap:var(--e-3)} } @media(max-width:420px){ .med-bt b + *{display:none} /* fica so o valor na pilula */ .partidas{flex-direction:column;align-items:stretch} } /* ─── janela de recorte de imagem (recorte.js) ─── Vive no app.css porque as duas paginas usam: a foto do aluno e o avatar do promptador. */ .ov{ position:fixed;inset:0;background:rgba(17,17,17,.34);z-index:80; display:grid;place-items:center;padding:var(--gutter); } .janela{ background:var(--paper);border-radius:var(--r-lg);width:min(460px,100%); box-shadow:0 24px 60px rgba(0,0,0,.24);overflow:hidden; } .janela h3{margin:0;font-size:17px;font-weight:500;letter-spacing:-.02em;padding:20px 22px 0} .rec-corpo{padding:0 22px} .rec-sub{margin:7px 0 var(--e-5);font-size:13px;color:var(--ink2);line-height:1.5} .rec-palco{ width:300px;height:300px;margin:0 auto;overflow:hidden;background:var(--wash2); cursor:grab;border-radius:var(--r-md); } .rec-palco--redondo{border-radius:50%} .rec-palco--pegando{cursor:grabbing} .rec-tela{display:block;width:300px;height:300px;pointer-events:none} .rec-zoom{display:flex;align-items:center;gap:var(--e-3);margin:var(--e-5) 0 var(--e-4)} .rec-zoom__ico{font-size:16px;color:var(--ink3);width:14px;text-align:center;line-height:1} .rec-zoom input[type=range]{ flex:1;appearance:none;height:4px;border-radius:2px;background:var(--line);outline:none; } .rec-zoom input[type=range]::-webkit-slider-thumb{ appearance:none;width:16px;height:16px;border-radius:50%;background:var(--roxo-esc); cursor:pointer;border:0; } .rec-zoom input[type=range]::-moz-range-thumb{ width:16px;height:16px;border-radius:50%;background:var(--roxo-esc);cursor:pointer;border:0; } .rec-pe{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-2) 22px 20px} .rec-pe__dir{margin-left:auto;display:flex;gap:var(--e-2)} .acao-txt{ background:none;border:0;padding:0;cursor:pointer;font-family:var(--fonte); font-size:13px;font-weight:500;color:var(--ink2); text-decoration:underline;text-underline-offset:3px; } .acao-txt:hover{color:var(--ink)} /* ─── a chave como conexão (Minha conta) ─── */ .conexao{display:flex;align-items:center;gap:var(--e-4)} .conexao__ico{ width:44px;height:44px;border-radius:12px;flex:none;background:var(--wash2); display:grid;place-items:center;color:var(--ink); } .conexao__ico svg{width:20px;height:20px} /* O desenho da chave e sempre preto: quem diz o estado e o texto ao lado. */ .conexao__txt{flex:1;min-width:0} .conexao__nome{display:block;font-size:15px;font-weight:500;letter-spacing:-.012em} .conexao__sub{display:block;font-size:12.5px;color:var(--ink2);margin-top:2px} .passos{ margin:var(--e-3) 0 0;padding:0 0 0 20px;font-size:13px;color:var(--ink2); line-height:1.6; } .passos li{margin-bottom:5px} .passos li::marker{color:var(--ink3);font-size:11px} .passos a{color:var(--roxo-esc)} /* Link dentro de uma linha de dado e informacao, nao acao: herda o cinza do proprio valor em vez do azul de fabrica do navegador. */ .bloco dd a{color:var(--ink2);text-underline-offset:3px} .bloco dd a:hover{color:var(--ink)} .passos b{font-weight:500;color:var(--ink)} .recado{font-size:13px;color:var(--ink2)} .recado.erro{color:var(--alerta)} .recado.ok{color:#2f6b3d} /* ─── dropdown do sistema (dropdown.js) ─── O