/* Template frames only: presentation adapter for the approved maker surface.
   Keep canvas geometry, model colors, visibility, input values and event wiring intact. */
html[data-editor-layout=frame][data-frame-flow=template] body .zl-editor {
  --frame-ui-tint:#f2dce4;
  --frame-ui-line:#bd8c9f;
  --frame-ui-hover:#ead2dc;
  --frame-ui-copy:#58708b;
  --frame-ui-font:'Yuanti SC',STYuanti,'Avenir Next','PingFang SC',sans-serif;
  --zl-accent:var(--frame-ui-tint);
  --zl-border:#e4d9d5;
}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel {
  font-family:var(--frame-ui-font);
  line-height:1.5;
}
html[data-editor-layout=frame][data-frame-flow=template] body :is(.zl-title,.zl-panel-title,.ze-canvas-title) {
  font-family:ZaobaLayout,'Yuanti SC',sans-serif!important;
  font-weight:400;
}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel-title {font-size:26px!important}
html[lang=en][data-editor-layout=frame][data-frame-flow=template] body .zl-panel-title {font-size:22px!important}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-tool[aria-selected=true] {
  background:var(--frame-ui-tint)!important;
  border-color:var(--frame-ui-line)!important;
}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel :is(button,select,textarea,input,summary) {
  font-family:var(--frame-ui-font);
}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel :is(select,textarea,input[type=text],input[type=number]) {
  border-color:#c8c9bd;
  border-radius:12px;
  background-color:#fffdf6;
  color:#173f73;
}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel :is(button,select,textarea,input,summary):focus-visible {
  outline:2px solid #173f73;
  outline-offset:3px;
}
html[data-editor-layout=frame][data-frame-flow=template] body :is(.frame-layout-templates button,.frame-orientation button,.frame-layout-texts button) {
  color:#173f73;
  background:#fffaf0;
  border:1px solid #d8c9cc;
  border-radius:12px;
  box-shadow:none;
}
html[data-editor-layout=frame][data-frame-flow=template] body :is(.frame-layout-templates button,.frame-orientation button,.frame-layout-texts button)[aria-pressed=true] {
  background:var(--frame-ui-tint);
  border-color:var(--frame-ui-line);
  box-shadow:inset 0 0 0 1px var(--frame-ui-line);
  color:#173f73;
}
html[data-editor-layout=frame][data-frame-flow=template] body .frame-layout-templates {gap:10px}
html[data-editor-layout=frame][data-frame-flow=template] body .frame-layout-templates button {
  min-height:116px;
  padding:12px 8px;
  gap:8px;
  font-size:13px;
  font-weight:500;
  line-height:1.5;
}
html[data-editor-layout=frame][data-frame-flow=template] body .frame-layout-templates img {height:88px;object-fit:contain}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel #templateSeriesLink {
  padding:10px 0 18px!important;
  text-underline-offset:4px;
  line-height:1.5;
}
html[data-editor-layout=frame][data-frame-flow=template] body .ze-view-modes button[aria-pressed=true] {
  background:var(--frame-ui-tint)!important;
  border-color:var(--frame-ui-line);
  color:#173f73!important;
  box-shadow:none;
}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel :is(#frameAddImage,#addTextButton).ze-add-content {
  flex-direction:column;
  width:100%;
  height:auto!important;
  min-height:88px!important;
  margin:0 0 15px!important;
  padding:14px;
  gap:7px;
  border:1px dashed var(--frame-ui-line)!important;
  border-radius:16px!important;
  background:var(--frame-ui-tint)!important;
  color:#173f73;
  box-shadow:none;
  transform:none;
  font-size:15px!important;
  line-height:1.5;
}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel :is(#frameAddImage,#addTextButton).ze-add-content:hover {
  background:var(--frame-ui-hover)!important;
  box-shadow:none;
  transform:none;
}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel .ze-add-content .zb-ui-symbol {
  width:28px!important;height:28px!important;flex-basis:28px!important;
}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel #iconLibrary .ze-motif-search-field {
  height:45px;min-height:45px;padding:11px 12px;border-radius:13px;border-color:#c8c9bd;
}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel #iconLibrary .ze-motif-search-field input {font-size:14px!important}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel #iconCategories button.active {
  color:#173f73;background:var(--frame-ui-tint);border-color:var(--frame-ui-line);
}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel #iconGrid {
  grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:390px;overflow-y:auto;
}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel .icon-tile {
  min-height:116px;padding:10px 4px;border:1px solid #e4d9d5;border-radius:12px;background:#fffaf0;
}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel .icon-tile :is(svg,img) {width:72px;height:72px;max-width:100%}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel .icon-tile span {font-size:13px;line-height:1.5;color:#173f73}
html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel .icon-tile:is(:hover,:focus-visible) {
  border-color:var(--frame-ui-line);background:var(--frame-ui-tint);
}
html[data-editor-layout=frame][data-frame-flow=template] body .frame-layout-texts {gap:8px}
html[data-editor-layout=frame][data-frame-flow=template] body .frame-layout-texts button {
  width:100%;min-height:52px;padding:12px;font-size:14px;line-height:1.5;overflow-wrap:anywhere;
}
html[data-editor-layout=frame][data-frame-flow=template] body .frame-settings-group>summary {
  font-size:15px;font-weight:600;line-height:1.5;color:#173f73;padding:16px 0;
}
html[data-editor-layout=frame][data-frame-flow=template] body .frame-finish-settings .finish-card-body {
  min-height:116px;padding:12px 8px;background:#fffaf0;border-radius:12px;
}
html[data-editor-layout=frame][data-frame-flow=template] body .frame-finish-settings .finish-card input:checked+.finish-card-body {
  background:var(--frame-ui-tint);border-color:var(--frame-ui-line);
}
html[data-editor-layout=frame][data-frame-flow=template] body .frame-finish-settings .finish-card strong {font-size:13px;font-weight:500;line-height:1.5}
html[data-editor-layout=frame][data-frame-flow=template] body .frame-finish-settings .finish-card :is(small,.finish-card-body>span) {font-size:12px;line-height:1.5}
@media(max-width:760px) {
  html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel .icon-tile {min-height:106px}
  html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel .icon-tile :is(svg,img) {width:64px;height:64px}
  html[data-editor-layout=frame][data-frame-flow=template] body .frame-canvas-toolbar {
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,110px);gap:6px;padding:0 10px 6px;
  }
  html[data-editor-layout=frame][data-frame-flow=template] body .frame-canvas-toolbar .ze-view-modes {
    grid-column:1;grid-row:1;margin:0;min-width:0;
  }
  html[data-editor-layout=frame][data-frame-flow=template] body .frame-canvas-toolbar .ze-view-modes button {padding:5px 7px;gap:5px}
  html[data-editor-layout=frame][data-frame-flow=template] body .frame-canvas-toolbar>.manual-layout-actions {grid-column:2;grid-row:1;margin:0}
  html[data-editor-layout=frame][data-frame-flow=template] body .frame-canvas-toolbar .ze-canvas-title-row {grid-column:1/-1;grid-row:2}
  /* Reserve the group-tools row through selection changes, preserving canvas coordinates. */
  html[data-editor-layout=frame][data-frame-flow=template] body .frame-canvas-toolbar #layoutCheckStatus {max-width:110px;overflow-wrap:anywhere}
  html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel-title {font-size:24px!important}
  html[data-editor-layout=frame][data-frame-flow=template] body .frame-layout-templates img {height:72px}
  html[data-editor-layout=frame][data-frame-flow=template] body .frame-layout-templates button {min-height:106px}
  html[data-editor-layout=frame][data-frame-flow=template] body .zl-panel #iconLibrary .ze-motif-search-field input {font-size:16px!important}
}