#siteManagerPanel .sm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
#siteManagerPanel h2{margin:4px 0 8px}
#siteManagerPanel .sm-eyebrow{font-size:11px;font-weight:800;letter-spacing:.1em;color:#667085}
#siteManagerPanel .sm-badge{font-size:12px;font-weight:750;border-radius:999px;padding:6px 10px;background:#e8f5ed;color:#17663b;white-space:nowrap}
#siteManagerPanel .sm-muted{font-size:13px;color:#667085;line-height:1.55}
#siteManagerPanel .sm-toolbar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
#siteManagerPanel .sm-select-label{display:block;flex:1;min-width:220px;font-size:13px;font-weight:700}
#siteManagerPanel input:not([type=checkbox]),#siteManagerPanel select,#siteManagerPanel textarea{display:block;width:100%;min-width:0;margin:6px 0 2px;padding:10px;border:1px solid #cbd5e1;border-radius:7px;background:white;color:#172033;font:inherit}
#siteManagerPanel input[type=color]{height:42px;padding:4px}
#siteManagerPanel label{font-size:13px;font-weight:650;color:#344054;min-width:0}
#siteManagerPanel .sm-create{margin:16px 0;border:1px solid #e1e7f0;border-radius:9px;padding:12px}
#siteManagerPanel .sm-create summary{font-weight:750;cursor:pointer}
#siteManagerPanel .sm-form{margin-top:12px}
#siteManagerPanel .sm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;margin:12px 0}
#siteManagerPanel .sm-colors{grid-template-columns:repeat(4,minmax(0,1fr))}
#siteManagerPanel .sm-wide{grid-column:1/-1}
#siteManagerPanel .sm-section-title{font-size:16px;font-weight:800;margin:23px 0 8px;padding-bottom:8px;border-bottom:1px solid #e8edf4;color:#26364f}
#siteManagerPanel .sm-check{display:flex;align-items:flex-start;gap:10px;margin:10px 0;cursor:pointer}
#siteManagerPanel .sm-check input{width:18px;height:18px;margin-top:2px;flex:0 0 auto}
#siteManagerPanel .sm-check span{display:grid;gap:4px}
#siteManagerPanel .sm-check small{font-weight:400;color:#667085}
#siteManagerPanel .sm-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}
#siteManagerPanel .sm-menus{display:grid;gap:8px}
#siteManagerPanel .sm-menu-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(140px,2fr) auto;gap:8px;align-items:end;padding:10px;background:#f8fafc;border:1px solid #e1e7f0;border-radius:8px}
#siteManagerPanel .sm-menu-actions{display:flex;gap:4px;flex-wrap:wrap}
#siteManagerPanel .sm-menu-actions button{padding:8px 10px}
#siteManagerPanel .sm-preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
#siteManagerPanel .sm-preview-wrap{display:flex;justify-content:center;overflow:auto;padding:10px;background:#eef2f7;border:1px solid #dce3ed;border-radius:9px;margin:10px 0}
#siteManagerPanel #smPreview{width:100%;height:430px;border:0;background:white;border-radius:5px;flex:0 0 auto}
#siteManagerPanel #smPreview.sm-mobile{width:390px;max-width:100%;height:620px}
#siteManagerPanel button[aria-pressed=true]{outline:2px solid #8bb7ff;outline-offset:2px}
#siteManagerPanel .sm-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
#siteManagerPanel button:focus-visible,#siteManagerPanel input:focus-visible,#siteManagerPanel select:focus-visible,#siteManagerPanel textarea:focus-visible{outline:3px solid #8bb7ff;outline-offset:2px}
@media(max-width:850px){#siteManagerPanel .sm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#siteManagerPanel .sm-colors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){#siteManagerPanel .sm-grid,#siteManagerPanel .sm-colors{grid-template-columns:1fr}#siteManagerPanel .sm-wide{grid-column:auto}#siteManagerPanel .sm-menu-row{grid-template-columns:1fr}#siteManagerPanel .sm-toolbar{align-items:stretch}}


/* API579 Hero Banner Editor */
#siteManagerPanel .sm-hero-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}
#siteManagerPanel .sm-hero-slides{display:grid;gap:16px}
#siteManagerPanel .sm-slide-card{border:1px solid #dbe3ee;border-radius:11px;background:#fff;overflow:hidden}
#siteManagerPanel .sm-slide-card>header{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;background:#f6f8fb;border-bottom:1px solid #e1e7f0}
#siteManagerPanel .sm-slide-card .sm-slide-body{padding:14px}
#siteManagerPanel .sm-slide-actions{display:flex;gap:6px;flex-wrap:wrap}
#siteManagerPanel .sm-slide-actions button{padding:7px 10px}
#siteManagerPanel .sm-slide-card fieldset{border:1px solid #e1e7f0;border-radius:8px;padding:12px;margin:14px 0}
#siteManagerPanel .sm-slide-card legend{float:none;width:auto;padding:0 6px;font-size:14px;font-weight:800}
#siteManagerPanel .sm-media-preview{display:flex;align-items:center;gap:12px;margin:10px 0;padding:8px;background:#f8fafc;border-radius:8px;overflow-wrap:anywhere}
#siteManagerPanel .sm-media-preview img,#siteManagerPanel .sm-media-preview video{width:100px;height:62px;object-fit:cover;border-radius:5px;background:#e5e7eb;flex:0 0 auto}
#siteManagerPanel .sm-hero-preview-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;flex-wrap:wrap}
#siteManagerPanel .sm-preview-stage{position:relative;width:100%;height:440px;flex:0 0 auto;overflow:hidden;background:linear-gradient(135deg,#e7edf6,#cbd5e1);border-radius:5px;color:#172033;touch-action:pan-y}
#siteManagerPanel .sm-preview-stage.sm-mobile{width:390px;max-width:100%;height:620px}
#siteManagerPanel .sm-hero-stage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
#siteManagerPanel .sm-hero-stage-overlay{position:absolute;inset:0;pointer-events:none}
#siteManagerPanel .sm-hero-stage-layer{position:absolute;z-index:3;white-space:pre-wrap;overflow-wrap:anywhere;min-height:8px;cursor:move;touch-action:none;user-select:none;border:1px dashed transparent;padding:2px}
#siteManagerPanel .sm-hero-stage-layer:hover{border-color:#2563eb}
#siteManagerPanel .sm-hero-stage-image{position:absolute;z-index:4;object-fit:cover;cursor:move;touch-action:none;user-select:none;border:2px dashed transparent}
#siteManagerPanel .sm-hero-stage-image:hover{border-color:#2563eb}
#siteManagerPanel .sm-hero-text-red-line{border-left:4px solid #d3232a;padding-left:12px}
#siteManagerPanel .sm-hero-text-glass{background:rgba(15,23,42,.35);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);border-radius:9px;padding:8px 12px}
#siteManagerPanel .sm-hero-stage-cta{position:absolute;left:8%;bottom:7%;z-index:5;padding:10px 15px;border-radius:8px;background:var(--primary,#2456A6);color:#fff}
#siteManagerPanel .sm-upload-label{display:block;border:1px dashed #93a4bb;padding:10px;border-radius:8px;margin-top:8px;background:#fafcff}
#siteManagerPanel .sm-range-value{font-size:12px;font-weight:700;color:#475569}
#siteManagerPanel #smSave{position:fixed;right:24px;bottom:24px;z-index:1000;box-shadow:0 8px 24px rgba(15,23,42,.25)}
@keyframes smHeroSpin{to{transform:rotate(360deg)}}
@media(max-width:600px){#siteManagerPanel #smSave{right:12px;bottom:12px}#siteManagerPanel .sm-preview-stage{height:340px}}


/* API579 Hero Editor animation additions */
#siteManagerPanel .sm-hero-stage-bg{transform-origin:center;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
#siteManagerPanel .sm-kb-zoom-in{animation-name:sm-kb-zoom-in}
#siteManagerPanel .sm-kb-zoom-out{animation-name:sm-kb-zoom-out}
#siteManagerPanel .sm-kb-pan-right{animation-name:sm-kb-pan-right}
#siteManagerPanel .sm-kb-pan-left{animation-name:sm-kb-pan-left}
#siteManagerPanel .sm-kb-pan-up{animation-name:sm-kb-pan-up}
#siteManagerPanel .sm-kb-pan-down{animation-name:sm-kb-pan-down}
#siteManagerPanel .sm-hero-stage-layer{animation:smHeroTextIn .8s ease both;animation-delay:var(--sm-delay,0ms)}
#siteManagerPanel .sm-hero-stage-overlay{z-index:2}
#siteManagerPanel .sm-hero-preview-tag{position:absolute;left:10px;top:10px;z-index:8;padding:5px 8px;border-radius:5px;background:rgba(15,23,42,.72);color:#fff;font:700 10px system-ui;letter-spacing:.08em;pointer-events:none}
#siteManagerPanel .sm-range-control{display:flex;align-items:center;gap:8px}
#siteManagerPanel .sm-range-control input{flex:1;min-width:0}
#siteManagerPanel .sm-hero-stage-image{animation-timing-function:ease;animation-fill-mode:both}
@keyframes sm-kb-zoom-in{from{transform:scale(1)}to{transform:scale(1.15)}}
@keyframes sm-kb-zoom-out{from{transform:scale(1.15)}to{transform:scale(1)}}
@keyframes sm-kb-pan-right{from{transform:scale(1.08) translateX(-3%)}to{transform:scale(1.08) translateX(3%)}}
@keyframes sm-kb-pan-left{from{transform:scale(1.08) translateX(3%)}to{transform:scale(1.08) translateX(-3%)}}
@keyframes sm-kb-pan-up{from{transform:scale(1.08) translateY(3%)}to{transform:scale(1.08) translateY(-3%)}}
@keyframes sm-kb-pan-down{from{transform:scale(1.08) translateY(-3%)}to{transform:scale(1.08) translateY(3%)}}
@keyframes smHeroTextIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes smHeroTextFadeIn{from{opacity:0}to{opacity:1}}
@keyframes smHeroTextSlideLeftIn{from{opacity:0;transform:translate3d(-45px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes smHeroTextSlideRightIn{from{opacity:0;transform:translate3d(45px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes smHeroTextSlideUpIn{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes smHeroTextSlideDownIn{from{opacity:0;transform:translate3d(0,-24px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes smHeroTextZoomIn{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:scale(1)}}
@keyframes smHeroTextZoomOut{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:scale(1)}}
@keyframes smHeroTextBounce{0%{opacity:0;transform:translate3d(0,32px,0) scale(.92)}60%{opacity:1;transform:translate3d(0,-6px,0) scale(1.02)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes smHeroTextRotate{from{opacity:0;transform:rotate(-10deg) scale(.86)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes smHeroImageIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
/* Hero preview effects follow the selected per-layer settings. */


/* SITE_CONFIG_COLLAPSIBLE_PANELS_V1 */
#siteManagerPanel .sm-config-panel {
  margin: 16px 0;
  border: 1px solid #dce4ef;
  border-radius: 12px;
  background: #fff;
  overflow: clip;
}

#siteManagerPanel .sm-config-panel > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 800;
  color: #26364f;
  background: #f7f9fc;
}

#siteManagerPanel .sm-config-panel > summary::-webkit-details-marker {
  display: none;
}

#siteManagerPanel .sm-config-panel > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  font-size: 19px;
  line-height: 1;
}

#siteManagerPanel .sm-config-panel[open] > summary::before {
  content: "−";
}

#siteManagerPanel .sm-config-panel > summary:hover {
  background: #eef4fb;
}

#siteManagerPanel .sm-config-panel > summary:focus-visible {
  outline: 2px solid #2456a6;
  outline-offset: -3px;
}

#siteManagerPanel .sm-config-panel > .sm-section-title {
  margin: 0;
  padding: 12px 16px 4px;
  border-bottom: 0;
}

#siteManagerPanel .sm-config-panel > .sm-grid,
#siteManagerPanel .sm-config-panel > .sm-menu-heading,
#siteManagerPanel .sm-config-panel > .sm-menus,
#siteManagerPanel .sm-config-panel > .sm-hero-toolbar,
#siteManagerPanel .sm-config-panel > .sm-hero-slides,
#siteManagerPanel .sm-config-panel > .sm-preview-toolbar,
#siteManagerPanel .sm-config-panel > .sm-hero-preview-nav,
#siteManagerPanel .sm-config-panel > .sm-preview-wrap,
#siteManagerPanel .sm-config-panel > p {
  margin-left: 16px;
  margin-right: 16px;
}

#siteManagerPanel .sm-config-panel > .sm-grid:last-child,
#siteManagerPanel .sm-config-panel > .sm-hero-slides:last-child,
#siteManagerPanel .sm-config-panel > p:last-child {
  margin-bottom: 16px;
}

#siteManagerPanel .sm-config-panel > .sm-hero-slides {
  padding-bottom: 4px;
}

@media (max-width: 520px) {
  #siteManagerPanel .sm-config-panel > summary {
    padding: 13px;
    font-size: 15px;
  }

  #siteManagerPanel .sm-config-panel > .sm-grid,
  #siteManagerPanel .sm-config-panel > .sm-menu-heading,
  #siteManagerPanel .sm-config-panel > .sm-menus,
  #siteManagerPanel .sm-config-panel > .sm-hero-toolbar,
  #siteManagerPanel .sm-config-panel > .sm-hero-slides,
  #siteManagerPanel .sm-config-panel > .sm-preview-toolbar,
  #siteManagerPanel .sm-config-panel > .sm-hero-preview-nav,
  #siteManagerPanel .sm-config-panel > .sm-preview-wrap,
  #siteManagerPanel .sm-config-panel > p {
    margin-left: 10px;
    margin-right: 10px;
  }
}