.template-preview-banner{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-bottom:1px solid #bfdbfe;box-shadow:0 1px 3px #0000001a}.template-preview-content{max-width:1400px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px}.template-preview-info{display:flex;align-items:center;gap:12px;flex:1}.template-preview-label{font-size:12px;font-weight:600;color:#1e40af;background:#dbeafe;padding:4px 10px;border-radius:6px;white-space:nowrap}.template-preview-name{font-size:14px;font-weight:600;color:#1e3a8a}.template-preview-desc{font-size:12px;color:#64748b;margin-left:8px}.template-use-button{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;box-shadow:0 2px 8px #3b82f64d}.template-use-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #3b82f666}.template-use-button:active:not(:disabled){transform:translateY(0)}.template-use-button:disabled{opacity:.6;cursor:not-allowed}@keyframes qh-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-3px)}20%,40%,60%,80%{transform:translate(3px)}}.template-use-button.shake{animation:qh-shake .5s ease-in-out;box-shadow:0 0 0 3px #3b82f680,0 2px 8px #3b82f64d}.template-preview-badge{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;white-space:nowrap;margin-left:8px}.template-preview-badge.pro-badge{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 2px 4px #f59e0b4d}