.viewer{display:flex;flex-direction:column;height:100%;min-height:0}.strip{height:var(--strip-h);border-bottom:.5px solid var(--border-strong);justify-content:space-between;padding:0 20px;flex-shrink:0;background:var(--surface);gap:16px}.strip,.template-tabs{display:flex;align-items:center}.tab,.template-tabs{height:100%}.tab{padding:0 20px;display:flex;flex-direction:column;justify-content:center;gap:3px;background:none;border:none;border-right:.5px solid var(--border-strong);cursor:pointer;transition:opacity .15s ease}.tab:first-child{padding-left:0}.tab:last-child{border-right:none}.tab:hover{opacity:.75}.tab-label{font-size:11px;letter-spacing:.04em;font-weight:500;transition:font-size .15s ease,color .15s ease,font-weight .15s ease}.tab-label,.tab-tagline{color:var(--text-muted);line-height:1;white-space:nowrap}.tab-tagline{font-size:10px;letter-spacing:.01em;opacity:.7;transition:color .15s ease}.tab--active .tab-label{font-size:13px;font-weight:600;color:var(--text)}.tab--active .tab-tagline{color:var(--text-dim);opacity:1}.view-toggle{display:flex;align-items:center;background:rgba(30,45,18,.12);border-radius:20px;padding:3px;gap:0;flex-shrink:0;box-shadow:inset 0 1.5px 4px rgba(0,0,0,.12)}.view-btn{font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:none;border:none;cursor:pointer;color:var(--text-muted);padding:5px 13px;border-radius:16px;font-weight:500;transition:color .15s ease;line-height:1;font-family:inherit}.view-btn--active{background:var(--toggle-pill);color:var(--text);box-shadow:0 1px 4px rgba(30,45,18,.18),0 0 0 .5px rgba(30,45,18,.08)}.frame-wrap{flex:1 1;min-height:0;position:relative;overflow:hidden}.frame-iframe,.frame-wrap{background:var(--surface-2)}.frame-iframe{width:100%;height:100%;border:none;display:block}.frame-iframe--loading{opacity:0}.frame-live{position:absolute;bottom:16px;right:16px;z-index:12;display:inline-flex;align-items:center;font-size:11px;font-weight:500;letter-spacing:.05em;color:rgba(255,255,255,.96);background:rgba(26,36,18,.5);border:.5px solid rgba(255,255,255,.22);border-radius:20px;padding:9px 15px;text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.2);backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);transition:background .15s ease,box-shadow .15s ease,transform .15s ease}.frame-live:hover{background:rgba(26,36,18,.66);box-shadow:0 7px 20px rgba(0,0,0,.26);transform:translateY(-1px)}.frame-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;background:var(--surface-2);pointer-events:none}.frame-loading-dot{width:7px;height:7px;border-radius:50%;animation:dot-pulse 1.1s ease-in-out infinite}@keyframes dot-pulse{0%,to{opacity:.25;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}.admin-note{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-muted);letter-spacing:.04em;background:var(--surface);border:.5px solid var(--border-strong);border-top:none;border-radius:0 0 8px 8px;padding:7px 16px;white-space:nowrap}.admin-note-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;opacity:.8}@media (max-width:640px){.strip{flex-direction:column;align-items:center;padding:8px 12px 10px;gap:8px}.strip,.template-tabs{height:auto;justify-content:center}.template-tabs{width:100%}.tab{padding:6px 10px;height:auto;border-right:.5px solid var(--border-strong);gap:0}.tab:last-child{border-right:none}.tab-tagline{display:none}.tab-label{font-size:10px}.tab--active .tab-label{font-size:11px}.view-toggle{flex-shrink:0}.frame-live{display:none}}