/* Pnepers UI System · skins base v1
   Camada central para controlar tema, janelas, popovers e futuras skins pelo Admin Padrão. */
:root{
  --pnp-bg:var(--pnepers-theme-bg,#f7f7f5);
  --pnp-surface:var(--pnepers-theme-surface,#ffffff);
  --pnp-surface-soft:var(--pnepers-ui-surface-soft,#f8fafc);
  --pnp-ink:var(--pnepers-theme-ink,#111111);
  --pnp-muted:var(--pnepers-theme-muted,#667085);
  --pnp-line:var(--pnepers-theme-line,#e7e5e4);
  --pnp-primary:var(--pnepers-theme-primary,#111111);
  --pnp-accent:var(--pnepers-theme-accent,#6366f1);
  --pnp-radius:var(--pnepers-theme-radius,24px);
  --pnp-window-radius:var(--pnepers-ui-window-radius,24px);
  --pnp-control-radius:var(--pnepers-ui-control-radius,14px);
  --pnp-window-pad:18px;
  --pnp-control-pad-y:10px;
  --pnp-control-pad-x:14px;
  --pnp-shadow-soft:0 18px 58px color-mix(in srgb,var(--pnp-primary) 10%,transparent);
  --pnp-shadow-medium:0 28px 86px color-mix(in srgb,var(--pnp-primary) 16%,transparent);
  --pnp-shadow-deep:0 42px 130px color-mix(in srgb,var(--pnp-primary) 24%,transparent);
  --pnp-window-shadow:var(--pnp-shadow-soft);
  --pnp-transition:.18s cubic-bezier(.22,.61,.36,1);
}

body[data-pnepers-ui-density="compact"]{
  --pnp-window-pad:13px;
  --pnp-control-pad-y:8px;
  --pnp-control-pad-x:11px;
}
body[data-pnepers-ui-density="comfortable"]{
  --pnp-window-pad:22px;
  --pnp-control-pad-y:12px;
  --pnp-control-pad-x:16px;
}
body[data-pnepers-ui-shadow="none"]{--pnp-window-shadow:none;}
body[data-pnepers-ui-shadow="soft"]{--pnp-window-shadow:var(--pnp-shadow-soft);}
body[data-pnepers-ui-shadow="medium"]{--pnp-window-shadow:var(--pnp-shadow-medium);}
body[data-pnepers-ui-shadow="deep"]{--pnp-window-shadow:var(--pnp-shadow-deep);}
body[data-pnepers-ui-motion="none"]{--pnp-transition:0s linear;}
body[data-pnepers-ui-motion="spring"]{--pnp-transition:.28s cubic-bezier(.2,.9,.2,1.12);}

body[data-pnepers-theme="1"]{
  font-family:var(--pnepers-theme-font,inherit);
}

/* Elementos genéricos que já existem no sistema */
body[data-pnepers-theme="1"] .card,
body[data-pnepers-theme="1"] .hero-card,
body[data-pnepers-theme="1"] .moc-project-card,
body[data-pnepers-theme="1"] .admin-dashboard-pane,
body[data-pnepers-theme="1"] .admin-hero,
body[data-pnepers-theme="1"] .adp-shell,
body[data-pnepers-theme="1"] .adp-panel,
body[data-pnepers-theme="1"] .adp-theme-section-card,
body[data-pnepers-theme="1"] .adp-image-field{
  background:var(--pnp-surface)!important;
  color:var(--pnp-ink)!important;
  border-color:var(--pnp-line)!important;
}

/* Base oficial para novas janelas */
.pnp-window,
.pnp-popover,
.pnp-panel{
  background:var(--pnp-surface);
  color:var(--pnp-ink);
  border:1px solid var(--pnp-line);
  border-radius:var(--pnp-window-radius);
  box-shadow:var(--pnp-window-shadow);
  transition:transform var(--pnp-transition), box-shadow var(--pnp-transition), border-color var(--pnp-transition), background var(--pnp-transition);
}
.pnp-window-head,.pnp-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:var(--pnp-window-pad);
  border-bottom:1px solid color-mix(in srgb,var(--pnp-line) 82%,transparent);
}
.pnp-window-body,.pnp-panel-body{padding:var(--pnp-window-pad);}
.pnp-window-foot,.pnp-panel-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:calc(var(--pnp-window-pad) - 4px) var(--pnp-window-pad) var(--pnp-window-pad);
  border-top:1px solid color-mix(in srgb,var(--pnp-line) 82%,transparent);
}
.pnp-btn,
body[data-pnepers-theme="1"] .btn,
body[data-pnepers-theme="1"] button.btn{
  border-radius:999px;
  border:1px solid var(--pnp-line);
  background:color-mix(in srgb,var(--pnp-surface) 90%,transparent);
  color:var(--pnp-ink);
  box-shadow:none;
  transition:background var(--pnp-transition), border-color var(--pnp-transition), transform var(--pnp-transition), color var(--pnp-transition);
}
.pnp-btn:hover,
body[data-pnepers-theme="1"] .btn:hover,
body[data-pnepers-theme="1"] button.btn:hover{
  background:color-mix(in srgb,var(--pnp-primary) 7%,var(--pnp-surface));
}
.pnp-btn.primary,
body[data-pnepers-theme="1"] .btn.primary,
body[data-pnepers-theme="1"] button.btn.primary{
  background:var(--pnp-primary)!important;
  color:#fff!important;
  border-color:var(--pnp-primary)!important;
}
body[data-pnepers-button-style="rounded"] .pnp-btn,
body[data-pnepers-button-style="rounded"] .btn{border-radius:14px!important;}
body[data-pnepers-button-style="square"] .pnp-btn,
body[data-pnepers-button-style="square"] .btn{border-radius:6px!important;}
body[data-pnepers-button-style="outline"] .pnp-btn.primary,
body[data-pnepers-button-style="outline"] .btn.primary{background:transparent!important;color:var(--pnp-primary)!important;border-width:2px!important;}

body[data-pnepers-theme="1"] .input,
body[data-pnepers-theme="1"] textarea,
body[data-pnepers-theme="1"] select{
  border-color:var(--pnp-line)!important;
  background:var(--pnp-surface)!important;
  color:var(--pnp-ink)!important;
  border-radius:var(--pnp-control-radius)!important;
}

/* Janelas e popovers existentes, sem precisar trocar HTML agora */
body[data-pnepers-theme="1"] .pnepers-settings-window,
body[data-pnepers-theme="1"] .dashboard-hamburger-popover,
body[data-pnepers-theme="1"] .pnepers-language-popover,
body[data-pnepers-theme="1"] .bg-designer-panel,
body[data-pnepers-theme="1"] .settings-panel,
body[data-pnepers-theme="1"] .plugin-panel,
body[data-pnepers-theme="1"] .text-editor-panel,
body[data-pnepers-theme="1"] .embed-editor-panel,
body[data-pnepers-theme="1"] .layout-lab-panel,
body[data-pnepers-theme="1"] .arrow-lab-panel,
body[data-pnepers-theme="1"] .login-plugin-props-panel,
body[data-pnepers-theme="1"] .deck-button-organizer-panel,
body[data-pnepers-theme="1"] .product-card-props-panel,
body[data-pnepers-theme="1"] .image-card-props-panel,
body[data-pnepers-theme="1"] [class*="props-panel"],
body[data-pnepers-theme="1"] [class*="plugin-panel"]{
  border:1px solid var(--pnp-line)!important;
  border-radius:var(--pnp-window-radius)!important;
  background:var(--pnp-surface)!important;
  color:var(--pnp-ink)!important;
  box-shadow:var(--pnp-window-shadow)!important;
  transition:transform var(--pnp-transition), box-shadow var(--pnp-transition), background var(--pnp-transition), border-color var(--pnp-transition)!important;
}

body[data-pnepers-ui-window="glass"] .pnepers-settings-window,
body[data-pnepers-ui-window="glass"] .dashboard-hamburger-popover,
body[data-pnepers-ui-window="glass"] .pnepers-language-popover,
body[data-pnepers-ui-window="glass"] .bg-designer-panel,
body[data-pnepers-ui-window="glass"] .settings-panel,
body[data-pnepers-ui-window="glass"] .plugin-panel,
body[data-pnepers-ui-window="glass"] .text-editor-panel,
body[data-pnepers-ui-window="glass"] .embed-editor-panel,
body[data-pnepers-ui-window="glass"] .layout-lab-panel,
body[data-pnepers-ui-window="glass"] .arrow-lab-panel,
body[data-pnepers-ui-window="glass"] .login-plugin-props-panel,
body[data-pnepers-ui-window="glass"] .deck-button-organizer-panel,
body[data-pnepers-ui-window="glass"] .product-card-props-panel,
body[data-pnepers-ui-window="glass"] .image-card-props-panel,
body[data-pnepers-ui-window="glass"] [class*="props-panel"],
body[data-pnepers-ui-window="glass"] [class*="plugin-panel"]{
  background:color-mix(in srgb,var(--pnp-surface) 76%,transparent)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
}
body[data-pnepers-ui-window="solid"] .pnepers-settings-window,
body[data-pnepers-ui-window="solid"] .dashboard-hamburger-popover,
body[data-pnepers-ui-window="solid"] .pnepers-language-popover,
body[data-pnepers-ui-window="solid"] .bg-designer-panel,
body[data-pnepers-ui-window="solid"] [class*="props-panel"],
body[data-pnepers-ui-window="solid"] [class*="plugin-panel"]{
  background:var(--pnp-surface)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body[data-pnepers-ui-window="minimal"] .pnepers-settings-window,
body[data-pnepers-ui-window="minimal"] .dashboard-hamburger-popover,
body[data-pnepers-ui-window="minimal"] .pnepers-language-popover,
body[data-pnepers-ui-window="minimal"] .bg-designer-panel,
body[data-pnepers-ui-window="minimal"] [class*="props-panel"],
body[data-pnepers-ui-window="minimal"] [class*="plugin-panel"]{
  box-shadow:none!important;
  border-color:color-mix(in srgb,var(--pnp-line) 72%,transparent)!important;
}

body[data-pnepers-theme="1"] .pnepers-settings-window-head,
body[data-pnepers-theme="1"] .bg-designer-header,
body[data-pnepers-theme="1"] .settings-panel-header,
body[data-pnepers-theme="1"] .plugin-panel-header,
body[data-pnepers-theme="1"] [class*="panel-header"]{
  color:var(--pnp-ink)!important;
  border-color:color-mix(in srgb,var(--pnp-line) 82%,transparent)!important;
}
body[data-pnepers-ui-chrome="bar"] .pnepers-settings-window-head,
body[data-pnepers-ui-chrome="bar"] .bg-designer-header,
body[data-pnepers-ui-chrome="bar"] [class*="panel-header"]{
  background:var(--pnp-surface-soft)!important;
}
body[data-pnepers-ui-chrome="none"] .pnepers-settings-window-head,
body[data-pnepers-ui-chrome="none"] .bg-designer-header,
body[data-pnepers-ui-chrome="none"] [class*="panel-header"]{
  background:transparent!important;
  border-bottom-color:transparent!important;
}

/* Máscaras/overlays controláveis */
body[data-pnepers-theme="1"] .pnepers-settings-window-backdrop,
body[data-pnepers-theme="1"] .bg-designer-overlay,
body[data-pnepers-theme="1"] [class*="overlay"]{
  transition:background var(--pnp-transition), backdrop-filter var(--pnp-transition), opacity var(--pnp-transition)!important;
}
body[data-pnepers-ui-backdrop="none"] .pnepers-settings-window-backdrop,
body[data-pnepers-ui-backdrop="none"] .bg-designer-overlay,
body[data-pnepers-ui-backdrop="none"] [class*="overlay"]{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body[data-pnepers-ui-backdrop="soft"] .pnepers-settings-window-backdrop,
body[data-pnepers-ui-backdrop="soft"] .bg-designer-overlay,
body[data-pnepers-ui-backdrop="soft"] [class*="overlay"]{
  background:color-mix(in srgb,var(--pnp-bg) 42%,transparent)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body[data-pnepers-ui-backdrop="blur"] .pnepers-settings-window-backdrop,
body[data-pnepers-ui-backdrop="blur"] .bg-designer-overlay,
body[data-pnepers-ui-backdrop="blur"] [class*="overlay"]{
  background:color-mix(in srgb,var(--pnp-bg) 36%,transparent)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
body[data-pnepers-ui-backdrop="dark"] .pnepers-settings-window-backdrop,
body[data-pnepers-ui-backdrop="dark"] .bg-designer-overlay,
body[data-pnepers-ui-backdrop="dark"] [class*="overlay"]{
  background:rgba(15,23,42,.48)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

/* Preview da skin dentro do Admin Padrão */
.pnp-window-preview{
  --preview-primary:#111111;
  --preview-accent:#6366f1;
  --preview-bg:#f7f7f5;
  --preview-surface:#ffffff;
  --preview-ink:#111111;
  --preview-muted:#667085;
  --preview-line:#e7e5e4;
  --preview-radius:24px;
  margin-top:14px;
  border:1px solid var(--preview-line);
  border-radius:24px;
  padding:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--preview-bg) 86%,#fff),color-mix(in srgb,var(--preview-accent) 12%,var(--preview-surface)));
}
.pnp-window-preview-shell{
  width:min(100%,440px);
  margin:0 auto;
  overflow:hidden;
  border:1px solid var(--preview-line);
  border-radius:var(--preview-radius);
  background:var(--preview-surface);
  color:var(--preview-ink);
  box-shadow:0 22px 70px color-mix(in srgb,var(--preview-primary) 14%,transparent);
}
.pnp-window-preview[data-window-style="glass"] .pnp-window-preview-shell{
  background:color-mix(in srgb,var(--preview-surface) 72%,transparent);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.pnp-window-preview[data-window-style="minimal"] .pnp-window-preview-shell,
.pnp-window-preview[data-shadow="none"] .pnp-window-preview-shell{box-shadow:none;}
.pnp-window-preview[data-shadow="medium"] .pnp-window-preview-shell{box-shadow:0 30px 90px color-mix(in srgb,var(--preview-primary) 18%,transparent);}
.pnp-window-preview[data-shadow="deep"] .pnp-window-preview-shell{box-shadow:0 42px 120px color-mix(in srgb,var(--preview-primary) 26%,transparent);}
.pnp-window-preview-head,.pnp-window-preview-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid color-mix(in srgb,var(--preview-line) 84%,transparent);
}
.pnp-window-preview-foot{border-top:1px solid color-mix(in srgb,var(--preview-line) 84%,transparent);border-bottom:0;justify-content:flex-end;}
.pnp-window-preview-head button,.pnp-window-preview-foot button{
  min-height:34px;
  border-radius:999px;
  border:1px solid var(--preview-line);
  background:transparent;
  color:var(--preview-ink);
  font-weight:900;
  padding:0 12px;
}
.pnp-window-preview-head button{width:34px;padding:0;}
.pnp-window-preview-foot button.primary{background:var(--preview-primary);border-color:var(--preview-primary);color:#fff;}
.pnp-window-preview-body{display:flex;gap:8px;flex-wrap:wrap;padding:16px;}
.pnp-window-preview-body span{border:1px solid var(--preview-line);border-radius:999px;background:color-mix(in srgb,var(--preview-surface) 88%,var(--preview-bg));padding:8px 12px;color:var(--preview-muted);font-weight:900;font-size:12px;}
.pnp-window-preview[data-density="compact"] .pnp-window-preview-head,.pnp-window-preview[data-density="compact"] .pnp-window-preview-body,.pnp-window-preview[data-density="compact"] .pnp-window-preview-foot{padding:10px 12px;}
.pnp-window-preview[data-density="comfortable"] .pnp-window-preview-head,.pnp-window-preview[data-density="comfortable"] .pnp-window-preview-body,.pnp-window-preview[data-density="comfortable"] .pnp-window-preview-foot{padding:18px 20px;}
.pnp-window-preview[data-chrome="bar"] .pnp-window-preview-head{background:color-mix(in srgb,var(--preview-bg) 70%,var(--preview-surface));}
.pnp-window-preview[data-chrome="none"] .pnp-window-preview-head{background:transparent;border-bottom-color:transparent;}

@media (max-width:720px){
  :root{--pnp-window-radius:18px;}
  body[data-pnepers-theme="1"] .pnepers-settings-window{border-radius:0!important;}
}

/* Skin dentro das Configurações do Studio */
.settings-skin-layout{display:grid;gap:14px;}
.settings-skin-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.settings-skin-hero p{margin:6px 0 0;color:var(--pnepers-theme-muted,#667085);font-size:13px;line-height:1.45;max-width:760px;}
.settings-skin-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.settings-skin-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.settings-skin-preset-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.settings-skin-preset{min-height:92px;border:1px solid color-mix(in srgb,var(--skin-ink,#111) 12%,transparent);border-radius:18px;background:linear-gradient(135deg,var(--skin-bg,#f7f7f5),var(--skin-surface,#fff));color:var(--skin-ink,#111);padding:12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.settings-skin-preset:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(15,23,42,.12);}
.settings-skin-preset.active{border-color:var(--skin-primary,#111);box-shadow:0 0 0 3px color-mix(in srgb,var(--skin-accent,#6366f1) 24%,transparent),0 18px 46px rgba(15,23,42,.14);}
.settings-skin-preset strong{font-size:13px;font-weight:950;line-height:1.15;}
.settings-skin-preset small{font-size:11px;color:color-mix(in srgb,var(--skin-ink,#111) 62%,transparent);font-weight:850;text-transform:capitalize;}
.settings-skin-preset-swatch{display:flex;gap:5px;align-items:center;}
.settings-skin-preset-swatch i{width:22px;height:22px;border-radius:999px;border:1px solid color-mix(in srgb,var(--skin-ink,#111) 14%,transparent);display:block;}
.settings-skin-preset-swatch i:nth-child(1){background:var(--skin-primary,#111);}
.settings-skin-preset-swatch i:nth-child(2){background:var(--skin-accent,#6366f1);}
.settings-skin-preset-swatch i:nth-child(3){background:var(--skin-surface,#fff);}
.settings-skin-color-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;}
.settings-skin-color{display:flex;flex-direction:column;gap:8px;border:1px solid var(--pnepers-theme-line,#e7e5e4);border-radius:16px;background:var(--pnepers-theme-surface,#fff);padding:10px;font-size:12px;font-weight:900;color:var(--pnepers-theme-ink,#111);}
.settings-skin-color input[type="color"]{width:100%;height:44px;border:0;background:transparent;padding:0;cursor:pointer;}
.settings-skin-preview{margin-top:0;}
body[data-pnepers-ui-density="compact"] .settings-skin-layout{gap:10px;}
body[data-pnepers-ui-density="compact"] .settings-skin-preset{min-height:78px;padding:10px;border-radius:14px;}
body[data-pnepers-ui-density="comfortable"] .settings-skin-layout{gap:18px;}
body[data-pnepers-ui-density="comfortable"] .settings-skin-preset{min-height:104px;padding:14px;border-radius:22px;}
@media (max-width:1100px){.settings-skin-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.settings-skin-preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.settings-skin-color-grid{grid-template-columns:repeat(4,minmax(0,1fr));}.settings-skin-hero{flex-direction:column;}.settings-skin-actions{justify-content:flex-start;}}
@media (max-width:640px){.settings-skin-grid,.settings-skin-preset-grid,.settings-skin-color-grid{grid-template-columns:1fr;}}