/* ============================================================
   SAGRADA SHOP — admin.css
   ============================================================ */
.admin-body{background:
  radial-gradient(800px 480px at 85% -10%, rgba(230,26,141,.08), transparent 60%),
  var(--bg);min-height:100vh}

/* esconde de verdade quando o atributo hidden está presente
   (display:grid da classe venceria o display:none do UA) */
.admin-login[hidden],.admin-shell[hidden]{display:none !important}

/* ============ LOGIN (split-screen) ============ */
.admin-login{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(700px 420px at 12% 0%, rgba(230,26,141,.16), transparent 62%),
    radial-gradient(700px 460px at 90% 100%, rgba(158,0,255,.2), transparent 62%),
    var(--bg);
}
.login-split{
  width:min(960px,100%);display:grid;grid-template-columns:1.05fr 1fr;
  overflow:hidden;border-radius:26px;
  border:1px solid rgba(158,0,255,.5);
  box-shadow:0 40px 110px rgba(0,0,0,.72),0 0 70px rgba(158,0,255,.3);
  animation:pop .35s cubic-bezier(.16,1,.3,1);
}
/* lado da marca */
.lg-art{
  position:relative;overflow:hidden;padding:46px 42px 58px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:
    radial-gradient(420px 300px at 20% 12%, rgba(230,26,141,.42), transparent 65%),
    radial-gradient(420px 320px at 85% 88%, rgba(158,0,255,.46), transparent 65%),
    linear-gradient(160deg,#170A22,#0A0612 60%,#150A24);
  border-right:1px solid rgba(158,0,255,.35);
  min-height:540px;
}
.lg-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at 50% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 30%,transparent 78%);
}
.lg-logo{
  position:relative;width:150px;height:150px;object-fit:cover;border-radius:28px;
  border:2px solid rgba(255,79,184,.65);
  box-shadow:0 22px 60px rgba(0,0,0,.7),0 0 50px rgba(230,26,141,.5),0 0 100px rgba(158,0,255,.35);
  animation:iconFloat 6s ease-in-out infinite;
}
.lg-name{
  position:relative;display:block;margin-top:20px;
  font-family:'Archivo Black',sans-serif;font-size:1.9rem;text-transform:uppercase;color:#fff;
  text-shadow:0 4px 18px rgba(0,0,0,.6),0 0 34px rgba(158,0,255,.5);
}
.lg-name em{
  font-style:normal;display:block;font-size:2.1rem;
  background:linear-gradient(120deg,#FF4FB8,#C084FC,#9E00FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(230,26,141,.6));
}
.lg-tag{position:relative;margin-top:12px;color:#CFC7DE;font-size:.9rem;max-width:320px;line-height:1.55}
.lg-points{position:relative;display:flex;flex-direction:column;gap:9px;margin-top:24px;text-align:left}
.lg-points span{
  font-size:.8rem;font-weight:700;color:#E9DFFF;
  background:rgba(10,6,18,.6);border:1px solid rgba(255,255,255,.12);
  padding:9px 15px;border-radius:999px;backdrop-filter:blur(4px);
}
.lg-marquee{
  position:absolute;left:0;right:0;bottom:0;overflow:hidden;
  background:rgba(0,0,0,.5);border-top:1px solid rgba(255,79,184,.35);padding:11px 0;
}
.lg-marquee-track{
  display:inline-flex;gap:34px;white-space:nowrap;
  font-size:.68rem;font-weight:900;letter-spacing:.14em;color:#F0D5FF;
  animation:adminSlide 18s linear infinite;padding-right:34px;
}
@keyframes adminSlide{to{transform:translateX(-50%)}}
/* lado do form */
.login-panel{
  width:auto;text-align:center;
  background:linear-gradient(180deg,#0E0E17,#0A0A11);
  border:none;border-radius:0;padding:46px 40px 40px;
  box-shadow:none;
  display:flex;flex-direction:column;
}
.lp-icon{
  width:76px;height:76px;margin:0 auto;border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,79,184,.55);
  box-shadow:0 0 0 4px rgba(255,255,255,.08),0 14px 34px rgba(230,26,141,.5),0 0 44px rgba(158,0,255,.45);
  animation:iconFloat 4s ease-in-out infinite;
}
.lp-icon img{width:100%;height:100%;object-fit:cover;display:block}
.login-panel h1{font-size:1.6rem;font-weight:900;margin-top:18px;letter-spacing:-.02em}
.login-panel .muted{font-size:.88rem;margin-top:6px}
.login-panel form{display:flex;flex-direction:column;gap:13px;margin-top:24px;text-align:left}
.login-panel label{font-size:.76rem;font-weight:800;color:#B9B9C6;text-transform:uppercase;letter-spacing:.07em;display:flex;flex-direction:column;gap:7px}
.login-panel input{
  background:rgba(255,255,255,.045);border:1px solid rgba(158,0,255,.35);border-radius:14px;
  padding:14px 16px;color:var(--text);font-size:.98rem;outline:none;transition:.18s;
}
.login-panel input:focus{border-color:var(--magenta);box-shadow:0 0 0 3px rgba(230,26,141,.18),0 0 22px rgba(230,26,141,.3)}
.hint{font-size:.76rem;color:var(--muted);margin-top:16px}
.hint code{background:var(--bg-2);border:1px solid var(--line);padding:2px 8px;border-radius:7px;color:var(--magenta-2)}
.login-panel .btn-block{margin-top:12px}
@media (max-width:860px){
  .login-split{grid-template-columns:1fr}
  .lg-art{display:none}
  .login-panel{padding:38px 26px 32px}
}
@media (prefers-reduced-motion:reduce){.login-split,.lg-logo,.lp-icon,.lg-marquee-track{animation:none}}

/* ============ SHELL ============ */
.admin-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.admin-side{
  background:var(--bg-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:24px;padding:22px 16px;
  position:sticky;top:0;height:100vh;
}
.admin-nav{display:flex;flex-direction:column;gap:6px;flex:1}
.admin-nav button{
  display:flex;align-items:center;gap:10px;text-align:left;
  padding:12px 14px;border-radius:13px;font-size:.92rem;font-weight:700;
  color:#C9C9D4;transition:.16s;border:1px solid transparent;
}
.admin-nav button:hover{background:var(--card);color:#fff}
.admin-nav button.active{background:rgba(230,26,141,.12);color:var(--magenta-2);border-color:rgba(230,26,141,.45)}
.nav-count{
  margin-left:auto;background:var(--card-2);border:1px solid var(--line);
  font-size:.7rem;padding:1px 8px;border-radius:99px;color:var(--text);
}
.admin-nav button.active .nav-count{background:var(--magenta-2);color:#fff;border-color:transparent}
.side-foot{display:flex;flex-direction:column;gap:9px}
.side-foot .btn{font-size:.85rem;padding:9px 14px}

.admin-main{padding:34px 34px 60px;min-width:0}
.admin-title{font-size:1.5rem;font-weight:900;margin-bottom:22px}
.tab-page{display:none;animation:fadeIn .25s ease}
.tab-page.active{display:block}
.tab-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ============ DASHBOARD ============ */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.stat-card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:22px 20px;display:flex;flex-direction:column;gap:5px;
  transition:.2s;position:relative;overflow:hidden;
}
.stat-card::after{
  content:"";position:absolute;top:-40px;right:-40px;width:110px;height:110px;
  background:radial-gradient(circle,rgba(230,26,141,.16),transparent 70%);
}
.stat-card:hover{border-color:rgba(230,26,141,.5);transform:translateY(-3px)}
.stat-card span{font-size:1.5rem}
.stat-card b{font-size:1.7rem;font-weight:900;color:var(--magenta-2)}
.stat-card small{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}

.panel-box{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:22px;margin-bottom:18px;
}
.panel-box h3{font-size:1rem;font-weight:800;margin-bottom:14px}
.panel-box p{font-size:.88rem;line-height:1.65}
.panel-box.tip{border-color:rgba(230,26,141,.4);background:linear-gradient(160deg,rgba(230,26,141,.07),transparent 60%)}
.panel-box.danger{border-color:rgba(255,45,53,.5)}
.mini-list{display:flex;flex-direction:column;gap:9px}
.mini-item{
  display:flex;align-items:center;gap:12px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:12px;padding:10px 13px;
}
.mini-emoji{
  width:36px;height:36px;border-radius:9px;background:var(--card-2);
  display:grid;place-items:center;font-size:1.1rem;overflow:hidden;flex-shrink:0;
}
.mini-emoji img{width:100%;height:100%;object-fit:cover}
.mini-name{font-size:.85rem;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-price{color:var(--magenta-2);font-weight:800;font-size:.85rem}

/* ============ TABELA ============ */
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:.87rem}
.admin-table th{
  text-align:left;padding:14px 16px;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);border-bottom:1px solid var(--line);
}
.admin-table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:rgba(230,26,141,.03)}
.cell-prod{display:flex;align-items:center;gap:11px;font-weight:700;max-width:340px}
.cell-thumb{
  width:42px;height:42px;border-radius:10px;background:var(--card-2);
  display:grid;place-items:center;font-size:1.2rem;overflow:hidden;flex-shrink:0;
  border:1px solid var(--line);
}
.cell-thumb img{width:100%;height:100%;object-fit:cover}
.plan-chips{display:flex;gap:6px;flex-wrap:wrap;max-width:280px}
.plan-chip{
  font-size:.72rem;background:var(--bg-2);border:1px solid var(--line);
  padding:3px 9px;border-radius:99px;white-space:nowrap;
}
.plan-chip b{color:var(--magenta-2)}
.row-actions{display:flex;gap:7px;white-space:nowrap}
.btn-sm{padding:7px 12px;font-size:.78rem}
.btn-sm.danger:hover{border-color:#E5484D;color:#FF8589;background:rgba(229,72,77,.12)}

/* ============ CATEGORIAS ============ */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.cat-admin-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:14px;display:flex;align-items:center;gap:13px;transition:.2s;
}
.cat-admin-card:hover{border-color:rgba(230,26,141,.5);transform:translateY(-3px)}
.cat-admin-art{
  width:76px;height:56px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,#1A1602,#0E0E14);
  border:1px solid rgba(230,26,141,.3);
  display:grid;place-items:center;font-size:.62rem;text-align:center;
  color:var(--magenta-2);font-weight:900;gap:2px;line-height:1.1;padding:4px;
}
.cat-admin-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cat-admin-info b{font-size:.92rem}
.cat-admin-info span{font-size:.76rem}

/* ============ FORMULÁRIOS ============ */
.admin-modal{max-width:680px}
.admin-modal.narrow{max-width:440px}
.admin-modal h3{font-size:1.15rem;font-weight:900;margin-bottom:18px}
.admin-modal label{
  font-size:.78rem;font-weight:700;color:#B9B9C6;
  display:flex;flex-direction:column;gap:7px;margin-bottom:14px;
}
.admin-modal input,.admin-modal select,.admin-modal textarea{
  background:var(--bg-2);border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;color:var(--text);font-size:.9rem;outline:none;
  transition:.18s;font-family:inherit;width:100%;
}
.admin-modal input:focus,.admin-modal select:focus,.admin-modal textarea:focus{
  border-color:var(--magenta-2);box-shadow:0 0 0 3px rgba(230,26,141,.14);
}
.admin-modal input[type=range]{padding:0;accent-color:var(--magenta-2)}
.admin-modal textarea{resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.form-grid .full{grid-column:1/-1}
.modal-actions{display:flex;justify-content:flex-end;gap:11px;margin-top:8px}
.inline-form{display:flex;gap:11px;flex-wrap:wrap}
.inline-form input{flex:1;min-width:200px;background:var(--bg-2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:var(--text);outline:none}
.inline-form input:focus{border-color:var(--magenta-2)}
.ok-msg{color:#3DF57F;font-size:.85rem;font-weight:700;margin-top:10px}
.btn-row{display:flex;gap:11px;flex-wrap:wrap;margin-top:12px}

/* imagem */
.img-row{display:flex;gap:14px;align-items:center}
.img-preview{
  width:86px;height:86px;border-radius:14px;flex-shrink:0;
  background:var(--bg-2);border:1px dashed rgba(230,26,141,.55);
  display:grid;place-items:center;font-size:2rem;overflow:hidden;
}
.img-preview img{width:100%;height:100%;object-fit:cover}
.img-actions{display:flex;flex-direction:column;gap:7px;align-items:flex-start}

/* planos editor */
.plans-head{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}
.plans-editor{display:flex;flex-direction:column;gap:9px;margin-bottom:11px}
.plan-row-item{display:flex;gap:9px;align-items:center;animation:fadeIn .2s ease}
.plan-row-item .pl-label{flex:1.2}
.plan-row-item .pl-price{flex:1}
.pl-remove{
  width:36px;height:36px;flex-shrink:0;border-radius:10px;
  background:var(--card-2);border:1px solid var(--line);color:#8A8A9A;
  transition:.15s;font-size:.9rem;
}
.pl-remove:hover{border-color:#E5484D;color:#FF8589}

/* ============ RESPONSIVO ============ */
@media (max-width:900px){
  .admin-shell{grid-template-columns:1fr}
  .admin-side{position:static;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:14px}
  .admin-nav{flex-direction:row;flex-wrap:wrap;flex:1}
  .admin-nav button{padding:9px 12px;font-size:.84rem}
  .side-foot{flex-direction:row}
  .admin-main{padding:24px 16px 50px}
  .form-grid{grid-template-columns:1fr}
  .cell-prod{max-width:200px}
}