@font-face {
    font-family: roboto;
    src: url("roboto-regular.woff2") format("woff2")
}

@font-face {
    font-family: roboto-slab;
    src: url("roboto-slab-regular.woff2") format("woff2")
}

:root {
    --l: 36%;
    --cor-primaria: hsl(284, 91%, var(--l));
    --cor-primaria-fraca: hsla(284, 91%, var(--l), 0.2);
    --cor-primaria-opaca: hsla(284, 91%, var(--l), 0.1);
    --cor-cinza: rgba(0, 0, 0, .04);
    --cor-separador: rgba(0, 0, 0, .08);
    --cor-bg: #fff;
    --cor-fonte: #000;
    --cor-fonte-fraca: rgba(0, 0, 0, .56);
    --cor-erro: #6b1414;
    --margem: 24px;
    --tam-titulo: 16px;
    --persona: calc(var(--margem)*2 + 32px)
}

@media(prefers-color-scheme: dark) {
    :root {
        --l: 66%;
        --cor-cinza: rgba(255, 255, 255, .04);
        --cor-separador: rgba(255, 255, 255, .08);
        --cor-bg: #101010;
        --cor-fonte: #fff;
        --cor-fonte-fraca: rgba(255, 255, 255, .56);
        --cor-erro: #6b1414
    }
}

html {
    scroll-behavior: smooth
}

* {
    margin: 0
}

body,
input,
textarea,
select,
button {
    font: 16px/1.625 roboto, sans-serif;
    background: var(--cor-bg);
    color: var(--cor-fonte)
}

body {
    display: flex;
    height: 100vh
}

.logo-destaque:before {
    content: "";
    background: url(../img/deep.svg) 0 center/auto 100% no-repeat;
    display: block;
    width: 44px;
    height: 40px;
    margin: 0 auto var(--margem)
}

aside {
    flex: 0 0 220px;
    background: linear-gradient(var(--cor-cinza), var(--cor-cinza)) var(--cor-bg);
    position: relative;
    transition: margin .12s ease-in-out;
    display: flex;
    flex-direction: column;
    height: 100vh;
    z-index: 2;
    width: 220px
}

aside footer a:hover {
    text-decoration: underline
}

.historico {
    flex: 1;
    overflow: auto
}

.historico .icone-excluir {
    position: absolute;
    right: var(--margem);
    margin-top: -44px;
    opacity: 0
}

.hist-conversa .historico .icone-excluir {
    margin-top: -38px;
    right: calc(var(--margem)/2 + 2px)
}

.hist-conversa .historico .icone-excluir:not(:hover) {
    background-color: var(--cor-bg)
}

.hist-conversa .historico .icone-excluir:before {
    margin: 6px
}

.historico .reflection:hover+.icone-excluir,
.historico .item:hover+.icone-excluir,
.historico .icone-excluir:hover {
    opacity: 1 !important
}

.historico figcaption {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

progress {
    appearance: none;
    height: 6px;
    width: 100%;
    border-radius: 3px;
    overflow: hidden;
    display: block;
    margin-top: calc(var(--margem)/4)
}

progress::-webkit-progress-bar {
    background-color: var(--cor-separador);
    border-radius: 3px
}

progress::-webkit-progress-value {
    background-color: var(--cor-primaria);
    border-radius: 3px
}

.iniciais {
    font-family: monospace;
    width: 2ch;
    overflow: hidden;
    white-space: nowrap;
    margin: auto
}

.corte {
    height: 428px;
    overflow: hidden
}

.corte .more {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, var(--cor-bg) 50%);
    padding-top: calc(var(--margem)*1.5)
}

.more .botao:before {
    content: "Less"
}

.corte .more .botao:before {
    content: "More"
}

.corpo {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    flex: 1
}

.corpo:has(.hist-conversa:not(.contrai)) {
    margin-right: 300px
}

.intro {
    display: flex;
    align-items: center;
    justify-content: center
}

.intro:before,
.intro:after {
    content: "";
    background: url(../img/favicon.svg) center center/cover no-repeat;
    background: linear-gradient(-61.2deg, transparent calc(50% + 194px), var(--cor-cinza) calc(50% + 194px), transparent) no-repeat;
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    pointer-events: none
}

.intro:after {
    background: linear-gradient(61.2deg, transparent calc(50% - 20px), var(--cor-cinza) calc(50% - 20px), transparent) no-repeat;
    opacity: .5
}

input[type=text],
textarea,
select,
.prompt-input {
    border: 1px solid var(--cor-cinza);
    border-radius: 6px
}

.prompt-input {
    box-shadow: -16px 16px 32px var(--cor-cinza)
}

input[type=text],
textarea,
select {
    background-color: var(--cor-cinza);
    padding: 10px calc(var(--margem)/2);
    box-sizing: border-box;
    width: 100%;
    display: block;
    line-height: 26px
}

.form-group+.form-group,
li+li {
    margin-top: calc(var(--margem)/2)
}

[type=checkbox] {
    height: 20px;
    vertical-align: text-top;
    width: 20px;
    margin: 2px 10px 2px 0;
    float: left;
    accent-color: var(--cor-primaria)
}

.agrupar [type=checkbox] {
    margin: 10px
}

.m-contador {
    margin-right: calc(var(--margem)*-1)
}

select {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='5'%3E%3Cpath d='M0 0h10L5 5z' fill='rgba(255,255,255,0.85)'/%3E%3C/svg%3E") right 10px center no-repeat var(--cor-bg);
    appearance: none;
    padding-right: 32px;
    height: 48px
}

textarea {
    height: 334px
}

textarea.fonte-media {
    height: 262px
}

textarea.textarea-p {
    height: 126px
}

.alt-2 {
    height: 74px
}

.alt-2.fonte-media {
    height: 62px
}

.direita {
    float: right
}

.container,
nav a,
.rel,
.corpo {
    position: relative
}

.link {
    color: var(--cor-fonte);
    text-decoration: underline
}

.container {
    box-sizing: border-box;
    margin: auto;
    max-width: 1152px;
    padding: calc(var(--margem)*2) var(--margem)
}

.container+.container {
    padding-top: 0
}

.container.tam-g {
    max-width: 1324px
}

.container.tam-gg {
    max-width: 1400px
}

.alt-g {
    padding: calc(var(--margem)*4) var(--margem)
}

.tam-logo {
    width: calc(var(--margem)*10)
}

.logo {
    color: rgba(0, 0, 0, 0);
    width: 112px;
    height: 40px;
    float: left;
    background: url(../img/deep-horizontal.svg) center center/auto 100% no-repeat;
    transition: width .15s ease-in-out, height .15s ease-in-out, background-position .15s ease-in-out;
    margin-left: -2px;
    position: relative
}

.logo:before {
    content: "Studio";
    position: absolute;
    background: var(--cor-fonte);
    color: var(--cor-bg);
    padding-left: 8px;
    width: 56px;
    font-weight: 700;
    margin: 26px 0 0 48px;
    font-size: 12px;
    line-height: 14px
}

.logo:after {
    content: "";
    position: absolute;
    border: 7px solid;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) var(--cor-bg) var(--cor-bg);
    bottom: 0;
    right: 0
}

.abs {
    position: absolute
}

.abs.direita {
    right: 0
}

.abs.bloco.direita {
    top: 0
}

header {
    padding: var(--margem);
    display: flex;
    justify-content: space-between
}

.ajuda {
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--cor-fonte-fraca) inset;
    text-align: center;
    width: 24px;
    position: absolute;
    line-height: 24px;
    left: -24px
}

.ajuda:hover {
    text-decoration: none
}

.ajuda:not(:hover) {
    opacity: .56
}

.aviso {
    margin-top: var(--margem)
}

footer {
    transition: flex .2s ease-in-out;
    bottom: 0
}

footer:not(.inicial) .container {
    padding: var(--margem)
}

footer.inicial {
    flex: 1.5
}

footer a {
    color: var(--cor-fonte)
}

.tam-100 {
    display: block;
    width: 100%
}

.block {
    display: block
}

.m-auto {
    margin: auto
}

.bg-cinza {
    background: var(--cor-cinza);
    bbackground-image: url(../img/etapas.svg);
    bbackground-size: auto 33.333%
}

.avatar {
    width: calc(var(--persona) + 16px);
    position: relative
}

.avatar img {
    width: var(--persona);
    height: var(--persona);
    display: block;
    border-radius: 50%;
    transition: filter .15s ease-in-out;
    background-color: var(--cor-bg);
    border: 4px solid var(--cor-fonte);
    padding: 4px
}

.avatar img.pointer:hover {
    box-shadow: 0 0 0 2px var(--cor-fonte)
}

.avatar [class^=icone-],
.avatar.verified:before {
    position: absolute;
    bottom: 14px;
    right: -8px;
    transition: opacity .15s ease-in-out;
    z-index: 2
}

.avatar.verified:before {
    content: "";
    border-radius: 50%;
    width: 32px;
    height: 32px;
    bottom: 16px;
    right: -4px;
    background: url(../img/icons.svg) center -408px no-repeat var(--cor-primaria)
}

.avatar.expressao {
    width: 80px;
    height: 80px;
    background: url(../img/deep-gif-light.gif) center center/80px no-repeat var(--cor-bg);
    border: 4px solid var(--cor-fonte);
    padding: 4px;
    border-radius: 50%
}

.avatar-fusion {
    margin-left: calc(var(--margem)*-2)
}

.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--cor-primaria-fraca);
    flex: 0 0 40px
}

.avatar-circle.direita {
    margin: 3px 0 0 calc(var(--margem)*.25)
}

.avatar-mini {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cor-primaria-fraca);
    flex: 0 0 32px
}

.hover:hover {
    background-color: var(--cor-primaria-opaca)
}

.reflection {
    display: block;
    border-radius: 24px;
    padding: 4px var(--margem) 4px 4px;
    margin: 0 -4px;
    transition: background-color .1s ease-in-out
}

.reflection.ativa {
    background-color: var(--cor-separador)
}

.reflection:hover {
    background-color: var(--cor-primaria-opaca)
}

.reflection:hover img,
.reflection:hover .avatar-circle {
    box-shadow: 0 0 0 2px var(--cor-bg), 0 0 0 4px var(--cor-fonte)
}

.reflection img {
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 50%;
    transition: filter .15s ease-in-out;
    background-color: var(--cor-bg)
}

.reflection figure {
    display: flex;
    align-items: center;
    gap: 10px
}

.reflection figcaption {
    font-size: 14px;
    line-height: 20px;
    flex: 1
}

.reflection img,
.reflection .avatar-circle {
    transition: box-shadow .1s ease-in-out
}

.nome {
    position: absolute;
    bottom: 0;
    right: 6px;
    left: 6px;
    background: var(--cor-bg);
    padding: 2px 8px;
    line-height: 20px;
    text-align: center
}

.nome:before,
.nome:after {
    content: "";
    border: 12px solid rgba(0, 0, 0, 0);
    top: 0
}

.nome:before {
    border-right-color: var(--cor-bg);
    position: absolute;
    left: -24px;
    width: 0
}

.nome:after {
    border-left-color: var(--cor-bg);
    position: absolute;
    right: -24px;
    width: 0
}

.ativa .nome {
    background: var(--cor-fonte);
    color: var(--cor-bg)
}

.ativa .nome:before {
    border-right-color: var(--cor-fonte)
}

.ativa .nome:after {
    border-left-color: var(--cor-fonte)
}

.ilust-1 {
    width: calc(var(--margem)*12);
    margin: calc(var(--margem)*-12) calc(var(--margem)*2) calc(var(--margem)*1) 0
}

.ilust-2 {
    height: calc(var(--margem)*5)
}

.ilust-3 {
    height: calc(var(--margem)*4)
}

.bloco.bg-invert,
.reflection.bg-invert {
    background-color: var(--cor-fonte);
    color: var(--cor-bg)
}

.bloco.bg-invert:before,
.reflection.bg-invert:before {
    filter: invert(1)
}

.bloco {
    box-shadow: 0 0 0 1px var(--cor-cinza) inset;
    border-radius: calc(var(--margem)/2)
}

.bloco-link {
    transition: box-shadow .12s ease-in-out
}

.bloco-link:hover {
    box-shadow: 0 0 0 1px var(--cor-cinza) inset, 0 0 0 2px var(--cor-bg), 0 0 0 4px var(--cor-fonte-fraca)
}

.hero {
    background: url(../img/hero.svg) 0 0 no-repeat, url(../img/deep.svg) right center/auto 100% no-repeat, linear-gradient(80deg, var(--cor-primaria), var(--cor-fonte));
    height: 168px
}

.brain {
    background: url(../img/hero.svg) 0 0 no-repeat, url(../img/deep.svg) right center/auto 100% no-repeat, linear-gradient(80deg, var(--cor-fonte-fraca) -50%, var(--cor-fonte));
    min-height: calc(var(--margem)*5.5)
}

.headline {
    background: url(../img/favicon.svg) left center/auto 150% no-repeat, linear-gradient(80deg, var(--cor-primaria), var(--cor-fonte) 120%);
    color: var(--cor-bg)
}

.money {
    background: url(../img/money.svg) center center no-repeat, url(../img/deep.svg) right center/auto 150% no-repeat, linear-gradient(80deg, var(--cor-primaria), var(--cor-fonte));
    height: 134px
}

.pergunta {
    background: var(--cor-cinza);
    padding: 10px 16px;
    border-radius: 23px
}

.pergunta .icone-excluir {
    position: absolute;
    right: 0;
    opacity: 0;
    margin: -7px calc(var(--margem) + 3px);
    background: linear-gradient(var(--cor-cinza), var(--cor-cinza)) var(--cor-bg)
}

.pergunta:hover .icone-excluir {
    opacity: 1
}

a.pergunta:hover {
    background: var(--cor-primaria-fraca)
}

.wizard a {
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    padding: 8px var(--margem);
    box-shadow: 0 0 0 2px var(--cor-separador) inset
}

.wizard a:hover {
    box-shadow: 0 0 0 2px var(--cor-fonte-fraca) inset
}

.wizard a.ativo {
    background: var(--cor-fonte);
    color: var(--cor-bg)
}

.resposta {
    padding-left: 40px
}

.resposta:before {
    content: "";
    background: url(../img/favicon.svg) center center no-repeat;
    box-shadow: 0 0 0 1px var(--cor-separador) inset;
    width: 24px;
    height: 24px;
    position: absolute;
    margin: 1px 0 0 -40px;
    border-radius: 4px
}

nav {
    display: flex;
    gap: 6px
}

nav .login {
    border-radius: 20px;
    float: left;
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
    padding: 8px 0;
    padding: 8px 24px;
    box-shadow: 0 0 0 2px var(--cor-fonte-fraca) inset
}

nav .login:not(.entrar) {
    padding: 8px 0;
    width: 40px
}

nav .login:after {
    content: none
}

nav .login:hover {
    background-color: var(--cor-fonte);
    color: var(--cor-bg)
}

nav .login:active {
    opacity: .9
}

nav .login.ativo {
    background-color: var(--cor-primaria);
    color: var(--cor-bg);
    box-shadow: none
}

nav .fixed {
    right: var(--margem)
}

.google-btn-wrapper {
    position: fixed;
    top: var(--margem);
    right: var(--margem);
    z-index: 99
}

.botao,
button {
    background: var(--cor-fonte);
    color: var(--cor-bg);
    display: inline-block;
    font-weight: 700;
    padding: 13px calc(var(--margem)*1.5);
    border-radius: 26px;
    position: relative;
    transition: background-color .12s ease-in-out
}

.botao:hover,
button:hover {
    background: var(--cor-primaria)
}

.botao:active,
button:active {
    opacity: .9
}

.botao.block,
button.block {
    display: block !important
}

.botao.bloco-link,
button.bloco-link {
    border-radius: 33px
}

button {
    border: 0;
    cursor: pointer
}

.b-cancel {
    background-color: var(--cor-separador);
    color: var(--cor-fonte)
}

.b-cancel:hover {
    background: var(--cor-cinza)
}

.m-exp {
    margin-top: calc(var(--margem)*-0.5);
    border-radius: calc(var(--margem)/2);
    padding: 11px
}

.prompt {
    background: var(--cor-bg);
    border-radius: 30px;
    box-shadow: -16px 16px 32px var(--cor-cinza), 0 0 0 1px var(--cor-separador)
}

.prompt-mini {
    box-shadow: none
}

.prompt-mini input.prompt-chat {
    padding: 13px
}

.prompt-mini [class^=icone-]:before {
    margin: 4px
}

.prompt-mini .icone-seta {
    margin-right: 10px
}

.prompt-mini .avatar-mini {
    margin-left: 10px
}

.comentario .avatar-mini {
    margin: 0 10px
}

.comentario .fonte-menor {
    padding: 8px 3px
}

.flex-1 {
    flex: 1
}

input[type=search],
input[type=text].prompt-gerar {
    background: url(../img/icons.svg) 22px -442px var(--cor-cinza) no-repeat;
    border: 0;
    padding: calc(var(--margem)/2 + 5px) 16px calc(var(--margem)/2 + 5px) 56px;
    width: 100%;
    outline: none;
    border-radius: 30px;
    box-shadow: 0 0 0 1px var(--cor-cinza) inset
}

input[type=search]::-webkit-search-cancel-button,
input[type=text].prompt-gerar::-webkit-search-cancel-button {
    appearance: none;
    height: 24px;
    width: 24px;
    background: url(../img/icons.svg) 0 -216px no-repeat;
    border-radius: 50%
}

input[type=search]::-webkit-search-cancel-button:hover,
input[type=text].prompt-gerar::-webkit-search-cancel-button:hover {
    background-color: var(--cor-primaria-fraca)
}

input[type=search]:focus,
input[type=text].prompt-gerar:focus {
    box-shadow: 0 0 0 1px var(--cor-separador) inset
}

input[type=text].prompt-gerar {
    background-image: url(../img/brand-zapier.svg);
    background-position-y: center
}

.prompt-chat {
    padding: calc(var(--margem)/2 + 5px) var(--margem);
    position: relative;
    min-height: 26px;
    flex: 1;
    outline: none
}

input.prompt-chat {
    border-radius: 30px;
    border: none;
    padding: 17px
}

.doc,
.tag {
    display: flex;
    flex-wrap: wrap
}

.tag {
    gap: 2px
}

.tag a,
.tag .tag-item {
    padding: 2px calc(var(--margem)/2 + 2px);
    border-radius: 15px
}

.tag a:not(.ativo):hover {
    background-color: var(--cor-cinza)
}

.tag .ativo {
    background-color: var(--cor-fonte);
    color: var(--cor-bg)
}

.tag a[class^=icone-] {
    border-radius: 22px
}

.tag a[class^=icone-]:not(:empty):before {
    margin-left: 0
}

.tag .m-titulo {
    margin: 2px 6px
}

.doc a:not([class^=icone-]) {
    padding: 2px calc(var(--margem)/2);
    border-radius: 15px
}

.doc a:not([class^=icone-]):hover {
    background-color: var(--cor-cinza)
}

.doc [class^=icone-] {
    margin: -8px 0
}

.doc .agrupar {
    margin-left: var(--margem)
}

.pag {
    width: 24px;
    height: 6px;
    display: block;
    margin: 12px 0;
    border-radius: 3px
}

.modal {
    position: absolute;
    background: var(--cor-bg);
    box-shadow: 0 0 0 1px var(--cor-separador), 0 0 0 1px var(--cor-separador), 2px 2px 8px rgba(0, 0, 0, .1);
    border-radius: 8px;
    padding: calc(var(--margem)/2);
    margin: calc(var(--margem)*-0.25);
    border-radius: 8px;
    animation: m .12s linear;
    bottom: 36px
}

.modal a {
    display: block;
    float: none;
    padding: calc(var(--margem)/4) var(--margem)
}

.modal.fixed {
    top: calc(var(--margem) + 48px);
    right: var(--margem);
    bottom: auto;
    margin: 0
}

header .modal {
    bottom: auto;
    top: 88px;
    width: calc(100% - var(--margem)*2);
    z-index: 3;
    left: calc(var(--margem)*.75)
}

hr {
    border: solid var(--cor-separador);
    border-width: 1px 0 0;
    margin: var(--margem) 0
}

.modal hr,
hr.hr-p {
    margin: calc(var(--margem)/2) 0
}

hr.hr-m {
    margin: calc(var(--margem)*.75) 0
}

.modal-g {
    left: 0;
    right: 0;
    padding: var(--margem)
}

.contador {
    padding: 0 6px;
    line-height: 20px;
    font-size: 13px;
    border-radius: 10px;
    min-width: 8px;
    text-align: center;
    right: -8px;
    top: -2px;
    box-shadow: 0 0 0 2px
}

.dot {
    float: right;
    height: 12px;
    padding: 0;
    width: 12px;
    box-shadow: none
}

.barra {
    flex-wrap: wrap
}

.margem {
    padding: var(--margem)
}

.margem2 {
    padding: calc(var(--margem)/2)
}

ul,
ol {
    padding: 0 0 0 24px
}

[class^=social-] {
    display: block;
    transition: background-color .12s ease-in-out, opacity .12s ease-in-out
}

[class^=social-]:before {
    content: "";
    background: url(../img/social.svg) no-repeat;
    margin: 3px 12px 0 0;
    width: 20px;
    height: 20px;
    float: left
}

.social-facebook:before {
    background-position-y: -40px
}

.social-youtube:before {
    background-position-y: -80px
}

.social-x:before {
    background-position-y: -120px
}

.social-google:before {
    background-position-y: -160px
}

[class^=icone-] {
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: background-color .12s ease-in-out, opacity .12s ease-in-out;
    width: fit-content
}

[class^=icone-].bg-invert {
    background-color: var(--cor-fonte)
}

[class^=icone-].bg-invert:before {
    filter: invert(1)
}

[class^=icone-]:before {
    content: "";
    margin: 8px;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: url(../img/icons.svg) center 0 no-repeat
}

.item [class^=icone-]:before {
    margin: -4px 10px -4px 0
}

[class^=icone-].tam-g {
    width: 160px;
    height: 160px;
    border-radius: 50%
}

[class^=icone-].pb:before {
    filter: grayscale(1) brightness(0)
}

.menu [class^=icone-]:before {
    margin: 6px 0 6px 10px
}

.menu .reflection:not(.ativa) [class^=icone-]:before {
    opacity: .56
}

.item [class^=icone-].tag-ex {
    margin: 0;
    float: right;
    filter: invert(1)
}

.item [class^=icone-].tag-ex:before {
    margin: 1px -10px 0 6px
}

.menu .reflection:not(.ativa) figcaption {
    color: var(--cor-fonte-fraca)
}

.menu .reflection:not(.ativa) [class^=icone-]:before {
    opacity: .56
}

@media(prefers-color-scheme: dark) {
    [class^=icone-].pb:before {
        filter: grayscale(1) brightness(10)
    }

    .avatar.expressao {
        background-image: url(../img/deep-gif-dark.gif)
    }
}

a[class^=icone-].bg-invert:hover {
    background-color: var(--cor-primaria)
}

a[class^=icone-]:hover {
    background: linear-gradient(var(--cor-primaria-fraca), var(--cor-primaria-fraca)) var(--cor-bg)
}

a[class^=icone-]:active {
    opacity: .9
}

a[class^=icone-].ativo {
    background-color: var(--cor-primaria) !important
}

a[class^=icone-].ativo:before {
    filter: invert(1)
}

.icone-instagram:before {
    background: url(../img/social.svg) 2px 2px no-repeat
}

.icone-facebook:before {
    background: url(../img/social.svg) 2px -38px no-repeat
}

.icone-youtube:before {
    background: url(../img/social.svg) 2px -78px no-repeat
}

.icone-x:before {
    background: url(../img/social.svg) 2px -118px no-repeat
}

.icone-google:before {
    background: url(../img/social.svg) 2px -158px no-repeat
}

.icone-linkedin:before {
    background: url(../img/social.svg) 2px -198px no-repeat
}

main {
    flex: 1;
    overflow: auto
}

.m-video {
    max-width: 352px;
    margin: auto
}

.icone-seta,
.m-d-prompt {
    margin-right: calc(var(--margem)/2 - 2px)
}

.m-e-prompt {
    margin-left: calc(var(--margem)/2 - 2px)
}

.icone-voltar:before {
    background-image: url(../img/seta.svg);
    transform: rotate(-90deg)
}

.link-expande:hover .icone-expande {
    background-color: var(--cor-primaria-fraca)
}

.icone-expande:before {
    transition: transform .12s ease-in-out
}

.icone-notif:before {
    background-position-y: -24px
}

.icone-dock:before {
    background-position-y: -48px
}

.icone-seta:before,
.icone-next:before,
.icone-back:before,
.icone-down:before {
    background-position-y: -72px
}

.icone-back {
    top: var(--margem);
    left: var(--margem);
    z-index: 2;
    background-color: var(--cor-bg)
}

.icone-back:before {
    transform: rotate(-90deg)
}

.icone-next:before {
    transform: rotate(90deg)
}

.icone-down:before {
    transform: rotate(180deg)
}

.icone-doc:before {
    background-position-y: -96px
}

.icone-contrai:before,
.icone-expande:before {
    background-position-y: -120px
}

.icone-expande:before {
    transform: rotate(180deg)
}

details[open] .icone-expande:before {
    transform: rotate(270deg)
}

.icone-compart:before {
    background-position-y: -558px
}

.icone-editar:before {
    background: url(../img/edit.svg) center center
}

.icone-link:before {
    background: url(../img/link.svg) center center
}

.icone-info:before {
    background-position-y: -168px
}

.icone-anexo:before {
    background-position-y: -192px
}

.icone-excluir:before {
    background-position-y: -216px
}

.icone-more:before {
    background-position-y: -240px
}

.icone-foto:before {
    background-position-y: -264px
}

.icone-logout:before {
    background-position-y: -288px
}

.icone-copy:before {
    background-position-y: -312px
}

.icone-estrela:before {
    background-position-y: -336px
}

.icone-mais:before {
    background-position-y: -384px
}

.icone-live {
    margin-right: calc(var(--margem)*-0.5)
}

.icone-live:before {
    background-position-y: -510px
}

.icone-like:before {
    background-position-y: -534px
}

.icone-compart:before {
    background-position-y: -558px
}

.icone-dashboard:before {
    background: url(../img/layout-dashboard.svg) center center
}

.icone-favorito:before {
    background: url(../img/heart.svg) center center
}

.icone-favorito-ativo:before {
    background: url(../img/heart-at.svg) center center
}

.icone-videos:before {
    background: url(../img/device-tv.svg) center center
}

.icone-otimizar:before {
    background: url(../img/sparkles.svg) center center
}

.icone-premium:before {
    background: url(../img/diamond.svg) center center
}

.icone-comentarios:before {
    background: url(../img/messages.svg) center center
}

@media(prefers-color-scheme: dark) {
    .icone-comentarios:before {
        background: url(../img/messages-dark.svg) center center
    }
}

.icone-gerar:before {
    background: url(../img/brand-zapier.svg) center center
}

.icone-traduzir:before {
    background: url(../img/language.svg) center center
}

.icone-agendar:before {
    background: url(../img/calendar-clock.svg) center center
}

.icone-som:before {
    background: url(../img/device-speaker.svg) center center
}

.icone-ok {
    background: #348337
}

.icone-ok:before {
    background: url(../img/check.svg) center center
}

.icone-fechar {
    background: #d14238
}

.icone-fechar:before {
    background: url(../img/x.svg) center center
}

.icone-enviar {
    background: #348337
}

.icone-enviar:before {
    background: url(../img/send.svg) center center
}

.icone-tempo:before {
    background: url(../img/clock-hour-4.svg) center center
}

.icone-ebook:before {
    background: url(../img/book.svg) center center
}

.icone-expression:before {
    background: url(../img/notebook.svg) center center
}

.icone-microfone:before {
    background: url(../img/microphone.svg) center center
}

.icone-trend-up:before {
    background: url(../img/trending-up.svg) center center
}

.icone-trend-down:before {
    background: url(../img/trending-down.svg) center center
}

.icone-config:before {
    background: url(../img/settings.svg) center center
}

.icone-post:before {
    background: url(../img/browser-share.svg) center center
}

.icone-pdf:before {
    background: url(../img/file-type-pdf.svg) center center
}

.icone-copiar:before {
    background: url(../img/copy.svg) center center
}

.icone-check:before {
    background: url(../img/square.svg) center center
}

.icone-check-marcado:before {
    background: url(../img/square-check.svg) center center
}

.icone-inc-agente:before {
    background: url(../img/browser-plus.svg) center center
}

.icone-remover:before {
    background: url(../img/trash.svg) center center
}

.icone-vi:before {
    background: url(../img/eye.svg) center center
}

.icone-nao-vi:before {
    background: url(../img/eye-off.svg) center center
}

.icone-loader:before {
    background: url(../img/loader.svg) center center;
    animation: c 1.5s linear infinite
}

.icone-obter:before {
    background: url(../img/cloud-down.svg) center center
}

.icone-atualizar:before {
    background: url(../img/refresh.svg) center center
}

.icone-notificacao:before {
    background: url(../img/notification.svg) center center
}

.icone-palavras:before {
    background: url(../img/playlist-add.svg) center center
}

.icone-thumbnail:before {
    background: url(../img/photo.svg) center center
}

.icone-ideias:before {
    background: url(../img/bulb.svg) center center
}

.icone-assistente:before {
    background: url(../img/message-circle-share.svg) center center
}

.icone-similares:before {
    background: url(../img/congruent-to.svg) center center
}

.icone-agentes:before {
    background: url(../img/world-search.svg) center center
}

.icone-upload:before {
    background: url(../img/upload.svg) center center
}

.icone-download:before {
    background: url(../img/download.svg) center center
}

.pos-loader {
    top: 0;
    left: 0;
    right: 0
}

.pos-sel-all {
    margin: -8px 0
}

.quebra-palavra {
    word-break: break-all
}

.icone-dock.abs,
.icone-dock.fixed {
    top: var(--margem);
    right: var(--margem);
    z-index: 1
}

.m-icone {
    margin: -8px
}

.icone-info.fonte-fraca {
    padding-left: 34px;
    display: block
}

.icone-info.fonte-fraca:before {
    position: absolute;
    margin: 1px 0 0 -34px
}

.icone-anexo {
    margin-right: 10px
}

[class^=grid-],
[class*=" grid-"] {
    display: grid;
    gap: calc(var(--margem)*2);
    grid-template-columns: repeat(1, 1fr)
}

.gap-p {
    gap: calc(var(--margem)*.25)
}

.gap-pm {
    gap: calc(var(--margem)/2)
}

.gap-m {
    gap: var(--margem)
}

.gap-g {
    gap: calc(var(--margem)*4)
}

.bg {
    background: var(--cor-bg)
}

.flut,
.fixed {
    position: fixed
}

.flut {
    background: linear-gradient(transparent, var(--cor-bg) calc(var(--margem) * 0.75));
    padding: var(--margem) 0 calc(var(--margem)*.25);
    bottom: 40px;
    width: 792px;
    left: calc(50% - 396px);
    z-index: 9
}

@keyframes m {
    0% {
        margin-top: 0;
        opacity: 0
    }
}

@keyframes c {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(360deg)
    }
}

.item {
    padding: 11px var(--margem);
    border-radius: calc(var(--margem)/2);
    display: block
}

.item.separador:not(:last-child) {
    box-shadow: 0 -1px var(--cor-separador) inset;
    border-radius: calc(var(--margem)/2) calc(var(--margem)/2) 0 0
}

a.item {
    transition: background-color .2s ease-in-out
}

a.item:hover {
    box-shadow: 0 0 0 1px var(--cor-primaria-fraca) inset
}

.flex {
    display: flex
}

.flex .grid {
    flex: 0 0 100%
}

.flex.alinha-direita {
    justify-content: end
}

a {
    color: var(--cor-fonte);
    text-decoration: none
}

h1,
h2,
h3,
h4,
h5,
summary {
    font-family: roboto-slab, sans-serif
}

.lead {
    font-size: calc(var(--margem)*1);
    margin-bottom: var(--margem)
}

h1 {
    font-size: calc(var(--margem)*2);
    line-height: 1.25
}

h1:not(:last-child) {
    margin-bottom: var(--margem)
}

h2 {
    font-size: calc(var(--margem) + 6px)
}

h2.maior {
    margin-bottom: 16px;
    font-size: calc(var(--tam-titulo)*3)
}

h2:not(:last-child) {
    margin-bottom: var(--margem)
}

h3 {
    font-size: calc(var(--margem)/2 + 12px)
}

h3:not(:last-child) {
    margin-bottom: calc(var(--margem)*.75)
}

.m-0 {
    margin: 0 !important
}

.editable {
    position: relative;
    display: inline-block
}

.editable:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 2px dashed var(--cor-fonte-fraca)
}

.editable:focus {
    outline: none
}

.editable:focus:before {
    border-bottom-style: solid
}

.maior+h3,
h1+h2 {
    font-weight: 400
}

h1+h2 {
    font: calc(var(--margem) / 2 + 8px)/1.625 roboto, sans-serif
}

h4,
summary {
    font-size: 18px;
    line-height: 1.667
}

h5 {
    font-size: 16px
}

summary,
.pointer,
.bloco-link {
    cursor: pointer
}

h4:not(.m-b):not(:last-child) {
    margin-bottom: calc(var(--margem)/4)
}

h5:not(.m-b):not(:last-child) {
    margin-bottom: calc(var(--margem)/2)
}

.cor-destaque,
.link:hover {
    color: var(--cor-primaria)
}

.ne,
summary {
    font-weight: 700
}

[disabled] {
    opacity: .6
}

p+h2,
ul+h2,
ul+h3,
h2+.grid {
    margin-top: calc(var(--margem)*2)
}

fieldset+button {
    margin-top: var(--margem)
}

.fundo-bloq {
    display: none;
    position: fixed;
    left: 0;
    right: 222px;
    bottom: 0;
    top: 0;
    padding: 0
}

.ativo .fundo-bloq {
    display: block
}

.bg-primaria {
    background-color: var(--cor-primaria) !important;
    color: var(--cor-bg)
}

.bg-primaria-fraca {
    background-color: var(--cor-primaria-fraca)
}

.quote {
    background: linear-gradient(to left, transparent -25%, var(--cor-primaria-fraca), transparent 125%)
}

.cor-primaria {
    color: var(--cor-primaria)
}

p:not(:last-child),
ul:not(:last-child),
ol:not(:last-child) {
    margin: 0 0 var(--margem)
}

.erro {
    background: var(--cor-erro)
}

.social [class^=icone-]:not(.on) {
    opacity: .8
}

.social [class^=icone-]:not(.on):hover {
    box-shadow: 0 0 0 2px var(--cor-fonte-fraca) inset;
    background: none
}

.social .on {
    box-shadow: 0 0 0 2px var(--cor-fonte) inset;
    background-color: var(--cor-bg) !important
}

.centro {
    text-align: center
}

.alinha-direita {
    text-align: right
}

.alinha-v {
    align-items: center
}

.alinha-centro {
    justify-content: center
}

.grid-reflection {
    gap: var(--margem);
    grid-template-columns: repeat(4, 1fr)
}

.grid-reflection .reflection {
    overflow: hidden;
    white-space: nowrap;
    position: relative
}

.grid-reflection .reflection:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: calc(var(--margem)*1.5);
    background: linear-gradient(to left, var(--cor-bg) calc(var(--margem) / 2), transparent);
    z-index: -1
}

.grid-reflection .fonte-menor {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    position: relative;
    z-index: -2
}

.lista-reflection {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--margem)*.5)
}

.lista-reflection a {
    width: 224px
}

.lista-reflection .fonte-menor {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 174px
}

.graf-canvas {
    display: block;
    width: 100%;
    border-radius: calc(var(--margem)/2);
    margin-top: -53px
}

.nota {
    margin-top: calc(var(--margem)/4)
}

.nota.direita {
    margin-top: 2px
}

.nota [class^=icone-]:before {
    margin: 0
}

.nota .icone-estrela:not(:hover):before,
.nota span.icone-estrela:before {
    opacity: .56
}

.options [class^=icone-]:before {
    margin: 4px
}

.nota-1 .icone-estrela:nth-child(1):before {
    background-position-y: -360px;
    opacity: 1 !important
}

.nota-2 .icone-estrela:nth-child(-n+2):before {
    background-position-y: -360px;
    opacity: 1 !important
}

.nota-3 .icone-estrela:nth-child(-n+3):before {
    background-position-y: -360px;
    opacity: 1 !important
}

.nota-4 .icone-estrela:nth-child(-n+4):before {
    background-position-y: -360px;
    opacity: 1 !important
}

.agrupar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.agrupar.alinha-direita {
    justify-content: right
}

.agrupar.nota,
.agrupar.alinha-esquerda {
    justify-content: left
}

.check {
    padding-left: 50px
}

.check:before {
    content: "";
    border: 2px solid var(--cor-fonte-fraca);
    position: absolute;
    width: 16px;
    height: 16px;
    margin: 3px 0 0 -35px;
    border-radius: 4px
}

.check.ativo:before {
    background: url(../img/icons.svg) -3px -416px var(--cor-primaria)
}

img.tam-100,
.tam-120 {
    display: block;
    width: 100%;
    height: auto
}

.tam-120 {
    width: calc(100% + var(--margem)*4)
}

.fonte-menor {
    font-size: 13px;
    line-height: 16px
}

.fonte-media {
    font-size: 14px;
    line-height: 20px
}

.efeito {
    position: relative
}

.efeito:before {
    content: "";
    border: 2px solid var(--cor-primaria);
    border-radius: 2px;
    display: block;
    margin-bottom: var(--margem)
}

.efeito:after {
    content: "";
    border: 6px solid var(--cor-primaria);
    border-radius: 50%;
    position: absolute;
    top: -4px;
    left: 0
}

.borda {
    border-radius: 12px
}

.borda-clara {
    box-shadow: 1px 1px 32px var(--cor-cinza), 0 0 0 1px var(--cor-separador) inset, 0 0 0 1px var(--cor-separador-claro) inset
}

fieldset {
    border: 0;
    padding: 0
}

fieldset p:not(:last-child) {
    margin: 0 0 calc(var(--margem)*.75)
}

.caixa {
    border-radius: 3px;
    box-shadow: 0 0 0 1px var(--cor-separador) inset;
    background: var(--cor-separador)
}

label {
    font-size: 18px;
    font-weight: 700;
    display: block;
    margin-bottom: calc(var(--margem)/2)
}

.none,
#alert-system {
    display: none
}

.fonte-fraca {
    color: var(--cor-fonte-fraca)
}

.m-l {
    margin-left: var(--margem)
}

.m-r {
    margin-right: var(--margem)
}

.m-l3 {
    margin-left: calc(var(--margem)/4)
}

.m-b:not(:last-child) {
    margin-bottom: var(--margem)
}

.m-b2 {
    margin-bottom: calc(var(--margem)/2) !important
}

.m-b3 {
    margin-bottom: calc(var(--margem)/4) !important
}

.m-bx2 {
    margin-bottom: calc(var(--margem)*2)
}

.m-e2 {
    margin-left: calc(var(--margem)/2)
}

.m-t,
.more {
    margin-top: var(--margem)
}

.pos-video {
    right: -8px;
    top: -8px;
    border-radius: 8px
}

.hist-conversa {
    background-color: var(--cor-bg);
    box-shadow: 1px 0 var(--cor-separador) inset;
    width: 300px;
    position: fixed;
    z-index: 1;
    right: 0
}

.hist-conversa.contrai {
    display: none
}

.hist-conversa input {
    margin: calc(var(--margem)*-0.5) 0;
    flex: 1
}

.mood {
    right: calc(var(--margem) - 2px);
    top: calc(var(--margem)/2 + 2px)
}

.lista .item {
    margin: 0 calc(var(--margem)*-0.5);
    padding: 7px calc(var(--margem)/2);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.detalhe,
details p {
    margin: calc(var(--margem)/4) 0 0 calc(var(--margem)*.25 + 40px)
}

details+details {
    margin-top: calc(var(--margem)/4)
}

details[open]+details {
    margin-top: var(--margem)
}

.link-contrai .detalhe {
    display: none
}

::-webkit-scrollbar {
    width: 16px
}

::-webkit-scrollbar-thumb {
    background-color: rgba(164, 164, 164, .5);
    border-radius: 8px;
    border: 5px solid rgba(0, 0, 0, 0);
    background-clip: content-box
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(164, 164, 164, .75)
}

@media screen and (max-width: 1600px) {
    .grid-reflection {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media screen and (max-width: 1400px) {
    .grid-reflection {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media screen and (min-width: 1000px) {
    .m-foto {
        margin: 0 96px 0 -96px
    }

    .col-2 {
        grid-column: span 2
    }

    .col-3 {
        grid-column: span 3
    }

    .lin-2 {
        grid-row: span 2
    }

    .icone-menu,
    .mobile,
    .icone-contrai {
        display: none
    }

    .limite2 {
        max-width: 620px;
        margin-right: auto;
        margin-left: auto
    }

    .grid-2 {
        grid-template-columns: repeat(2, 1fr)
    }

    .grid-3 {
        grid-template-columns: repeat(3, 1fr)
    }

    .grid-4 {
        grid-template-columns: repeat(4, 1fr)
    }

    .grid-5 {
        grid-template-columns: repeat(5, 1fr)
    }

    .grid-6 {
        grid-template-columns: repeat(6, 1fr)
    }

    .col-2 {
        grid-column: span 2
    }

    .col-3 {
        grid-column: span 3
    }

    .col-4 {
        grid-column: span 4
    }

    .col-5 {
        grid-column: span 5
    }

    .efeito-linha {
        position: relative;
        margin: 0 96px
    }

    .efeito-linha:before {
        content: "";
        position: absolute;
        border: solid var(--cor-separador-claro);
        border-radius: 96px 0;
        border-width: 1px 0 0 1px;
        left: 0;
        right: -144px;
        bottom: -133px;
        height: 100px
    }

    .order-2 {
        order: 2
    }

    .linha {
        display: flex;
        align-items: center
    }

    .bloco.bg-cinza:not(:hover) .exibe-hover {
        opacity: 0
    }
}

.pre-login {
    max-width: 700px;
    margin: auto
}

@media screen and (max-width: 999px) {
    :root {
        --margem: 16px;
        --tam-titulo: 9px
    }

    .grid-reflection {
        grid-template-columns: repeat(1, 1fr)
    }

    .grid-2-mobile {
        grid-template-columns: repeat(2, 1fr)
    }

    .ilust-1 {
        margin: calc(var(--margem)*-5) auto calc(var(--margem)*2)
    }

    .ilust-2,
    .ilust-3 {
        position: absolute;
        top: 0
    }

    .ilust-3 {
        top: 24px
    }

    .efeito {
        margin-left: 112px
    }

    .efeito:before {
        margin: 8px 0 -20px -112px;
        width: 88px
    }

    .efeito:after {
        left: -112px
    }

    .pos-mobile {
        position: absolute;
        top: 14px;
        right: 6px
    }

    .linha-mobile {
        display: flex;
        align-items: center
    }

    aside {
        position: fixed;
        left: 0;
        bottom: 0;
        top: 0;
        z-index: 9;
        margin-left: -220px
    }

    aside.contrai {
        margin-left: 0
    }

    .centro-mobile {
        text-align: center
    }

    .icone-contrai {
        position: absolute;
        right: -48px
    }

    .contrai .icone-contrai:before {
        transform: scaleX(-1)
    }

    .icone-contrai {
        transform: scaleX(-1);
        background-color: var(--cor-bg)
    }

    .grid {
        grid-template-columns: repeat(1, 1fr)
    }

    .no-mobile {
        display: none
    }

    .hist-conversa {
        top: 0;
        bottom: 0;
        z-index: 3;
        box-shadow: 1px 0 var(--cor-separador) inset, 0 0 32px 32px var(--cor-bg)
    }

    .modal {
        z-index: 1;
        right: calc(50% - 68px)
    }

    .mobile-2 {
        grid-template-columns: repeat(2, 1fr)
    }

    .col-2-mobile {
        grid-column: span 2
    }

    .apaga-mobile {
        display: none
    }

    .ico {
        width: 24px
    }

    .lista-reflection a {
        width: 100%
    }

    .lista-reflection .fonte-menor {
        width: 248px
    }

    .avatar-circle.direita {
        margin-top: -61px
    }

    input[type=search],
    input[type=text].prompt-gerar {
        background-position-y: -446px
    }
}

@media print {
    :root {
        --cor-primaria: rgba(0, 0, 0, .06);
        --cor-fonte: #000;
        --cor-fonte-fraca: rgba(0, 0, 0, .5);
        --cor-bg: none
    }

    main {
        background: none
    }

    .col-2 {
        grid-column: span 2
    }

    nav,
    .apaga-print {
        display: none
    }

    .bg-primaria {
        color: #000
    }
}

.markdown-content {
    line-height: 1.6;
    color: var(--cor-fonte);
    background: var(--cor-bg);
    padding: 20px;
    border-radius: 8px
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3 {
    margin: 1.5em 0 .5em;
    color: var(--cor-primaria)
}

.markdown-content code {
    background: var(--cor-cinza);
    padding: .2em .4em;
    border-radius: 3px;
    font-family: monospace
}

.markdown-content pre {
    background: var(--cor-cinza);
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto
}

.markdown-content pre code {
    background: none;
    padding: 0
}

.markdown-content blockquote {
    border-left: 4px solid var(--cor-primaria);
    margin: 1em 0;
    padding-left: 1em;
    color: var(--cor-fonte-fraca);
    font-style: italic
}

.markdown-content ul,
.markdown-content ol {
    padding-left: 2em;
    margin: 1em 0
}

.markdown-content a {
    color: var(--cor-primaria);
    text-decoration: none
}

.markdown-content a:hover {
    text-decoration: underline
}

.markdown-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px
}

.markdown-content p {
    margin: 1em 0
}

.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
    background-color: var(--cor-bg);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px var(--cor-separador)
}

.markdown-content table thead {
    background-color: var(--cor-primaria);
    color: #fff;
    font-weight: bold
}

.markdown-content table th,
.markdown-content table td {
    padding: 12px 15px;
    border: 1px solid var(--cor-separador)
}

.markdown-content table tbody tr:nth-child(even) {
    background-color: var(--cor-cinza)
}

.markdown-content table {
    overflow-x: auto
}

.markdown-content table td:first-child {
    font-weight: bold;
    text-align: center
}

.loading-indicator {
    color: var(--cor-fonte-fraca);
    font-style: italic
}

.card {
    padding: 20px;
    min-height: 80px;
    background-color: #fff;
    color: #000;
    border-radius: 10px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, .1);
    border: 1px solid rgba(0, 0, 0, .1);
    transition: transform .1s ease-in-out, box-shadow .1s ease-in-out, background-color .1s ease-in-out
}

@media(prefers-color-scheme: dark) {
    .card {
        background-color: #1e1e1e;
        color: #fff;
        box-shadow: 1px 1px 2px rgba(255, 255, 255, .1);
        border: 1px solid rgba(255, 255, 255, .1)
    }
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 4px 4px 5px rgba(0, 0, 0, .15)
}

@media(prefers-color-scheme: dark) {
    .card:hover {
        box-shadow: 2px 2px 3px rgba(255, 255, 255, .2)
    }
}

.card.margem {
    border-radius: 12px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
    transition: box-shadow .3s ease;
    overflow: hidden
}

.card.margem:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, .15)
}

.card.margem a.reflection {
    padding: 15px 0;
    display: flex;
    align-items: center
}

.card.margem a.reflection figure {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%
}

.card.margem .avatar-circle {
    background: var(--cor-primaria-fraca);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    transition: transform .2s ease
}

.card.margem .reflection:hover .avatar-circle {
    transform: scale(1.05)
}

.card.margem figcaption {
    font-weight: 500;
    line-height: 1.2
}

.card.margem .fonte-fraca.fonte-menor {
    opacity: .7;
    font-size: 14px;
    margin-top: 2px
}

.card.margem hr {
    border-color: rgba(var(--cor-separador-rgb, 0, 0, 0), 0.08);
    margin: 10px 0
}

.card.margem .pergunta {
    font-size: 18px;
    margin-bottom: 12px;
    color: var(--cor-fonte)
}

.card.margem .resposta {
    color: var(--cor-fonte);
    line-height: 1.6;
    font-size: 15px;
    margin-bottom: 16px
}

.card.margem .agrupar.gap-p.options {
    display: flex;
    align-items: center;
    padding: 5px 0;
    justify-content: flex-start;
    gap: 16px !important
}

.card.margem .options a {
    opacity: .7;
    transition: opacity .2s ease, transform .2s ease;
    display: flex;
    align-items: center;
    gap: 5px
}

.card.margem .options a:hover {
    opacity: 1;
    transform: scale(1.1)
}

.card.margem .options a.ativo {
    opacity: 1;
    color: var(--cor-primaria)
}

.card.margem .options a span {
    font-size: 13px;
    color: var(--cor-fonte-fraca)
}

.card.margem .options a.ativo span {
    color: var(--cor-primaria)
}

.card.margem .more {
    background-color: var(--cor-bg);
    border-radius: 12px;
    margin-top: 15px;
    transition: all .3s ease
}

.card.margem .grid-1.gap-p.m-b {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 5px
}

.card.margem .comentario {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 10px;
    border-radius: 18px;
    margin-bottom: 2px;
    width: 85%
}

.card.margem .comentario.agrupar.alinha-esquerda {
    margin-right: auto;
    border-top-left-radius: 4px
}

.card.margem .comentario.agrupar.alinha-direita {
    margin-left: auto;
    border-top-right-radius: 4px;
    text-align: right
}

.card.margem .comentario .avatar-mini {
    margin-right: 10px;
    background-color: var(--cor-primaria-fraca)
}

.card.margem .comentario.alinha-direita .avatar-mini {
    margin-left: 10px;
    margin-right: 0;
    order: 2
}

.card.margem .comentario .flex-1 {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    word-break: break-word
}

.card.margem .agrupar.alinha-v.prompt.prompt-mini.rel {
    margin-top: 10px;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--cor-bg);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
    display: flex;
    align-items: center
}

.card.margem input.prompt-chat {
    border: none;
    padding: 12px 15px;
    font-size: 14px;
    flex: 1;
    background-color: rgba(0, 0, 0, 0)
}

.card.margem a.icone-seta.bg-invert {
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 5px;
    transition: background-color .2s ease
}

.card.margem a.icone-seta.bg-invert:hover {
    background-color: var(--cor-primaria)
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.card.margem .comentario {
    animation: fadeIn .3s ease forwards
}

.card.margem .comentario:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1)
}

@media screen and (max-width: 768px) {
    .card.margem .comentario {
        width: 95%
    }

    .card.margem .comentario .fonte-menor {
        font-size: 14px
    }
}

@media(prefers-color-scheme: dark) {
    .card.margem .agrupar.alinha-v.prompt.prompt-mini.rel {
        box-shadow: 0 1px 5px rgba(0, 0, 0, .3)
    }
}

.botao-login {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #757575;
    border: 1px solid #dadce0;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    width: 220px;
    height: 40px
}

.botao-login:hover {
    background-color: #f8f8f8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2)
}

.botao-login:active {
    background-color: #eee
}

.google-icon {
    margin-right: 12px;
    display: flex;
    align-items: center
}

@media(prefers-color-scheme: dark) {
    :root {
        --l: 66%;
        --cor-cinza: rgba(255, 255, 255, .04);
        --cor-separador: rgba(255, 255, 255, .08);
        --cor-bg: #191919FF !important;
        --cor-fonte: #fff !important;
        --cor-fonte-fraca: rgba(255, 255, 255, .56);
        --cor-erro: #6b1414
    }
}

@media(prefers-color-scheme: dark) {
    [class^=icone-].pb:before {
        filter: grayscale(1) brightness(10) !important
    }

    .avatar.expressao {
        background-image: url(../img/deep-gif-dark.gif)
    }
}

img {
    object-fit: cover !important
}

.acoes-expressao {
    margin-top: 5px;
    text-align: right;
    opacity: .6;
    transition: opacity .3s ease
}

.acoes-expressao:hover {
    opacity: 1
}

.acoes-expressao a {
    margin-left: 8px;
    display: inline-block
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    align-items: center;
    justify-content: center;
    z-index: 1000
}

.modal-overlay:not(.none) {
    display: flex
}

.modal-content {
    background-color: var(--cor-bg);
    padding: var(--margem);
    box-shadow: 0 0 20px rgba(0, 0, 0, .4), 3px 3px 6px rgba(0, 0, 0, .2);
    width: 80%;
    max-width: 696px;
    overflow-x: auto;
    border-radius: 8px;
    position: relative;
    max-height: calc(100vh - var(--margem)*3)
}

.modal-content h4 {
    margin-top: 0;
    margin-bottom: calc(var(--margem)/2)
}

.modal-body {
    margin-bottom: var(--margem)
}

.edit-expression-textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: calc(var(--margem)/2)
}

.btn-cancelar,
.btn-salvar {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    border: none
}

.btn-cancelar {
    background-color: #f2f2f2;
    border-radius: 26px;
    color: #333
}

.btn-salvar {
    background-color: #4285f4;
    color: #fff
}

body.dark-theme .edit-expression-textarea {
    background-color: #3c3c3c;
    color: #e0e0e0;
    border-color: #555
}

body.dark-theme .btn-cancelar {
    background-color: #444;
    color: #e0e0e0
}

@media(prefers-color-scheme: dark) {
    body:not(.light-theme) .edit-expression-textarea {
        background-color: #3c3c3c;
        color: #e0e0e0;
        border-color: #555
    }
}

.diary-header {
    margin-top: 30px;
    padding: calc(var(--margem)*1.5) 0;
    background: linear-gradient(135deg, var(--cor-primaria-fraca), transparent);
    border-radius: 12px;
    margin-bottom: var(--margem)
}

.diary-header h3 {
    font-size: 24px;
    color: var(--cor-fonte)
}

.diary-container {
    max-width: 900px;
    margin: 0 auto
}

.expressions-list .card {
    padding: 15px;
    margin-bottom: var(--margem);
    transition: all .3s ease
}

.expressions-list .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1)
}

.expression-content {
    position: relative
}

.expression-text {
    font-size: 16px;
    line-height: 1.6;
    word-break: break-word
}

.expression-meta {
    margin-top: 8px;
    font-size: 12px;
    opacity: .7
}

.acoes-expressao {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: opacity .2s ease
}

.card:hover .acoes-expressao {
    opacity: 1
}

.acoes-expressao a {
    margin-left: 10px;
    width: 24px;
    height: 24px
}

.diary-footer {
    bottom: 0;
    left: 300px;
    right: 0;
    background: var(--cor-bg);
    padding: var(--margem);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .05)
}

.prompt-container {
    background: var(--cor-cinza);
    border-radius: 12px;
    padding: 10px
}

.diary-input {
    flex: 1;
    min-height: 60px;
    max-height: 120px;
    resize: vertical;
    border: none;
    background: rgba(0, 0, 0, 0);
    padding: 12px;
    font-size: 15px;
    outline: none;
    color: var(--cor-fonte)
}

.diary-send {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 8px
}

.fade-in {
    animation: fadeIn .5s ease-in-out
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media screen and (max-width: 999px) {
    .diary-footer {
        left: 0
    }

    .diary-container {
        padding: 0 calc(var(--margem)/2)
    }
}

.stories-container {
    position: relative;
    padding: 0 30px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden
}

.stories-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    gap: 10px;
    padding: 10px 5px;
    width: 100%;
    box-sizing: border-box;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-left: 6px
}

.stories-wrapper::-webkit-scrollbar {
    display: none
}

.story-item {
    width: 80px;
    text-align: center;
    margin: 0 5px;
    cursor: pointer;
    transition: transform .3s ease;
    scroll-snap-align: start;
    min-width: 70px;
    animation: fadeIn .3s ease forwards;
    animation-delay: calc(var(--item-index)*.05s);
    opacity: 0
}

.story-item:hover {
    transform: scale(1.05)
}

.story-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 8px;
    background-color: var(--cor-primaria-fraca);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #000;
    overflow: hidden;
    position: relative
}

.story-avatar::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--cor-primaria), transparent 85%);
    z-index: -1
}

.story-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.story-name {
    font-size: 12px;
    line-height: 1.2;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--cor-fonte)
}

.story-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--cor-bg);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    border: 1px solid var(--cor-separador);
    cursor: pointer;
    z-index: 5;
    opacity: .9;
    transition: opacity .3s ease, transform .3s ease;
    display: flex;
    align-items: center;
    justify-content: center
}

.story-nav-button:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    background-color: var(--cor-primaria-fraca)
}

.story-nav-button::before {
    content: "";
    width: 10px;
    height: 10px;
    border-style: solid;
    border-width: 2px 2px 0 0;
    display: inline-block
}

.story-nav-button.prev {
    left: 2px
}

.story-nav-button.prev::before {
    transform: rotate(-135deg);
    margin-left: 4px
}

.story-nav-button.next {
    right: 2px
}

.story-nav-button.next::before {
    transform: rotate(45deg);
    margin-right: 4px
}

.touch-scroll {
    cursor: grab
}

.touch-scroll:active {
    cursor: grabbing
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media screen and (max-width: 999px) {
    .stories-container {
        padding: 0 10px
    }

    .story-item {
        width: 70px
    }

    .story-avatar {
        width: 50px;
        height: 50px
    }

    .story-nav-button {
        display: none !important
    }
}

.tag-container {
    display: flex;
    flex-wrap: wrap
}

.remove-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #888;
    cursor: pointer
}

.remove-button:hover {
    color: #333
}

.recomendacoes {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.dropdown {
    position: relative;
    display: inline-block
}

.dropbtn {
    background-color: #3f51b5;
    color: #fff;
    padding: 8px 15px;
    border: none;
    cursor: pointer
}

.dropdown-content,
.language-dropdown {
    position: absolute;
    background: var(--cor-bg);
    box-shadow: 0 0 0 1px var(--cor-separador), 0 0 0 1px var(--cor-separador), 2px 2px 8px rgba(0, 0, 0, .1);
    border-radius: 8px;
    min-width: 160px;
    z-index: 1;
    overflow: hidden;
    white-space: nowrap;
    left: auto;
    right: 0
}

.dropdown-content a,
.language-dropdown a {
    color: var(--cor-fonte);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer
}

.dropdown-content a:hover,
.language-dropdown a:hover {
    background-color: var(--cor-cinza)
}

.dropdown-content:hover .dropdown-content,
.language-dropdown:hover .dropdown-content {
    display: block
}

.dropdown-content:hover .dropbtn,
.language-dropdown:hover .dropbtn {
    background-color: #303f9f
}

.language-dropdown {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 48px
}

.modal-suggest {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, .4);
    display: flex;
    justify-content: center;
    align-items: center
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer
}

.modal-options {
    padding: 10px;
    margin-bottom: 5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch
}

.modal-option:hover {
    border: 2px solid #000;
    color: purple
}

.search-bar {
    display: flex;
    margin-bottom: 20px;
    margin-top: 20px
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    overflow-y: auto;
    flex: 1;
    padding: 10px 0
}

.video-item {
    display: flex;
    flex-direction: column;
    transition: transform .2s;
    cursor: pointer;
    min-height: 400px;
    justify-content: center;
    text-align: center
}

.video-item:hover {
    transform: scale(1.05)
}

.thumbnail-wrapper {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: calc(var(--margem)/2);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center
}

.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.video-info {
    padding: calc(var(--margem)/2)
}

.video-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px
}

.video-meta {
    font-size: 14px;
    color: #666
}

.loading-container {
    position: fixed;
    top: 0;
    background-color: rgba(205, 74, 245, .411);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100vw;
    z-index: 4
}

.loading-container img {
    z-index: 4;
    max-width: 100px;
    max-height: 100px
}

.inline-loader {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.inline-loader img {
    width: 2cm;
    height: 2cm
}

.label-with-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--margem)/2)
}

.label-with-actions label {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.agrupar-table {
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.section {
    background-color: var(--cor-cinza);
    border-radius: 12px;
    margin-bottom: var(--margem);
    padding: var(--margem);
    box-sizing: border-box
}

.view-all {
    color: var(--cor-primaria);
    text-decoration: none;
    font-size: 14px;
    box-sizing: border-box
}

.table-header {
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box
}

.table-header-items {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--margem);
    background-color: var(--cor-cinza);
    border-bottom: 1px solid var(--cor-separador);
    box-sizing: border-box
}

.table-header-items:last-child {
    border-bottom: none;
    box-sizing: border-box
}

.input-section {
    background-color: var(--cor-cinza);
    border-radius: 12px;
    padding: var(--margem);
    width: 100%;
    margin-bottom: var(--margem);
    box-sizing: border-box
}

.input-field {
    width: 100%;
    background-color: rgba(0, 0, 0, .04);
    border: 1px solid var(--cor-separador);
    color: var(--cor-fonte);
    padding: calc(var(--margem)/2) var(--margem);
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box
}

.input-field::placeholder {
    color: var(--cor-fonte-fraca);
    box-sizing: border-box
}

.icon-save::before {
    content: "💾";
    margin-right: 8px;
    font-size: 1.2em
}

.icon-load::before {
    content: "";
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    background-image: url("../img/deep-gif-light.gif");
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 8px;
    background-position: center;
    vertical-align: middle
}

.icon-delete::before {
    content: "🗑";
    margin-right: 8px;
    font-size: 1.2em
}

.icon-copy::before {
    content: "📋";
    margin-right: 8px;
    font-size: 1.2em
}

.icon-dropdown::before {
    content: "▼";
    font-size: 1.2em;
    margin-right: 8px
}

.icon-ai::before {
    content: "";
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    background-image: url("../img/deep.svg");
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 8px;
    background-position: center;
    vertical-align: middle
}

.icon-ai:hover::before {
    background-image: url("../img/icons8-idea.svg")
}

.pagination {
    margin-top: 10px;
    text-align: right;
    vertical-align: middle
}

.pagination button {
    margin: 0 5px;
    padding: 5px 10px
}

.label-select-container {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 0;
    justify-content: flex-start;
    width: auto
}

.slider-container {
    display: flex;
    align-items: center
}

.slider {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    margin: 6px 12px 6px 0
}

.slider input {
    opacity: 0;
    width: 0;
    height: 0
}

.slider-round {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--cor-separador);
    box-shadow: 0 0 0 1em var(--cor-separador) inset;
    transition: .4s;
    border-radius: 20px
}

.slider-round:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: var(--cor-fonte);
    transition: .4s;
    border-radius: 50%
}

input:checked+.slider-round {
    background-color: var(--cor-primaria)
}

input:checked+.slider-round:before {
    background-color: var(--cor-bg)
}

input:checked+.slider-round:before {
    transform: translateX(20px)
}

.slider-label {
    font-size: 1rem;
    cursor: pointer
}

.icone-mic::before {
    content: "🎤";
    margin-right: 8px;
    font-size: 1.2em
}

.icone-stop::before {
    content: "⏹";
    margin-right: 8px;
    font-size: 1.2em
}

.bg-vermelho {
    background-color: #e74c3c;
    color: #fff
}

.no-videos {
    padding: 32px 16px;
    text-align: center;
    color: var(--cor-fonte-fraca, #757575);
    font-style: italic
}

.action-button:hover {
    background-color: var(--cor-primaria-fraca, rgba(100, 0, 100, 0.1))
}

.action-button:hover .icone-excluir {
    opacity: 1
}

.action-button {
    background: rgba(0, 0, 0, 0);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    margin-right: 10px
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0
}

input:checked+.toggle-slider {
    background-color: var(--cor-primaria)
}

input:checked+.toggle-slider:before {
    transform: translateX(20px)
}

.include-channel {
    display: flex;
    align-items: center
}

.search-result-list {
    padding: 8px
}

.search-item {
    padding: 8px;
    border-radius: 4px
}

.search-item:hover {
    background-color: var(--cor-cinza)
}

.no-results {
    padding: 12px 8px;
    text-align: center
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--cor-separador);
    border-radius: 34px;
    transition: .4s
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: var(--cor-bg);
    border-radius: 50%;
    transition: .4s
}

.content-wrapper {
    display: flex;
    gap: var(--margem)
}

.channel-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto
}

.channel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    position: relative;
    padding-right: 40px
}

.channel-actions {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

.channel-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0
}

.channel-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.channel-details {
    flex: 1;
    min-width: 0
}

.channel-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.close-button {
    background: rgba(0, 0, 0, 0);
    border: none;
    color: var(--cor-fonte-fraca);
    font-size: 18px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.close-button:hover {
    background-color: var(--cor-primaria-fraca)
}

.search-container {
    display: flex;
    margin-bottom: var(--margem);
    position: relative
}

.search-button {
    background-color: var(--cor-primaria);
    border: none;
    border-radius: 0 20px 20px 0;
    padding: 0 12px;
    color: var(--cor-bg);
    cursor: pointer
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--cor-bg);
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--cor-separador), 0 0 0 1px var(--cor-separador), 2px 2px 8px rgba(0, 0, 0, .1);
    margin-top: 4px;
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
    padding: 0 5px
}

.text-right {
    text-align: right;
    margin-left: 120px
}

.select-all {
    margin-bottom: var(--margem)
}

.subscriber-count {
    font-size: 12px;
    color: var(--cor-fonte-fraca)
}

.header-title {
    font-weight: 500;
    font-size: 14px;
    margin-left: 5px
}

.channel-info,
.post-time {
    font-size: 14px;
    color: var(--cor-fonte-fraca, #757575)
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--margem)
}

.panel-header h2 {
    font-size: 18px;
    font-family: roboto-slab, sans-serif;
    font-weight: 500;
    margin: 0
}

.checkbox-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding-left: 30px;
    margin: 0
}

.checkbox-container input {
    margin: 0;
    cursor: pointer
}

.checkmark {
    position: absolute;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: var(--cor-bg);
    border-radius: 3px;
    border: 1px solid var(--cor-separador)
}

@media screen and (max-width: 999px) {
    .content-wrapper {
        flex-direction: column
    }

    .competitors-sidebar {
        width: 100%
    }

    .video-similars,
    .video-list-header {
        grid-template-columns: 1fr 80px 80px 40px
    }
}

.panel-filters {
    display: flex;
    gap: 10px;
    margin-bottom: var(--margem)
}

.filter-dropdown {
    position: relative
}

.sidebar-header {
    margin-bottom: var(--margem)
}

.sidebar-header h3 {
    font-size: 18px;
    font-family: roboto-slab, sans-serif;
    font-weight: 500;
    margin: 0
}

.video-list-header {
    display: grid;
    grid-template-columns: 1fr 100px 100px 50px;
    padding: 10px var(--margem);
    border-top: 1px solid var(--cor-separador);
    border-bottom: 1px solid var(--cor-separador)
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.dropdown-toggle {
    background-color: var(--cor-bg);
    color: var(--cor-fonte);
    border: 1px solid var(--cor-separador);
    border-radius: 20px;
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500
}

.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--cor-separador)
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--cor-bg);
    border-radius: 8px;
    box-shadow: 0 0 0 1px var(--cor-separador), 0 0 0 1px var(--cor-separador), 2px 2px 8px rgba(0, 0, 0, .1);
    padding: 8px 0;
    z-index: 10;
    min-width: 160px;
    display: none;
    animation: m .12s linear
}

.filter-dropdown:hover .dropdown-menu {
    display: block
}

.dropdown-menu a {
    display: block;
    padding: 8px 16px;
    color: var(--cor-fonte);
    text-decoration: none
}

.dropdown-menu a:hover {
    background-color: var(--cor-cinza)
}

.similar-panel {
    flex: 1;
    background-color: var(--cor-cinza);
    border-radius: calc(var(--margem)/2);
    padding: var(--margem);
    box-shadow: 0 0 0 1px var(--cor-separador) inset;
    margin-left: 15px;
    margin-top: 15px
}

.similars-sidebar {
    width: 300px;
    background-color: var(--cor-cinza);
    border-radius: calc(var(--margem)/2);
    padding: var(--margem);
    box-shadow: 0 0 0 1px var(--cor-separador) inset;
    margin-top: 15px
}

.video-list {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.video-details {
    flex: 1;
    min-width: 0;
    padding-left: 15px
}

.video-similars {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    position: relative;
    padding: 15px 0;
    border-bottom: 1px solid var(--cor-separador)
}

.video-title-similars {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 4px 0;
    color: var(--cor-fonte, #000000);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4
}

.video-similars:hover {
    background-color: var(--cor-cinza)
}

.channel-info,
.post-time {
    font-size: 13px;
    color: var(--cor-fonte-fraca)
}

.video-stats {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 500;
    text-align: right;
    font-size: 15px;
    color: var(--cor-fonte, #000000);
    width: 70px;
    margin-right: 80px
}

.thumbnail-similars {
    width: 120px;
    height: 68px;
    overflow: hidden;
    border-radius: 6px;
    flex-shrink: 0
}

.thumbnail-similars img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.video-info-similars {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    padding-right: 80px
}

.login-required-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    min-width: 100%;
    max-width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--cor-cinza)
}

.login-prompt {
    text-align: center;
    background-color: #fff;
    padding: calc(var(--margem)*2);
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    max-width: 400px;
    margin: 0 auto
}

.video-thumbnail {
    width: 120px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .1);
    flex-shrink: 0
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.no-keywords {
    text-align: center;
    padding: var(--margem);
    color: var(--cor-fonte-fraca)
}

@media screen and (max-width: 768px) {
    .video-similars {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .video-info {
        flex-direction: column;
        align-items: flex-start
    }

    .thumbnail {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media screen and (max-width: 768px) {
    .video-similars {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px
    }

    .video-info {
        padding-right: 0
    }

    .video-stats {
        position: static;
        margin-top: 5px;
        text-align: left
    }
}

.privacy-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, .6);
    backdrop-filter: blur(4px);
    animation: fadeIn .3s ease
}

.privacy-modal.show {
    display: flex;
    justify-content: center;
    align-items: center
}

.privacy-modal-content {
    background-color: var(--fundo-modal, #fefefe);
    color: var(--cor-texto, #333);
    margin: 15px;
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
    animation: slideUp .4s ease
}

.privacy-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--cor-borda, #eee)
}

.privacy-modal-header h4 {
    margin: 0;
    font-size: 1.2rem
}

.privacy-modal-body {
    padding: 20px
}

.privacy-modal-body p {
    margin-bottom: 1rem;
    line-height: 1.5
}

.privacy-modal-body a {
    color: var(--cor-link, #3c6eff);
    text-decoration: underline
}

.privacy-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--cor-borda, #eee);
    display: flex;
    justify-content: flex-end;
    gap: 12px
}

.notification-table {
    width: 100%;
    background-color: #fff;
    overflow: visible;
    max-height: none;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1)
}

.notification-header {
    display: flex;
    padding: 15px 20px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
    font-weight: 500
}

.notification-row {
    display: flex;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    transition: background-color .2s ease
}

.notification-row:hover {
    background-color: rgba(0, 0, 0, .02)
}

.notification-row:last-child {
    border-bottom: none
}

.notification-col-title {
    flex: 1;
    width: 50px
}

.notification-col-type {
    width: 200px;
    text-align: center
}

.notification-col-status {
    width: 100px;
    text-align: center
}

.notification-title {
    font-weight: 500;
    margin-bottom: 4px;
    color: #333
}

.notification-message {
    font-size: 13px;
    color: #777;
    line-height: 1.4
}

.notification-type-tag {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 15px;
    background-color: #f0f0f0;
    font-size: 13px;
    color: #333
}

.table-acoes {
    width: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.privacy-modal-footer .botao.secondary {
    background-color: rgba(0, 0, 0, 0);
    color: var(--cor-texto, #333);
    border: 1px solid var(--cor-borda, #ccc)
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@media(prefers-color-scheme: dark) {
    .privacy-modal-content {
        --fundo-modal: #222;
        --cor-texto: #eee;
        --cor-borda: #444;
        --cor-link: #6e9fff
    }
}

.alerts-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    width: 300px
}

.alert {
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    animation: slideIn .3s ease-in-out
}

.alert-content {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.close-alert {
    background: rgba(0, 0, 0, 0);
    border: none;
    color: #000;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    opacity: .7
}

.close-alert:hover {
    opacity: 1
}

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d
}

.alert-error {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442
}

.alert-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f
}

.alert-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b
}

.translate-button {
    display: flex;
    align-items: center;
    border: 1px solid;
    border-radius: 4px;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 13px
}

.translate-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px
}

.language-dropdown {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 100px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    z-index: 1000;
    border-radius: 3px
}

.language-dropdown a {
    color: #333;
    padding: 8px 10px;
    text-decoration: none;
    display: block;
    font-size: 13px
}

.language-dropdown a:hover {
    background-color: #f5f5f5
}

.drop-zone {
    border: 2px dashed var(--cor-fonte-fraca);
    border-radius: 8px;
    padding: var(--margem);
    text-align: center;
    cursor: pointer;
    transition: all .3s ease
}

.drop-zone.dragover {
    background-color: var(--cor-primaria-fraca);
    border-color: var(--cor-primaria)
}

.drop-zone img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain
}

.checkbox-container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    background: rgba(255, 255, 255, .7);
    border-radius: 4px;
    padding: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    display: flex;
    align-items: center;
    justify-content: center
}

.checkbox-container:hover {
    background: var(--cor-primaria)
}

.modal-image-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    max-height: 300px;
    overflow: hidden;
    border-radius: 8px
}

.modal-image-preview img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.loader-fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center
}

.loader-content-centered {
    background-color: var(--cor-bg);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    display: flex;
    flex-direction: column;
    align-items: center
}

.preview-container {
    margin: 15px 0;
    padding: 15px;
    border-radius: 6px;
    position: relative;
}

.text-preview {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

.file-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.file-icon {
    display: block;
    margin: 0 auto;
}

.filename {
    font-weight: bold;
    text-align: center;
    margin: 5px 0;
    word-break: break-word;
    max-width: 100%;
}

.image-preview {
    max-width: 100%;
    max-height: 300px;
    display: block;
    margin: 0 auto;
}

.text-sample {
    width: 100%;
    background: #fff;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    font-family: monospace;
    max-height: 120px;
    overflow-y: auto;
}

.docx-info,
.pdf-info {
    padding: 8px 15px;
    border-radius: 4px;
    text-align: center;
}

.docx-info {
    background-color: rgba(47, 85, 151, 0.1);
    color: #2F5597;
}

.pdf-info {
    background-color: rgba(229, 57, 53, 0.1);
    color: #E53935;
}

/* Formulário */
.form-container {
    margin-top: 20px;
}

.form-row {
    margin-bottom: 15px;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.upload-progress {
    font-weight: bold;
}