/*! it-studio-chrome-v1.css: the template editor's toolbar chrome (25 Sep 2026).
    Same visual language as the generators' icon rail (it-gen-v3.css .ige-plain / .ige-zoom):
    bordered 34px icon boxes, a bordered zoom group, the green Download pill. Nothing here
    touches the design canvas (.tg-paper and below) or the gallery grid.
    Also repairs two literal "%%" leftovers in the pages' inline tpl-masonry-css block that
    dropped .tg-live-dot's border-radius and the whole tgPulse keyframe. */

/* ---- live editor bar ---------------------------------------------------- */
.tg-livebar{gap:10px;padding:8px 10px 8px 16px}
.tg-live-dot{border-radius:50%}
@keyframes tgPulse{0%,100%{box-shadow:0 0 0 3px rgba(22,163,74,.18)}50%{box-shadow:0 0 0 6px rgba(22,163,74,.06)}}

/* zoom group: white box with a hairline, like .ige-zoom */
.tg-live-zoom{background:#fff;border:1px solid #D8DFE4;border-radius:10px;padding:2px;gap:2px}
.tg-zbtn,.tg-zreset{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border-radius:8px;border:1px solid transparent;
  background:transparent;box-shadow:none;color:#45545F;font-size:19px;font-weight:400;line-height:1;
  transition:background-color .15s,color .15s,border-color .15s}
.tg-zbtn:hover,.tg-zreset:hover{background:#F1F4F6;color:#C04E06}
.tg-zbtn:disabled,.tg-zreset:disabled{opacity:1;color:#AEB7BC;background:transparent;border-color:transparent;cursor:default}
.tg-zval{min-width:48px;font-size:13px;font-weight:600;color:#0B1419}
.tg-zreset{width:auto;padding:0 10px;margin-left:0;font-size:11px;font-weight:600;color:#C04E06}

/* ---- editor head row: Focus, Editing on, Download ---------------------- */
.tg-focusbtn{border:1px solid #B9C5CC}
.tg-shell .tg-focusbtn:hover{border-color:#B9C5CC;color:#C04E06}

/* ---- phones: fixed-size controls, decorative labels off ---------------- */
@media (max-width:640px){
  .tg-livebar{gap:8px;padding:8px 10px}
  .tg-live{font-size:12px}
  .tg-live-zoom{flex:0 0 auto}
  .tg-zval{min-width:40px;font-size:12px}
  .tg-zbtn,.tg-zreset{width:40px;height:40px;min-height:40px;border-radius:8px}
  .tg-zreset{width:auto;padding:0 8px}
}
/* 360px phones: the bar is 328px wide, so the boxes narrow to keep one row
   (the inline page rules keep every control 44px tall on touch screens) */
@media (max-width:400px){
  .tg-livebar{padding:8px}
  .tg-zbtn,.tg-livebar .tg-undo button{width:38px}
  .tg-zval{min-width:36px}
}