/* Certifixe Studio - páginas de entrada (início, os meus designs).
   Usa as variáveis do painel (--cfx-*), por isso segue o tema claro/escuro. */

.std { max-width: 1240px; margin: 0 auto; padding-top: 0.5rem; }

/* --- Topo --- */
.std-topo {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
    padding: 1.75rem 1.75rem 1.5rem; margin: 0.5rem 0 1.5rem; border-radius: 1.25rem;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(var(--cfx-primaria-rgb), 0.16), transparent 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(236, 72, 153, 0.10), transparent 60%),
        var(--cfx-superficie);
    border: 1px solid var(--cfx-borda);
}
.std-topo--simples { background: none; border: 0; padding: 0.75rem 0 0; margin-bottom: 1rem; align-items: center; }
.std-topo-texto { min-width: 0; flex: 1 1 320px; }
.std-marca {
    display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.35rem;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cfx-primaria);
}
.std-titulo { margin: 0; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); font-weight: 750; letter-spacing: -0.02em; text-wrap: balance; color: var(--cfx-texto); }
.std-sub { margin: 0.4rem 0 0; color: var(--cfx-texto-secundario); max-width: 62ch; }

.std-pesquisa {
    position: relative; flex: 1 1 340px; max-width: 460px; display: flex; align-items: center;
}
.std-pesquisa > i { position: absolute; left: 0.95rem; color: var(--cfx-texto-secundario); pointer-events: none; }
.std-pesquisa input {
    width: 100%; height: 3rem; padding: 0 3rem 0 2.6rem; border-radius: 999px; font-size: 0.95rem;
    border: 1px solid var(--cfx-borda-campo); background: var(--cfx-superficie); color: var(--cfx-texto);
    box-shadow: var(--cfx-sombra-cartao); transition: border-color 0.15s, box-shadow 0.15s;
}
.std-pesquisa input:focus { outline: none; border-color: var(--cfx-primaria); box-shadow: var(--cfx-foco); }
.std-pesquisa kbd {
    position: absolute; right: 0.9rem; font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 0.35rem;
    background: var(--cfx-superficie-suave); color: var(--cfx-texto-secundario); border: 1px solid var(--cfx-borda);
}
.std-pesquisa--pequena { flex: 1 1 240px; max-width: 360px; }
.std-pesquisa--pequena input { height: 2.5rem; box-shadow: none; }

/* --- Secções --- */
.std-secao-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 0.85rem; }
.std-h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--cfx-texto); }
.std-link {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0; border: 0; background: none;
    font-size: 0.875rem; font-weight: 600; color: var(--cfx-primaria); text-decoration: none; cursor: pointer;
}
.std-link:hover { text-decoration: underline; }
.std-link:focus-visible { outline: none; box-shadow: var(--cfx-foco); border-radius: 0.35rem; }

/* --- Formatos --- */
.std-destaques { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0.75rem; }
.std-formato {
    --std-cor: var(--cfx-primaria-rgb);
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.9rem 0.6rem 0.8rem;
    border: 1px solid var(--cfx-borda); border-radius: 1rem; background: var(--cfx-superficie); color: var(--cfx-texto);
    text-align: center; cursor: pointer; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.std-formato:hover { transform: translateY(-2px); border-color: rgba(var(--std-cor), 0.55); box-shadow: var(--cfx-sombra-elevada); }
.std-formato:focus-visible { outline: none; border-color: var(--cfx-primaria); box-shadow: var(--cfx-foco); }
.std-formato strong { font-size: 0.85rem; font-weight: 650; line-height: 1.25; }
.std-formato small { font-size: 0.72rem; color: var(--cfx-texto-secundario); font-variant-numeric: tabular-nums; }
.std-moldura { width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 0.45rem; }
.std-moldura > i {
    display: grid; place-items: center; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0.5rem;
    background: linear-gradient(145deg, rgba(var(--std-cor), 0.22), rgba(var(--std-cor), 0.07));
    border: 1px solid rgba(var(--std-cor), 0.35); color: rgb(var(--std-cor)); font-style: normal;
}
.std-moldura--larga > i { height: auto; width: 100%; }
.std-moldura > i > span { font-size: 1.1rem; }
.std-formato[data-plataforma="instagram"] { --std-cor: 225, 48, 108; }
.std-formato[data-plataforma="tiktok"] { --std-cor: 37, 244, 238; }
.std-formato[data-plataforma="whatsapp"] { --std-cor: 37, 211, 102; }
.std-formato[data-plataforma="youtube"] { --std-cor: 255, 48, 64; }
.std-formato[data-plataforma="facebook"] { --std-cor: 24, 119, 242; }
.std-formato[data-plataforma="linkedin"] { --std-cor: 10, 102, 194; }
.std-formato[data-plataforma="x"] { --std-cor: 120, 120, 128; }
.std-formato[data-plataforma="impressao"] { --std-cor: 217, 119, 6; }
[data-bs-theme="dark"] .std-formato[data-plataforma="tiktok"] .std-moldura > i { color: rgb(120, 250, 245); }
[data-bs-theme="light"] .std-formato[data-plataforma="tiktok"] .std-moldura > i { color: rgb(13, 148, 136); }

.std-separadores { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.std-separador {
    display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.9rem; border-radius: 999px;
    border: 1px solid var(--cfx-borda); background: var(--cfx-superficie); color: var(--cfx-texto-secundario);
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.std-separador span { font-size: 0.72rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--cfx-superficie-suave); }
.std-separador.ativo { border-color: var(--cfx-primaria); color: var(--cfx-primaria); background: rgba(var(--cfx-primaria-rgb), 0.08); }
.std-separador:focus-visible { outline: none; box-shadow: var(--cfx-foco); }

.std-grelha-formatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; }
.std-formato--compacto { flex-direction: row; justify-content: flex-start; gap: 0.8rem; padding: 0.6rem 0.75rem; text-align: left; }
.std-formato--compacto .std-moldura { width: 44px; height: 44px; margin: 0; flex-shrink: 0; }
.std-formato--compacto .std-moldura > i > span { font-size: 0.85rem; }
.std-formato--compacto > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.std-sem-resultados { margin: 0.75rem 0 0; color: var(--cfx-texto-secundario); font-size: 0.9rem; }

/* --- Designs --- */
.std-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.std-design {
    position: relative; display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden;
    border: 1px solid var(--cfx-borda); background: var(--cfx-superficie); transition: box-shadow 0.15s, transform 0.15s;
}
.std-design:hover { box-shadow: var(--cfx-sombra-elevada); transform: translateY(-2px); }
.std-design-imagem {
    display: grid; place-items: center; height: 200px; padding: 0.9rem;
    background:
        linear-gradient(45deg, var(--cfx-superficie-suave) 25%, transparent 25%, transparent 75%, var(--cfx-superficie-suave) 75%) 0 0 / 16px 16px,
        linear-gradient(45deg, var(--cfx-superficie-suave) 25%, transparent 25%, transparent 75%, var(--cfx-superficie-suave) 75%) 8px 8px / 16px 16px,
        var(--cfx-superficie);
}
.std-design-imagem > span {
    display: block; max-width: 100%; max-height: 100%; height: 100%; border-radius: 0.35rem; overflow: hidden;
    background: var(--cfx-borda); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35);
}
.std-design-imagem--larga > span { height: auto; width: 100%; }
.std-design-imagem img { display: block; width: 100%; height: 100%; object-fit: cover; }
.std-design-imagem:focus-visible { outline: none; box-shadow: inset var(--cfx-foco); }
.std-design-info { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 2.6rem 0.8rem 0.85rem; border-top: 1px solid var(--cfx-borda); min-width: 0; }
.std-design-nome { font-weight: 650; font-size: 0.9rem; color: var(--cfx-texto); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.std-design-nome:hover { color: var(--cfx-primaria); }
.std-design-info small { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--cfx-texto-secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.std-design-acoes { position: absolute; right: 0.5rem; bottom: 0.65rem; }
.std-icone {
    display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.6rem; border: 1px solid transparent;
    background: none; color: var(--cfx-texto-secundario); cursor: pointer;
}
.std-icone:hover { background: var(--cfx-superficie-suave); color: var(--cfx-texto); border-color: var(--cfx-borda); }
.std-icone:focus-visible { outline: none; box-shadow: var(--cfx-foco); }

.std-vazio {
    display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: 1rem;
    border: 1px dashed var(--cfx-borda-campo); background: var(--cfx-superficie); color: var(--cfx-texto-secundario);
}
.std-vazio p { margin: 0; max-width: 62ch; }
.std-vazio strong { color: var(--cfx-texto); }
.std-vazio-icone {
    display: grid; place-items: center; flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 0.9rem;
    background: rgba(var(--cfx-primaria-rgb), 0.12); color: var(--cfx-primaria); font-size: 1.3rem;
}

.std-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1.1rem; }
.std-filtros .form-select { width: auto; min-width: 190px; height: 2.5rem; }
.std-paginas { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; }

.std-proporcoes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.std-chip {
    padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid var(--cfx-borda); background: var(--cfx-superficie-suave);
    color: var(--cfx-texto); font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.std-chip:hover, .std-chip.ativo { border-color: var(--cfx-primaria); color: var(--cfx-primaria); }

@media (max-width: 575.98px) {
    .std-topo { padding: 1.25rem 1rem; border-radius: 1rem; }
    .std-destaques { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.5rem; }
    .std-moldura { width: 58px; height: 58px; }
    .std-designs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
    .std-design-imagem { height: 150px; padding: 0.6rem; }
    .std-filtros .form-select { flex: 1 1 140px; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .std-formato, .std-design { transition: none; }
    .std-formato:hover, .std-design:hover { transform: none; }
}

/* --- Galeria do Studio --- */
.std-temas { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.15rem 0.1rem 0.6rem; margin-bottom: 0.6rem; scrollbar-width: thin; }
.std-tema {
    display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; padding: 0.5rem 0.95rem; border-radius: 999px;
    border: 1px solid var(--cfx-borda); background: var(--cfx-superficie); color: var(--cfx-texto);
    font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.std-tema:hover { border-color: rgba(var(--cfx-primaria-rgb), 0.5); color: var(--cfx-texto); }
.std-tema.ativo { background: var(--cfx-primaria); border-color: var(--cfx-primaria); color: #fff; }
.std-tema:focus-visible { outline: none; box-shadow: var(--cfx-foco); }
.std-tema-separador { flex-shrink: 0; width: 1px; margin: 0.35rem 0.3rem; background: var(--cfx-borda); }
.std-contagem { margin-left: auto; font-size: 0.85rem; color: var(--cfx-texto-secundario); font-variant-numeric: tabular-nums; }

.std-mosaico { columns: 4 230px; column-gap: 1rem; }
.std-modelo {
    position: relative; break-inside: avoid; margin: 0 0 1rem; border-radius: 1rem; overflow: hidden;
    border: 1px solid var(--cfx-borda); background: var(--cfx-superficie); transition: box-shadow 0.15s, transform 0.15s;
}
.std-modelo:hover { box-shadow: var(--cfx-sombra-elevada); transform: translateY(-2px); }
.std-modelo-imagem { display: block; width: 100%; padding: 0; border: 0; background: var(--cfx-superficie-suave); cursor: zoom-in; }
.std-modelo-imagem > span { display: block; width: 100%; }
.std-modelo-imagem img { display: block; width: 100%; height: 100%; object-fit: cover; }
.std-modelo-imagem:focus-visible { outline: none; box-shadow: inset var(--cfx-foco); }
.std-modelo-usar {
    position: absolute; left: 0.6rem; right: 0.6rem; top: 0.6rem; opacity: 0; transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s;
}
.std-modelo-usar .btn { width: 100%; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45); }
.std-modelo:hover .std-modelo-usar, .std-modelo:focus-within .std-modelo-usar { opacity: 1; transform: none; }
.std-favorito {
    position: absolute; right: 0.6rem; bottom: 4.1rem; display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
    border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.92); color: #6B7280; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); opacity: 0; transition: opacity 0.15s, transform 0.1s;
}
.std-modelo:hover .std-favorito, .std-favorito.ativo, .std-favorito:focus-visible { opacity: 1; }
.std-favorito.ativo { color: #E11D48; }
.std-favorito:active { transform: scale(0.92); }
.std-favorito:focus-visible { outline: none; box-shadow: var(--cfx-foco); }
.std-modelo-info { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.65rem 0.85rem 0.75rem; border-top: 1px solid var(--cfx-borda); min-width: 0; }
.std-modelo-info strong { font-size: 0.88rem; font-weight: 650; color: var(--cfx-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.std-modelo-info small { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--cfx-texto-secundario); white-space: nowrap; overflow: hidden; }
.std-selo { color: var(--cfx-primaria); font-weight: 650; }

.std-previa { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(240px, 1fr); gap: 1.5rem; padding: 1.5rem; position: relative; }
.std-previa-fechar { position: absolute; top: 1rem; right: 1rem; }
.std-previa-imagem {
    display: grid; place-items: center; min-height: 360px; max-height: 70vh; padding: 1rem; border-radius: 0.9rem;
    background: var(--cfx-superficie-suave);
}
.std-previa-imagem > span { display: block; max-width: 100%; max-height: calc(70vh - 2rem); }
.std-previa-imagem img { display: block; max-width: 100%; max-height: calc(70vh - 2rem); border-radius: 0.4rem; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.4); }
.std-previa-info { display: flex; flex-direction: column; justify-content: center; padding-right: 1.5rem; }
.std-previa-dados { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0 0 1.25rem; font-size: 0.9rem; }
.std-previa-dados dt { color: var(--cfx-texto-secundario); font-weight: 500; }
.std-previa-dados dd { margin: 0; color: var(--cfx-texto); font-variant-numeric: tabular-nums; }

/* Início: temas e modelos em destaque */
.std-mosaico--destaque { columns: 4 200px; }
.std-atalhos-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.std-atalho-tema {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.85rem; border-radius: 0.9rem; text-decoration: none;
    border: 1px solid var(--cfx-borda); background: var(--cfx-superficie); color: var(--cfx-texto); font-weight: 600; font-size: 0.88rem;
}
.std-atalho-tema i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.6rem; background: rgba(var(--cfx-primaria-rgb), 0.12); color: var(--cfx-primaria); }
.std-atalho-tema:hover { border-color: rgba(var(--cfx-primaria-rgb), 0.5); color: var(--cfx-texto); box-shadow: var(--cfx-sombra-cartao); }
.std-atalho-tema:focus-visible { outline: none; box-shadow: var(--cfx-foco); }

@media (hover: none) {
    .std-modelo-usar, .std-favorito { opacity: 1; transform: none; }
}
@media (max-width: 767.98px) {
    .std-previa { grid-template-columns: 1fr; padding: 1rem; }
    .std-previa-imagem { min-height: 0; max-height: 50vh; }
    .std-previa-imagem img, .std-previa-imagem > span { max-height: calc(50vh - 2rem); }
    .std-previa-info { padding-right: 0; }
    .std-contagem { margin-left: 0; width: 100%; }
}
@media (max-width: 575.98px) {
    .std-mosaico { columns: 2 150px; column-gap: 0.6rem; }
    .std-modelo { margin-bottom: 0.6rem; }
    .std-modelo-usar .btn { font-size: 0.78rem; padding: 0.3rem 0.4rem; }
    .std-modelo-usar .std-usar-resto { display: none; }
}

/* --- Projetos: coleções --- */
.std-design-acoes { display: flex; gap: 0.15rem; }
.std-design:has([data-editar-colecoes]) .std-design-info { padding-right: 4.9rem; }
.std-design-colecoes { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
.std-design-colecoes:empty { display: none; }
.std-chip {
    display: inline-flex; align-items: center; gap: 0.2rem; max-width: 100%; padding: 0.1rem 0.5rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; line-height: 1.5; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: rgba(var(--cfx-primaria-rgb), 0.1); color: var(--cfx-primaria);
}
a.std-chip:hover { background: rgba(var(--cfx-primaria-rgb), 0.18); }
.std-chip--editavel { font-size: 0.82rem; padding: 0.2rem 0.3rem 0.2rem 0.65rem; }
.std-chip--editavel button { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; }
.std-chip--editavel button:hover { background: rgba(var(--cfx-primaria-rgb), 0.18); }
.std-colecoes-escolhidas { display: flex; flex-wrap: wrap; gap: 0.35rem; min-height: 1.8rem; align-items: center; }