:root{
  --ink:#281a2b;
  --muted:#6f6573;
  --card:#ffffff;
  --card2:#fff7fb;
  --shadow:0 16px 40px rgba(40,26,43,.10);
  --shadow2:0 8px 20px rgba(40,26,43,.10);
  --ring:rgba(248,102,166,.25);

  --grad1:#f866a6;
  --grad2:#6aa8ff;
  --grad3:#7cf0c5;

  --danger:#ff5a7c;
  --warn:#ffb24a;
  --ok:#27c08a;
  --info:#4b8bff;

  --border:rgba(40,26,43,.12);
  --radius:18px;
  --radius2:14px;

  --font-title:"Baloo 2", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --font-body:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(248,102,166,.22), transparent 60%),
    radial-gradient(1200px 800px at 80% 15%, rgba(106,168,255,.22), transparent 60%),
    radial-gradient(900px 700px at 70% 90%, rgba(124,240,197,.20), transparent 55%),
    linear-gradient(180deg, #fff7fb 0%, #f6fbff 45%, #ffffff 100%);
}

a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit}
small{color:var(--muted)}
.container{max-width:1100px; margin:0 auto; padding:28px 18px 60px}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 16px;
  background:rgba(255,255,255,.75);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  backdrop-filter: blur(10px);
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:46px; height:46px; border-radius:14px;
  background: linear-gradient(135deg, var(--grad1), var(--grad2) 55%, var(--grad3));
  box-shadow:0 10px 24px rgba(248,102,166,.20);
}
.brand h1{
  margin:0;
  font-family:var(--font-title);
  font-size:20px;
  line-height:1.1;
}
.brand p{margin:2px 0 0; color:var(--muted); font-size:12.5px}

.nav-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

.main{margin-top:18px}

.grid{display:grid; grid-template-columns: 1.25fr .75fr; gap:16px}
@media(max-width:900px){ .grid{grid-template-columns:1fr} }

.card{
  background:rgba(255,255,255,.8);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}

/* Loading helpers */
.spinner{
  width:18px; height:18px; border-radius:50%;
  border:3px solid rgba(40,26,43,.12);
  border-top-color: var(--grad1);
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.skeleton{
  height:12px;
  border-radius:999px;
  background: linear-gradient(90deg,
    rgba(40,26,43,.06) 0%,
    rgba(40,26,43,.12) 45%,
    rgba(40,26,43,.06) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.25s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
.card h2{
  margin:0 0 8px;
  font-family:var(--font-title);
  font-size:18px;
}
.card h3{
  margin:0 0 8px;
  font-family:var(--font-title);
  font-size:16px;
}
.card p{margin:0 0 10px; color:var(--muted); line-height:1.5}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row-space{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap}

.kpis{display:grid; grid-template-columns: repeat(4, 1fr); gap:12px}
@media(max-width:900px){ .kpis{grid-template-columns: repeat(2, 1fr);} }
.kpi{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.70));
  border:1px solid var(--border);
  border-radius:var(--radius2);
  padding:12px;
  box-shadow:var(--shadow2);
  min-height:86px;
}
.kpi .label{font-size:12px; color:var(--muted)}
.kpi .value{font-size:20px; font-weight:800; margin-top:4px}
.kpi .hint{font-size:12px; color:var(--muted); margin-top:6px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.9);
  color:var(--ink);
  cursor:pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:var(--shadow2);
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.btn.primary{
  border:none;
  color:#fff;
  background: linear-gradient(135deg, var(--grad1), var(--grad2) 55%, var(--grad3));
}
.btn.danger{border:none; background:linear-gradient(135deg, var(--danger), #ff99b0); color:#fff}
.btn.ghost{background:transparent; box-shadow:none}
.btn.small{padding:8px 10px; border-radius:12px; font-size:13px}
.btn.link{background:transparent; box-shadow:none; border:none; color:var(--info); padding:6px 6px}

.input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.9);
  outline:none;
}
.input:focus{box-shadow:0 0 0 4px var(--ring)}
.field{display:flex; flex-direction:column; gap:6px; margin:10px 0}
.label{font-size:12px; color:var(--muted)}

/* Password reveal */
.pw-wrap{position:relative; width:100%}
.pw-wrap .input{padding-right:46px}
.pw-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.9);
  cursor:pointer;
  box-shadow:var(--shadow1);
}
.pw-toggle:hover{transform:translateY(-50%) scale(1.02)}
.pw-toggle:active{transform:translateY(-50%) scale(.99)}

/* Disabled buttons/links */
.btn[aria-disabled="true"], .btn.disabled{
  opacity:.55;
  pointer-events:none;
}

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.85);
}
.badge.ok{border-color:rgba(39,192,138,.25); background:rgba(39,192,138,.10)}
.badge.warn{border-color:rgba(255,178,74,.28); background:rgba(255,178,74,.14)}
.badge.bad{border-color:rgba(255,90,124,.28); background:rgba(255,90,124,.12)}
.badge.neutral{background:rgba(40,26,43,.06)}

.dot{width:8px;height:8px;border-radius:50%}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn)}
.dot.bad{background:var(--danger)}
.dot.neutral{background:#9b8ea0}

hr.sep{border:none; border-top:1px solid var(--border); margin:14px 0}

.table-wrap{overflow:auto; border-radius:var(--radius2); border:1px solid var(--border); background:rgba(255,255,255,.7)}
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{padding:10px 10px; border-bottom:1px solid rgba(40,26,43,.08); text-align:left; vertical-align:top}
th{font-size:12px; color:var(--muted); font-weight:700; background:rgba(255,255,255,.8); position:sticky; top:0}
tr:hover td{background:rgba(248,102,166,.06)}
td.actions{white-space:nowrap}

.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.tab{
  padding:8px 10px; border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.75);
  cursor:pointer;
  font-size:13px;
}
.tab.active{background:rgba(248,102,166,.14); border-color:rgba(248,102,166,.28)}
.panel{display:none; margin-top:12px}
.panel.active{display:block}

.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(24,16,26,.45);
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:22px 14px;
}
.modal-backdrop.open{display:flex}
.modal{
  width:min(980px, 100%);
  max-height:85vh;
  overflow:auto;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.55);
  border-radius:22px;
  box-shadow:0 24px 70px rgba(0,0,0,.20);
  padding:16px;
}
.modal-head{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.modal-title{margin:0; font-family:var(--font-title); font-size:18px}
.modal-sub{margin:4px 0 0; color:var(--muted); font-size:12.5px}
.toast{
  position:fixed; right:16px; bottom:16px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 12px;
  box-shadow:var(--shadow2);
  display:none;
  max-width:min(420px, calc(100vw - 32px));
}
.toast.show{display:block}

/* --- Admin: charts --- */
.chart-card{ border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:14px; background:rgba(0,0,0,.02); }
body[data-page="admin"] .chart-card{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
.chart-wrap{ position:relative; width:100%; }
.chart-wrap canvas{ width:100%; display:block; border-radius:14px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.08); }
.chart-tooltip{
  position:absolute;
  top:10px; left:10px;
  pointer-events:none;
  background:rgba(0,0,0,.78);
  color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:10px 10px;
  font-size:12.5px;
  line-height:1.35;
  min-width:210px;
  box-shadow:0 14px 40px rgba(0,0,0,.25);
  opacity:0;
  transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}
.chart-tooltip.show{ opacity:1; transform: translateY(0); }
.chart-tooltip .t-title{ font-weight:800; margin-bottom:6px; }
.chart-tooltip .t-row{ display:flex; justify-content:space-between; gap:10px; }
.chart-tooltip .t-row span{ color:rgba(255,255,255,.75); }

/* ---------------- Loja / Inventário (protótipo) ---------------- */
.store-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

/* Admin: normalmente a coluna da direita fica mais estreita; usamos auto-fit
   para evitar cards esmagados/overlapping. */
.store-grid-admin{
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
@media (max-width: 900px){
  .store-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .store-grid-admin{ grid-template-columns: 1fr; }
}

.store-card{
  display:grid;
  /* Permite encolher sem “invadir” o card vizinho */
  grid-template-columns: clamp(96px, 34%, 140px) minmax(0, 1fr);
  gap:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  border-radius:18px;
  overflow:hidden;
}

.store-body{ padding:12px 12px 12px 0; min-width:0; }
.store-title{ font-weight:800; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.store-desc{
  color:var(--muted);
  font-size:13px;
  margin-top:4px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.store-card .price{ font-weight:800; }

.thumb{
  width:100%;
  height:100%;
  min-height:120px;
  object-fit:cover;
  display:block;
  background:rgba(0,0,0,.12);
}

/* Dentro dos cards da loja, quando o espaço é curto, os botões precisam quebrar linha */
.store-card .row{ flex-wrap:wrap; }
.thumb.video{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:26px;
  color:rgba(255,255,255,.9);
  background:rgba(0,0,0,.22);
  border-right:1px solid rgba(255,255,255,.08);
}
.thumb.video .play{
  width:54px;
  height:54px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
}

.empty-state{
  margin-top:12px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:18px;
  padding:14px;
  color:var(--muted);
}

/* Modal / Viewer */
.modal{ position:fixed; inset:0; display:none; z-index:999; }
.modal.open{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.62); }
.modal-card{
  position:absolute;
  inset:16px;
  max-width:1100px;
  margin:auto;
  background:rgba(20,22,30,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Fake fullscreen (modo protegido): não usa Fullscreen API, então overlays continuam */
.modal.fake-fullscreen{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
}
.modal.fake-fullscreen .modal-backdrop{ background:rgba(0,0,0,.92); }
.modal.fake-fullscreen .modal-card{
  /* força viewport inteira, independente do contexto de layout */
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  max-width:none;
  margin:0;
  border-radius:0;
  border-left:none;
  border-right:none;
  /* Variáveis usadas para dimensionar a mídia sem crop (prioriza largura com "freio" pela altura) */
  --topbar: 64px;   /* será atualizado via JS ao entrar em fullscreen */
  --pad: 18px;      /* margem/respiração no fullscreen */
}
/* Em fake fullscreen maximizamos o espaço útil: o "respiro" fica no stage */
.modal.fake-fullscreen .modal-body{
  padding:0;
  flex:1;
  display:flex;
  /* altura útil = viewport - header (topbar) */
  height:calc(100vh - var(--topbar));
}
.modal.fake-fullscreen .media-stage{
  flex:1;
  border-radius:24px;
  margin:var(--pad);
  padding:var(--pad);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.86);
  box-sizing:border-box;
  display:grid;
  place-items:center;
}
.modal-head{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.modal-body{ padding:12px; flex:1; display:flex; }
.media-stage{
  position:relative;
  flex:1;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  overflow:hidden; /* mantém tudo dentro do stage */
}

/* superfície do conteúdo: tamanho = tamanho real exibido da mídia (sem "área possível") */
.media-surface{
  position:relative;
  display:inline-block;
  max-width:100%;
  max-height:100%;
  border-radius:16px;
  overflow:hidden; /* a marca d’água não sai da mídia */
  box-shadow:0 14px 40px rgba(0,0,0,.28);
  background:rgba(0,0,0,.22);
  /*
    Importante no fake fullscreen:
    a "surface" pode ficar maior que a mídia por causa de limites de viewport.
    Mantemos a mídia sempre centralizada dentro dela.
  */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* imagem/vídeo renderizam no próprio tamanho, limitados pelo viewport */
.media-el{
  display:block;
  width:auto;
  height:auto;
  /* Limites garantem que a mídia caiba inteira (sem crop) */
  max-width:min(1100px, 92vw);
  max-height:min(78vh, 900px);
  border-radius:16px;
}

/* Em fake fullscreen, damos mais área útil para a mídia */
.modal.fake-fullscreen .media-el{
  /*
    IMPORTANTE:
    Não force width/height: 100% em <video controls>.
    Em alguns navegadores, a UI de controles altera a caixa renderizada e,
    combinado com o overflow:hidden da surface (por causa do border-radius),
    isso pode aparentar "corte" da parte de baixo.

    Para ocupar o maior espaço possível sem cortar, deixamos o elemento
    dimensionar por proporção e limitamos via max-width/max-height.
  */
  /*
    A mídia ocupa a surface inteira; o tamanho da surface é quem manda.
    Também removemos os limites (max-width/max-height) do modo normal,
    pois eles estavam "capando" o vídeo/imagem e criando espaço vazio.
  */
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  margin:auto;
  object-fit:contain;
  border-radius:20px;
}

/* Quando fake fullscreen está ativo, escondemos o restante da página (header, cards, etc.) */
body.fake-fs-active .container{
  visibility:hidden;
}
body.fake-fs-active .toast{
  display:none;
}

/* Em fake fullscreen, a superfície pode ocupar toda a tela */
.modal.fake-fullscreen .media-surface{
  /*
    PRIORIDADE: largura (enche ao máximo na horizontal).
    FREIO: altura (se estourar, reduz para caber sem crop).

    A largura final é o menor entre:
      - largura disponível no viewport (menos margens)
      - largura máxima permitida pela altura (vh * aspectRatio)

    A proporção vem de --media-ar (JS define via metadata do vídeo/imagem).
  */
  /* fallback 16:9 se JS ainda não definiu a proporção */
  --ar: var(--media-ar, 1.7778);
  --vw: calc(100vw - (4 * var(--pad)));
  --vh: calc(100vh - var(--topbar) - (4 * var(--pad)));

  width: min(var(--vw), calc(var(--vh) * var(--ar)));
  aspect-ratio: var(--ar);
  height:auto;
  border-radius:20px;
}

/* Marca d'água: mosaico (front-end only). A proteção real vem do backend com burn-in */
.wm-layer{
  position:absolute;
  inset:0;
  z-index:50;
  pointer-events:none;
  opacity:.34;
  mix-blend-mode:screen;
  background-repeat:repeat;
  /* precisa estar alinhado ao tile do SVG do watermark (ver ui.js) */
  background-size:640px 360px;
  /* IMPORTANTE: não rotacionar a camada (isso causa recorte no clip da mídia).
     A rotação deve ficar dentro do SVG tile. */
  /*
    Não use transform/scale aqui: em alguns navegadores isso pode fazer o mosaico
    "vazar" visualmente para fora da mídia por causa de rounding/antialiasing.
    O recorte deve ser 100% controlado pelo overflow:hidden da .media-surface.
  */
  transform:none;
  animation: wmShift 16s linear infinite;
}

@keyframes wmShift{
  0%{ background-position: 0px 0px; }
  50%{ background-position: 320px 180px; }
  100%{ background-position: 640px 360px; }
}

/* Heurística de DevTools aberto: obscurece o conteúdo (apenas atrito) */
body.devtools-open .media-el{
  filter:blur(10px) !important;
}

/* Dissuassão: ao perder foco, desfoca a mídia */
.media-stage.obscured .media-el{
  filter:blur(12px);
}

@media print {
  .modal,
  .media-stage,
  .media-surface,
  img.media-el,
  video.media-el {
    display:none !important;
  }
}

/* Admin: staged list */
.mini{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:16px;
  margin-bottom:8px;
}
.mini-thumb{
  width:44px;
  height:44px;
  border-radius:14px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:rgba(255,255,255,.86);
}
.mini-name{ font-weight:800; font-size:13.5px; }
.mini-meta{ color:var(--muted); }

/* Admin: staged upload cards (store) */
.mini-upload{ align-items:stretch; gap:12px; }
.mini-left{ width:120px; flex:0 0 120px; }
.mini-mid{ flex:1; min-width:0; }
.mini-media{
  width:120px;
  height:120px;
  border-radius:18px;
  object-fit:cover;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  display:block;
}

.mini-progress{
  margin-top:10px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.mini-progress-bar{
  height:100%;
  width:0;
  background:rgba(255,255,255,.45);
  transition:width .18s ease;
}
.mini-progress-label{
  margin-top:6px;
  color:var(--muted);
}

.thumb-tools{
  margin-top:12px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}
.thumb-tools.disabled{ opacity:.55; pointer-events:none; }
.thumb-tools-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.thumb-tools-head input[type="file"]{ display:none; }
.thumb-tools-body{
  margin-top:10px;
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:12px;
  align-items:stretch;
}
.thumb-preview{
  width:140px;
  height:140px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.thumb-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb-empty{ color:var(--muted); text-align:center; padding:8px; }

.store-card-mini{
  transform:scale(.95);
  transform-origin:top left;
}

@media (max-width: 820px){
  .mini-upload{ flex-direction:column; }
  .mini-left{ width:100%; flex:unset; }
  .mini-media{ width:100%; height:180px; }
  .thumb-tools-body{ grid-template-columns: 1fr; }
  .thumb-preview{ width:100%; height:180px; }
}