/* ===== Admin · Universo Flash ===== */
body.admin { overflow-x: hidden; min-height: 100vh; }
body.admin [hidden] { display: none !important; }
.admin #estrelas { opacity: .8; }
.admin .topo, .admin .abas, .admin .adm-main, .admin .login { position: relative; z-index: 2; }

.nuvem {
  background: var(--card); color: var(--card-texto);
  border-radius: var(--raio);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 8px 24px rgba(123, 108, 255, .12);
}

/* botões */
.btn-prim, .btn-suave, .btn-perigo, .btn-vidro {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap;
  transition: transform .2s, box-shadow .2s, background .2s, opacity .2s;
}
.btn-prim { color: #fff; background: linear-gradient(135deg, #ff9a2e, #ff6ec7); box-shadow: 0 8px 22px rgba(255, 120, 90, .40); }
.btn-prim:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 120, 90, .5); }
.btn-prim:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-suave { color: var(--card-texto); background: var(--card-suave); }
.btn-suave:hover { background: #e9ecf6; transform: translateY(-2px); }
.btn-perigo { color: #fff; background: linear-gradient(135deg, #fb7185, #e11d48); box-shadow: 0 8px 22px rgba(225, 29, 72, .35); }
.btn-perigo:hover { transform: translateY(-2px); }
.btn-perigo-suave { color: #e11d48; background: #fff1f3; }
.btn-perigo-suave:hover { background: #ffe4e8; }
.btn-vidro { color: var(--texto); background: var(--vidro); border: 1px solid var(--vidro-borda); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn-vidro:hover { transform: translateY(-2px); border-color: rgba(255, 211, 77, .45); }
.icone-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; flex: none;
  display: grid; place-items: center; background: var(--card-suave); color: var(--card-texto-2);
  font-size: 14px; font-weight: 700; transition: background .2s, color .2s, transform .2s;
}
.icone-btn:hover { background: #e9ecf6; color: var(--card-texto); transform: translateY(-1px); }
.icone-btn:disabled { opacity: .35; cursor: default; transform: none; }
.icone-btn.perigo:hover { background: #ffe4e8; color: #e11d48; }

/* campos */
.campo { display: grid; gap: 7px; }
.campo > span { font-size: 12.5px; font-weight: 700; color: var(--card-texto-2); }
.campo > span small { font-weight: 500; opacity: .8; }
.campo input, .campo textarea, .busca-adm input {
  width: 100%; font: inherit; font-size: 14.5px; color: var(--card-texto);
  background: var(--card-suave); border: 2px solid transparent; border-radius: 14px; padding: 11px 14px;
  outline: 0; transition: border-color .2s, box-shadow .2s, background .2s;
}
.campo textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.campo input:focus, .campo textarea:focus, .busca-adm input:focus { background: #fff; border-color: #ffb86b; box-shadow: 0 0 0 4px rgba(255, 184, 107, .18); }
.erro { margin: 0; min-height: 18px; font-size: 13px; font-weight: 600; color: #e11d48; }

/* login */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: min(400px, 100%); padding: 32px 28px; display: grid; gap: 16px; text-align: center; }
.login-card .campo { text-align: left; }
.login-logo { width: 84px; height: 84px; margin: 0 auto 4px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 10px 30px rgba(255, 138, 13, .35), 0 0 0 4px rgba(0, 155, 217, .18); }
.login-logo img { width: 76%; }
.login-card h1 { margin: 0; font-size: 22px; }
.login-card > p { margin: -6px 0 4px; color: var(--card-texto-2); font-size: 14px; line-height: 1.5; }
.login-card .btn-prim { height: 50px; font-size: 15px; }
.voltar { color: var(--card-texto-2); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.voltar:hover { color: var(--card-texto); }

/* topo e abas */
.admin .topo { padding-bottom: 14px; }
.abas {
  display: flex; gap: 6px; width: max-content; max-width: calc(100% - 48px);
  margin: 0 24px 20px; padding: 4px; border-radius: 999px; overflow-x: auto;
  background: var(--vidro); border: 1px solid var(--vidro-borda);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.abas button { border: 0; background: none; cursor: pointer; padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 700; color: var(--texto-2); transition: all .2s; white-space: nowrap; }
.abas button[aria-selected="true"] { color: #1b1030; background: linear-gradient(135deg, #ffe07a, #ffb86b); box-shadow: 0 6px 18px rgba(255, 196, 90, .40); }
.adm-main { padding: 0 24px 130px; max-width: 1320px; }

/* sistemas: lista + editor */
.adm-grade { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; }
.lista-sis { padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.lista-sis .btn-prim { width: 100%; }
.busca-adm input { background: var(--card-suave); }
.grupo-adm h4 { display: flex; align-items: center; gap: 8px; margin: 10px 4px 6px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--card-texto-2); }
.grupo-adm h4 i { width: 9px; height: 9px; border-radius: 50%; }
.item-adm {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; border: 0;
  background: none; cursor: pointer; text-align: left; font: inherit; color: var(--card-texto); transition: background .2s;
}
.item-adm:hover { background: var(--card-suave); }
.item-adm.sel { background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 16%, #fff), color-mix(in srgb, var(--c2) 10%, #fff)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c1) 45%, transparent); }
.item-adm .bola { width: 34px; height: 34px; font-size: 11px; box-shadow: none; }
.item-adm b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-adm .pingo { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tag-novo { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #ff9a2e, #ff6ec7); }
.vazio-adm { padding: 20px 6px; text-align: center; color: var(--card-texto-2); font-size: 14px; }

.editor { padding: 26px; min-height: 420px; }
.editor-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.editor-topo .bola { width: 64px; height: 64px; font-size: 19px; }
.editor-topo h2 { margin: 0; font-size: 21px; line-height: 1.25; }
.editor-topo p { margin: 3px 0 0; font-size: 13px; color: var(--card-texto-2); }
.editor-topo .acoes { margin-left: auto; display: flex; gap: 8px; }
.form-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 14px; }
.form-grade .c6 { grid-column: span 6; }
.form-grade .c4 { grid-column: span 4; }
.form-grade .c3 { grid-column: span 3; }
.form-grade .c2 { grid-column: span 2; }
.secao-form { grid-column: span 6; margin: 10px 0 -4px; padding-top: 16px; border-top: 1px solid #eef0f7; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--card-texto-2); }
.link-direto { font-size: 12.5px; color: var(--card-texto-2); }
.link-direto code { font-family: ui-monospace, Consolas, monospace; color: var(--card-texto); background: var(--card-suave); padding: 2px 7px; border-radius: 8px; }

/* chips de escolha */
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opc {
  --c1: #9aa0c3; --c2: #9aa0c3;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--card-texto); background: var(--card-suave);
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
}
.opc:hover { transform: translateY(-2px); }
.opc i { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.opc.ativo { color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 6px 18px color-mix(in srgb, var(--c1) 40%, transparent); }
.opc.ativo i { background: #fff; }

/* lista de funções */
.funcoes-ed { display: grid; gap: 8px; }
.funcao-ed { display: flex; align-items: center; gap: 6px; }
.funcao-ed input { flex: 1; min-width: 0; font: inherit; font-size: 14.5px; color: var(--card-texto); background: var(--card-suave); border: 2px solid transparent; border-radius: 14px; padding: 10px 14px; outline: 0; }
.funcao-ed input:focus { background: #fff; border-color: #ffb86b; box-shadow: 0 0 0 4px rgba(255, 184, 107, .18); }
.add-funcao { justify-self: start; height: 38px; font-size: 13.5px; }

.rodape-editor { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-top: 26px; padding-top: 18px; border-top: 1px solid #eef0f7; }
.rodape-editor .dica-ed { font-size: 13px; color: var(--card-texto-2); }

/* constelações */
.cats-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cats-topo p { margin: 0; color: var(--texto-2); font-size: 14px; }
.cats-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.cat-card { padding: 20px; display: grid; gap: 14px; position: relative; overflow: hidden; }
.cat-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 90px; background: radial-gradient(90% 100% at 0% 0%, color-mix(in srgb, var(--c1) 22%, transparent), transparent 70%); pointer-events: none; }
.cat-card > * { position: relative; }
.cat-card-topo { display: flex; align-items: center; gap: 12px; }
.cat-card-topo .bola { width: 46px; height: 46px; font-size: 13px; }
.cat-card-topo h3 { margin: 0; font-size: 16px; flex: 1; min-width: 0; }
.cat-card-topo small { display: block; font-size: 12.5px; font-weight: 600; color: var(--card-texto-2); margin-top: 2px; }
.cat-card-topo .acoes { display: flex; gap: 6px; }
.cores { display: flex; gap: 12px; }
.cor-campo { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--card-suave); font-size: 13px; font-weight: 600; color: var(--card-texto-2); cursor: pointer; }
.cor-campo input { width: 32px; height: 32px; border: 0; padding: 0; border-radius: 50%; overflow: hidden; cursor: pointer; background: none; }
.cor-campo input::-webkit-color-swatch-wrapper { padding: 0; }
.cor-campo input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.cor-campo input::-moz-color-swatch { border: 0; border-radius: 50%; }

/* senha */
.senha-card { width: min(440px, 100%); padding: 28px; display: grid; gap: 16px; }
.senha-card h2 { margin: 0 0 4px; font-size: 20px; }

/* barra de publicar */
.barra-salvar {
  position: fixed; z-index: 30; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgba(20, 22, 44, .82); border: 1px solid var(--vidro-borda);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5); animation: subir .35s cubic-bezier(.2, .9, .25, 1.1);
  max-width: calc(100vw - 24px);
}
@keyframes subir { from { transform: translate(-50%, 30px); opacity: 0; } }
.barra-salvar span { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; margin-right: 6px; white-space: nowrap; }
.barra-salvar span i { width: 9px; height: 9px; border-radius: 50%; background: #ffb86b; box-shadow: 0 0 10px #ffb86b; animation: piscar 1.4s ease-in-out infinite; }
@keyframes piscar { 50% { opacity: .35; } }
.barra-salvar .btn-suave { background: rgba(255, 255, 255, .1); color: var(--texto); }
.barra-salvar .btn-suave:hover { background: rgba(255, 255, 255, .18); }

/* modal */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(3, 4, 12, .6); backdrop-filter: blur(4px); animation: aparecer .2s; }
@keyframes aparecer { from { opacity: 0; } }
.modal-card { width: min(420px, 100%); padding: 26px; }
.modal-card h2 { margin: 0 0 8px; font-size: 19px; }
.modal-card p { margin: 0 0 20px; color: var(--card-texto-2); font-size: 14.5px; line-height: 1.55; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; }

/* carregando */
.carregando { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(3, 4, 12, .55); backdrop-filter: blur(3px); }
.carregando-card { display: grid; justify-items: center; gap: 14px; padding: 26px 34px; border-radius: 26px; background: #fff; color: var(--card-texto); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); font-weight: 700; }
.carregando-card p { margin: 0; }
.orbita-load { position: relative; width: 54px; height: 54px; border-radius: 50%; border: 2px dashed #e3e7f5; animation: girar 1.1s linear infinite; }
.orbita-load::before { content: ''; position: absolute; inset: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffc93c 40%, #ff8a0d); box-shadow: 0 0 14px rgba(255, 170, 60, .7); }
.orbita-load i { position: absolute; top: -6px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: linear-gradient(135deg, #38bdf8, #6366f1); box-shadow: 0 0 10px #38bdf8; }

@media (max-width: 900px) {
  .adm-grade { grid-template-columns: 1fr; }
  .lista-sis { position: static; max-height: none; }
  .form-grade .c4, .form-grade .c3, .form-grade .c2 { grid-column: span 6; }
}
@media (max-width: 760px) {
  .abas { margin: 0 16px 16px; max-width: calc(100% - 32px); }
  .adm-main { padding: 0 16px 140px; }
  .admin .topo .btn-vidro { height: 38px; padding: 0 14px; font-size: 13px; }
  .editor { padding: 20px 16px; }
  .editor-topo { flex-wrap: wrap; }
  .editor-topo .acoes { margin-left: 0; }
  .barra-salvar { left: 12px; right: 12px; transform: none; bottom: 12px; padding-left: 14px; animation: none; }
  .barra-salvar span { display: none; }
  .barra-salvar .btn-prim { flex: 1; }
  .cats-grade { grid-template-columns: 1fr; }
}